优化Layout

spug_web/src/layout/Sider.js

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Layout, Menu } from 'antd';
 import { hasPermission, history } from 'libs';
 import styles from './layout.module.less';
-import menus from '../routes';
+import routes from '../routes';
 import logo from './logo-spug-white.png';
 
 let selectedKey = window.location.pathname;
 const OpenKeysMap = {};
-for (let item of menus) {
+for (let item of routes) {
   if (item.child) {
     for (let sub of item.child) {
       if (sub.title) OpenKeysMap[sub.path] = item.title
@@ -19,28 +19,30 @@ for (let item of menus) {
 
 export default function Sider(props) {
   const [openKeys, setOpenKeys] = useState([]);
+  const [menus, setMenus] = useState([]);
 
-  function makeMenu(menu) {
-    if (menu.auth && !hasPermission(menu.auth)) return null;
-    if (!menu.title) return null;
-    return menu.child ? _makeSubMenu(menu) : _makeItem(menu)
-  }
+  useEffect(() => {
+    const tmp = []
+    for (let item of routes) {
+      const menu = handleRoute(item)
+      tmp.push(menu)
+    }
+    setMenus(tmp)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  function _makeSubMenu(menu) {
-    return (
-      <Menu.SubMenu key={menu.title} title={<span>{menu.icon}<span>{menu.title}</span></span>}>
-        {menu.child.map(menu => makeMenu(menu))}
-      </Menu.SubMenu>
-    )
-  }
-
-  function _makeItem(menu) {
-    return (
-      <Menu.Item key={menu.path}>
-        {menu.icon}
-        <span>{menu.title}</span>
-      </Menu.Item>
-    )
+  function handleRoute(item) {
+    if (item.auth && !hasPermission(item.auth)) return
+    if (!item.title) return;
+    const menu = {label: item.title, key: item.path, icon: item.icon}
+    if (item.child) {
+      menu.children = []
+      for (let sub of item.child) {
+        const subMenu = handleRoute(sub)
+        menu.children.push(subMenu)
+      }
+    }
+    return menu
   }
 
   const tmp = window.location.pathname;
@@ -60,13 +62,12 @@ export default function Sider(props) {
         <Menu
           theme="dark"
           mode="inline"
+          items={menus}
           className={styles.menus}
           selectedKeys={[selectedKey]}
           openKeys={openKeys}
           onOpenChange={setOpenKeys}
-          onSelect={menu => history.push(menu.key)}>
-          {menus.map(menu => makeMenu(menu))}
-        </Menu>
+          onSelect={menu => history.push(menu.key)}/>
       </div>
     </Layout.Sider>
   )