From 88ef615bc0e731cb52cef0d10470f9c8fab30d27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E9=BA=9F=20=E7=8E=8B?= <Jinlin.Wang@cicc.com.cn>
Date: Thu, 18 Jun 2026 15:28:02 +0800
Subject: [PATCH] style(pc): replace emoji with Element Plus icons for
 consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../src/components/voice/VoiceControls.vue    |  11 +-
 frontend/src/views/GamesLibrary.vue           |   9 +-
 mobile-icons-preview.html                     | 226 ++++++++++++++++++
 3 files changed, 240 insertions(+), 6 deletions(-)
 create mode 100644 mobile-icons-preview.html

diff --git a/frontend/src/components/voice/VoiceControls.vue b/frontend/src/components/voice/VoiceControls.vue
index 417e5e5..e1f7f16 100644
--- a/frontend/src/components/voice/VoiceControls.vue
+++ b/frontend/src/components/voice/VoiceControls.vue
@@ -1,5 +1,7 @@
 <!-- src/components/voice/VoiceControls.vue -->
 <script setup lang="ts">
+import { Microphone, Mute, Headset, SwitchButton } from '@element-plus/icons-vue'
+
 defineProps<{
   micEnabled: boolean
   speakerEnabled: boolean
@@ -20,7 +22,7 @@ const emit = defineEmits<{
       :class="{ active: micEnabled, off: !micEnabled }"
       @click="emit('toggleMic')"
     >
-      <span class="ctrl-icon">{{ micEnabled ? '🎤' : '🔇' }}</span>
+      <el-icon class="ctrl-icon"><Microphone v-if="micEnabled" /><Mute v-else /></el-icon>
       <span class="ctrl-label">麦克风</span>
     </button>
 
@@ -29,12 +31,12 @@ const emit = defineEmits<{
       :class="{ active: speakerEnabled, off: !speakerEnabled }"
       @click="emit('toggleSpeaker')"
     >
-      <span class="ctrl-icon">{{ speakerEnabled ? '🔊' : '🔈' }}</span>
+      <el-icon class="ctrl-icon"><Headset /></el-icon>
       <span class="ctrl-label">扬声器</span>
     </button>
 
     <button class="ctrl-btn leave-btn" @click="emit('leave')">
-      <span class="ctrl-icon">🚪</span>
+      <el-icon class="ctrl-icon"><SwitchButton /></el-icon>
       <span class="ctrl-label">离开</span>
     </button>
   </div>
@@ -80,6 +82,9 @@ const emit = defineEmits<{
 
 .ctrl-icon {
   font-size: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .ctrl-label {
diff --git a/frontend/src/views/GamesLibrary.vue b/frontend/src/views/GamesLibrary.vue
index 9ce7f8f..45c8214 100644
--- a/frontend/src/views/GamesLibrary.vue
+++ b/frontend/src/views/GamesLibrary.vue
@@ -9,7 +9,7 @@ import GameDetailDialog from '@/components/game/GameDetailDialog.vue'
 import GameFormDialog from '@/components/game/GameFormDialog.vue'
 import ImportGamesDialog from '@/components/game/ImportGamesDialog.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Close } from '@element-plus/icons-vue'
+import { Close, Monitor, Box } from '@element-plus/icons-vue'
 
 const groupStore = useGroupStore()
 
@@ -128,7 +128,7 @@ async function handleImportComplete() {
   <div class="games-library">
     <!-- 无群组引导 -->
     <div v-if="!hasGroups" class="no-group">
-      <div class="no-group-icon">🎮</div>
+      <div class="no-group-icon"><el-icon :size="56"><Monitor /></el-icon></div>
       <p class="no-group-text">还没有群组</p>
       <p class="no-group-hint">先创建或加入一个群组，然后就可以管理游戏库了</p>
     </div>
@@ -175,7 +175,7 @@ async function handleImportComplete() {
       <div v-if="loading" class="loading">加载中...</div>
 
       <div v-else-if="games.length === 0" class="empty">
-        <div class="empty-icon">📦</div>
+        <div class="empty-icon"><el-icon :size="48"><Box /></el-icon></div>
         <p class="empty-text">暂无游戏</p>
         <p class="empty-hint">点击「添加游戏」或「导入」开始管理游戏库</p>
       </div>
@@ -216,6 +216,8 @@ async function handleImportComplete() {
 .no-group-icon {
   font-size: 48px;
   margin-bottom: 16px;
+  color: var(--gg-primary);
+  opacity: 0.7;
 }
 
 .no-group-text {
@@ -317,6 +319,7 @@ async function handleImportComplete() {
 .empty-icon {
   font-size: 48px;
   margin-bottom: 12px;
+  color: var(--gg-text-muted);
 }
 
 .empty-text {
diff --git a/mobile-icons-preview.html b/mobile-icons-preview.html
new file mode 100644
index 0000000..4303f37
--- /dev/null
+++ b/mobile-icons-preview.html
@@ -0,0 +1,226 @@
+<!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>