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

2025-09-24 07:49:47 +08:00 · 2022-11-08 01:14:59 +08:00
parent 40c1e13b50
commit c7b6a3fbec
54 changed files with 1328 additions and 759 deletions
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@ -18,7 +18,7 @@ declare namespace ApiRoute {
    /** 动态路由 */
    routes: AuthRoute.Route[];
    /** 路由首页对应的key */
-    home: AuthRoute.RouteKey;
+    home: AuthRoute.AllRouteKey;
  }
 }

--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@ -34,7 +34,7 @@ interface ImportMetaEnv {
   */
  readonly VITE_AUTH_ROUTE_MODE: 'static' | 'dynamic';
  /** 路由首页的路径 */
-  readonly VITE_ROUTE_HOME_PATH: Exclude<AuthRoute.RoutePath, '/' | '/not-found-page' | '/:pathMatch(.*)*'>;
+  readonly VITE_ROUTE_HOME_PATH: AuthRoute.RoutePath;
  /** iconify图标作为组件的前缀 */
  readonly VITE_ICON_PREFFIX: string;
  /**
--- a/src/typings/route.d.ts
+++ b/src/typings/route.d.ts
@ -1,74 +1,22 @@
-/** 权限路由相关类型 */
 declare namespace AuthRoute {
-  /** 多级路由分割符号 */
-  type RouteSplitMark = '_';
+  /** 根路由路径 */
+  type RootRoutePath = '/';

-  /** 路由的key */
-  type RouteKey =
-    // 固定的路由
-    | 'root' // 根路由
-    | 'login'
-    | 'not-found'
-    | 'no-permission'
-    | 'service-error'
-    | 'constant-page'
-    | 'not-found-page' // 捕获无效path的路由
-    // 自定义路由
-    | 'dashboard'
-    | 'dashboard_analysis'
-    | 'dashboard_workbench'
-    | 'document'
-    | 'document_vue'
-    | 'document_vite'
-    | 'document_naive'
-    | 'document_project'
-    | 'document_project-link'
-    | 'component'
-    | 'component_button'
-    | 'component_card'
-    | 'component_table'
-    | 'plugin'
-    | 'plugin_map'
-    | 'plugin_video'
-    | 'plugin_editor'
-    | 'plugin_editor_quill'
-    | 'plugin_editor_markdown'
-    | 'plugin_copy'
-    | 'plugin_icon'
-    | 'plugin_print'
-    | 'plugin_swiper'
-    | 'plugin_charts'
-    | 'plugin_charts_echarts'
-    | 'plugin_charts_antv'
-    | 'auth-demo'
-    | 'auth-demo_permission'
-    | 'auth-demo_super'
-    | 'function'
-    | 'function_tab'
-    | 'function_tab-detail'
-    | 'function_tab-multi-detail'
-    | 'exception'
-    | 'exception_403'
-    | 'exception_404'
-    | 'exception_500'
-    | 'multi-menu'
-    | 'multi-menu_first'
-    | 'multi-menu_first_second'
-    | 'multi-menu_first_second-new'
-    | 'multi-menu_first_second-new_third'
-    | 'management'
-    | 'management_user'
-    | 'management_role'
-    | 'management_auth'
-    | 'management_route'
-    | 'about';
+  /** 捕获无效路由的路由路径 */
+  type NotFoundRoutePath = '/:pathMatch(.*)*';

-  /** 路由的path */
-  type RoutePath =
-    | '/'
-    | Exclude<KeyToPath<RouteKey>, '/root' | '/not-found-page'>
-    | SingleRouteParentPath
-    | '/:pathMatch(.*)*';
+  type RootRouteKey = RouterPage.RootRouteKey;
+
+  type NotFoundRouteKey = RouterPage.NotFoundRouteKey;
+
+  type RouteKey = RouterPage.RouteKey;
+
+  type LastDegreeRouteKey = RouterPage.LastDegreeRouteKey;
+
+  type AllRouteKey = RouteKey | RootRouteKey | NotFoundRouteKey;
+
+  /** 路由路径 */
+  type RoutePath<K extends AllRouteKey = AllRouteKey> = AuthRouteUtils.GetRoutePath<K>;

  /**
   * 路由的组件
@ -77,16 +25,16 @@ declare namespace AuthRoute {
   * - multi - 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
   * - self - 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
   */
-  type RouteComponent = 'basic' | 'blank' | 'multi' | 'self';
+  type RouteComponentType = 'basic' | 'blank' | 'multi' | 'self';

  /** 路由描述 */
  interface RouteMeta {
    /** 路由标题(可用来作document.title或者菜单的名称) */
    title: string;
    /** 路由的动态路径(需要动态路径的页面需要将path添加进范型参数) */
-    dynamicPath?: PathToDynamicPath<'/login'>;
+    dynamicPath?: AuthRouteUtils.GetDynamicPath<'/login'>;
    /** 作为单级路由的父级路由布局组件 */
-    singleLayout?: Extract<RouteComponent, 'basic' | 'blank'>;
+    singleLayout?: Extract<RouteComponentType, 'basic' | 'blank'>;
    /** 需要登录权限 */
    requiresAuth?: boolean;
    /**
@ -96,7 +44,7 @@ declare namespace AuthRoute {
    permissions?: Auth.RoleType[];
    /** 缓存页面 */
    keepAlive?: boolean;
-    /** 菜单和面包屑对应的图标(iconify图标名称) */
+    /** 菜单和面包屑对应的图标 */
    icon?: string;
    /** 使用本地svg作为的菜单和面包屑对应的图标(assets/svg-icon文件夹的的svg文件名) */
    localIcon?: string;
@ -114,62 +62,86 @@ declare namespace AuthRoute {
    multi?: boolean;
  }

-  /** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
-  interface Route {
-    /** 路由名称(路由唯一标识) */
-    name: RouteKey;
-    /** 路由路径 */
-    path: RoutePath;
-    /** 路由重定向 */
-    redirect?: RoutePath;
-    /**
-     * 路由组件
-     * - basic: 基础布局，具有公共部分的布局
-     * - blank: 空白布局
-     * - multi: 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
-     * - self: 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
-     */
-    component?: RouteComponent;
-    /** 子路由 */
-    children?: Route[];
-    /** 路由描述 */
-    meta: RouteMeta;
-    /** 路由属性 */
-    props?: boolean | Record<string, any> | ((to: any) => Record<string, any>);
-  }
+  type Route<K extends AllRouteKey = AllRouteKey> = K extends AllRouteKey
+    ? {
+        /** 路由名称(路由唯一标识) */
+        name: K;
+        /** 路由路径 */
+        path: AuthRouteUtils.GetRoutePath<K>;
+        /** 路由重定向 */
+        redirect?: AuthRouteUtils.GetRoutePath;
+        /**
+         * 路由组件
+         * - basic: 基础布局，具有公共部分的布局
+         * - blank: 空白布局
+         * - multi: 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
+         * - self: 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
+         */
+        component?: RouteComponentType;
+        /** 子路由 */
+        children?: Route[];
+        /** 路由描述 */
+        meta: RouteMeta;
+      } & Omit<import('vue-router').RouteRecordRaw, 'name' | 'path' | 'redirect' | 'component' | 'children' | 'meta'>
+    : never;

  /** 前端导入的路由模块 */
-  type RouteModule = Record<string, { default: AuthRoute.Route }>;
+  type RouteModule = Record<string, { default: Route }>;
+}

-  /** 单独一级路由的key (单独路由需要添加一个父级路由用于应用布局组件) */
+declare namespace AuthRouteUtils {
+  /** 路由key层级分割符 */
+  type RouteKeySplitMark = '_';
+
+  /** 路由path层级分割符 */
+  type RoutePathSplitMark = '/';
+
+  /** 空白字符串 */
+  type BlankString = '';
+
+  /** key转换成path */
+  type KeyToPath<K extends string> = K extends `${infer _Left}${RouteKeySplitMark}${RouteKeySplitMark}${infer _Right}`
+    ? never
+    : K extends `${infer Left}${RouteKeySplitMark}${infer Right}`
+    ? Left extends BlankString
+      ? never
+      : Right extends BlankString
+      ? never
+      : KeyToPath<`${Left}${RoutePathSplitMark}${Right}`>
+    : `${RoutePathSplitMark}${K}`;
+
+  /** 根据路由key获取路由路径 */
+  type GetRoutePath<K extends AuthRoute.AllRouteKey = AuthRoute.AllRouteKey> = K extends AuthRoute.AllRouteKey
+    ? K extends AuthRoute.RootRouteKey
+      ? AuthRoute.RootRoutePath
+      : K extends AuthRoute.NotFoundRouteKey
+      ? AuthRoute.NotFoundRoutePath
+      : KeyToPath<K>
+    : never;
+
+  /** 获取一级路由(有子路由的一级路由和没有子路由的路由) */
+  type GetFirstDegreeRouteKey<K extends AuthRoute.RouteKey = AuthRoute.RouteKey> =
+    K extends `${infer _Left}${RouteKeySplitMark}${infer _Right}` ? never : K;
+
+  /** 获取有子路由的一级路由 */
+  type GetFirstDegreeRouteKeyWithChildren<K extends AuthRoute.RouteKey = AuthRoute.RouteKey> =
+    K extends `${infer Left}${RouteKeySplitMark}${infer _Right}` ? Left : never;
+
+  /** 单级路由的key (单级路由需要添加一个父级路由用于应用布局组件) */
  type SingleRouteKey = Exclude<
-    GetSingleRouteKey<RouteKey>,
-    GetRouteFirstParentKey<RouteKey> | 'root' | 'not-found-page'
+    GetFirstDegreeRouteKey,
+    GetFirstDegreeRouteKeyWithChildren | AuthRoute.RootRouteKey | AuthRoute.NotFoundRouteKey
  >;
+
  /** 单独路由父级路由key */
  type SingleRouteParentKey = `${SingleRouteKey}-parent`;

  /** 单独路由父级路由path */
  type SingleRouteParentPath = KeyToPath<SingleRouteParentKey>;

-  /** 路由key转换路由path */
-  type KeyToPath<Key extends string> = Key extends `${infer Left}_${infer Right}`
-    ? KeyToPath<`${Left}/${Right}`>
-    : `/${Key}`;
-
-  /** 路由path转换动态路径 */
-  type PathToDynamicPath<Path extends RoutePath> =
-    | `${Path}/:${string}`
-    | `${Path}/:${string}(${string})`
-    | `${Path}/:${string}(${string})?`;
-
-  /** 获取一级路由(包括有子路由的一级路由) */
-  type GetSingleRouteKey<Key extends RouteKey> = Key extends `${infer _Left}${RouteSplitMark}${infer _Right}`
-    ? never
-    : Key;
-
-  /** 获取子路由的一级父路由 */
-  type GetRouteFirstParentKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer _Right}`
-    ? Left
-    : never;
+  /** 获取路由动态路径 */
+  type GetDynamicPath<P extends AuthRoute.RoutePath> =
+    | `${P}/:${string}`
+    | `${P}/:${string}(${string})`
+    | `${P}/:${string}(${string})?`;
 }
--- a/src/typings/routes.d.ts
+++ b/src/typings/routes.d.ts
@ -1,200 +0,0 @@
-declare namespace AuthRoutes {
-  /** 路由key */
-  type RouteKey = ConstantRouteKey | AuthRouteKey;
-
-  /** 根路由key */
-  type RootRouteKey = 'root';
-
-  /** 捕获无效路由的路由key */
-  type RouteCaptureKey = 'not-found-page';
-
-  /** 固定的路由key */
-  type ConstantRouteKey = RootRouteKey | 'login' | 'not-found' | 'no-permission' | 'service-error' | RouteCaptureKey;
-
-  /** 权限路由key */
-  type AuthRouteKey =
-    | 'dashboard'
-    | 'dashboard_analysis'
-    | 'dashboard_workbench'
-    | 'document'
-    | 'document_vue'
-    | 'document_vue-new'
-    | 'document_vite'
-    | 'document_naive'
-    | 'document_project'
-    | 'component'
-    | 'component_button'
-    | 'component_card'
-    | 'component_table'
-    | 'plugin'
-    | 'plugin_map'
-    | 'plugin_video'
-    | 'plugin_editor'
-    | 'plugin_editor_quill'
-    | 'plugin_editor_markdown'
-    | 'plugin_copy'
-    | 'plugin_icon'
-    | 'plugin_print'
-    | 'plugin_swiper'
-    | 'plugin_charts'
-    | 'plugin_charts_echarts'
-    | 'plugin_charts_antv'
-    | 'auth-demo'
-    | 'auth-demo_permission'
-    | 'auth-demo_super'
-    | 'function'
-    | 'function_tab'
-    | 'function_tab-detail'
-    | 'function_tab-multi-detail'
-    | 'exception'
-    | 'exception_403'
-    | 'exception_404'
-    | 'exception_500'
-    | 'multi-menu'
-    | 'multi-menu_first'
-    | 'multi-menu_first_second'
-    | 'multi-menu_first_second-new'
-    | 'multi-menu_first_second-new_third'
-    | 'management'
-    | 'management_user'
-    | 'management_role'
-    | 'management_auth'
-    | 'management_route'
-    | 'about';
-
-  /** 根路由路径 */
-  type RootRoutePath = '/';
-
-  /** 捕获无效路由的路由路径 */
-  type RouteCapturePath = '/:pathMatch(.*)*';
-
-  /** 路由路径 */
-  type RoutePath<K extends RouteKey = RouteKey> = AuthRouteUtils.GetRoutePath<K>;
-
-  /** 常用的路由路径 */
-  type CommonRoutePath = Exclude<RoutePath, RootRoutePath | RouteCapturePath>;
-
-  /**
-   * 路由的组件
-   * - basic - 基础布局，具有公共部分的布局
-   * - blank - 空白布局
-   * - multi - 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
-   * - self - 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
-   */
-  type RouteComponent = 'basic' | 'blank' | 'multi' | 'self';
-
-  /** 路由描述 */
-  interface RouteMeta {
-    /** 路由标题(可用来作document.title或者菜单的名称) */
-    title: string;
-    /** 路由的动态路径(需要动态路径的页面需要将path添加进范型参数) */
-    dynamicPath?: AuthRouteUtils.GetDynamicPath<'/login'>;
-    /** 作为单级路由的父级路由布局组件 */
-    singleLayout?: Extract<RouteComponent, 'basic' | 'blank'>;
-    /** 需要登录权限 */
-    requiresAuth?: boolean;
-    /**
-     * 哪些类型的用户有权限才能访问的路由(空的话则表示不需要权限)
-     * @description 后端动态路由数据不需要该属性，直接由后端根据用户角色返回对应权限的路由数据
-     */
-    permissions?: Auth.RoleType[];
-    /** 缓存页面 */
-    keepAlive?: boolean;
-    /** 菜单和面包屑对应的图标 */
-    icon?: string;
-    /** 自定义的菜单和面包屑对应的图标 */
-    customIcon?: string;
-    /** 是否在菜单中隐藏(一些列表、表格的详情页面需要通过参数跳转，所以不能显示在菜单中) */
-    hide?: boolean;
-    /** 外链链接 */
-    href?: string;
-    /** 是否支持多个tab页签(默认一个，即相同name的路由会被替换) */
-    multiTab?: boolean;
-    /** 路由顺序，可用于菜单的排序 */
-    order?: number;
-    /** 当前路由需要选中的菜单项(用于跳转至不在左侧菜单显示的路由且需要高亮某个菜单的情况) */
-    activeMenu?: RouteKey;
-    /** 表示是否是多级路由的中间级路由(用于转换路由数据时筛选多级路由的标识，定义路由时不用填写) */
-    multi?: boolean;
-  }
-
-  type Route<K extends RouteKey = RouteKey> = K extends RouteKey
-    ? {
-        /** 路由名称(路由唯一标识) */
-        name: K;
-        /** 路由路径 */
-        path: AuthRouteUtils.GetRoutePath<K>;
-        /** 路由重定向 */
-        redirect?: CommonRoutePath;
-        /**
-         * 路由组件
-         * - basic: 基础布局，具有公共部分的布局
-         * - blank: 空白布局
-         * - multi: 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
-         * - self: 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
-         */
-        component?: RouteComponent;
-        /** 子路由 */
-        children?: Route[];
-        /** 路由描述 */
-        meta: RouteMeta;
-      } & Omit<import('vue-router').RouteRecordRaw, 'name' | 'path' | 'redirect' | 'component' | 'children' | 'meta'>
-    : never;
-}
-
-declare namespace AuthRouteUtils {
-  /** 路由key层级分割符 */
-  type RouteKeySplitMark = '_';
-
-  /** 路由path层级分割符 */
-  type RoutePathSplitMark = '/';
-
-  /** 空白字符串 */
-  type BlankString = '';
-
-  /** key转换成path */
-  type KeyToPath<K extends string> = K extends `${infer _Left}${RouteKeySplitMark}${RouteKeySplitMark}${infer _Right}`
-    ? never
-    : K extends `${infer Left}${RouteKeySplitMark}${infer Right}`
-    ? Left extends BlankString
-      ? never
-      : Right extends BlankString
-      ? never
-      : KeyToPath<`${Left}${RoutePathSplitMark}${Right}`>
-    : `${RoutePathSplitMark}${K}`;
-
-  /** 根据路由key获取路由路径 */
-  type GetRoutePath<K extends AuthRoutes.RouteKey = AuthRoutes.RouteKey> = K extends AuthRoutes.RouteKey
-    ? K extends AuthRoutes.RootRouteKey
-      ? AuthRoutes.RootRoutePath
-      : K extends AuthRoutes.RouteCaptureKey
-      ? AuthRoutes.RouteCapturePath
-      : KeyToPath<K>
-    : never;
-
-  /** 获取一级路由(有子路由的一级路由和没有子路由的路由) */
-  type GetFirstDegreeRouteKey<K extends AuthRoutes.RouteKey = AuthRoutes.RouteKey> =
-    K extends `${infer _Left}${RouteKeySplitMark}${infer _Right}` ? never : K;
-
-  /** 获取有子路由的一级路由 */
-  type GetFirstDegreeRouteKeyWithChildren<K extends AuthRoutes.RouteKey = AuthRoutes.RouteKey> =
-    K extends `${infer Left}${RouteKeySplitMark}${infer _Right}` ? Left : never;
-
-  /** 单级路由的key (单级路由需要添加一个父级路由用于应用布局组件) */
-  type SingleRouteKey = Exclude<
-    GetFirstDegreeRouteKey,
-    GetFirstDegreeRouteKeyWithChildren | AuthRoutes.RootRouteKey | AuthRoutes.RouteCaptureKey
-  >;
-
-  /** 单独路由父级路由key */
-  type SingleRouteParentKey = `${SingleRouteKey}-parent`;
-
-  /** 单独路由父级路由path */
-  type SingleRouteParentPath = KeyToPath<SingleRouteParentKey>;
-
-  /** 获取路由动态路径 */
-  type GetDynamicPath<P extends AuthRoutes.CommonRoutePath> =
-    | `${P}/:${string}`
-    | `${P}/:${string}(${string})`
-    | `${P}/:${string}(${string})?`;
-}
--- a/src/typings/system.d.ts
+++ b/src/typings/system.d.ts
@ -254,49 +254,48 @@ declare namespace Theme {
  }
 }

-/** 全局头部属性 */
-interface GlobalHeaderProps {
-  /** 显示logo */
-  showLogo: boolean;
-  /** 显示头部菜单 */
-  showHeaderMenu: boolean;
-  /** 显示菜单折叠按钮 */
-  showMenuCollapse: boolean;
-}
+declare namespace App {
+  /** 全局头部属性 */
+  interface GlobalHeaderProps {
+    /** 显示logo */
+    showLogo: boolean;
+    /** 显示头部菜单 */
+    showHeaderMenu: boolean;
+    /** 显示菜单折叠按钮 */
+    showMenuCollapse: boolean;
+  }

-/** 菜单项配置 */
-type GlobalMenuOption = import('naive-ui').MenuOption & {
-  key: string;
-  label: string;
-  routeName: string;
-  routePath: string;
-  icon?: () => import('vue').VNodeChild;
-  children?: GlobalMenuOption[];
-};
-
-/** 面包屑 */
-type GlobalBreadcrumb = import('naive-ui').DropdownOption & {
-  key: string;
-  label: string;
-  disabled: boolean;
-  routeName: string;
-  hasChildren: boolean;
-  children?: GlobalBreadcrumb[];
-};
-
-/** 多页签Tab的路由 */
-interface GlobalTabRoute
-  extends Pick<import('vue-router').RouteLocationNormalizedLoaded, 'name' | 'fullPath' | 'meta'> {
-  /** 滚动的位置 */
-  scrollPosition: {
-    left: number;
-    top: number;
+  /** 菜单项配置 */
+  type GlobalMenuOption = import('naive-ui').MenuOption & {
+    key: string;
+    label: string;
+    routeName: string;
+    routePath: string;
+    icon?: () => import('vue').VNodeChild;
+    children?: GlobalMenuOption[];
  };
-}

-/** 系统消息 */
-declare namespace Message {
-  interface Tab {
+  /** 面包屑 */
+  type GlobalBreadcrumb = import('naive-ui').DropdownOption & {
+    key: string;
+    label: string;
+    disabled: boolean;
+    routeName: string;
+    hasChildren: boolean;
+    children?: GlobalBreadcrumb[];
+  };
+
+  /** 多页签Tab的路由 */
+  interface GlobalTabRoute
+    extends Pick<import('vue-router').RouteLocationNormalizedLoaded, 'name' | 'fullPath' | 'meta'> {
+    /** 滚动的位置 */
+    scrollPosition: {
+      left: number;
+      top: number;
+    };
+  }
+
+  interface MessageTab {
    /** tab的key */
    key: number;
    /** tab名称 */
@ -304,10 +303,10 @@ declare namespace Message {
    /** badge类型 */
    badgeProps?: import('naive-ui').BadgeProps;
    /** 消息数据 */
-    list: List[];
+    list: MessageList[];
  }

-  interface List {
+  interface MessageList {
    /** 数据唯一值 */
    id: number;
    /** 头像 */