侧栏: 导航项加 Phosphor 图标
- 用户菜单(仪表盘/API密钥/用量/账户设置/管理)与管理后台菜单(总览/渠道/模型/用户/用量/配置) 均加对应图标, 跨区跳转项(管理→/返回控制台→)用常规字重+箭头区分 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user