feat: improve router type

src/api/model/permissionModel.ts

@@ -1,6 +1,5 @@
 import type { defineComponent } from 'vue';
-
-import type { RouteMeta } from '@/types/interface';
+import type { RouteMeta } from 'vue-router';
 
 export interface MenuListResult {
   list: Array<RouteItem>;

src/layouts/components/Breadcrumb.vue

@@ -10,7 +10,6 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useLocale } from '@/locales/useLocale';
-import type { RouteMeta } from '@/types/interface';
 
 const { locale } = useLocale();
 const route = useRoute();
@@ -21,7 +20,7 @@ const crumbs = computed(() => {
 
   const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
     // 如果路由下有hiddenBreadcrumb或当前遍历到参数则隐藏
-    const meta = route.matched[idx]?.meta as RouteMeta;
+    const meta = route.matched[idx]?.meta;
     if (meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
       return breadcrumbArray;
     }

src/layouts/components/MenuContent.vue

@@ -32,7 +32,7 @@ import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import type { MenuRoute } from '@/types/interface';
 
-type ListItemType = MenuRoute & { icon?: string };
+type ListItemType = MenuRoute;
 
 const { navData } = defineProps({
   navData: {

src/router/index.ts

@@ -1,3 +1,4 @@
+import isObject from 'lodash/isObject';
 import uniq from 'lodash/uniq';
 import type { RouteRecordRaw } from 'vue-router';
 import { createRouter, createWebHistory } from 'vue-router';
@@ -32,10 +33,12 @@ export const allRoutes = [...homepageRouterList, ...fixedRouterList, ...defaultR
 export function mapModuleRouterList(modules: Record<string, unknown>): Array<RouteRecordRaw> {
   const routerList: Array<RouteRecordRaw> = [];
   Object.keys(modules).forEach((key) => {
-    // @ts-expect-error 外部赋值不太好直接写类型
-    const mod = modules[key].default || {};
-    const modList = Array.isArray(mod) ? [...mod] : [mod];
-    routerList.push(...modList);
+    const routeModule = modules[key];
+    if (isObject(routeModule) && 'default' in routeModule) {
+      const route = routeModule.default;
+      const routes = Array.isArray(route) ? [...route] : [route];
+      routerList.push(...routes);
+    }
   });
   return routerList;
 }

src/router/modules/homepage.ts

@@ -1,5 +1,6 @@
 import { DashboardIcon } from 'tdesign-icons-vue-next';
 import { shallowRef } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
 
 import Layout from '@/layouts/index.vue';
 
@@ -54,4 +55,4 @@ export default [
       },
     ],
   },
-];
+] satisfies RouteRecordRaw[];

src/router/modules/result.ts

@@ -1,3 +1,5 @@
+import type { RouteRecordRaw } from 'vue-router';
+
 import Layout from '@/layouts/index.vue';
 
 export default [
@@ -79,4 +81,4 @@ export default [
       },
     ],
   },
-];
+] satisfies RouteRecordRaw[];

src/router/modules/user.ts

@@ -1,5 +1,6 @@
 import { LogoutIcon } from 'tdesign-icons-vue-next';
 import { shallowRef } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
 
 import Layout from '@/layouts/index.vue';
 
@@ -29,9 +30,8 @@ export default [
       {
         path: 'index',
         redirect: '/login',
-        component: () => import('@/layouts/blank.vue'),
         meta: { title: { zh_CN: '登录页', en_US: 'Login' } },
       },
     ],
   },
-];
+] satisfies RouteRecordRaw[];

src/types/interface.d.ts

@@ -1,29 +1,13 @@
 import type { TabValue } from 'tdesign-vue-next';
-import type { LocationQueryRaw, RouteRecordName } from 'vue-router';
-
-export interface RouteMeta {
-  title?: string | Record<string, string>;
-  icon?: string;
-  expanded?: boolean;
-  orderNo?: number;
-  hidden?: boolean;
-  hiddenBreadcrumb?: boolean;
-  single?: boolean;
-  keepAlive?: boolean;
-  frameSrc?: string;
-  frameBlank?: boolean;
-}
+import type { Component, DefineComponent, FunctionalComponent } from 'vue';
+import type { LocationQueryRaw, RouteMeta, RouteRecordName } from 'vue-router';
 
 export interface MenuRoute {
   // TODO: menuitem 组件实际支持 string 类型但是类型错误，暂时使用 any 类型避免打包错误待组件类型修复
   path: any;
   title?: string | Record<string, string>;
   name?: string;
-  icon?:
-    | string
-    | {
-        render: () => void;
-      };
+  icon?: string | Component | FunctionalComponent | DefineComponent;
   redirect?: string;
   children: MenuRoute[];
   meta: RouteMeta;

src/types/router.d.ts

@@ -0,0 +1,20 @@
+import 'vue-router';
+
+import type { Component, DefineComponent, FunctionalComponent } from 'vue';
+
+export {};
+declare module 'vue-router' {
+  interface RouteMeta {
+    title?: string | Record<string, string>;
+    icon?: string | Component | FunctionalComponent | DefineComponent;
+    expanded?: boolean;
+    orderNo?: number;
+    hidden?: boolean;
+    hiddenBreadcrumb?: boolean;
+    single?: boolean;
+    keepAlive?: boolean;
+    frameSrc?: string;
+    frameBlank?: boolean;
+    // roleCode?: string; // 前端 roles 控制菜单权限
+  }
+}

src/utils/route/index.ts

@@ -1,7 +1,6 @@
 import cloneDeep from 'lodash/cloneDeep';
 
 import type { RouteItem } from '@/api/model/permissionModel';
-import type { RouteMeta } from '@/types/interface';
 import {
   BLANK_LAYOUT,
   EXCEPTION_COMPONENT,
@@ -93,7 +92,7 @@ export function transformObjectToRoute<T = RouteItem>(routeList: RouteItem[]): T
         route.component = LAYOUT;
         route.name = `${route.name}Parent`;
         route.path = '';
-        route.meta = (route.meta || {}) as RouteMeta;
+        route.meta = route.meta || {};
       }
     } else {
       throw new Error('component is undefined');