feat(projects): new router system [新的路由系统]

src/store/modules/route/index.ts

@@ -7,12 +7,11 @@ import {
   getConstantRouteNames,
   getUserInfo,
   transformAuthRouteToMenu,
-  transformAuthRouteToVueRoute,
-  transformAuthRoutesToSearchMenus,
-  transformAuthRoutesToVueRoutes,
+  transformAuthRouteToSearchMenus,
   transformRouteNameToRoutePath,
   transformRoutePathToRouteName
 } from '@/utils';
+import { transformAuthRouteToVueRoutes, transformAuthRouteToVueRoute } from '@/utils/router/transform';
 import { useAuthStore } from '../auth';
 import { useTabStore } from '../tab';
 
@@ -26,9 +25,9 @@ interface RouteState {
   /** 是否初始化了权限路由 */
   isInitAuthRoute: boolean;
   /** 路由首页name(前端静态路由时生效，后端动态路由该值会被后端返回的值覆盖) */
-  routeHomeName: AuthRoute.RouteKey;
+  routeHomeName: AuthRoute.AllRouteKey;
   /** 菜单 */
-  menus: GlobalMenuOption[];
+  menus: App.GlobalMenuOption[];
   /** 搜索的菜单 */
   searchMenus: AuthRoute.Route[];
   /** 缓存的路由名称 */
@@ -54,7 +53,7 @@ export const useRouteStore = defineStore('route-store', {
     resetRoutes() {
       const routes = router.getRoutes();
       routes.forEach(route => {
-        const name: AuthRoute.RouteKey = (route.name || 'root') as AuthRoute.RouteKey;
+        const name = (route.name || 'root') as AuthRoute.AllRouteKey;
         if (!this.isConstantRoute(name)) {
           router.removeRoute(name);
         }
@@ -64,7 +63,7 @@ export const useRouteStore = defineStore('route-store', {
      * 是否是固定路由
      * @param name 路由名称
      */
-    isConstantRoute(name: AuthRoute.RouteKey) {
+    isConstantRoute(name: AuthRoute.AllRouteKey) {
       const constantRouteNames = getConstantRouteNames(constantRoutes);
       return constantRouteNames.includes(name);
     },
@@ -72,8 +71,8 @@ export const useRouteStore = defineStore('route-store', {
      * 是否是有效的固定路由
      * @param name 路由名称
      */
-    isValidConstantRoute(name: AuthRoute.RouteKey) {
-      const NOT_FOUND_PAGE_NAME: AuthRoute.RouteKey = 'not-found-page';
+    isValidConstantRoute(name: AuthRoute.AllRouteKey) {
+      const NOT_FOUND_PAGE_NAME: AuthRoute.NotFoundRouteKey = 'not-found';
       const constantRouteNames = getConstantRouteNames(constantRoutes);
       return constantRouteNames.includes(name) && name !== NOT_FOUND_PAGE_NAME;
     },
@@ -81,11 +80,11 @@ export const useRouteStore = defineStore('route-store', {
      * 处理权限路由
      * @param routes - 权限路由
      */
-    handleAuthRoutes(routes: AuthRoute.Route[]) {
-      (this.menus as GlobalMenuOption[]) = transformAuthRouteToMenu(routes);
-      this.searchMenus = transformAuthRoutesToSearchMenus(routes);
+    handleAuthRoute(routes: AuthRoute.Route[]) {
+      (this.menus as App.GlobalMenuOption[]) = transformAuthRouteToMenu(routes);
+      this.searchMenus = transformAuthRouteToSearchMenus(routes);
 
-      const vueRoutes = transformAuthRoutesToVueRoutes(routes);
+      const vueRoutes = transformAuthRouteToVueRoutes(routes);
 
       vueRoutes.forEach(route => {
         router.addRoute(route);
@@ -94,12 +93,12 @@ export const useRouteStore = defineStore('route-store', {
       this.cacheRoutes = getCacheRoutes(vueRoutes);
     },
     /** 动态路由模式下：更新根路由的重定向 */
-    handleUpdateRootRedirect(routeKey: AuthRoute.RouteKey) {
-      if (routeKey === 'root' || routeKey === 'not-found-page') {
-        throw new Error('routeKey的值不能为root或者not-found-page');
+    handleUpdateRootRedirect(routeKey: AuthRoute.AllRouteKey) {
+      if (routeKey === 'root' || routeKey === 'not-found') {
+        throw new Error('routeKey的值不能为root或者not-found');
       }
       const rootRoute: AuthRoute.Route = { ...ROOT_ROUTE, redirect: transformRouteNameToRoutePath(routeKey) };
-      const rootRouteName: AuthRoute.RouteKey = 'root';
+      const rootRouteName: AuthRoute.AllRouteKey = 'root';
       router.removeRoute(rootRouteName);
       const rootVueRoute = transformAuthRouteToVueRoute(rootRoute)[0];
       router.addRoute(rootVueRoute);
@@ -111,14 +110,14 @@ export const useRouteStore = defineStore('route-store', {
       if (data) {
         this.routeHomeName = data.home;
         this.handleUpdateRootRedirect(data.home);
-        this.handleAuthRoutes(data.routes);
+        this.handleAuthRoute(data.routes);
       }
     },
     /** 初始化静态路由 */
     async initStaticRoute() {
       const auth = useAuthStore();
       const routes = filterAuthRoutesByUserPermission(staticRoutes, auth.userInfo.userRole);
-      this.handleAuthRoutes(routes);
+      this.handleAuthRoute(routes);
     },
     /** 初始化权限路由 */
     async initAuthRoute() {

src/store/modules/tab/helpers.ts

@@ -9,7 +9,7 @@ import { getLocal, setLocal } from '@/utils';
 export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocationNormalizedLoaded) {
   const fullPath = hasFullPath(route) ? route.fullPath : route.path;
 
-  const tabRoute: GlobalTabRoute = {
+  const tabRoute: App.GlobalTabRoute = {
     name: route.name,
     fullPath,
     meta: route.meta,
@@ -26,7 +26,7 @@ export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocati
  * @param tabs - 多页签数据
  * @param fullPath - 该页签的路径
  */
-export function getIndexInTabRoutes(tabs: GlobalTabRoute[], fullPath: string) {
+export function getIndexInTabRoutes(tabs: App.GlobalTabRoute[], fullPath: string) {
   return tabs.findIndex(tab => tab.fullPath === fullPath);
 }
 
@@ -35,7 +35,7 @@ export function getIndexInTabRoutes(tabs: GlobalTabRoute[], fullPath: string) {
  * @param tabs - 多页签数据
  * @param fullPath - 该页签的路径
  */
-export function isInTabRoutes(tabs: GlobalTabRoute[], fullPath: string) {
+export function isInTabRoutes(tabs: App.GlobalTabRoute[], fullPath: string) {
   return getIndexInTabRoutes(tabs, fullPath) > -1;
 }
 
@@ -44,7 +44,7 @@ export function isInTabRoutes(tabs: GlobalTabRoute[], fullPath: string) {
  * @param tabs - 多页签数据
  * @param routeName - 路由名称
  */
-export function getIndexInTabRoutesByRouteName(tabs: GlobalTabRoute[], routeName: string) {
+export function getIndexInTabRoutesByRouteName(tabs: App.GlobalTabRoute[], routeName: string) {
   return tabs.findIndex(tab => tab.name === routeName);
 }
 
@@ -59,14 +59,14 @@ function hasFullPath(
 }
 
 /** 缓存多页签数据 */
-export function setTabRoutes(data: GlobalTabRoute[]) {
+export function setTabRoutes(data: App.GlobalTabRoute[]) {
   setLocal(EnumStorageKey['multi-tab-routes'], data);
 }
 
 /** 获取缓存的多页签数据 */
 export function getTabRoutes() {
-  const routes: GlobalTabRoute[] = [];
-  const data = getLocal<GlobalTabRoute[]>(EnumStorageKey['multi-tab-routes']);
+  const routes: App.GlobalTabRoute[] = [];
+  const data = getLocal<App.GlobalTabRoute[]>(EnumStorageKey['multi-tab-routes']);
   if (data) {
     const defaultTabRoutes = data.map(item => ({
       ...item,

src/store/modules/tab/index.ts

@@ -14,9 +14,9 @@ import {
 
 interface TabState {
   /** 多页签数据 */
-  tabs: GlobalTabRoute[];
+  tabs: App.GlobalTabRoute[];
   /** 多页签首页 */
-  homeTab: GlobalTabRoute;
+  homeTab: App.GlobalTabRoute;
   /** 当前激活状态的页签(路由fullPath) */
   activeTab: string;
 }
@@ -213,7 +213,7 @@ export const useTabStore = defineStore('tab-store', {
     iniTabStore(currentRoute: RouteLocationNormalizedLoaded) {
       const theme = useThemeStore();
 
-      const tabs: GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : [];
+      const tabs: App.GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : [];
 
       const hasHome = getIndexInTabRoutesByRouteName(tabs, this.homeTab.name as string) > -1;
       if (!hasHome && this.homeTab.name !== 'root') {