侧栏: 导航项加 Phosphor 图标

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sakurasan
2026-08-16 01:59:58 +08:00
co-authored by Claude
parent 40c1ae43e9
commit 057b1b2c0b
+21 -14
View File
@@ -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>