feat: 添加菜单进行排序

Author: Ohh-889

src/features/menu/MenuUtil.tsx

@@ -9,9 +9,12 @@ import { $t } from '@/locales';
  * @param routes Auth routes
  */
 export function filterRoutesToMenus(routes: RouteObject[]) {
+  // 先根据 handle?.order 对路由做排序
+  const sortedRoutes = sortRoutesByOrder(routes);
+
   const menus: App.Global.Menu[] = [];
 
-  for (const route of routes) {
+  for (const route of sortedRoutes) {
     // 如果节点存在 path（注意：这里假设空字符串或 undefined 均视为无 path）
 
     if (route.path && !route.handle?.hideInMenu) {
@@ -36,6 +39,32 @@ export function filterRoutesToMenus(routes: RouteObject[]) {
   return menus;
 }
 
+/**
+ * sort routes by order
+ *
+ * @param routes routes
+ */
+export function sortRoutesByOrder(routes: RouteObject[]) {
+  routes.sort((next, prev) => (Number(next.handle?.order) || 0) - (Number(prev.handle?.order) || 0));
+  routes.forEach(sortRouteByOrder);
+
+  return routes;
+}
+
+/**
+ * sort route by order
+ *
+ * @param route route
+ */
+function sortRouteByOrder(route: RouteObject) {
+  if (route.children?.length) {
+    route.children.sort((next, prev) => (Number(next.handle?.order) || 0) - (Number(prev.handle?.order) || 0));
+    route.children.forEach(sortRouteByOrder);
+  }
+
+  return route;
+}
+
 /**
  * Get global menu by route
  *

src/features/router/routerHooks.ts

@@ -1,49 +1,43 @@
-import { emitter } from '@sa/hooks';
+import type { RouteObject } from 'react-router-dom';
 
 import { authRoutes } from '@/router';
+import { store } from '@/store';
 
-import { filterRoutesToMenus } from '../menu/MenuUtil';
+import { isStaticSuper, selectUserInfo } from '../auth/authStore';
 
-import type { RouterContextType } from './router';
 import { filterAuthRoutesByRoles, mergeValuesByParent } from './shared';
 
-export function useInitAuthRoutes() {
+export function initAuthRoutes(addRoutes: (parent: string | null, route: RouteObject[]) => void) {
   const authRouteMode = import.meta.env.VITE_AUTH_ROUTE_MODE;
 
   const reactAuthRoutes = mergeValuesByParent(authRoutes).reverse();
 
-  function initAuthRoutes(isStaticSuper: boolean, roles: string[], addRoutes: RouterContextType['addRoutes']) {
-    // 静态模式
-    if (authRouteMode === 'static') {
-      // 超级管理员
-      if (isStaticSuper) {
-        reactAuthRoutes.forEach(route => {
-          if (route.parent?.includes('base')) {
-            emitter.emit('ADD_MENUS', filterRoutesToMenus(route.route));
-
-            console.log('route.route', route.route);
-          }
-
-          addRoutes(route.route, route.parent);
-        });
-      } else {
-        // 非超级管理员
-        const filteredRoutes = filterAuthRoutesByRoles(reactAuthRoutes, roles);
-        filteredRoutes.forEach((route, index) => {
-          addRoutes(route, reactAuthRoutes[index].parent);
-        });
-      }
+  const isSuper = isStaticSuper(store.getState());
+
+  const { roles } = selectUserInfo(store.getState());
+
+  // 静态模式
+  if (authRouteMode === 'static') {
+    // 超级管理员
+    if (isSuper) {
+      reactAuthRoutes.forEach(route => {
+        addRoutes(route.parent, route.route);
+      });
     } else {
-      // 动态模式
-      // await dispatch(initDynamicAuthRoute());
+      // 非超级管理员
+      const filteredRoutes = filterAuthRoutesByRoles(reactAuthRoutes, roles);
+      filteredRoutes.forEach((route, index) => {
+        addRoutes(reactAuthRoutes[index].parent, route);
+      });
     }
+  } else {
+    // 动态模式
+    // await dispatch(initDynamicAuthRoute());
+  }
 
-    // const routeHomeName = getRouteHome(getState());
-
-    // const homeRoute = router.getRouteByName(routeHomeName);
+  // const routeHomeName = getRouteHome(getState());
 
-    // if (homeRoute) dispatch(initHomeTab({ homeRouteName: routeHomeName as LastLevelRouteKey, route: homeRoute }));
-  }
+  // const homeRoute = router.getRouteByName(routeHomeName);
 
-  return initAuthRoutes;
+  // if (homeRoute) dispatch(initHomeTab({ homeRouteName: routeHomeName as LastLevelRouteKey, route: homeRoute }));
 }

src/features/router/shared.ts

@@ -1,7 +1,5 @@
 import type { RouteObject } from 'react-router-dom';
 
-import type { AuthRoute } from '@/router/routes';
-
 export function filterCacheRoutes(routes: RouteObject[]) {
   const cacheRoutes: string[] = [];
 
@@ -32,8 +30,8 @@ export function filterCacheRoutes(routes: RouteObject[]) {
  * @param data Auth routes
  * @returns Merged routes
  */
-export function mergeValuesByParent(data: AuthRoute[]) {
-  const merged: Record<string, { parent: string | null; route: RouteObject[] }> = {};
+export function mergeValuesByParent(data: Router.SingleAuthRoute[]) {
+  const merged: Record<string, Router.AuthRoute> = {};
   data.forEach(item => {
     // 使用一个变量作为 key，若 parent 为 null，则转换为字符串 "null"
     const key = item.parent === null ? 'null' : item.parent;

src/features/tab/GlobalTab.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '@/features/theme';
 import { getFullContent, toggleFullContent } from '@/layouts/appStore';
 import { isPC } from '@/utils/agent';
 
-import { setRemoveCacheKey } from '../router';
+import { setRemoveCacheKey } from '../router/routeStore';
 
 import ContextMenu from './TabContextMenu';
 import TabReloadButton from './TabReloadButton';

src/layouts/modules/GlobalContent.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import KeepAlive, { useKeepAliveRef } from 'keepalive-for-react';
 
-import { selectCacheRoutes, selectRemoveCacheKey } from '@/features/router';
+import { selectCacheRoutes, selectRemoveCacheKey } from '@/features/router/routeStore';
 import { getReloadFlag } from '@/layouts/appStore';
 import './transition.css';
 

src/pages/(base)/home/index.tsx

@@ -13,6 +13,7 @@ const Home = () => {
       size={[16, 16]}
     >
       <HeaderBanner />
+
       <CardData />
 
       <ARow gutter={[16, 16]}>
@@ -29,7 +30,6 @@ const Home = () => {
           <PieChart />
         </ACol>
       </ARow>
-
       <ARow gutter={[16, 16]}>
         <ACol
           lg={14}

src/pages/(base)/manage/index.tsx

@@ -7,7 +7,7 @@ const Manage = () => {
 export const handle = {
   constant: true,
   i18nKey: 'route.manage',
-  order: 2,
+  order: 3,
   title: 'manage'
 };
 

src/pages/(base)/multi-menu/index.tsx

@@ -3,6 +3,7 @@ import { redirect } from 'react-router-dom';
 export const handle = {
   constant: true,
   i18nKey: 'route.multi-menu',
+  order: 5,
   title: 'multi-menu'
 };
 

src/router/routes/builtin.ts

@@ -55,7 +55,7 @@ export const BaseChildrenRoutes = [
     handle: {
       i18nKey: 'route.exception',
       icon: 'ant-design:exception-outlined',
-      order: 7,
+      order: 4,
       title: 'exception'
     },
     id: '(base)_exception',

src/router/routes/index.ts

@@ -6,11 +6,6 @@ import { transformElegantRoutesToReactRoutes } from '../elegant/transform';
 
 import { BaseChildrenRoutes } from './builtin';
 
-export type AuthRoute = {
-  parent: string | null;
-  route: RouteObject;
-};
-
 /**
  * Get auth react routes
  *
@@ -32,7 +27,7 @@ function getReactRoutes(route: ElegantConstRoute[]) {
 function filterRoutes(
   routes: RouteObject[],
   parent: string | null = null,
-  authRoutes: AuthRoute[] = [],
+  authRoutes: Router.SingleAuthRoute[] = [],
   cacheRoutes: string[] = []
 ) {
   return routes.reduce((acc, route) => {
@@ -109,7 +104,7 @@ function initRoutes() {
   // 添加自定义复用路由至基础路由
   baseRoute?.children?.push(...BaseChildrenRoutes);
 
-  const authRoutes: AuthRoute[] = [];
+  const authRoutes: Router.SingleAuthRoute[] = [];
 
   const cacheRoutes: string[] = [];
 
@@ -119,5 +114,3 @@ function initRoutes() {
 }
 
 export const { authRoutes, cacheRoutes, constantRoutes } = initRoutes();
-
-console.log('authRoutes, cacheRoutes, constantRoutes', authRoutes, cacheRoutes, constantRoutes);

src/store/index.ts

@@ -2,7 +2,7 @@ import { combineSlices, configureStore } from '@reduxjs/toolkit';
 import type { Action, ThunkAction } from '@reduxjs/toolkit';
 
 import { authSlice } from '../features/auth/authStore';
-import { routeSlice } from '../features/router';
+import { routeSlice } from '../features/router/routeStore';
 import { tabSlice } from '../features/tab/tabStore';
 import { themeSlice } from '../features/theme';
 import { appSlice } from '../layouts/appStore';