锦麟 王
88ef615bc0
- VoiceControls.vue: 🎤🔇🔊🔈🚪 → Microphone/Mute/Headset/SwitchButton - GamesLibrary.vue: 🎮(无群组) → Monitor, 📦(空状态) → Box + brand color tint on empty-state icons PC 占位图已与移动端共享 public/ 目录（自动一致）； 其余 30 个文件的 el-icon 是桌面端 Element Plus 合理约定，保留不动。 build verified: vue-tsc + vite build pass
227 lines
11 KiB
HTML
227 lines
11 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>MobileIcon SVG 图标预览</title>
|
||
<style>
|
||
:root {
|
||
--primary: #059669;
|
||
--text: #1e293b;
|
||
--text-muted: #94a3b8;
|
||
--border: #e2e8f0;
|
||
--bg: #f8fafc;
|
||
--bg-card: #ffffff;
|
||
--bg-elevated: #f1f5f9;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
padding: 32px 24px 80px;
|
||
}
|
||
h1 { font-size: 26px; margin-bottom: 6px; }
|
||
.subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
|
||
.stats {
|
||
display: flex; gap: 24px; margin-bottom: 32px;
|
||
padding: 16px 20px; background: var(--bg-card); border-radius: 12px;
|
||
box-shadow: 0 1px 3px rgba(15,23,42,0.06);
|
||
}
|
||
.stat b { color: var(--primary); font-size: 20px; }
|
||
.stat span { font-size: 13px; color: var(--text-muted); margin-left: 4px; }
|
||
|
||
.category { margin-bottom: 36px; }
|
||
.category-title {
|
||
font-size: 14px; font-weight: 700; color: var(--text-muted);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
margin-bottom: 12px; padding-left: 4px;
|
||
border-left: 3px solid var(--primary);
|
||
padding-left: 10px;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
.icon-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 16px 12px 12px;
|
||
text-align: center;
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
.icon-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(5,150,105,0.12);
|
||
}
|
||
.icon-svg-wrap {
|
||
display: flex; align-items: center; justify-content: center;
|
||
height: 40px; margin-bottom: 8px;
|
||
color: var(--primary);
|
||
}
|
||
.icon-name {
|
||
font-size: 12px; color: var(--text); font-weight: 500;
|
||
font-family: "SF Mono", Consolas, monospace;
|
||
}
|
||
|
||
/* 图标本身（与 MobileIcon.vue 一致的渲染参数） */
|
||
.icon {
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 2;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
/* 颜色变体预览区 */
|
||
.variants {
|
||
display: flex; gap: 16px; flex-wrap: wrap;
|
||
margin: 24px 0; padding: 20px;
|
||
background: var(--bg-card); border-radius: 12px;
|
||
box-shadow: 0 1px 3px rgba(15,23,42,0.06);
|
||
}
|
||
.variant-title { width: 100%; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
|
||
.variant-box {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 12px 16px; border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
font-size: 13px;
|
||
}
|
||
.variant-box.primary { color: var(--primary); }
|
||
.variant-box.muted { color: var(--text-muted); }
|
||
.variant-box.dark {
|
||
background: #1e293b; color: #fff; border-color: #1e293b;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>MobileIcon SVG 图标预览</h1>
|
||
<p class="subtitle">手机端移动版统一图标体系 · 2px 线性描边 · 24×24 viewBox · 共 <strong id="count">0</strong> 个图标</p>
|
||
|
||
<div class="stats">
|
||
<div class="stat"><b id="c1">0</b><span>导航/品牌</span></div>
|
||
<div class="stat"><b id="c2">0</b><span>操作</span></div>
|
||
<div class="stat"><b id="c3">0</b><span>状态/反馈</span></div>
|
||
<div class="stat"><b id="c4">0</b><span>时间/类型</span></div>
|
||
<div class="stat"><b id="c5">0</b><span>组队/语音</span></div>
|
||
<div class="stat"><b id="c6">0</b><span>资产/其他</span></div>
|
||
</div>
|
||
|
||
<div class="variants">
|
||
<div class="variant-title">颜色变体（通过 currentColor 继承）</div>
|
||
<div class="variant-box primary"><svg class="icon" width="22" height="22" viewBox="0 0 24 24"><path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.3 6.5 20.3l1.1-6.3L3 9.6l6.3-.9L12 3Z"/></svg> 主色（收藏激活）</div>
|
||
<div class="variant-box muted"><svg class="icon" width="22" height="22" viewBox="0 0 24 24"><path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.3 6.5 20.3l1.1-6.3L3 9.6l6.3-.9L12 3Z"/></svg> 灰色（未激活）</div>
|
||
<div class="variant-box dark"><svg class="icon" width="22" height="22" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9H4Z"/></svg> 白色（深色背景/语音房）</div>
|
||
</div>
|
||
|
||
<div id="app"></div>
|
||
|
||
<script>
|
||
// 与 MobileIcon.vue 中 ICONS 完全一致的数据
|
||
const ICONS = {
|
||
// 品牌/导航
|
||
logo: '<path d="M6 8h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z"/><path d="M7 13h2"/><path d="M15 13h2"/><path d="M9 16h6"/>',
|
||
home: '<path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/><path d="M9.5 21v-6h5v6"/>',
|
||
users: '<circle cx="9" cy="8" r="3"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 6.5a3 3 0 0 1 0 5.8"/><path d="M17 14.5a5.5 5.5 0 0 1 3.5 5.1"/>',
|
||
game: '<rect x="2.5" y="7" width="19" height="10" rx="3"/><path d="M7 11v3"/><path d="M5.5 12.5h3"/><circle cx="16" cy="11.5" r="0.8" fill="currentColor" stroke="none"/><circle cx="18.5" cy="14" r="0.8" fill="currentColor" stroke="none"/>',
|
||
bell: '<path d="M6 9a6 6 0 0 1 12 0c0 4 1.2 5.5 2 6.5H4c.8-1 2-2.5 2-6.5Z"/><path d="M10 19a2 2 0 0 0 4 0"/>',
|
||
user: '<circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/>',
|
||
|
||
// 功能/操作
|
||
plus: '<path d="M12 5v14"/><path d="M5 12h14"/>',
|
||
search: '<circle cx="11" cy="11" r="6.5"/><path d="m20 20-3.6-3.6"/>',
|
||
edit: '<path d="M4 20h4L19 9l-4-4L4 16v4Z"/><path d="m14 6 4 4"/>',
|
||
trash: '<path d="M4 7h16"/><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/><path d="M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13"/><path d="M10 11v6"/><path d="M14 11v6"/>',
|
||
close: '<path d="M6 6l12 12"/><path d="M18 6 6 18"/>',
|
||
check: '<path d="m5 12.5 4.5 4.5L19 7"/>',
|
||
arrowDown: '<path d="M12 5v14"/><path d="m6 13 6 6 6-6"/>',
|
||
arrowLeft: '<path d="M19 12H5"/><path d="m11 6-6 6 6 6"/>',
|
||
arrowRight: '<path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>',
|
||
arrowUp: '<path d="M12 19V5"/><path d="m6 11 6-6 6 6"/>',
|
||
refresh: '<path d="M4 12a8 8 0 0 1 13.5-5.8L20 8"/><path d="M20 4v4h-4"/><path d="M20 12a8 8 0 0 1-13.5 5.8L4 16"/><path d="M4 20v-4h4"/>',
|
||
more: '<circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/>',
|
||
|
||
// 状态/反馈
|
||
star: '<path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.3 6.5 20.3l1.1-6.3L3 9.6l6.3-.9L12 3Z"/>',
|
||
starFilled: '<path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.3 6.5 20.3l1.1-6.3L3 9.6l6.3-.9L12 3Z" fill="currentColor" stroke="none"/>',
|
||
fire: '<path d="M12 3c1 3-1 4-1 6 0 1 1 2 2 2s2-1 2-3c2 2 3 4 3 7a6 6 0 0 1-12 0c0-3 2-5 3-6 1 1 1 2 2 2 1 0 1-2 1-5 0-1 0-2 0-3Z"/>',
|
||
bookmark: '<path d="M6 4h12v16l-6-4-6 4V4Z"/>',
|
||
warning: '<path d="M12 4 2.5 20h19L12 4Z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.8" fill="currentColor" stroke="none"/>',
|
||
info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="7.5" r="0.8" fill="currentColor" stroke="none"/>',
|
||
|
||
// 时间/地点/类型
|
||
clock: '<circle cx="12" cy="12" r="8.5"/><path d="M12 7v5l3.5 2"/>',
|
||
location: '<path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/>',
|
||
calendar: '<rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16"/><path d="M8 3v4"/><path d="M16 3v4"/>',
|
||
trophy: '<path d="M8 4h8v4a4 4 0 0 1-8 0V4Z"/><path d="M8 5H5v2a3 3 0 0 0 3 3"/><path d="M16 5h3v2a3 3 0 0 1-3 3"/><path d="M12 12v4"/><path d="M9 20h6"/><path d="M10 16h4l.5 4h-5l.5-4Z"/>',
|
||
tag: '<path d="M3 5h7l9 9-7 7-9-9V5Z"/><circle cx="7.5" cy="9.5" r="1.2" fill="currentColor" stroke="none"/>',
|
||
chart: '<path d="M4 20V4"/><path d="M4 20h16"/><path d="M8 16v-4"/><path d="M13 16V8"/><path d="M18 16v-7"/>',
|
||
|
||
// 组队/语音
|
||
volume: '<path d="M4 9v6h4l5 4V5L8 9H4Z"/><path d="M16 9a3 3 0 0 1 0 6"/><path d="M18.5 7a6 6 0 0 1 0 10"/>',
|
||
volumeOff: '<path d="M4 9v6h4l5 4V5L8 9H4Z"/><path d="m16 9 5 6"/><path d="m21 9-5 6"/>',
|
||
speaker: '<path d="M4 9v6h4l5 4V5L8 9H4Z"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M18.5 5.5a9 9 0 0 1 0 13"/>',
|
||
mic: '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/>',
|
||
micOff: '<path d="M9 5a3 3 0 0 1 6 0v4"/><path d="M9 9v2a3 3 0 0 0 5 2"/><path d="M5 11a7 7 0 0 0 11 4"/><path d="M12 18v3"/><path d="m4 4 16 16"/>',
|
||
|
||
// 群组/资产相关
|
||
wallet: '<rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 9h18"/><circle cx="16.5" cy="13" r="1.2" fill="currentColor" stroke="none"/>',
|
||
gift: '<rect x="4" y="8" width="16" height="12" rx="1"/><path d="M4 12h16"/><path d="M12 8v12"/><path d="M12 8C12 5 10 4 8.5 4S6 6 8 8"/><path d="M12 8c0-3 2-4 3.5-4S18 6 16 8"/>',
|
||
photo: '<rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="m3 17 5-4 4 3 3-2 6 4"/>',
|
||
link: '<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.5 1.5"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.5-1.5"/>',
|
||
download: '<path d="M12 4v11"/><path d="m7 11 5 5 5-5"/><path d="M5 20h14"/>',
|
||
upload: '<path d="M12 16V5"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/>',
|
||
music: '<circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="16" r="2.5"/><path d="M8.5 18V5l12-2v13"/>',
|
||
video: '<rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/>',
|
||
document: '<path d="M6 3h8l4 4v14H6V3Z"/><path d="M14 3v4h4"/><path d="M9 13h6"/><path d="M9 17h6"/>',
|
||
setting: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>',
|
||
logout: '<path d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4"/><path d="M16 16l4-4-4-4"/><path d="M20 12H9"/>',
|
||
|
||
// 状态点
|
||
dotIdle: '<circle cx="12" cy="12" r="5" fill="currentColor" stroke="none"/>'
|
||
}
|
||
|
||
// 分类
|
||
const CATEGORIES = [
|
||
{ title: '品牌 / 导航', ids: ['logo','home','users','game','bell','user'] },
|
||
{ title: '功能 / 操作', ids: ['plus','search','edit','trash','close','check','arrowDown','arrowLeft','arrowRight','arrowUp','refresh','more'] },
|
||
{ title: '状态 / 反馈', ids: ['star','starFilled','fire','bookmark','warning','info'] },
|
||
{ title: '时间 / 地点 / 类型', ids: ['clock','location','calendar','trophy','tag','chart'] },
|
||
{ title: '组队 / 语音', ids: ['volume','volumeOff','speaker','mic','micOff'] },
|
||
{ title: '资产 / 其他', ids: ['wallet','gift','photo','link','download','upload','music','video','document','setting','logout','dotIdle'] },
|
||
]
|
||
|
||
function renderIcon(name) {
|
||
return `<svg class="icon" width="32" height="32" viewBox="0 0 24 24">${ICONS[name]}</svg>`
|
||
}
|
||
|
||
const app = document.getElementById('app')
|
||
let total = 0
|
||
CATEGORIES.forEach((cat, idx) => {
|
||
const grid = document.createElement('div')
|
||
grid.className = 'category'
|
||
grid.innerHTML = `
|
||
<div class="category-title">${cat.title}（${cat.ids.length}）</div>
|
||
<div class="grid">
|
||
${cat.ids.map(id => `
|
||
<div class="icon-card">
|
||
<div class="icon-svg-wrap">${renderIcon(id)}</div>
|
||
<div class="icon-name">${id}</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
`
|
||
app.appendChild(grid)
|
||
total += cat.ids.length
|
||
document.getElementById('c' + (idx + 1)).textContent = cat.ids.length
|
||
})
|
||
|
||
document.getElementById('count').textContent = total
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|