refactor(projects): 重构路由类型和路由元数据类型，重构多级菜单路由写法

src/utils/router/cache.ts

@@ -1,6 +1,13 @@
 import type { Component } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 
+/** 给需要缓存的页面组件设置名称 */
+function setComponentName(component?: Component, name?: string) {
+  if (component && name) {
+    Object.assign(component, { name });
+  }
+}
+
 function getCacheName(route: RouteRecordRaw, isCache: boolean) {
   const cacheNames: string[] = [];
   const hasChild = hasChildren(route);
@@ -26,13 +33,6 @@ function hasChildren(route: RouteRecordRaw) {
   return Boolean(route.children && route.children.length);
 }
 
-/** 给需要缓存的页面组件设置名称 */
-export function setComponentName(component?: Component, name?: string) {
-  if (component && name) {
-    Object.assign(component, { name });
-  }
-}
-
 /** 获取被缓存的路由 */
 export function getCacheRoutes(routes: RouteRecordRaw[]) {
   const cacheNames: string[] = [];

src/utils/router/helpers.ts

@@ -1,13 +1,45 @@
 import type { Component } from 'vue';
-import type { Router } from 'vue-router';
-import type { CustomRoute, ImportedRouteModules, CustomRouteMeta } from '@/interface';
+import type { Router, RouteRecordRaw, RouteMeta } from 'vue-router';
+import type { ImportedRouteModules } from '@/interface';
+
+interface SingleRouteConfig {
+  /** 路由 */
+  route: RouteRecordRaw;
+  /** 路由容器 */
+  container: Component;
+  /** 路由容器的描述 */
+  containerMeta: RouteMeta;
+  /** 404路由的名称 */
+  notFoundName: string;
+}
+
+/** 设置单个路由 */
+export function setSingleRoute(config: SingleRouteConfig) {
+  const { route, container, containerMeta, notFoundName } = config;
+  const routeItem: RouteRecordRaw = {
+    name: `${route.name as string}_`,
+    path: `${route.path}_`,
+    component: container,
+    redirect: { name: notFoundName },
+    meta: {
+      notAsMenu: true,
+      ...containerMeta,
+      title: `${containerMeta.title}-container`
+    },
+    children: [route]
+  };
+
+  return routeItem;
+}
 
 /** 处理导入的路由模块 */
 export function transformRouteModules(routeModules: ImportedRouteModules) {
   const modules = Object.keys(routeModules).map(key => {
     return routeModules[key].default;
   });
-  const constantRoutes: CustomRoute[] = modules.sort((next, pre) => Number(next.meta.order) - Number(pre.meta.order));
+  const constantRoutes: RouteRecordRaw[] = modules.sort(
+    (next, pre) => Number(next.meta?.order) - Number(pre.meta?.order)
+  );
   return constantRoutes;
 }
 
@@ -16,12 +48,12 @@ export function transformRouteModules(routeModules: ImportedRouteModules) {
  * @param routes - 路由
  * @param routeHomeName - 路由首页名称
  */
-export function getRouteHome(routes: CustomRoute[], routeHomeName: string) {
-  let routeHome: CustomRoute;
-  function hasChildren(route: CustomRoute) {
+export function getRouteHome(routes: RouteRecordRaw[], routeHomeName: string) {
+  let routeHome: RouteRecordRaw;
+  function hasChildren(route: RouteRecordRaw) {
     return Boolean(route.children && route.children.length);
   }
-  function getRouteHomeByRoute(route: CustomRoute) {
+  function getRouteHomeByRoute(route: RouteRecordRaw) {
     if (routeHome) return;
     const hasChild = hasChildren(route);
     if (!hasChild) {
@@ -29,12 +61,12 @@ export function getRouteHome(routes: CustomRoute[], routeHomeName: string) {
         routeHome = route;
       }
     } else {
-      getRouteHomeByRoutes(route.children as CustomRoute[]);
+      getRouteHomeByRoutes(route.children as RouteRecordRaw[]);
     }
   }
-  function getRouteHomeByRoutes(_routes: CustomRoute[]) {
+  function getRouteHomeByRoutes(_routes: RouteRecordRaw[]) {
     _routes.some(item => {
-      getRouteHomeByRoute(item as CustomRoute);
+      getRouteHomeByRoute(item as RouteRecordRaw);
       return routeHome !== undefined;
     });
   }
@@ -42,37 +74,36 @@ export function getRouteHome(routes: CustomRoute[], routeHomeName: string) {
   return routeHome!;
 }
 
+/**
+ * 将多层级路由转换成二级路由
+ * @param routes - 路由
+ */
+export function transformMultiDegreeRoutes(routes: RouteRecordRaw[]) {
+  function hasComponent(route: RouteRecordRaw) {
+    return Boolean(route.component);
+  }
+  function hasChildren(route: RouteRecordRaw) {
+    return Boolean(route.children && route.children.length);
+  }
+
+  function upDimension(route: RouteRecordRaw): RouteRecordRaw[] {
+    if (hasChildren(route)) {
+      const updateRoute = { ...route };
+      if (!hasComponent(route)) {
+        return updateRoute.children!;
+      }
+      updateRoute.children = updateRoute.children?.map(item => upDimension(item)).flat();
+      return [updateRoute];
+    }
+    return [route];
+  }
+
+  return routes.map(item => upDimension(item)).flat();
+}
+
 /** 获取登录后的重定向地址 */
 export function getLoginRedirectUrl(router: Router) {
   const path = router.currentRoute.value.fullPath as string;
   const redirectUrl = path === '/' ? undefined : path;
   return redirectUrl;
 }
-
-interface SingleRouteConfig {
-  /** 路由 */
-  route: CustomRoute;
-  /** 路由容器 */
-  container: Component;
-  /** 路由容器的描述 */
-  meta: CustomRouteMeta;
-  /** 404路由的名称 */
-  notFoundName: string;
-}
-/** * 设置单个路由 */
-export function setSingleRoute(config: SingleRouteConfig) {
-  const { route, container, meta, notFoundName } = config;
-  const routeItem: CustomRoute = {
-    name: `${route.name as string}_`,
-    path: `${route.path}_`,
-    component: container,
-    redirect: { name: notFoundName },
-    meta: {
-      ...meta,
-      isNotMenu: true
-    },
-    children: [route]
-  };
-
-  return routeItem;
-}

src/utils/router/menus.ts

@@ -1,9 +1,10 @@
-import type { CustomRoute, GlobalMenuOption } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
+import type { GlobalMenuOption } from '@/interface';
 import { iconifyRender } from '../common';
 
 /** 判断路由是否作为菜单 */
-function asMenu(route: CustomRoute) {
-  return !route.meta?.isNotMenu;
+function asMenu(route: RouteRecordRaw) {
+  return !route.meta?.notAsMenu;
 }
 
 /** 给菜单添加可选属性 */
@@ -19,14 +20,14 @@ function addPartialProps(menuItem: GlobalMenuOption, icon?: string, children?: G
 }
 
 /** 将路由转换成菜单 */
-export function transformRouteToMenu(routes: CustomRoute[]) {
+export function transformRouteToMenu(routes: RouteRecordRaw[]) {
   const globalMenu: GlobalMenuOption[] = [];
   routes.forEach(route => {
     const { name, path, meta } = route;
     const routeName = name as string;
     let menuChildren: GlobalMenuOption[] | undefined;
     if (route.children) {
-      menuChildren = transformRouteToMenu(route.children as CustomRoute[]);
+      menuChildren = transformRouteToMenu(route.children as RouteRecordRaw[]);
     }
     const menuItem: GlobalMenuOption = addPartialProps(
       {