优化

2025-11-16 23:19:44 +08:00
parent fd0dc38eea
commit 38949ec757
5 changed files with 285 additions and 2 deletions
--- a/frontend/app/web-gold/src/App.vue
+++ b/frontend/app/web-gold/src/App.vue
@@ -1,5 +1,7 @@
 <script setup>
+import { RouterView } from 'vue-router'
 import { ref, onMounted } from 'vue'
+import SidebarNav from './components/SidebarNav.vue'
 import TopNav from './components/TopNav.vue'
 import { theme } from 'ant-design-vue'
 import SvgSprite from '@/components/icons/SvgSprite.vue'
@@ -75,8 +77,12 @@ onMounted(async () => {
      <SvgSprite />
      <TopNav />
      <div class="app-body">
+        <SidebarNav />
        <div class="app-content">
          <main class="content-scroll">
+           <keep-alive>
+              <RouterView />
+           </keep-alive>
          </main>
          <footer class="py-6 text-xs text-center text-gray-500">
            v0.1 · API 正常 · © 2025 金牌内容大师
@@ -97,6 +103,8 @@ onMounted(async () => {
 /* 顶部固定，下面主体需要留出空间 */
 .app-body {
  padding-top: 70px; /* 与 TopNav 高度对齐 */
+  display: grid;
+  grid-template-columns: 220px 1fr; /* 左侧固定宽度侧边栏 */
 }

 .app-content {
--- a/frontend/app/web-gold/src/components/SidebarNav.vue
+++ b/frontend/app/web-gold/src/components/SidebarNav.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+
+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>'
+}
+
+const items = computed(() => {
+  // 小标题（功能） + 模块（子菜单）的形式；使用单色 SVG 图标
+  const allItems = [
+    {
+      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/video', label: '数字人视频', icon: 'video' },
+      ]
+    },
+    {
+      title: '素材库',
+      children: [
+        { path: '/material/list', label: '素材列表', icon: 'grid' },
+        { path: '/material/group', label: '素材分组', icon: 'folder' },
+      ]
+    },
+    {
+      title: '系统',
+      children: [
+        { path: '/system/style-settings', label: '风格设置', icon: 'text' },
+      ]
+    },
+    // {
+    //   title: '视频',
+    //   children: [
+    //     { path: '/digital-human/avatar', label: '生成数字人', icon: 'user' },
+    //   ]
+    // },
+  ]
+  
+  // 如果未登录，过滤掉"系统"菜单组
+  if (!userStore.isLoggedIn) {
+    return allItems.filter(item => item.title !== '系统')
+  }
+  
+  return allItems
+})
+
+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>
+
--- a/frontend/app/web-gold/src/main.js
+++ b/frontend/app/web-gold/src/main.js
@@ -6,12 +6,14 @@ import 'ant-design-vue/dist/reset.css'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

 import App from './App.vue'
+import router from './router'
 import './style.css'

 const app = createApp(App)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 app.use(pinia)
+app.use(router)
 app.use(Antd)

 app.mount('#app')
--- a/frontend/app/web-gold/src/router/index.js
+++ b/frontend/app/web-gold/src/router/index.js
@@ -0,0 +1,125 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { getToken } from '@gold/utils/token-manager'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/content-style/benchmark'
+  },
+  // { path: '/home', name: '首页', component: () => import('../views/home/Home.vue') },
+  {
+    path: '/content-style',
+    name: '内容风格分析',
+    children: [
+      { path: '', redirect: '/content-style/benchmark' },
+      { path: 'benchmark', name: '对标分析', component: () => import('../views/content-style/Benchmark.vue') },
+      { path: 'copywriting', name: '文案创作', component: () => import('../views/content-style/Copywriting.vue') },
+    ]
+  },
+  {
+    path: '/trends',
+    name: '热点趋势分析',
+    children: [
+      { path: '', redirect: '/trends/heat' },
+      { path: 'heat', name: '热度分析', component: () => import('../views/trends/Heat.vue') },
+      { path: 'forecast', name: '热点预测', component: () => import('../views/trends/Forecast.vue') },
+      { path: 'copywriting', name: '趋势文案创作', component: () => import('../views/trends/Copywriting.vue') },
+    ]
+  },
+  {
+    path: '/digital-human',
+    name: '数字人',
+    children: [
+      { path: '', redirect: '/digital-human/voice-copy' },
+      { path: 'voice-copy', name: '人声克隆', component: () => import('../views/dh/VoiceCopy.vue') },
+      { path: 'avatar', name: '生成数字人', component: () => import('../views/dh/Avatar.vue') },
+      { path: 'video', name: '数字人视频', component: () => import('../views/dh/Video.vue') },
+    ]
+  },
+  {
+    path: '/material',
+    name: '素材库',
+    children: [
+      { path: '', redirect: '/material/list' },
+      { path: 'list', name: '素材列表', component: () => import('../views/material/MaterialList.vue') },
+      { path: 'group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue') },
+    ]
+  },
+  {
+    path: '/system',
+    name: '系统',
+    children: [
+      { path: '', redirect: '/system/style-settings' },
+      { path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
+    ]
+  },
+  { path: '/realtime-hot', name: '实时热点推送', component: () => import('../views/realtime/RealtimeHot.vue') },
+  { path: '/mix-editor', name: '素材混剪', component: () => import('../views/mix/MixEditor.vue') },
+  { path: '/capcut-import', name: '剪映导入', component: () => import('../views/capcut/CapcutImport.vue') },
+  { path: '/help', name: '帮助', component: () => import('../views/misc/Help.vue') },
+  { path: '/download', name: '下载', component: () => import('../views/misc/Download.vue') },
+  { path: '/settings/theme', name: '主题设置', component: () => import('../views/misc/Theme.vue') },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+// 用户信息初始化标志（确保只初始化一次）
+let userInfoInitialized = false
+
+/**
+ * 路由导航守卫：初始化用户信息 + 登录验证
+ * 在首次路由跳转时，如果已登录（有 token），则获取用户信息
+ * 如果未登录访问系统相关路由，则重定向到首页
+ */
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore()
+  
+  // 只在首次路由跳转时初始化用户信息
+  if (!userInfoInitialized) {
+    userInfoInitialized = true
+    
+    const token = getToken()
+    if (token) {
+      try {
+        // 如果 store 中已标记为登录，则获取用户信息
+        if (userStore.isLoggedIn) {
+           userStore.fetchUserInfo()
+        } else {
+          // 如果有 token 但 store 中未标记为登录，可能是刷新页面
+          // 先标记为已登录，然后获取用户信息
+          userStore.isLoggedIn = true
+          userStore.fetchUserInfo()
+        }
+      } catch (error) {
+        console.error('初始化用户信息失败:', error)
+        // 不阻止路由跳转，继续执行
+      }
+    }
+  }
+  
+  // 检查访问系统相关路由时是否已登录
+  if (to.path.startsWith('/system')) {
+    // 等待 store 从本地存储恢复完成（最多等待500ms）
+    let waitCount = 0
+    while (!userStore.isHydrated && waitCount < 50) {
+      await new Promise(resolve => setTimeout(resolve, 10))
+      waitCount++
+    }
+    
+    // 如果未登录，重定向到首页
+    if (!userStore.isLoggedIn) {
+      next({ path: '/content-style/benchmark', replace: true })
+      return
+    }
+  }
+  
+  // 继续路由跳转
+  next()
+})
+
+export default router
+
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
 import { resolveId } from '@/utils/url'
 import { exportBenchmarkDataToExcel } from '@/utils/excel'
 import { usePromptStore } from '@/stores/prompt'
@@ -15,6 +16,7 @@ import BatchAnalyzeModal from './components/BatchAnalyzeModal.vue'
 import SavePromptModal from './components/SavePromptModal.vue'

 // ==================== 初始化 ====================
+const router = useRouter()
 const promptStore = usePromptStore()

 // ==================== 数据管理 ====================
@@ -207,7 +209,7 @@ function handleCopyBatchPrompt(prompt) {
 // ==================== 创作相关函数 ====================
 function handleCreateContent(row) {
  promptStore.setPrompt(row.prompt, row)
-  // 路由已移除
+  router.push('/content-style/copywriting')
 }

 function handleUseBatchPrompt(prompt) {
@@ -217,7 +219,7 @@ function handleUseBatchPrompt(prompt) {
  }
  
  promptStore.setPrompt(prompt, { batch: true })
-  // 路由已移除
+  router.push('/content-style/copywriting')
 }

 // ==================== 保存提示词到服务器 ====================