fix: 前端页面架构重构初版
This commit is contained in:
Gsh
@@ -5,19 +5,20 @@ import { ROUTER_WHITE_LIST } from '@/config';
|
||||
import { errorRouter, layoutRouter, staticRouter } from '@/routers/modules/staticRouter';
|
||||
import { useDesignStore, useUserStore } from '@/stores';
|
||||
|
||||
// 创建页面加载进度条，提升用户体验。
|
||||
const { start, done } = useNProgress(0, {
|
||||
showSpinner: false,
|
||||
trickleSpeed: 200,
|
||||
minimum: 0.3,
|
||||
easing: 'ease',
|
||||
speed: 500,
|
||||
showSpinner: false, // 不显示旋转器
|
||||
trickleSpeed: 200, // 进度条增长速度（毫秒）
|
||||
minimum: 0.3, // 最小进度值（30%）
|
||||
easing: 'ease', // 动画缓动函数
|
||||
speed: 500, // 动画速度
|
||||
});
|
||||
|
||||
// 创建路由实例
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [...layoutRouter, ...staticRouter, ...errorRouter],
|
||||
strict: false,
|
||||
scrollBehavior: () => ({ left: 0, top: 0 }),
|
||||
history: createWebHistory(), // 使用 HTML5 History 模式
|
||||
routes: [...layoutRouter, ...staticRouter, ...errorRouter], // 合并所有路由
|
||||
strict: false, // 不严格匹配尾部斜杠
|
||||
scrollBehavior: () => ({ left: 0, top: 0 }), // 路由切换时滚动到顶部
|
||||
});
|
||||
|
||||
// 路由前置守卫
|
||||
@@ -27,14 +28,16 @@ router.beforeEach(
|
||||
_from: RouteLocationNormalized,
|
||||
next: NavigationGuardNext,
|
||||
) => {
|
||||
// 1. 获取状态管理
|
||||
const userStore = useUserStore();
|
||||
const designStore = useDesignStore(); // 必须在守卫内部调用
|
||||
designStore._setLayout(to.meta?.layout || 'vertical');
|
||||
// 2. 设置布局（根据路由meta中的layout配置）
|
||||
designStore._setLayout(to.meta?.layout || 'default');
|
||||
|
||||
// 1、NProgress 开始
|
||||
// 3. 开始显示进度条
|
||||
start();
|
||||
|
||||
// 2、标题
|
||||
// 4. 设置页面标题
|
||||
document.title = (to.meta.title as string) || (import.meta.env.VITE_WEB_TITLE as string);
|
||||
|
||||
// 3、权限 预留
|
||||
@@ -52,16 +55,17 @@ router.beforeEach(
|
||||
// return next();
|
||||
// }
|
||||
// 4、判断访问页面是否在路由白名单地址[静态路由]中，如果存在直接放行。
|
||||
// 5. 白名单检查（跳过权限验证）
|
||||
if (ROUTER_WHITE_LIST.includes(to.path))
|
||||
return next();
|
||||
|
||||
// 5、判断是否有 Token，没有重定向到 login 页面。
|
||||
// 6. Token 检查（用户认证），没有重定向到 login 页面。
|
||||
if (!userStore.token)
|
||||
userStore.logout();
|
||||
|
||||
// 其余逻辑 预留...
|
||||
|
||||
// 6、正常访问页面。
|
||||
// 8. 放行路由
|
||||
next();
|
||||
},
|
||||
);
|
||||
|
||||
@@ -1,38 +1,72 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { HOME_URL } from '@/config';
|
||||
|
||||
// LayoutRouter[布局路由]
|
||||
export const layoutRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: HOME_URL,
|
||||
component: () => import('@/layouts/index.vue'),
|
||||
children: [
|
||||
// 将首页重定向逻辑放在这里
|
||||
{
|
||||
path: HOME_URL,
|
||||
path: '',
|
||||
redirect: '/chat/conversation',
|
||||
},
|
||||
|
||||
// chat 路由组 - 修正路径和重定向
|
||||
{
|
||||
path: 'chat',
|
||||
name: 'chat',
|
||||
component: () => import('@/pages/chat/index.vue'),
|
||||
meta: {
|
||||
// title: '通用聊天页面',
|
||||
isDefaultChat: true,
|
||||
title: 'AI聊天',
|
||||
icon: 'HomeFilled',
|
||||
// isHide: '1', // 是否在菜单中隐藏[0是，1否] 预留
|
||||
// isKeepAlive: '0', // 是否缓存路由数据[0是，1否] 预留
|
||||
// isFull: '1', // 是否全屏[0是，1否] 预留
|
||||
// enName: "Master Station", // 英文名称 预留
|
||||
},
|
||||
children: [
|
||||
// chat 根路径重定向到 conversation
|
||||
{
|
||||
path: '',
|
||||
redirect: '/chat/conversation',
|
||||
},
|
||||
{
|
||||
path: 'conversation',
|
||||
name: 'chatConversation',
|
||||
component: () => import('@/pages/chat/conversation/index.vue'),
|
||||
meta: {
|
||||
title: 'AI对话',
|
||||
isDefaultChat: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'conversation/:id',
|
||||
name: 'chatConversationWithId',
|
||||
component: () => import('@/pages/chat/conversation/index.vue'),
|
||||
meta: {
|
||||
title: 'AI对话',
|
||||
isDefaultChat: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'image',
|
||||
name: 'chatImage',
|
||||
component: () => import('@/pages/chat/image/index.vue'),
|
||||
meta: {
|
||||
title: '图片生成',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'video',
|
||||
name: 'chatVideo',
|
||||
component: () => import('@/pages/chat/video/index.vue'),
|
||||
meta: {
|
||||
title: '视频生成',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 产品页面
|
||||
{
|
||||
path: '/chat/:id',
|
||||
name: 'chatWithId',
|
||||
component: () => import('@/pages/chat/index.vue'),
|
||||
meta: {
|
||||
// title: '带 ID 的聊天页面',
|
||||
isDefaultChat: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/products',
|
||||
path: 'products',
|
||||
name: 'products',
|
||||
component: () => import('@/pages/products/index.vue'),
|
||||
meta: {
|
||||
@@ -41,33 +75,37 @@ export const layoutRouter: RouteRecordRaw[] = [
|
||||
isDefaultChat: false,
|
||||
layout: 'blankPage',
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// 模型库
|
||||
{
|
||||
path: '/model-library',
|
||||
path: 'model-library',
|
||||
name: 'modelLibrary',
|
||||
component: () => import('@/pages/modelLibrary/index.vue'),
|
||||
meta: {
|
||||
title: '模型库',
|
||||
keepAlive: 0,
|
||||
isDefaultChat: false,
|
||||
layout: 'blankPage',
|
||||
layout: 'default',
|
||||
},
|
||||
},
|
||||
|
||||
// 支付结果
|
||||
{
|
||||
path: '/pay-result',
|
||||
path: 'pay-result',
|
||||
name: 'payResult',
|
||||
component: () => import('@/pages/payResult/index.vue'),
|
||||
meta: {
|
||||
title: '支付结果',
|
||||
keepAlive: 0, // 如果需要缓存
|
||||
isDefaultChat: false, // 根据实际情况设置
|
||||
layout: 'blankPage', // 如果需要自定义布局
|
||||
keepAlive: 0,
|
||||
isDefaultChat: false,
|
||||
layout: 'blankPage',
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// 活动详情
|
||||
{
|
||||
path: '/activity/:id',
|
||||
path: 'activity/:id',
|
||||
name: 'activityDetail',
|
||||
component: () => import('@/pages/activity/detail.vue'),
|
||||
meta: {
|
||||
@@ -76,8 +114,10 @@ export const layoutRouter: RouteRecordRaw[] = [
|
||||
layout: 'blankPage',
|
||||
},
|
||||
},
|
||||
|
||||
// 公告详情
|
||||
{
|
||||
path: '/announcement/:id',
|
||||
path: 'announcement/:id',
|
||||
name: 'announcementDetail',
|
||||
component: () => import('@/pages/announcement/detail.vue'),
|
||||
meta: {
|
||||
@@ -86,11 +126,92 @@ export const layoutRouter: RouteRecordRaw[] = [
|
||||
layout: 'blankPage',
|
||||
},
|
||||
},
|
||||
|
||||
// 控制台路由组 - 修正路径和重定向
|
||||
{
|
||||
path: 'console',
|
||||
name: 'console',
|
||||
component: () => import('@/pages/console/index.vue'),
|
||||
meta: {
|
||||
title: '控制台',
|
||||
icon: 'Setting',
|
||||
layout: 'default',
|
||||
},
|
||||
children: [
|
||||
// console 根路径重定向到 user
|
||||
{
|
||||
path: '',
|
||||
redirect: '/console/user',
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
name: 'consoleUser',
|
||||
component: () => import('@/components/userPersonalCenter/components/UserManagement.vue'),
|
||||
meta: {
|
||||
title: '用户信息',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'apikey',
|
||||
name: 'consoleApikey',
|
||||
component: () => import('@/components/userPersonalCenter/components/APIKeyManagement.vue'),
|
||||
meta: {
|
||||
title: 'API密钥',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'recharge-log',
|
||||
name: 'consoleRechargeLog',
|
||||
component: () => import('@/components/userPersonalCenter/components/RechargeLog.vue'),
|
||||
meta: {
|
||||
title: '充值记录',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'usage',
|
||||
name: 'consoleUsage',
|
||||
component: () => import('@/components/userPersonalCenter/components/UsageStatistics.vue'),
|
||||
meta: {
|
||||
title: '用量统计',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'premium',
|
||||
name: 'consolePremium',
|
||||
component: () => import('@/components/userPersonalCenter/components/PremiumService.vue'),
|
||||
meta: {
|
||||
title: '尊享服务',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'daily-task',
|
||||
name: 'consoleDailyTask',
|
||||
component: () => import('@/components/userPersonalCenter/components/DailyTask.vue'),
|
||||
meta: {
|
||||
title: '每日任务',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'invite',
|
||||
name: 'consoleInvite',
|
||||
component: () => import('@/components/userPersonalCenter/components/CardFlipActivity.vue'),
|
||||
meta: {
|
||||
title: '每周邀请',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'activation',
|
||||
name: 'consoleActivation',
|
||||
component: () => import('@/components/userPersonalCenter/components/ActivationCode.vue'),
|
||||
meta: {
|
||||
title: '激活码兑换',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
// staticRouter[静态路由] 预留
|
||||
export const staticRouter: RouteRecordRaw[] = [];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user