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>
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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">⚔</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">🟢</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">👥</span> 所有成员
|
||||
<span class="title-icon"><el-icon><UserFilled /></el-icon></span> 所有成员
|
||||
</h2>
|
||||
<button class="refresh-btn" @click="refreshMembers">刷新</button>
|
||||
</div>
|
||||
|
||||
@@ -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">🎮</span> 我的群组
|
||||
<el-icon class="section-icon"><User /></el-icon> 我的群组
|
||||
</h2>
|
||||
|
||||
<div v-if="groupStore.groups.length === 0" class="empty-state">
|
||||
<div class="empty-icon">🎮</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">⚔</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">🔥</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">🎮</div>
|
||||
<div class="empty-icon"><el-icon :size="40"><TrendCharts /></el-icon></div>
|
||||
<p class="empty-text">暂无热门游戏</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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="showJoinGroup = 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="加入群组"><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>
|
||||
|
||||
Reference in New Issue
Block a user