- Replace percentage-based quota with point-based display in sidebar - Add visual progress bar for remaining quota with gradient styling - Implement upload progress tracking in material upload modal - Add loading indicators and progress information during file uploads - Prevent modal interaction while uploading by disabling close controls - Show current upload status including file index and completion percentage
183 lines
8.1 KiB
JavaScript
183 lines
8.1 KiB
JavaScript
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 navConfig = [
|
|
{
|
|
group: '功能',
|
|
order: 1,
|
|
items: [
|
|
{ name: '对标分析', path: 'content-style/benchmark', icon: 'grid', component: () => import('../views/content-style/Benchmark.vue') },
|
|
// { name: '文案创作', path: 'content-style/copywriting', icon: 'text', component: () => import('../views/content-style/Copywriting.vue') },
|
|
{ name: '热点趋势', path: 'trends/forecast', icon: 'text', component: () => import('../views/trends/Forecast.vue') },
|
|
{ name: '智能体', path: 'agents', icon: 'robot', component: () => import('../views/agents/Agents.vue') },
|
|
]
|
|
},
|
|
{
|
|
group: '数字人',
|
|
order: 2,
|
|
items: [
|
|
{ name: '数字人', path: 'digital-human/kling', icon: 'user', component: () => import('../views/kling/IdentifyFace.vue') },
|
|
{ name: '人声克隆', path: 'digital-human/voice-copy', icon: 'mic', component: () => import('../views/dh/VoiceCopy.vue') },
|
|
]
|
|
},
|
|
{
|
|
group: '素材库',
|
|
order: 3,
|
|
items: [
|
|
{ name: '素材列表', path: 'material/list', icon: 'grid', component: () => import('../views/material/MaterialListNew.vue') },
|
|
{ name: '智能混剪', path: 'material/mix', icon: 'scissors', component: () => import('../views/material/Mix.vue') },
|
|
{ name: '任务中心', path: 'system/task-management/:type', icon: 'video', component: () => import('../views/system/task-management/layout/TaskLayout.vue'), requiresAuth: true, params: { type: 'mix-task' } },
|
|
]
|
|
},
|
|
// {
|
|
// group: '系统',
|
|
// order: 4,
|
|
// requiresAuth: true,
|
|
// items: [
|
|
// { name: '风格设置', path: 'system/style-settings', icon: 'text', component: () => import('../views/system/style-settings/index.vue') },
|
|
// ]
|
|
// }
|
|
]
|
|
|
|
// 导航图标定义
|
|
const navIcons = {
|
|
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>',
|
|
robot: '<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="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>'
|
|
}
|
|
|
|
// ============ 辅助函数 ============
|
|
function findOrCreateParentRoute(routes, parentPath) {
|
|
let parentRoute = routes.find(r => r.path === parentPath)
|
|
if (!parentRoute) {
|
|
parentRoute = { path: parentPath, children: [], meta: {} }
|
|
routes.push(parentRoute)
|
|
}
|
|
return parentRoute
|
|
}
|
|
|
|
function addChildRoute(parentRoute, path, name, component, meta) {
|
|
parentRoute.children.push({ path, name, component, meta })
|
|
}
|
|
|
|
function setDefaultRedirect(parentRoute, redirectPath) {
|
|
if (!parentRoute.children.some(c => c.path === '')) {
|
|
parentRoute.children.unshift({ path: '', redirect: redirectPath })
|
|
}
|
|
}
|
|
|
|
// ============ 从导航配置生成路由 ============
|
|
function buildRoutesFromNav(config) {
|
|
const parentRoutes = []
|
|
|
|
config.forEach(group => {
|
|
group.items.forEach(item => {
|
|
const [parentPath, ...childSegments] = item.path.split('/')
|
|
const childPath = childSegments.join('/') || ''
|
|
const parentRoute = findOrCreateParentRoute(parentRoutes, parentPath)
|
|
|
|
parentRoute.meta.navGroup = group.group
|
|
parentRoute.meta.navGroupOrder = group.order
|
|
if (group.requiresAuth) {
|
|
parentRoute.meta.requiresAuth = true
|
|
}
|
|
|
|
addChildRoute(parentRoute, childPath, item.name, item.component, {
|
|
navIcon: item.icon,
|
|
navLabel: item.name,
|
|
requiresAuth: item.requiresAuth
|
|
})
|
|
|
|
setDefaultRedirect(parentRoute, `/${item.path}`)
|
|
})
|
|
})
|
|
|
|
const hiddenRoutes = [
|
|
{ path: 'trends/heat', name: '热度分析', component: () => import('../views/trends/Heat.vue'), meta: { hidden: true } },
|
|
{ path: 'material/group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue'), meta: { hidden: true } },
|
|
{ path: 'user/profile', name: '个人中心', component: () => import('../views/user/Profile.vue'), meta: { hidden: true } }
|
|
]
|
|
|
|
hiddenRoutes.forEach(route => {
|
|
const [parentPath, childPath] = route.path.split('/')
|
|
const parentRoute = findOrCreateParentRoute(parentRoutes, parentPath)
|
|
addChildRoute(parentRoute, childPath, route.name, route.component, route.meta)
|
|
})
|
|
|
|
return parentRoutes
|
|
}
|
|
|
|
const routes = [
|
|
// 登录页面
|
|
{
|
|
path: '/login',
|
|
name: '登录',
|
|
component: () => import('../views/auth/Login.vue'),
|
|
meta: { requiresAuth: false }
|
|
},
|
|
// 主布局
|
|
{
|
|
path: '/',
|
|
component: MainLayout,
|
|
redirect: '/content-style/benchmark',
|
|
children: buildRoutesFromNav(navConfig),
|
|
meta: { requiresAuth: true }
|
|
},
|
|
]
|
|
|
|
// 导出配置供 SidebarNav 使用
|
|
export { navConfig, navIcons }
|
|
|
|
const router = createRouter({
|
|
history: createWebHistory(import.meta.env.BASE_URL),
|
|
routes,
|
|
})
|
|
|
|
// 白名单路由(无需登录)
|
|
const WHITE_LIST = ['/login']
|
|
|
|
// 路由守卫
|
|
router.beforeEach(async (to, from, next) => {
|
|
const userStore = useUserStore()
|
|
const token = tokenManager.getAccessToken()
|
|
|
|
// 1. 白名单路由直接放行
|
|
if (WHITE_LIST.includes(to.path)) {
|
|
// 已登录访问登录页 → 跳转首页
|
|
if (token) {
|
|
next({ path: '/', replace: true })
|
|
return
|
|
}
|
|
next()
|
|
return
|
|
}
|
|
|
|
// 2. 非白名单路由,必须有 token
|
|
if (!token) {
|
|
next({ path: '/login', query: { redirect: to.fullPath } })
|
|
return
|
|
}
|
|
|
|
// 3. 有 token 但未加载用户信息 → 加载
|
|
if (!userStore.isLoggedIn) {
|
|
await userStore.fetchUserInfo()
|
|
}
|
|
|
|
// 4. 路由切换时更新用户额度
|
|
userStore.fetchUserProfile()
|
|
|
|
next()
|
|
})
|
|
|
|
export default router
|