优化Layout

4.0
vapao 2022-11-06 10:57:11 +08:00
parent 3c43095daa
commit d2f2c68607
1 changed files with 27 additions and 26 deletions

View File

@ -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>
)