fix: 前端页面架构重构初版

Yi.Ai.Vue3/src/routers/index.ts

@@ -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();
   },
 );