sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
sion123
2026-02-12 00:51:09 +08:00
parent a1dc4dc5c8
commit d9edd739d6
2 changed files with 169 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/app/web-gold/src/components/SidebarNav.vue
View File

@@ -1,106 +1,60 @@
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { navConfig, navIcons } from '@/router'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
// 单色 SVG 图标（填充 currentColor，可继承文本色）
const icons = {
home: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/></svg>',
grid: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
text: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M4 7h16"/><path d="M4 12h10"/><path d="M4 17h14"/></svg>',
mic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 19v3"/></svg>',
wave: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M2 12s2-4 5-4 3 8 6 8 3-8 6-8 3 4 3 4"/></svg>',
user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>',
video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>',
scissors: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.59 13.51 15.42 17.49"/><path d="M15.41 6.51 8.59 10.49"/></svg>'
function filterVisibleGroups(config, isLoggedIn) {
return config
.filter(group => !group.requiresAuth || isLoggedIn)
.map(group => ({
...group,
items: group.items.filter(item => !item.requiresAuth || isLoggedIn)
}))
.filter(group => group.items.length > 0)
}
const items = computed(() => {
// 小标题（功能） + 模块（子菜单）的形式；使用单色 SVG 图标
const allItems = [
{
title: '功能',
children: [
// { name: '首页', label: '首页', icon: 'home' },
{ name: '对标分析', label: '对标分析', icon: 'grid' },
{ name: '文案创作', label: '文案创作', icon: 'text' },
{ name: '热点预测', label: '热点趋势', icon: 'text' },
]
},
{
title: '数字人',
children: [
{ name: '人声克隆', label: '人声克隆', icon: 'mic' },
{ name: '数字人生成', label: "数字人", icon: "user" },
// { name: '数字人视频', label: '数字人视频', icon: 'video' },
]
},
{
title: '素材库',
children: [
{ name: '素材列表', label: '素材列表', icon: 'grid' },
{ name: '智能混剪', label: '智能混剪', icon: 'scissors' },
]
},
{
title: '任务管理',
children: [
{ name: '任务中心', label: '任务中心', icon: 'video', params: { type: 'mix-task' } },
]
},
{
title: '系统',
children: [
{ name: '风格设置', label: '风格设置', icon: 'text' },
]
}
]
// 如果未登录，过滤掉"系统"菜单组
if (!userStore.isLoggedIn) {
return allItems.filter(item => item.title !== '系统')
}
return allItems
const visibleNavConfig = computed(() => {
return filterVisibleGroups(navConfig, userStore.isLoggedIn)
})
function go(item) {
if (item.params) {
router.push({ name: item.name, params: item.params })
} else {
router.push({ name: item.name })
}
}
</script>
<template>
<aside class="sidebar">
<nav class="sidebar__nav">
<div v-for="group in items" :key="group.title" class="nav-group">
<div class="nav-group__title">{{ group.title }}</div>
<button v-for="it in group.children" :key="it.name" class="nav-item" :class="{ 'is-active': route.name === it.name }" @click="go(it)">
<span class="nav-item__icon" aria-hidden="true" v-html="icons[it.icon]"></span>
<span class="nav-item__label">{{ it.label }}</span>
</button>
<div v-for="group in visibleNavConfig" :key="group.group" class="nav-group">
<div class="nav-group__title">{{ group.group }}</div>
<router-link
v-for="item in group.items"
:key="item.name"
:to="{ name: item.name, ...(item.params && { params: item.params }) }"
class="nav-item"
:class="{ 'is-active': route.name === item.name }"
custom
v-slot="{ navigate }"
>
<button class="nav-item" @click="navigate">
<span class="nav-item__icon" v-html="navIcons[item.icon]"></span>
<span class="nav-item__label">{{ item.name }}</span>
</button>
</router-link>
</div>
</nav>
</aside>
</template>
<style scoped>
.sidebar {
position: sticky;
top: 70px; /* 与 TopNav 高度一致 */
top: 70px;
height: calc(100vh - 70px);
width: 220px;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
overflow-y: auto;
}
.sidebar__nav {
@@ -110,7 +64,12 @@ function go(item) {
gap: 6px;
}
.nav-group { display: flex; flex-direction: column; gap: 6px; }
.nav-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.nav-group__title {
height: 30px;
display: flex;
@@ -155,7 +114,15 @@ function go(item) {
color: var(--color-blue-800);
}
.nav-item__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item__label { font-size: 14px; }
</style>
.nav-item__icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-item__label {
font-size: 14px;
}
</style>