124 lines
4.5 KiB
Vue
124 lines
4.5 KiB
Vue
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
// 单色 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>'
|
||
}
|
||
|
||
const items = computed(() => {
|
||
// 小标题（功能） + 模块（子菜单）的形式；使用单色 SVG 图标
|
||
return [
|
||
{
|
||
title: '功能',
|
||
children: [
|
||
// { path: '/home', label: '首页', icon: 'home' },
|
||
{ path: '/content-style/benchmark', label: '对标分析', icon: 'grid' },
|
||
{ path: '/content-style/copywriting', label: '文案创作', icon: 'text' },
|
||
{ path: '/trends/forecast', label: '热点趋势', icon: 'text' },
|
||
]
|
||
},
|
||
{
|
||
title: '配音',
|
||
children: [
|
||
{ path: '/digital-human/voice-copy', label: '人声克隆', icon: 'mic' },
|
||
{ path: '/digital-human/voice-generate', label: '生成配音', icon: 'wave' },
|
||
]
|
||
},
|
||
// {
|
||
// title: '视频',
|
||
// children: [
|
||
// { path: '/digital-human/avatar', label: '生成数字人', icon: 'user' },
|
||
// ]
|
||
// },
|
||
]
|
||
})
|
||
|
||
function go(p) {
|
||
router.push(p)
|
||
}
|
||
</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.path" class="nav-item" :class="{ 'is-active': route.path === it.path }" @click="go(it.path)">
|
||
<span class="nav-item__icon" aria-hidden="true" v-html="icons[it.icon]"></span>
|
||
<span class="nav-item__label">{{ it.label }}</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
|
||
</template>
|
||
|
||
<style scoped>
|
||
.sidebar {
|
||
position: sticky;
|
||
top: 70px; /* 与 TopNav 高度一致 */
|
||
height: calc(100vh - 70px);
|
||
width: 220px;
|
||
border-right: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
}
|
||
|
||
.sidebar__nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 12px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-group { display: flex; flex-direction: column; gap: 6px; }
|
||
.nav-group__title {
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 8px;
|
||
font-size: var(--font-small-size);
|
||
color: var(--color-text-secondary);
|
||
letter-spacing: .06em;
|
||
}
|
||
|
||
.nav-item {
|
||
height: 40px;
|
||
border-radius: var(--radius-card);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 0 12px;
|
||
color: var(--color-text-secondary);
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
cursor: pointer;
|
||
transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: #161616; /* hover态：加深 */
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.nav-item.is-active {
|
||
background: var(--color-primary);;
|
||
color: var(--color-text);
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.nav-item__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
|
||
.nav-item__label { font-size: var(--font-body-size); font-weight: 600; }
|
||
</style>
|
||
|
||
|