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

refactor: 抽离独立Layout，实现路由分层

Browse Source 
优化内容：
1. 新增 MainLayout.vue 独立布局组件
   - 封装 TopNav、SidebarNav、主内容区域
   - 独立的页面脚注

2. 简化 App.vue
   - 只负责主题配置和SvgSprite
   - 只渲染 RouterView
   - 移除所有布局相关代码

3. 重构路由配置
   - 登录页 /login：独立渲染，不使用Layout
   - 根路由 /：使用 MainLayout，渲染所有需要布局的页面
   - 所有业务页面都作为根路由的子路由嵌套渲染

架构优势：
- 登录页独立，不受主布局影响
- 主布局统一管理，减少重复代码
- 路由结构清晰，易于维护
- 符合Vue最佳实践

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
sion123
2025-11-25 01:24:12 +08:00
parent 36fb09feb6
commit 31f01085a9
3 changed files with 114 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/app/web-gold/src/router/index.js
View File

@@ -1,13 +1,10 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
import tokenManager from '@gold/utils/token-manager'
import MainLayout from '@/layouts/MainLayout.vue'
const routes = [
{
path: '/',
redirect: '/content-style/benchmark'
},
// 登录页面
// 登录页面 - 独立渲染，不使用Layout
{
path: '/login',
name: '登录',
@@ -16,62 +13,72 @@ const routes = [
requiresAuth: false
}
},
// { path: '/home', name: '首页', component: () => import('../views/home/Home.vue') },
// 主布局路由 - 所有需要Layout的页面都在这里
{
path: '/content-style',
name: '内容风格分析',
path: '/',
component: MainLayout,
redirect: '/content-style/benchmark',
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: 'mix-task', name: '混剪任务', component: () => import('../views/material/MixTaskList.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: '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: 'mix-task', name: '混剪任务', component: () => import('../views/material/MixTaskList.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') },
],
meta: {
requiresAuth: true
}
},
{ path: 'realtime-hot', name: '实时热点推送', component: () => import('../views/realtime/RealtimeHot.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') },
],
meta: {
requiresAuth: true
}
},
{ path: '/realtime-hot', name: '实时热点推送', component: () => import('../views/realtime/RealtimeHot.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({