侧栏: 导航项加 Phosphor 图标
- 用户菜单(仪表盘/API密钥/用量/账户设置/管理)与管理后台菜单(总览/渠道/模型/用户/用量/配置) 均加对应图标, 跨区跳转项(管理→/返回控制台→)用常规字重+箭头区分 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
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 { useAuthStore } from '@/stores/auth'
|
||||||
import { fmtMoney } from '@/lib/format'
|
import { fmtMoney } from '@/lib/format'
|
||||||
import ThemeToggle from '@/components/ui/ThemeToggle.vue'
|
import ThemeToggle from '@/components/ui/ThemeToggle.vue'
|
||||||
@@ -9,6 +12,7 @@ import ThemeToggle from '@/components/ui/ThemeToggle.vue'
|
|||||||
interface NavItem {
|
interface NavItem {
|
||||||
to: string
|
to: string
|
||||||
label: string
|
label: string
|
||||||
|
icon: unknown
|
||||||
jump?: boolean // 跨区跳转(如 进入管理 / 返回控制台),不做激活态
|
jump?: boolean // 跨区跳转(如 进入管理 / 返回控制台),不做激活态
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -27,30 +31,30 @@ const sections = computed(() => {
|
|||||||
{
|
{
|
||||||
title: '管理后台',
|
title: '管理后台',
|
||||||
items: [
|
items: [
|
||||||
{ to: '/admin/overview', label: '总览' },
|
{ to: '/admin/overview', label: '总览', icon: PhSquaresFour },
|
||||||
{ to: '/admin/channels', label: '渠道管理' },
|
{ to: '/admin/channels', label: '渠道管理', icon: PhGlobe },
|
||||||
{ to: '/admin/models', label: '模型定价' },
|
{ to: '/admin/models', label: '模型定价', icon: PhTag },
|
||||||
{ to: '/admin/users', label: '用户管理' },
|
{ to: '/admin/users', label: '用户管理', icon: PhUsers },
|
||||||
{ to: '/admin/usage', label: '用量统计' },
|
{ to: '/admin/usage', label: '用量统计', icon: PhChartBar },
|
||||||
{ to: '/admin/config', label: '系统配置' },
|
{ 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[] }[] = [
|
const user: { title: string; items: NavItem[] }[] = [
|
||||||
{
|
{
|
||||||
title: '管理',
|
title: '管理',
|
||||||
items: [
|
items: [
|
||||||
{ to: '/console/dashboard', label: '仪表盘' },
|
{ to: '/console/dashboard', label: '仪表盘', icon: PhGauge },
|
||||||
{ to: '/console/keys', label: 'API 密钥' },
|
{ to: '/console/keys', label: 'API 密钥', icon: PhKey },
|
||||||
{ to: '/console/usage', label: '用量明细' },
|
{ to: '/console/usage', label: '用量明细', icon: PhChartLine },
|
||||||
{ to: '/console/settings', label: '账户设置' },
|
{ to: '/console/settings', label: '账户设置', icon: PhGear },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
if (auth.isAdmin) {
|
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
|
return user
|
||||||
})
|
})
|
||||||
@@ -98,7 +102,10 @@ async function logout() {
|
|||||||
:active-class="n.jump ? '' : 'bg-surface2 text-ink'"
|
:active-class="n.jump ? '' : 'bg-surface2 text-ink'"
|
||||||
@click="navTo"
|
@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>
|
<span v-if="n.jump" class="opacity-60" aria-hidden="true">→</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user