155 lines
5.8 KiB
HTML
155 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>图标预览 - 网盘管理系统</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: #f5f7fa;
|
||
padding: 32px;
|
||
color: #374151;
|
||
}
|
||
h1 { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 8px; }
|
||
.subtitle { text-align: center; font-size: 13px; color: #94a3b8; margin-bottom: 32px; }
|
||
.section-title {
|
||
font-size: 15px; font-weight: 600; color: #64748b; margin: 28px 0 12px;
|
||
padding-bottom: 8px; border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
.icon-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||
gap: 14px;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
}
|
||
.icon-card {
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||
padding: 16px 8px 12px; background: #fff; border-radius: 12px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: all 0.2s;
|
||
}
|
||
.icon-card:hover { box-shadow: 0 4px 16px rgba(45,212,191,0.15); transform: translateY(-2px); }
|
||
.icon-card img { width: 40px; height: 40px; object-fit: contain; }
|
||
.icon-card span { font-size: 11px; color: #64748b; text-align: center; white-space: nowrap; }
|
||
.style-info {
|
||
max-width: 960px; margin: 32px auto 0; padding: 20px 24px;
|
||
background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||
font-size: 13px; line-height: 1.8; color: #64748b;
|
||
}
|
||
.style-info strong { color: #374151; }
|
||
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>网盘管理系统 - 统一风格图标集</h1>
|
||
<p class="subtitle">深色描边 + 青绿色点缀 · 简约立体风格 · 根据代码实际使用场景生成</p>
|
||
|
||
<div class="section-title">顶部导航栏</div>
|
||
<div class="icon-grid" id="grid-topbar"></div>
|
||
|
||
<div class="section-title">用户菜单</div>
|
||
<div class="icon-grid" id="grid-user"></div>
|
||
|
||
<div class="section-title">网盘与文件管理</div>
|
||
<div class="icon-grid" id="grid-drive"></div>
|
||
|
||
<div class="section-title">刮削与日志</div>
|
||
<div class="icon-grid" id="grid-scrape"></div>
|
||
|
||
<div class="section-title">海报详情</div>
|
||
<div class="icon-grid" id="grid-poster"></div>
|
||
|
||
<div class="section-title">设置与绑定</div>
|
||
<div class="icon-grid" id="grid-settings"></div>
|
||
|
||
<div class="section-title">状态与提示</div>
|
||
<div class="icon-grid" id="grid-status"></div>
|
||
|
||
<div class="style-info">
|
||
<strong>设计规范：</strong><br/>
|
||
• 主色（描边）：<span class="color-dot" style="background:#374151"></span>#374151 深灰色<br/>
|
||
• 点缀色（高亮）：<span class="color-dot" style="background:#2dd4bf"></span>#2dd4bf 青绿色<br/>
|
||
• 尺寸：viewBox 24×24，显示 48×48px<br/>
|
||
• 风格：线条描边 + 局部色块填充，简约立体感<br/>
|
||
• 格式：SVG 矢量图，可无损缩放<br/>
|
||
• 用途：替换代码中现有的 emoji 图标，实现视觉统一
|
||
</div>
|
||
|
||
<script>
|
||
const iconGroups = {
|
||
'grid-topbar': [
|
||
{ file: 'search.svg', name: '搜索' },
|
||
{ file: 'settings.svg', name: '设置' },
|
||
{ file: 'globe.svg', name: '外网' },
|
||
{ file: 'network.svg', name: '内外网切换' },
|
||
{ file: 'user.svg', name: '用户' },
|
||
{ file: 'switch-view.svg', name: '切换视图' },
|
||
],
|
||
'grid-user': [
|
||
{ file: 'movie.svg', name: '海报展示' },
|
||
{ file: 'log.svg', name: '控制台' },
|
||
{ file: 'settings.svg', name: 'TMDB配置' },
|
||
{ file: 'tools.svg', name: '设置' },
|
||
{ file: 'export.svg', name: '导出数据' },
|
||
{ file: 'refresh.svg', name: '恢复数据' },
|
||
{ file: 'logout.svg', name: '退出登录' },
|
||
],
|
||
'grid-drive': [
|
||
{ file: 'folder.svg', name: '文件夹' },
|
||
{ file: 'folder-open.svg', name: '打开文件夹' },
|
||
{ file: 'file.svg', name: '文件' },
|
||
{ file: 'add-folder.svg', name: '添加文件夹' },
|
||
{ file: 'add-file.svg', name: '添加文件' },
|
||
{ file: 'folder-refresh.svg', name: '刷新文件夹' },
|
||
{ file: 'checkbox.svg', name: '多选' },
|
||
{ file: 'batch-delete.svg', name: '批量删除' },
|
||
{ file: 'delete.svg', name: '删除' },
|
||
{ file: 'edit.svg', name: '编辑' },
|
||
],
|
||
'grid-scrape': [
|
||
{ file: 'scrape.svg', name: '刮削' },
|
||
{ file: 'batch-scrape.svg', name: '批量刮削' },
|
||
{ file: 'sync.svg', name: '同步' },
|
||
{ file: 'log.svg', name: '刮削日志' },
|
||
],
|
||
'grid-poster': [
|
||
{ file: 'movie.svg', name: '电影' },
|
||
{ file: 'cast.svg', name: '主演' },
|
||
{ file: 'tag.svg', name: '标签' },
|
||
{ file: 'detail.svg', name: '查看详情' },
|
||
{ file: 'description.svg', name: '简介' },
|
||
],
|
||
'grid-settings': [
|
||
{ file: 'link.svg', name: '绑定链接' },
|
||
{ file: 'globe.svg', name: 'OpenList地址' },
|
||
{ file: 'user.svg', name: '账号' },
|
||
{ file: 'eye.svg', name: '显示密码' },
|
||
{ file: 'eye-off.svg', name: '隐藏密码' },
|
||
],
|
||
'grid-status': [
|
||
{ file: 'success.svg', name: '成功' },
|
||
{ file: 'fail.svg', name: '失败' },
|
||
{ file: 'warning.svg', name: '警告' },
|
||
{ file: 'info.svg', name: '信息' },
|
||
{ file: 'sparkle.svg', name: '提示' },
|
||
{ file: 'save.svg', name: '保存' },
|
||
{ file: 'close.svg', name: '关闭' },
|
||
],
|
||
};
|
||
|
||
Object.entries(iconGroups).forEach(([gridId, icons]) => {
|
||
const grid = document.getElementById(gridId);
|
||
if (!grid) return;
|
||
icons.forEach(icon => {
|
||
const card = document.createElement('div');
|
||
card.className = 'icon-card';
|
||
card.innerHTML = `<img src="${icon.file}" alt="${icon.name}" /><span>${icon.name}</span>`;
|
||
grid.appendChild(card);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|