refactor(projects): 路由文件夹拆分模块，代码重构

package.json

@@ -19,25 +19,25 @@
   },
   "dependencies": {
     "@vueuse/core": "^6.5.3",
-    "axios": "^0.21.4",
+    "axios": "^0.22.0",
     "chroma-js": "^2.1.2",
     "dayjs": "^1.10.7",
     "form-data": "^4.0.0",
     "naive-ui": "^2.19.3",
-    "pinia": "^2.0.0-rc.4",
+    "pinia": "^2.0.0-rc.12",
     "qs": "^6.10.1",
-    "vue": "^3.2.10",
+    "vue": "^3.2.20",
     "vue-router": "^4.0.11"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.2.0",
+    "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
-    "@iconify/json": "^1.1.407",
+    "@iconify/json": "^1.1.412",
     "@iconify/vue": "^3.0.0",
     "@types/chroma-js": "^2.1.3",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@vicons/antd": "^0.11.0",
     "@vicons/carbon": "^0.11.0",
     "@vicons/fa": "^0.11.0",
@@ -46,8 +46,8 @@
     "@vicons/ionicons5": "^0.11.0",
     "@vicons/material": "^0.11.0",
     "@vicons/tabler": "^0.11.0",
-    "@vitejs/plugin-vue": "^1.9.2",
-    "@vue/compiler-sfc": "^3.2.19",
+    "@vitejs/plugin-vue": "^1.9.3",
+    "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "commitizen": "^4.2.4",
@@ -59,22 +59,22 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-plugin-vue": "^7.19.1",
     "husky": "^7.0.2",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^11.2.3",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.4.1",
     "sass": "^1.42.1",
     "typescript": "^4.4.3",
-    "unplugin-icons": "^0.11.4",
-    "unplugin-vue-components": "^0.15.4",
-    "vite": "^2.5.10",
+    "unplugin-icons": "^0.12.12",
+    "unplugin-vue-components": "^0.15.6",
+    "vite": "^2.6.5",
     "vite-plugin-html": "^2.1.1",
-    "vite-plugin-windicss": "^1.4.8",
-    "vue-tsc": "^0.3.0",
-    "vueuc": "^0.4.12",
-    "windicss": "^3.1.8"
+    "vite-plugin-windicss": "^1.4.10",
+    "vue-tsc": "^0.28.2",
+    "vueuc": "^0.4.13",
+    "windicss": "^3.1.9"
   },
   "config": {
     "commitizen": {

src/components/custom/ChromeTab/components/SvgRadiusBg.vue

@@ -51,12 +51,12 @@ const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
 const fill = computed(() => {
   const index = Number(props.darkMode);
   let color = defaultColor[index];
-  if (props.isActive) {
-    color = activeColor[index];
-  }
   if (props.isHover) {
     color = hoverColor[index];
   }
+  if (props.isActive) {
+    color = activeColor[index];
+  }
   return color;
 });
 </script>

src/enum/route.ts

@@ -8,15 +8,15 @@ export enum EnumRoutePath {
   'reload' = '/reload',
   // 自定义路由
   'dashboard' = '/dashboard',
-  'dashboard-analysis' = '/dashboard/analysis',
-  'dashboard-workbench' = '/dashboard/workbench',
-  'multimenu' = '/multimenu',
-  'multimenu-first' = '/multimenu/first',
-  'multimenu-first-second' = '/multimenu/first/second',
+  'dashboard_analysis' = '/dashboard/analysis',
+  'dashboard_workbench' = '/dashboard/workbench',
+  'multi-menu' = '/multi-menu',
+  'multi-menu_first' = '/multi-menu/first',
+  'multi-menu_first_second' = '/multi-menu/first/second',
   'exception' = '/exception',
-  'exception-403' = '/exception/403',
-  'exception-404' = '/exception/404',
-  'exception-500' = '/exception/500'
+  'exception_403' = '/exception/403',
+  'exception_404' = '/exception/404',
+  'exception_500' = '/exception/500'
 }
 
 export enum EnumRouteTitle {
@@ -29,13 +29,13 @@ export enum EnumRouteTitle {
   'reload' = '重载',
   // 自定义路由
   'dashboard' = '仪表盘',
-  'dashboard-analysis' = '分析页',
-  'dashboard-workbench' = '工作台',
-  'multimenu' = '多级菜单',
-  'multimenu-first' = '一级菜单',
-  'multimenu-first-second' = '二级菜单',
+  'dashboard_analysis' = '分析页',
+  'dashboard_workbench' = '工作台',
+  'multi-menu' = '多级菜单',
+  'multi-menu_first' = '一级菜单',
+  'multi-menu_first_second' = '二级菜单',
   'exception' = '异常页',
-  'exception-403' = '异常页-403',
-  'exception-404' = '异常页-404',
-  'exception-500' = '异常页-500'
+  'exception_403' = '异常页-403',
+  'exception_404' = '异常页-404',
+  'exception_500' = '异常页-500'
 }

src/layouts/index.ts

@@ -1,5 +1,5 @@
 import BasicLayout from './BasicLayout/index.vue';
+import BasicChildLayout from './BasicChildLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
-import MultiMenuLayout from './MultiMenuLayout/index.vue';
 
-export { BasicLayout, BlankLayout, MultiMenuLayout };
+export { BasicLayout, BasicChildLayout, BlankLayout };

src/router/components/index.ts

@@ -1,28 +1,26 @@
-import { getRouteNameMap, setCacheName } from './helpers';
+import { RouteNameMap, setCacheName } from '../helpers';
 import Login from '@/views/system/login/index.vue';
 import NoPermission from '@/views/system/exception/403.vue';
 import NotFound from '@/views/system/exception/404.vue';
 import ServiceError from '@/views/system/exception/500.vue';
 import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
 import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
-import MultimenuFirstSecond from '@/views/multimenu/first/second/index.vue';
+import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
 
 const Exception403 = { ...NoPermission };
 const Exception404 = { ...NotFound };
 const Exception500 = { ...ServiceError };
 
-const RouteNameMap = getRouteNameMap();
-
 setCacheName(Login, RouteNameMap.get('login'));
 setCacheName(NoPermission, RouteNameMap.get('no-permission'));
 setCacheName(NotFound, RouteNameMap.get('not-found'));
 setCacheName(ServiceError, RouteNameMap.get('service-error'));
-setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard-analysis'));
-setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard-workbench'));
-setCacheName(MultimenuFirstSecond, RouteNameMap.get('multimenu-first-second'));
-setCacheName(Exception404, RouteNameMap.get('exception-404'));
-setCacheName(Exception403, RouteNameMap.get('exception-403'));
-setCacheName(Exception500, RouteNameMap.get('exception-500'));
+setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard_analysis'));
+setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard_workbench'));
+setCacheName(MultiMenuFirstSecond, RouteNameMap.get('multi-menu_first_second'));
+setCacheName(Exception404, RouteNameMap.get('exception_404'));
+setCacheName(Exception403, RouteNameMap.get('exception_403'));
+setCacheName(Exception500, RouteNameMap.get('exception_500'));
 
 export {
   Login,
@@ -34,5 +32,5 @@ export {
   Exception403,
   Exception404,
   Exception500,
-  MultimenuFirstSecond
+  MultiMenuFirstSecond
 };

src/router/helpers/cache.ts

@@ -1,14 +1,4 @@
 import type { RouteRecordRaw } from 'vue-router';
-import { routes } from './routes';
-
-function getCacheRoutes() {
-  const cacheNames: string[] = [];
-  routes.forEach(route => {
-    const isCache = isKeepAlive(route);
-    cacheNames.push(...getCacheName(route, isCache));
-  });
-  return cacheNames;
-}
 
 function getCacheName(route: RouteRecordRaw, isCache: boolean) {
   const cacheNames: string[] = [];
@@ -34,5 +24,12 @@ function hasChildren(route: RouteRecordRaw) {
   return Boolean(route.children && route.children.length);
 }
 
-/** 被缓存的路由 */
-export const cacheRoutes = getCacheRoutes();
+/** 获取被缓存的路由 */
+export default function getCacheRoutes(routes: RouteRecordRaw[]) {
+  const cacheNames: string[] = [];
+  routes.forEach(route => {
+    const isCache = isKeepAlive(route);
+    cacheNames.push(...getCacheName(route, isCache));
+  });
+  return cacheNames;
+}

src/router/helpers/index.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+import { getLoginModuleRegExp, getRouteNameMap } from '@/utils';
+import getCacheRoutes from './cache';
+import transformRouteToMenu from './menus';
+
+/** 给需要缓存的页面组件设置名称 */
+export function setCacheName(component: Component, name?: string) {
+  if (name) {
+    Object.assign(component, { name });
+  }
+}
+
+/** 路由name map */
+export const RouteNameMap = getRouteNameMap();
+
+/** 登录模块的正则字符串 */
+export const loginModuleRegExp = getLoginModuleRegExp();
+
+export { getCacheRoutes, transformRouteToMenu };

src/router/helpers/menus.ts

@@ -1,9 +1,25 @@
 import type { Component } from 'vue';
-import { customRoutes } from './routes';
 import type { CustomRoute, GlobalMenuOption } from '@/interface';
 import { dynamicIconRender } from '@/utils';
 
-function transformRouteToMenu(routes: CustomRoute[]) {
+/** 判断路由是否作为菜单 */
+function asMenu(route: CustomRoute) {
+  return !route.meta?.isNotMenu;
+}
+
+/** 给菜单添加可选属性 */
+function addPartialProps(menuItem: GlobalMenuOption, icon?: Component, children?: GlobalMenuOption[]) {
+  const item = { ...menuItem };
+  if (icon) {
+    Object.assign(item, { icon: dynamicIconRender(icon) });
+  }
+  if (children) {
+    Object.assign(item, { children });
+  }
+  return item;
+}
+
+export default function transformRouteToMenu(routes: CustomRoute[]) {
   const globalMenu: GlobalMenuOption[] = [];
   routes.forEach(route => {
     if (asMenu(route)) {
@@ -28,22 +44,3 @@ function transformRouteToMenu(routes: CustomRoute[]) {
   });
   return globalMenu;
 }
-
-/** 判断路由是否作为菜单 */
-function asMenu(route: CustomRoute) {
-  return !route.meta?.isNotMenu;
-}
-
-/** 给菜单添加可选属性 */
-function addPartialProps(menuItem: GlobalMenuOption, icon?: Component, children?: GlobalMenuOption[]) {
-  const item = { ...menuItem };
-  if (icon) {
-    Object.assign(item, { icon: dynamicIconRender(icon) });
-  }
-  if (children) {
-    Object.assign(item, { children });
-  }
-  return item;
-}
-
-export const menus = transformRouteToMenu(customRoutes);

src/router/index.ts

@@ -1,4 +1,9 @@
+import { getCacheRoutes, transformRouteToMenu } from './helpers';
+import { customRoutes, routes } from './routes';
+
 export { router, setupRouter } from './setup';
-export { RouteNameMap, ROUTE_HOME, customRoutes } from './routes';
-export { menus } from './menus';
-export { cacheRoutes } from './cache';
+export { ROUTE_HOME, customRoutes, routes } from './routes';
+export { RouteNameMap } from './helpers';
+
+export const cacheRoutes = getCacheRoutes(routes);
+export const menus = transformRouteToMenu(customRoutes);

src/router/modules/dashboard.ts

@@ -0,0 +1,33 @@
+import { Dashboard } from '@vicons/carbon';
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { BasicLayout } from '@/layouts';
+import { RouteNameMap } from '../helpers';
+import { DashboardWorkbench } from '../components';
+import { ROUTE_HOME } from '../routes';
+
+const DASHBOARD: CustomRoute = {
+  name: RouteNameMap.get('dashboard'),
+  path: EnumRoutePath.dashboard,
+  component: BasicLayout,
+  redirect: { name: RouteNameMap.get('dashboard_analysis') },
+  meta: {
+    title: EnumRouteTitle.dashboard,
+    icon: Dashboard
+  },
+  children: [
+    ROUTE_HOME,
+    {
+      name: RouteNameMap.get('dashboard_workbench'),
+      path: EnumRoutePath.dashboard_workbench,
+      component: DashboardWorkbench,
+      meta: {
+        keepAlive: true,
+        requiresAuth: true,
+        title: EnumRouteTitle.dashboard_workbench
+      }
+    }
+  ]
+};
+
+export default DASHBOARD;

src/router/modules/exception.ts

@@ -0,0 +1,52 @@
+import { ExceptionOutlined } from '@vicons/antd';
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { BasicLayout } from '@/layouts';
+import { RouteNameMap } from '../helpers';
+import { Exception403, Exception404, Exception500 } from '../components';
+
+const EXCEPTION: CustomRoute = {
+  name: RouteNameMap.get('exception'),
+  path: EnumRoutePath.exception,
+  component: BasicLayout,
+  redirect: { name: RouteNameMap.get('exception_403') },
+  meta: {
+    requiresAuth: true,
+    title: EnumRouteTitle.exception,
+    icon: ExceptionOutlined
+  },
+  children: [
+    {
+      name: RouteNameMap.get('exception_403'),
+      path: EnumRoutePath.exception_403,
+      component: Exception403,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.exception_403,
+        fullPage: true
+      }
+    },
+    {
+      name: RouteNameMap.get('exception_404'),
+      path: EnumRoutePath.exception_404,
+      component: Exception404,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.exception_404,
+        fullPage: true
+      }
+    },
+    {
+      name: RouteNameMap.get('exception_500'),
+      path: EnumRoutePath.exception_500,
+      component: Exception500,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.exception_500,
+        fullPage: true
+      }
+    }
+  ]
+};
+
+export default EXCEPTION;

src/router/modules/index.ts

@@ -0,0 +1,6 @@
+import ROOT from './root';
+import DASHBOARD from './dashboard';
+import EXCEPTION from './exception';
+import MULTI_MENU from './multiMenu';
+
+export default [ROOT, DASHBOARD, EXCEPTION, MULTI_MENU];

src/router/modules/multiMenu.ts

@@ -0,0 +1,44 @@
+import { Menu } from '@vicons/carbon';
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { BasicLayout, BasicChildLayout } from '@/layouts';
+import { RouteNameMap } from '../helpers';
+import { MultiMenuFirstSecond } from '../components';
+
+const MULTI_MENU: CustomRoute = {
+  name: RouteNameMap.get('multi-menu'),
+  path: EnumRoutePath['multi-menu'],
+  component: BasicLayout,
+  redirect: { name: RouteNameMap.get('multi-menu_first') },
+  meta: {
+    title: EnumRouteTitle['multi-menu'],
+    icon: Menu
+  },
+  children: [
+    {
+      name: RouteNameMap.get('multi-menu_first'),
+      path: EnumRoutePath['multi-menu_first'],
+      component: BasicChildLayout,
+      redirect: { name: RouteNameMap.get('multi-menu_first_second') },
+      meta: {
+        keepAlive: true,
+        requiresAuth: true,
+        title: EnumRouteTitle['multi-menu_first']
+      },
+      children: [
+        {
+          name: RouteNameMap.get('multi-menu_first_second'),
+          path: EnumRoutePath['multi-menu_first_second'],
+          component: MultiMenuFirstSecond,
+          meta: {
+            keepAlive: true,
+            requiresAuth: true,
+            title: EnumRouteTitle['multi-menu_first_second']
+          }
+        }
+      ]
+    }
+  ]
+};
+
+export default MULTI_MENU;

src/router/modules/root.ts

@@ -0,0 +1,17 @@
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath } from '@/enum';
+import { BasicLayout } from '@/layouts';
+import { RouteNameMap } from '../helpers';
+import { ROUTE_HOME } from '../routes';
+
+const ROOT: CustomRoute = {
+  name: RouteNameMap.get('root'),
+  path: EnumRoutePath.root,
+  component: BasicLayout,
+  redirect: { name: ROUTE_HOME.name },
+  meta: {
+    isNotMenu: true
+  }
+};
+
+export default ROOT;

src/router/permission/index.ts

@@ -1,7 +1,7 @@
 import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { useTitle } from '@vueuse/core';
 import { getToken } from '@/utils';
-import { RouteNameMap } from './routes';
+import { RouteNameMap } from '../helpers';
 
 /**
  * 路由守卫函数

src/router/routes.ts

@@ -1,227 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-import { Dashboard, Menu } from '@vicons/carbon';
-import { ExceptionOutlined } from '@vicons/antd';
-import { BasicLayout, BlankLayout, MultiMenuLayout } from '@/layouts';
-import { EnumRoutePath, EnumRouteTitle } from '@/enum';
-import type { CustomRoute, LoginModuleType } from '@/interface';
-import { getLoginModuleRegExp } from '@/utils';
-import {
-  Login,
-  NoPermission,
-  NotFound,
-  ServiceError,
-  DashboardAnalysis,
-  DashboardWorkbench,
-  MultimenuFirstSecond,
-  Exception403,
-  Exception404,
-  Exception500
-} from './components';
-import { getRouteNameMap } from './helpers';
-
-/** 路由名称 */
-export const RouteNameMap = getRouteNameMap();
-
-/** 登录模块的正则字符串 */
-const loginModuleRegExp = getLoginModuleRegExp();
-
-/**
- * 固定不变的路由
- * @description !最后一项重定向未找到的路由须放置路由的最后一项
- */
-const constantRoutes: RouteRecordRaw[] = [
-  {
-    name: RouteNameMap.get('system'),
-    path: EnumRoutePath.system,
-    component: BlankLayout,
-    redirect: { name: RouteNameMap.get('not-found') },
-    meta: {
-      keepAlive: true,
-      title: EnumRouteTitle.system
-    },
-    children: [
-      // 登录
-      {
-        name: RouteNameMap.get('login'),
-        path: `${EnumRoutePath.login}/:module(/${loginModuleRegExp}/)?`,
-        component: Login,
-        props: route => {
-          const moduleType: LoginModuleType = (route.params.module as LoginModuleType) || 'pwd-login';
-          return {
-            module: moduleType
-          };
-        },
-        meta: {
-          title: EnumRouteTitle.login,
-          fullPage: true
-        }
-      },
-      // 403
-      {
-        name: RouteNameMap.get('no-permission'),
-        path: EnumRoutePath['no-permission'],
-        component: NoPermission,
-        meta: {
-          title: EnumRouteTitle['no-permission'],
-          fullPage: true
-        }
-      },
-      // 404
-      {
-        name: RouteNameMap.get('not-found'),
-        path: EnumRoutePath['not-found'],
-        component: NotFound,
-        meta: {
-          title: EnumRouteTitle['not-found'],
-          fullPage: true
-        }
-      },
-      // 500
-      {
-        name: RouteNameMap.get('service-error'),
-        path: EnumRoutePath['service-error'],
-        component: ServiceError,
-        meta: {
-          title: EnumRouteTitle['service-error'],
-          fullPage: true
-        }
-      }
-    ]
-  },
-  // 匹配无效的路径重定向404
-  {
-    path: '/:pathMatch(.*)*',
-    redirect: { name: 'not-found' }
-  }
-];
-
-/** 路由首页 */
-export const ROUTE_HOME: CustomRoute = {
-  name: RouteNameMap.get('dashboard-analysis'),
-  path: EnumRoutePath['dashboard-analysis'],
-  component: DashboardAnalysis,
-  meta: {
-    keepAlive: true,
-    requiresAuth: true,
-    title: EnumRouteTitle['dashboard-analysis']
-  }
-};
-
-/**
- * 自定义路由
- */
-export const customRoutes: CustomRoute[] = [
-  {
-    name: RouteNameMap.get('root'),
-    path: EnumRoutePath.root,
-    component: BasicLayout,
-    redirect: { name: ROUTE_HOME.name },
-    meta: {
-      isNotMenu: true
-    }
-  },
-  {
-    name: RouteNameMap.get('dashboard'),
-    path: EnumRoutePath.dashboard,
-    component: BasicLayout,
-    redirect: { name: RouteNameMap.get('dashboard-analysis') },
-    meta: {
-      title: EnumRouteTitle.dashboard,
-      icon: Dashboard
-    },
-    children: [
-      ROUTE_HOME,
-      {
-        name: RouteNameMap.get('dashboard-workbench'),
-        path: EnumRoutePath['dashboard-workbench'],
-        component: DashboardWorkbench,
-        meta: {
-          keepAlive: true,
-          requiresAuth: true,
-          title: EnumRouteTitle['dashboard-workbench']
-        }
-      }
-    ]
-  },
-  {
-    name: RouteNameMap.get('exception'),
-    path: EnumRoutePath.exception,
-    component: BasicLayout,
-    redirect: { name: RouteNameMap.get('exception-403') },
-    meta: {
-      requiresAuth: true,
-      title: EnumRouteTitle.exception,
-      icon: ExceptionOutlined
-    },
-    children: [
-      {
-        name: RouteNameMap.get('exception-403'),
-        path: EnumRoutePath['exception-403'],
-        component: Exception403,
-        meta: {
-          requiresAuth: true,
-          title: EnumRouteTitle['exception-403'],
-          fullPage: true
-        }
-      },
-      {
-        name: RouteNameMap.get('exception-404'),
-        path: EnumRoutePath['exception-404'],
-        component: Exception404,
-        meta: {
-          requiresAuth: true,
-          title: EnumRouteTitle['exception-404'],
-          fullPage: true
-        }
-      },
-      {
-        name: RouteNameMap.get('exception-500'),
-        path: EnumRoutePath['exception-500'],
-        component: Exception500,
-        meta: {
-          requiresAuth: true,
-          title: EnumRouteTitle['exception-500'],
-          fullPage: true
-        }
-      }
-    ]
-  },
-  {
-    name: RouteNameMap.get('multimenu'),
-    path: EnumRoutePath.multimenu,
-    component: BasicLayout,
-    redirect: { name: RouteNameMap.get('multimenu-first') },
-    meta: {
-      title: EnumRouteTitle.multimenu,
-      icon: Menu
-    },
-    children: [
-      {
-        name: RouteNameMap.get('multimenu-first'),
-        path: EnumRoutePath['multimenu-first'],
-        component: MultiMenuLayout,
-        redirect: { name: RouteNameMap.get('multimenu-first-second') },
-        meta: {
-          keepAlive: true,
-          requiresAuth: true,
-          title: EnumRouteTitle['multimenu-first']
-        },
-        children: [
-          {
-            name: RouteNameMap.get('multimenu-first-second'),
-            path: EnumRoutePath['multimenu-first-second'],
-            component: MultimenuFirstSecond,
-            meta: {
-              keepAlive: true,
-              requiresAuth: true,
-              title: EnumRouteTitle['multimenu-first-second']
-            }
-          }
-        ]
-      }
-    ]
-  }
-];
-
-/** 所有路由 */
-export const routes: RouteRecordRaw[] = [...customRoutes, ...constantRoutes];

src/router/routes/constant.ts

@@ -0,0 +1,78 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { BlankLayout } from '@/layouts';
+import type { LoginModuleType } from '@/interface';
+import { RouteNameMap, loginModuleRegExp } from '../helpers';
+import { Login, NoPermission, NotFound, ServiceError } from '../components';
+
+/**
+ * 固定不变的路由
+ * @description !最后一项重定向未找到的路由须放置路由的最后一项
+ */
+const constantRoutes: RouteRecordRaw[] = [
+  {
+    name: RouteNameMap.get('system'),
+    path: EnumRoutePath.system,
+    component: BlankLayout,
+    redirect: { name: RouteNameMap.get('not-found') },
+    meta: {
+      keepAlive: true,
+      title: EnumRouteTitle.system
+    },
+    children: [
+      // 登录
+      {
+        name: RouteNameMap.get('login'),
+        path: `${EnumRoutePath.login}/:module(/${loginModuleRegExp}/)?`,
+        component: Login,
+        props: route => {
+          const moduleType: LoginModuleType = (route.params.module as LoginModuleType) || 'pwd-login';
+          return {
+            module: moduleType
+          };
+        },
+        meta: {
+          title: EnumRouteTitle.login,
+          fullPage: true
+        }
+      },
+      // 403
+      {
+        name: RouteNameMap.get('no-permission'),
+        path: EnumRoutePath['no-permission'],
+        component: NoPermission,
+        meta: {
+          title: EnumRouteTitle['no-permission'],
+          fullPage: true
+        }
+      },
+      // 404
+      {
+        name: RouteNameMap.get('not-found'),
+        path: EnumRoutePath['not-found'],
+        component: NotFound,
+        meta: {
+          title: EnumRouteTitle['not-found'],
+          fullPage: true
+        }
+      },
+      // 500
+      {
+        name: RouteNameMap.get('service-error'),
+        path: EnumRoutePath['service-error'],
+        component: ServiceError,
+        meta: {
+          title: EnumRouteTitle['service-error'],
+          fullPage: true
+        }
+      }
+    ]
+  },
+  // 匹配无效的路径重定向404
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: { name: 'not-found' }
+  }
+];
+
+export default constantRoutes;

src/router/routes/index.ts

@@ -0,0 +1,9 @@
+import type { RouteRecordRaw } from 'vue-router';
+import ROUTE_HOME from './routeHome';
+import customRoutes from '../modules';
+import constantRoutes from './constant';
+
+/** 所有路由 */
+export const routes: RouteRecordRaw[] = [...customRoutes, ...constantRoutes];
+
+export { ROUTE_HOME, customRoutes };

src/router/routes/routeHome.ts

@@ -0,0 +1,18 @@
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { RouteNameMap } from '../helpers';
+import { DashboardAnalysis } from '../components';
+
+/** 路由首页 */
+const ROUTE_HOME: CustomRoute = {
+  name: RouteNameMap.get('dashboard_analysis'),
+  path: EnumRoutePath.dashboard_analysis,
+  component: DashboardAnalysis,
+  meta: {
+    keepAlive: true,
+    requiresAuth: true,
+    title: EnumRouteTitle.dashboard_analysis
+  }
+};
+
+export default ROUTE_HOME;

src/router/setup/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
 import type { App } from 'vue';
-import { routes } from './routes';
-import createRouterGuide from './permission';
+import { routes } from '../routes';
+import createRouterGuide from '../permission';
 
 /** 用于部署vercel托管服务 */
 const isStaging = import.meta.env.VITE_HTTP_ENV === 'STAGING';

src/utils/index.ts

@@ -36,3 +36,5 @@ export {
   removeSession,
   clearSession
 } from './storage';
+
+export { getRouteNameMap, setRouterCacheName } from './router';

src/utils/router/index.ts

@@ -8,7 +8,7 @@ export function getRouteNameMap() {
 }
 
 /** 给需要缓存的页面组件设置名称 */
-export function setCacheName(component: Component, name?: string) {
+export function setRouterCacheName(component: Component, name?: string) {
   if (name) {
     Object.assign(component, { name });
   }