From 057b1b2c0b6e5ec794416d7fa2153283e243d819 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Sun, 16 Aug 2026 01:59:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E6=A0=8F:=20=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E9=A1=B9=E5=8A=A0=20Phosphor=20=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 用户菜单(仪表盘/API密钥/用量/账户设置/管理)与管理后台菜单(总览/渠道/模型/用户/用量/配置)
  均加对应图标, 跨区跳转项(管理→/返回控制台→)用常规字重+箭头区分

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/layout/ShellLayout.vue | 35 ++++++++++++++---------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/web/src/components/layout/ShellLayout.vue b/web/src/components/layout/ShellLayout.vue
index c7ff140..52a6d68 100644
--- a/web/src/components/layout/ShellLayout.vue
+++ b/web/src/components/layout/ShellLayout.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { PhList } from '@phosphor-icons/vue'
+import {
+  PhList, PhGauge, PhSquaresFour, PhKey, PhChartLine, PhChartBar, PhGear,
+  PhShieldCheck, PhArrowLeft, PhGlobe, PhTag, PhUsers, PhSliders,
+} from '@phosphor-icons/vue'
 import { useAuthStore } from '@/stores/auth'
 import { fmtMoney } from '@/lib/format'
 import ThemeToggle from '@/components/ui/ThemeToggle.vue'
@@ -9,6 +12,7 @@ import ThemeToggle from '@/components/ui/ThemeToggle.vue'
 interface NavItem {
   to: string
   label: string
+  icon: unknown
   jump?: boolean // 跨区跳转（如 进入管理 / 返回控制台），不做激活态
 }
 
@@ -27,30 +31,30 @@ const sections = computed(() => {
       {
         title: '管理后台',
         items: [
-          { to: '/admin/overview', label: '总览' },
-          { to: '/admin/channels', label: '渠道管理' },
-          { to: '/admin/models', label: '模型定价' },
-          { to: '/admin/users', label: '用户管理' },
-          { to: '/admin/usage', label: '用量统计' },
-          { to: '/admin/config', label: '系统配置' },
+          { to: '/admin/overview', label: '总览', icon: PhSquaresFour },
+          { to: '/admin/channels', label: '渠道管理', icon: PhGlobe },
+          { to: '/admin/models', label: '模型定价', icon: PhTag },
+          { to: '/admin/users', label: '用户管理', icon: PhUsers },
+          { to: '/admin/usage', label: '用量统计', icon: PhChartBar },
+          { to: '/admin/config', label: '系统配置', icon: PhSliders },
         ],
       },
-      { title: '用户', items: [{ to: '/console/dashboard', label: '返回控制台', jump: true }] },
+      { title: '用户', items: [{ to: '/console/dashboard', label: '返回控制台', icon: PhArrowLeft, jump: true }] },
     ]
   }
   const user: { title: string; items: NavItem[] }[] = [
     {
       title: '管理',
       items: [
-        { to: '/console/dashboard', label: '仪表盘' },
-        { to: '/console/keys', label: 'API 密钥' },
-        { to: '/console/usage', label: '用量明细' },
-        { to: '/console/settings', label: '账户设置' },
+        { to: '/console/dashboard', label: '仪表盘', icon: PhGauge },
+        { to: '/console/keys', label: 'API 密钥', icon: PhKey },
+        { to: '/console/usage', label: '用量明细', icon: PhChartLine },
+        { to: '/console/settings', label: '账户设置', icon: PhGear },
       ],
     },
   ]
   if (auth.isAdmin) {
-    user[0].items.push({ to: '/admin/overview', label: '管理', jump: true })
+    user[0].items.push({ to: '/admin/overview', label: '管理', icon: PhShieldCheck, jump: true })
   }
   return user
 })
@@ -98,7 +102,10 @@ async function logout() {
             :active-class="n.jump ? '' : 'bg-surface2 text-ink'"
             @click="navTo"
           >
-            <span>{{ n.label }}</span>
+            <span class="inline-flex min-w-0 items-center gap-2">
+              <component :is="n.icon" :size="15" :weight="n.jump ? 'regular' : 'bold'" class="shrink-0" />
+              <span class="truncate">{{ n.label }}</span>
+            </span>
             <span v-if="n.jump" class="opacity-60" aria-hidden="true">→</span>
           </router-link>
         </template>