Merge pull request #95 from Tencent/feat/menu

feat: 增加菜单hidden single功能
Tencent · Jun 27, 2022 · 02695fa · 02695fa
2 parents 92e4c3f + 42c0628
commit 02695fa
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 21 deletions.
diff --git a/src/layouts/components/Menu.tsx b/src/layouts/components/Menu.tsx
@@ -15,17 +15,17 @@ interface IMenuProps {
   showOperation?: boolean;
 }
 
-const renderMenuItems = (menu: IRouter[], parentPath = '') =>
-  menu.map((item) => {
-    const navigate = useNavigate();
+const renderMenuItems = (menu: IRouter[], parentPath = '') => {
+  const navigate = useNavigate();
+  return menu.map((item) => {
     const { children, meta, path } = item;
 
-    if (!meta) {
-      // 无meta信息，路由不显示为菜单
+    if (!meta || meta?.hidden === true) {
+      // 无meta信息 或 hidden == true，路由不显示为菜单
       return null;
     }
 
-    const { Icon, title } = meta || {};
+    const { Icon, title, single } = meta;
     const routerPath = resolve(parentPath, path);
 
     if (!children || children.length === 0) {
@@ -41,12 +41,31 @@ const renderMenuItems = (menu: IRouter[], parentPath = '') =>
       );
     }
 
+    if (single && children?.length > 0) {
+      const firstChild = children[0];
+      if (firstChild?.meta && !firstChild?.meta?.hidden) {
+        const { Icon, title } = meta;
+        const singlePath = resolve(resolve(parentPath, path), firstChild.path);
+        return (
+          <MenuItem
+            key={singlePath}
+            value={singlePath}
+            icon={Icon ? <Icon /> : undefined}
+            onClick={() => navigate(singlePath)}
+          >
+            {title}
+          </MenuItem>
+        );
+      }
+    }
+
     return (
       <SubMenu key={routerPath} value={routerPath} title={title} icon={Icon ? <Icon /> : undefined}>
         {renderMenuItems(children, routerPath)}
       </SubMenu>
     );
   });
+};
 
 /**
  * 顶部菜单

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -7,6 +7,7 @@ import detail from './modules/detail';
 import result from './modules/result';
 import user from './modules/user';
 import login from './modules/login';
+import otherRoutes from './modules/others';
 
 export interface IRouter {
   path: string;
@@ -22,6 +23,14 @@ export interface IRouter {
   meta?: {
     title?: string;
     Icon?: React.FC;
+    /**
+     * 侧边栏隐藏该路由
+     */
+    hidden?: boolean;
+    /**
+     * 单层路由
+     */
+    single?: boolean;
   };
   children?: IRouter[];
 }
@@ -31,28 +40,16 @@ const routes: IRouter[] = [
     path: '/login',
     Component: lazy(() => import('pages/Login')),
     isFullPage: true,
+    meta: {
+      hidden: true,
+    },
   },
   {
     path: '/',
     redirect: '/dashboard/base',
   },
 ];
 
-const otherRoutes: IRouter[] = [
-  {
-    path: '/403',
-    Component: lazy(() => import('pages/Result/403')),
-  },
-  {
-    path: '/500',
-    Component: lazy(() => import('pages/Result/500')),
-  },
-  {
-    path: '*',
-    Component: lazy(() => import('pages/Result/404')),
-  },
-];
-
 const allRoutes = [...routes, ...dashboard, ...list, ...form, ...detail, ...result, ...user, ...login, ...otherRoutes];
 
 export default allRoutes;
diff --git a/src/router/modules/others.ts b/src/router/modules/others.ts
@@ -0,0 +1,19 @@
+import { lazy } from 'react';
+import { IRouter } from '../index';
+
+const otherRoutes: IRouter[] = [
+  {
+    path: '/403',
+    Component: lazy(() => import('pages/Result/403')),
+  },
+  {
+    path: '/500',
+    Component: lazy(() => import('pages/Result/500')),
+  },
+  {
+    path: '*',
+    Component: lazy(() => import('pages/Result/404')),
+  },
+];
+
+export default otherRoutes;
diff --git a/src/utils/path.ts b/src/utils/path.ts
@@ -1,3 +1,8 @@
+/**
+ * 解析当前菜单对应的路由
+ * @param path1
+ * @param path2
+ */
 export const resolve = (path1 = '', path2 = '') => {
   let separator = '/';
   if (path1.endsWith('/') || path2.startsWith('/')) {