45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Menu } from 'antd'
|
|
import React, {Fragment, useEffect, useState} from 'react'
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { generateMenu } from '../../permission';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
|
|
export default function SideBar() {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const routes: [] = useSelector((store: any)=>store.permission)
|
|
const dispatch = useDispatch()
|
|
const [menuItem, setMenuItem] = useState<Array<any>>([{
|
|
key: '/',
|
|
label: '首页',
|
|
title: '首页',
|
|
icon: ''
|
|
}])
|
|
const getMenu = () => {
|
|
if(routes.length) {
|
|
const roleMenu = generateMenu(routes as any)
|
|
setMenuItem([...menuItem, ...roleMenu])
|
|
}
|
|
}
|
|
const goPage = (val: any) => {
|
|
console.log(val);
|
|
|
|
navigate(val.key, { replace: true })
|
|
}
|
|
useEffect(()=>{
|
|
getMenu()
|
|
}, [routes.length])
|
|
return (
|
|
<Fragment>
|
|
<div style={{height: '64px', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>FateVerse</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={[location.pathname]}
|
|
selectedKeys={[location.pathname]}
|
|
items={menuItem}
|
|
onClick={goPage}
|
|
/>
|
|
</Fragment>
|
|
)
|
|
} |