refactor: replace all emoji icons with Element Plus SVG icons

Use @element-plus/icons-vue components for consistent, scalable vector
icons across sidebar navigation, section headers, ratings, and buttons.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/game/GameComments.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue'
 import { getGameComments, addComment } from '@/api/games'
 import type { GameComment } from '@/types'
 import { ElMessage } from 'element-plus'
+import { StarFilled } from '@element-plus/icons-vue'
 
 const props = defineProps<{ gameId: string }>()
 
@@ -56,7 +57,7 @@ function formatDate(dateStr: string) {
           v-for="star in 5" :key="star"
           class="star" :class="{ active: star <= newRating }"
           @click="newRating = star"
-        >★</span>
+        ><el-icon :size="20"><StarFilled /></el-icon></span>
         <span v-if="newRating > 0" class="rating-clear" @click="newRating = 0">清除</span>
       </div>
       <div class="input-row">
@@ -71,7 +72,9 @@ function formatDate(dateStr: string) {
       <div v-for="c in comments" :key="c.id" class="comment-item">
         <div class="comment-header">
           <span class="comment-author">{{ c.expand?.author?.username || '用户' }}</span>
-          <span v-if="c.rating" class="comment-rating">{{ '★'.repeat(c.rating) }}</span>
+          <span v-if="c.rating" class="comment-rating">
+            <el-icon v-for="i in c.rating" :key="i" :size="12"><StarFilled /></el-icon>
+          </span>
           <span class="comment-date">{{ formatDate(c.created) }}</span>
         </div>
         <p class="comment-content">{{ c.content }}</p>

frontend/src/components/game/GameDetailDialog.vue

@@ -3,6 +3,7 @@ import { computed, ref, onMounted } from 'vue'
 import type { Game } from '@/types'
 import { toggleFavorite, isFavorite, deleteGame } from '@/api/games'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { TrendCharts, StarFilled, Star, Delete } from '@element-plus/icons-vue'
 import GameComments from './GameComments.vue'
 
 const props = defineProps<{
@@ -68,7 +69,7 @@ function handleCreateTeam() {
 
         <div class="detail-meta">
           <span v-if="game.platform" class="platform-badge">{{ game.platform }}</span>
-          <span class="popularity">🔥 {{ game.popularCount }} 人游玩</span>
+          <span class="popularity"><el-icon><TrendCharts /></el-icon> {{ game.popularCount }} 人游玩</span>
         </div>
 
         <div v-if="game.tags?.length" class="detail-tags">
@@ -77,9 +78,10 @@ function handleCreateTeam() {
 
         <div class="detail-actions">
           <button class="fav-btn" :class="{ active: favorited }" @click="handleFavorite">
-            {{ favorited ? '★ 已收藏' : '☆ 收藏' }}
+            <el-icon><StarFilled v-if="favorited" /><Star v-else /></el-icon>
+            {{ favorited ? '已收藏' : '收藏' }}
           </button>
-          <button class="delete-detail-btn" @click="handleDelete">删除</button>
+          <button class="delete-detail-btn" @click="handleDelete"><el-icon><Delete /></el-icon> 删除</button>
         </div>
 
         <el-button type="primary" class="team-btn" @click="handleCreateTeam">

frontend/src/views/GamesLibrary.vue

@@ -8,6 +8,7 @@ import GameDetailDialog from '@/components/game/GameDetailDialog.vue'
 import AddGameDialog from '@/components/game/AddGameDialog.vue'
 import ImportGamesDialog from '@/components/game/ImportGamesDialog.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Close } from '@element-plus/icons-vue'
 
 const groupStore = useGroupStore()
 
@@ -140,7 +141,7 @@ async function handleImportComplete() {
               <span v-for="tag in game.tags" :key="tag" class="tag">{{ tag }}</span>
             </div>
           </div>
-          <button class="delete-btn" @click.stop="handleDeleteGame(game)" title="删除">✕</button>
+          <button class="delete-btn" @click.stop="handleDeleteGame(game)" title="删除"><el-icon><Close /></el-icon></button>
         </div>
       </div>
 

frontend/src/views/GroupView.vue

@@ -8,6 +8,7 @@ import { pb } from '@/api/pocketbase'
 import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
 import IdleMembersList from '@/components/team/IdleMembersList.vue'
 import GroupMembersPanel from '@/components/group/GroupMembersPanel.vue'
+import { Promotion, Opportunity, UserFilled } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const groupStore = useGroupStore()
@@ -118,7 +119,7 @@ async function refreshMembers() {
         <!-- 当前临时小组 -->
         <section class="panel-block">
           <h2 class="block-title">
-            <span class="title-icon">&#x2694;</span> 当前临时小组
+            <span class="title-icon"><el-icon><Promotion /></el-icon></span> 当前临时小组
           </h2>
           <div class="panel-card">
             <TeamSessionPanel />
@@ -128,7 +129,7 @@ async function refreshMembers() {
         <!-- 空闲成员 -->
         <section class="panel-block">
           <h2 class="block-title">
-            <span class="title-icon">&#x1F7E2;</span> 空闲成员
+            <span class="title-icon"><el-icon><Opportunity /></el-icon></span> 空闲成员
           </h2>
           <div class="panel-card">
             <IdleMembersList status="idle" />
@@ -139,7 +140,7 @@ async function refreshMembers() {
         <section class="panel-block">
           <div class="block-title-row">
             <h2 class="block-title">
-              <span class="title-icon">&#x1F465;</span> 所有成员
+              <span class="title-icon"><el-icon><UserFilled /></el-icon></span> 所有成员
             </h2>
             <button class="refresh-btn" @click="refreshMembers">刷新</button>
           </div>

frontend/src/views/Home.vue

@@ -10,6 +10,7 @@ import { UserStatusMap } from '@/types'
 import type { Game } from '@/types'
 import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
 import IdleMembersList from '@/components/team/IdleMembersList.vue'
+import { User, Promotion, TrendCharts } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const groupStore = useGroupStore()
@@ -72,11 +73,11 @@ function openGameDetail(game: Game) {
       <!-- 左列: 我的群组 -->
       <section class="section groups-section">
         <h2 class="section-title">
-          <span class="section-icon">&#x1F3AE;</span> 我的群组
+          <el-icon class="section-icon"><User /></el-icon> 我的群组
         </h2>
 
         <div v-if="groupStore.groups.length === 0" class="empty-state">
-          <div class="empty-icon">&#x1F3AE;</div>
+          <div class="empty-icon"><el-icon :size="40"><User /></el-icon></div>
           <p class="empty-text">暂无群组</p>
           <p class="empty-hint">创建或加入一个群组，开始组队冒险吧</p>
         </div>
@@ -100,7 +101,7 @@ function openGameDetail(game: Game) {
       <!-- 右列: 当前临时小组 -->
       <section class="section session-section">
         <h2 class="section-title">
-          <span class="section-icon">&#x2694;</span> 当前临时小组
+          <el-icon class="section-icon"><Promotion /></el-icon> 当前临时小组
         </h2>
         <div class="session-card">
           <TeamSessionPanel />
@@ -115,7 +116,7 @@ function openGameDetail(game: Game) {
     <!-- 热门游戏 -->
     <section class="section games-section">
       <h2 class="section-title">
-        <span class="section-icon">&#x1F525;</span> 热门游戏
+        <span class="section-icon"><el-icon><TrendCharts /></el-icon></span> 热门游戏
       </h2>
 
       <div v-if="loading" class="loading-state">
@@ -124,7 +125,7 @@ function openGameDetail(game: Game) {
       </div>
 
       <div v-else-if="popularGames.length === 0" class="empty-state">
-        <div class="empty-icon">&#x1F3AE;</div>
+        <div class="empty-icon"><el-icon :size="40"><TrendCharts /></el-icon></div>
         <p class="empty-text">暂无热门游戏</p>
       </div>
 

frontend/src/views/Layout.vue

@@ -10,6 +10,7 @@ import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
 import NotificationPanel from '@/components/common/NotificationPanel.vue'
 import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
 import JoinGroupDialog from '@/components/group/JoinGroupDialog.vue'
+import { Monitor, HomeFilled, Grid, Link, AlarmClock, SwitchButton, Bell, Plus } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -55,18 +56,18 @@ function goHome() {
     <aside class="sidebar">
       <div class="sidebar-top">
         <div class="logo" @click="goHome">
-          <span class="logo-icon">🎮</span>
+          <el-icon class="logo-icon"><Monitor /></el-icon>
           <span class="logo-text">Game Group</span>
         </div>
       </div>
 
       <nav class="sidebar-nav">
         <router-link to="/" class="nav-item" active-class="nav-item--active">
-          <span class="nav-icon">🏠</span>
+          <el-icon class="nav-icon"><HomeFilled /></el-icon>
           <span>首页</span>
         </router-link>
         <router-link to="/games" class="nav-item" active-class="nav-item--active">
-          <span class="nav-icon">🎯</span>
+          <el-icon class="nav-icon"><Grid /></el-icon>
           <span>游戏库</span>
         </router-link>
       </nav>
@@ -77,8 +78,8 @@ function goHome() {
         <div class="section-header">
           <span class="section-title">我的群组</span>
           <div class="section-actions">
-            <button class="section-btn" @click="showCreateGroup = true" title="创建群组">+</button>
+            <button class="section-btn" @click="showCreateGroup = true" title="创建群组"><el-icon><Plus /></el-icon></button>
-            <button class="section-btn" @click="showJoinGroup = true" title="加入群组">&#x1F517;</button>
+            <button class="section-btn" @click="showJoinGroup = true" title="加入群组"><el-icon><Link /></el-icon></button>
           </div>
         </div>
         <div v-if="groupStore.groups.length === 0" class="empty-groups">
@@ -101,7 +102,7 @@ function goHome() {
         <div class="user-section">
           <StatusToggle />
           <button class="schedule-btn" @click="showScheduleModal = true" title="设置工作时间">
-            ⏰
+            <el-icon><AlarmClock /></el-icon>
           </button>
         </div>
         <div class="user-info">
@@ -112,7 +113,7 @@ function goHome() {
           />
           <span class="user-name">{{ userStore.user?.username }}</span>
           <button class="logout-btn" @click="handleLogout" title="退出登录">
-            🚪
+            <el-icon><SwitchButton /></el-icon>
           </button>
         </div>
       </div>
@@ -129,7 +130,7 @@ function goHome() {
             <span v-if="notificationStore.unreadCount > 0" class="badge">
               {{ notificationStore.unreadCount }}
             </span>
-            🔔
+            <el-icon><Bell /></el-icon>
           </button>
         </div>
       </header>