feat: support the dynamic introduction and sorting of routes

apps/antd-view/src/router/guard.ts

@@ -10,11 +10,14 @@ import { useTitle } from '@vueuse/core';
 
 import { dynamicRoutes } from '@/router/routes';
 
+// 不需要权限的页面白名单
+const WHITE_ROUTE_NAMES = new Set<string>([]);
+
 /**
  * 通用守卫配置
  * @param router
  */
-function configCommonGuard(router: Router) {
+function setupCommonGuard(router: Router) {
   // 记录已经加载的页面
   const loadedPaths = new Set<string>();
 
@@ -44,28 +47,11 @@ function configCommonGuard(router: Router) {
   });
 }
 
-// 不需要权限的页面白名单
-const WHITE_ROUTE_NAMES = new Set<string>([]);
-
-/**
- * 跳转登录页面
- * @param to
- */
-function loginPageMeta(to: RouteLocationNormalized) {
-  return {
-    path: LOGIN_PATH,
-    // 如不需要，直接删除 query
-    query: { redirect: encodeURIComponent(to.fullPath) },
-    // 携带当前跳转的页面，登录后重新跳转该页面
-    replace: true,
-  };
-}
-
 /**
  * 权限访问守卫配置
  * @param router
  */
-function configAccessGuard(router: Router) {
+function setupAccessGuard(router: Router) {
   router.beforeEach(async (to, from) => {
     const accessStore = useAccessStore();
     const accessToken = accessStore.getAccessToken;
@@ -123,7 +109,19 @@ function configAccessGuard(router: Router) {
   });
 }
 
-export { configAccessGuard };
+/**
+ * 登录页面信息
+ * @param to
+ */
+function loginPageMeta(to: RouteLocationNormalized) {
+  return {
+    path: LOGIN_PATH,
+    // 如不需要，直接删除 query
+    query: { redirect: encodeURIComponent(to.fullPath) },
+    // 携带当前跳转的页面，登录后重新跳转该页面
+    replace: true,
+  };
+}
 
 /**
  * 项目守卫配置
@@ -131,9 +129,9 @@ export { configAccessGuard };
  */
 function createRouterGuard(router: Router) {
   /** 通用 */
-  configCommonGuard(router);
+  setupCommonGuard(router);
   /** 权限访问 */
-  configAccessGuard(router);
+  setupAccessGuard(router);
 }
 
 export { createRouterGuard };

apps/antd-view/src/router/index.ts

@@ -4,7 +4,7 @@ import { traverseTreeValues } from '@vben/utils';
 import { createRouter, createWebHashHistory } from 'vue-router';
 
 import { createRouterGuard } from './guard';
-import { staticRoutes } from './routes';
+import { routes } from './routes';
 
 /**
  *  @zh_CN 创建vue-router实例
@@ -12,16 +12,14 @@ import { staticRoutes } from './routes';
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
   // 应该添加到路由的初始路由列表。
-  routes: staticRoutes,
+  routes,
-  scrollBehavior: (to, from, savedPosition) => {
+  scrollBehavior: (_to, _from, savedPosition) => {
-    if (to.path !== from.path) {
+    // if (to.path !== from.path) {
-      setTimeout(() => {
+    //   const app = document.querySelector('#app');
-        const app = document.querySelector('#app');
+    //   if (app) {
-        if (app) {
+    //     app.scrollTop = 0;
-          app.scrollTop = 0;
+    //   }
-        }
+    // }
-      });
-    }
     return savedPosition || { left: 0, top: 0 };
   },
 });
@@ -34,9 +32,9 @@ function resetRoutes() {
   const staticRouteNames = traverseTreeValues<
     RouteRecordRaw,
     RouteRecordName | undefined
-  >(staticRoutes, (route) => {
+  >(routes, (route) => {
     // 这些路由需要指定 name，防止在路由重置时，不能删除没有指定 name 的路由
-    if (!route.name) {
+    if (import.meta.env.DEV && !route.name) {
       console.warn(
         `The route with the path ${route.path} needs to specify the field name.`,
       );
@@ -45,8 +43,8 @@ function resetRoutes() {
   });
 
   const { getRoutes, hasRoute, removeRoute } = router;
-  const routes = getRoutes();
+  const allRoutes = getRoutes();
-  routes.forEach(({ name }) => {
+  allRoutes.forEach(({ name }) => {
     // 存在于路由表且非白名单才需要删除
     if (name && !staticRouteNames.includes(name) && hasRoute(name)) {
       removeRoute(name);

apps/antd-view/src/router/routes/dynamic/nested.ts

@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout } from '@/layouts';
 
-export const nestedRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
@@ -69,3 +69,5 @@ export const nestedRoutes: RouteRecordRaw[] = [
     ],
   },
 ];
+
+export default routes;

apps/antd-view/src/router/routes/dynamic/outside.ts

@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout, IFrameView } from '@/layouts';
 
-export const outsideRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
@@ -35,3 +35,5 @@ export const outsideRoutes: RouteRecordRaw[] = [
     ],
   },
 ];
+
+export default routes;

apps/antd-view/src/router/routes/dynamic/root.ts

@@ -2,11 +2,12 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout } from '@/layouts';
 
-const rootRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
       hideChildrenInMenu: true,
+      orderNo: -1,
       title: '首页',
     },
     name: 'Home',
@@ -26,4 +27,4 @@ const rootRoutes: RouteRecordRaw[] = [
   },
 ];
 
-export { rootRoutes };
+export default routes;

apps/antd-view/src/router/routes/dynamic/vben.ts

@@ -5,7 +5,7 @@ import { BasicLayout, IFrameView } from '@/layouts';
 import { VBEN_GITHUB_URL } from '@vben/constants';
 import { $t } from '@vben/locales/helper';
 
-export const vbenRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
@@ -49,3 +49,5 @@ export const vbenRoutes: RouteRecordRaw[] = [
     ],
   },
 ];
+
+export default routes;

apps/antd-view/src/router/routes/index.ts

@@ -1,24 +1,28 @@
+import { mergeRouteModules } from '@vben-core/helpers';
 import type { RouteRecordRaw } from 'vue-router';
 
 import { essentialRoutes } from './_essential';
-import { nestedRoutes } from './modules/nested';
+
-import { outsideRoutes } from './modules/outside';
+const dynamicRouteFiles = import.meta.glob('./dynamic/**/*.ts', {
-import { rootRoutes } from './modules/root';
+  eager: true,
-import { vbenRoutes } from './modules/vben';
+});
+
+const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+const externalRouteFiles = import.meta.glob('./external/**/*.ts', {
+  eager: true,
+});
 
 /** 动态路由 */
-const dynamicRoutes: RouteRecordRaw[] = [
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
-  // 根路由
+
-  ...rootRoutes,
+/** 静态路由列表，访问这些页面可以不需要权限 */
-  ...nestedRoutes,
+const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
-  ...outsideRoutes,
-  ...vbenRoutes,
-];
 
 /** 排除在主框架外的路由，这些路由没有菜单和顶部及其他框架内容 */
-const externalRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
+/** 路由列表，由基本路由+静态路由组成 */
-const staticRoutes: RouteRecordRaw[] = [...essentialRoutes];
+const routes: RouteRecordRaw[] = [...essentialRoutes, ...staticRoutes];
 
-export { dynamicRoutes, externalRoutes, staticRoutes };
+export { dynamicRoutes, externalRoutes, routes };

packages/@vben-core/forward/helpers/src/generator-menus.test.ts

@@ -1,41 +1,46 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { generatorMenus } from './generator-menus'; // 替换为您的实际路径
-import type { RouteRecordRaw } from 'vue-router';
+import {
-
+  type RouteRecordRaw,
-// 模拟路由数据
+  type Router,
-const mockRoutes = [
+  createRouter,
-  {
+  createWebHistory,
-    meta: { icon: 'home-icon', title: '首页' },
+} from 'vue-router';
-    name: 'home',
-    path: '/home',
-  },
-  {
-    meta: { hideChildrenInMenu: true, icon: 'about-icon', title: '关于' },
-    name: 'about',
-    path: '/about',
-    children: [
-      {
-        path: 'team',
-        name: 'team',
-        meta: { icon: 'team-icon', title: '团队' },
-      },
-    ],
-  },
-] as RouteRecordRaw[];
-
-// 模拟 Vue 路由器实例
-const mockRouter = {
-  getRoutes: vi.fn(() => [
-    { name: 'home', path: '/home' },
-    { name: 'about', path: '/about' },
-    { name: 'team', path: '/about/team' },
-  ]),
-};
 
 // Nested route setup to test child inclusion and hideChildrenInMenu functionality
 
 describe('generatorMenus', () => {
+  // 模拟路由数据
+  const mockRoutes = [
+    {
+      meta: { icon: 'home-icon', title: '首页' },
+      name: 'home',
+      path: '/home',
+    },
+    {
+      meta: { hideChildrenInMenu: true, icon: 'about-icon', title: '关于' },
+      name: 'about',
+      path: '/about',
+      children: [
+        {
+          path: 'team',
+          name: 'team',
+          meta: { icon: 'team-icon', title: '团队' },
+        },
+      ],
+    },
+  ] as RouteRecordRaw[];
+
+  // 模拟 Vue 路由器实例
+  const mockRouter = {
+    getRoutes: vi.fn(() => [
+      { name: 'home', path: '/home' },
+      { name: 'about', path: '/about' },
+      { name: 'team', path: '/about/team' },
+    ]),
+  };
+
   it('the correct menu list should be generated according to the route', async () => {
     const expectedMenus = [
       {
@@ -138,8 +143,6 @@ describe('generatorMenus', () => {
       mockRoutesWithRedirect,
       mockRouter as any,
     );
-    console.log(111, menus);
-
     expect(menus).toEqual([
       // Assuming your generatorMenus function excludes redirect routes from the menu
       {
@@ -168,4 +171,60 @@ describe('generatorMenus', () => {
       },
     ]);
   });
+
+  const routes: any = [
+    {
+      meta: { orderNo: 2, title: 'Home' },
+      name: 'home',
+      path: '/',
+    },
+    {
+      meta: { orderNo: 1, title: 'About' },
+      name: 'about',
+      path: '/about',
+    },
+  ];
+
+  const router: Router = createRouter({
+    history: createWebHistory(),
+    routes,
+  });
+
+  it('should generate menu list with correct order', async () => {
+    const menus = await generatorMenus(routes, router);
+    const expectedMenus = [
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'About',
+        orderNo: 1,
+        parent: undefined,
+        parents: undefined,
+        path: '/about',
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'Home',
+        orderNo: 2,
+        parent: undefined,
+        parents: undefined,
+        path: '/',
+        children: [],
+      },
+    ];
+
+    expect(menus).toEqual(expectedMenus);
+  });
+
+  it('should handle empty routes', async () => {
+    const emptyRoutes: any[] = [];
+    const menus = await generatorMenus(emptyRoutes, router);
+    expect(menus).toEqual([]);
+  });
 });

packages/@vben-core/forward/helpers/src/generator-menus.ts

@@ -17,7 +17,7 @@ async function generatorMenus(
     router.getRoutes().map(({ name, path }) => [name, path]),
   );
 
-  const menus = mapTree<ExRouteRecordRaw, MenuRecordRaw>(routes, (route) => {
+  let menus = mapTree<ExRouteRecordRaw, MenuRecordRaw>(routes, (route) => {
     // 路由表的路径写法有多种，这里从router获取到最终的path并赋值
     const path = finalRoutesMap[route.name as string] ?? route.path;
 
@@ -65,6 +65,8 @@ async function generatorMenus(
     };
   });
 
+  // 对菜单进行排序
+  menus = menus.sort((a, b) => (a.orderNo || 999) - (b.orderNo || 999));
   return menus;
 }
 

packages/@vben-core/forward/helpers/src/index.ts

@@ -1,4 +1,5 @@
 export * from './flatten-object';
 export * from './generator-menus';
 export * from './generator-routes';
+export * from './merge-route-modules';
 export * from './nested-object';

packages/@vben-core/forward/helpers/src/merge-route-modules.test.ts

@@ -0,0 +1,68 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { describe, expect, it } from 'vitest';
+
+import { mergeRouteModules } from './merge-route-modules';
+
+import type { RouteModuleType } from './merge-route-modules';
+
+describe('mergeRouteModules', () => {
+  it('should merge route modules correctly', () => {
+    const routeModules: Record<string, RouteModuleType> = {
+      './dynamic-routes/about.ts': {
+        default: [
+          {
+            component: () => Promise.resolve({ template: '<div>About</div>' }),
+            name: 'About',
+            path: '/about',
+          },
+        ],
+      },
+      './dynamic-routes/home.ts': {
+        default: [
+          {
+            component: () => Promise.resolve({ template: '<div>Home</div>' }),
+            name: 'Home',
+            path: '/',
+          },
+        ],
+      },
+    };
+
+    const expectedRoutes: RouteRecordRaw[] = [
+      {
+        component: expect.any(Function),
+        name: 'About',
+        path: '/about',
+      },
+      {
+        component: expect.any(Function),
+        name: 'Home',
+        path: '/',
+      },
+    ];
+
+    const mergedRoutes = mergeRouteModules(routeModules);
+    expect(mergedRoutes).toEqual(expectedRoutes);
+  });
+
+  it('should handle empty modules', () => {
+    const routeModules: Record<string, RouteModuleType> = {};
+    const expectedRoutes: RouteRecordRaw[] = [];
+
+    const mergedRoutes = mergeRouteModules(routeModules);
+    expect(mergedRoutes).toEqual(expectedRoutes);
+  });
+
+  it('should handle modules with no default export', () => {
+    const routeModules: Record<string, RouteModuleType> = {
+      './dynamic-routes/empty.ts': {
+        default: [],
+      },
+    };
+    const expectedRoutes: RouteRecordRaw[] = [];
+
+    const mergedRoutes = mergeRouteModules(routeModules);
+    expect(mergedRoutes).toEqual(expectedRoutes);
+  });
+});

packages/@vben-core/forward/helpers/src/merge-route-modules.ts

@@ -0,0 +1,28 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+// 定义模块类型
+interface RouteModuleType {
+  default: RouteRecordRaw[];
+}
+
+/**
+ * 合并动态路由模块的默认导出
+ * @param routeModules 动态导入的路由模块对象
+ * @returns 合并后的路由配置数组
+ */
+function mergeRouteModules(
+  routeModules: Record<string, unknown>,
+): RouteRecordRaw[] {
+  const mergedRoutes: RouteRecordRaw[] = [];
+
+  for (const routeModule of Object.values(routeModules)) {
+    const moduleRoutes = (routeModule as RouteModuleType)?.default ?? [];
+    mergedRoutes.push(...moduleRoutes);
+  }
+
+  return mergedRoutes;
+}
+
+export { mergeRouteModules };
+
+export type { RouteModuleType };

packages/@vben-core/shared/typings/src/vue-router.d.ts

@@ -42,7 +42,6 @@ interface RouteMeta {
    * @default false
    */
   hideInMenu?: boolean;
-
   /**
    * 当前路由在标签页不展现
    * @default false