diff --git a/spug_web/src/layout/Sider.js b/spug_web/src/layout/Sider.js index 238bbfc..3b697e3 100644 --- a/spug_web/src/layout/Sider.js +++ b/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.icon}{menu.title}}> - {menu.child.map(menu => makeMenu(menu))} - - ) - } - - function _makeItem(menu) { - return ( - - {menu.icon} - {menu.title} - - ) + 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) { history.push(menu.key)}> - {menus.map(menu => makeMenu(menu))} - + onSelect={menu => history.push(menu.key)}/> )