import { useEffect , useState } from 'react' ; import { Link , withRouter } from 'ice' ; import { Nav } from '@alifd/next' ; import Icon from '@/components/Icon' ; import { asideMenuConfig } from '../../menuConfig' ; import styles from './index.module.scss' ; const { SubNav } = Nav ; const NavItem = Nav . Item ; const AUTH_CONFIG = { admin : true , guest : false , } ; export interface IMenuItem { name : string ; path : string ; icon ? : string ; children ? : IMenuItem [ ] ; } function getNavMenuItems ( menusData , initIndex ? , auth ? ) { if ( ! menusData ) { return [ ] ; } return menusData . filter ( ( item ) => { let roleAuth = true ; if ( auth && item . auth && item . auth instanceof Array ) { if ( item . auth . length ) { roleAuth = item . auth . some ( ( key ) => auth [ key ] ) ; } } return item . name && ! item . hideInMenu && roleAuth ; } ) . map ( ( item , index ) => { return getSubMenuOrItem ( item , `${ initIndex }-${ index }` , auth ) ; } ) ; } function getSubMenuOrItem ( item , index ? , auth ? ) { if ( item . children && item . children . some ( ( child ) => child . name ) ) { const childrenItems = getNavMenuItems ( item . children , index , auth ) ; if ( childrenItems && childrenItems . length > 0 ) { const subNav = ( < SubNav key = { item . name } icon = { < Icon className = { styles . icon } type = { item . icon } / > } label = { item . name } > { childrenItems } < /SubNav>); return subNav ; } return null ; } const navItem = ( < NavItem key = { item . path } icon = { < Icon className = { styles . icon } type = { item . icon } / > } > < Link to = { item . path } className = { styles . link } > { item . name } < /Link> < /NavItem>); return navItem ; } const Navigation = ( props ) => { const [ openKeys , setOpenKeys ] = useState < string [ ] > ( [ ] ) ; const { location } = props ; const { pathname } = location ; useEffect ( ( ) => { const curSubNav = asideMenuConfig . find ( ( menuConfig ) => { return menuConfig . children && checkChildPathExists ( menuConfig ) ; } ) ; function checkChildPathExists ( menuConfig ) { return menuConfig . children . some ( ( child ) => { return child . children ? checkChildPathExists ( child ) : child . path === pathname ; } ) ; } if ( curSubNav && ! openKeys . includes ( curSubNav . name ) ) { setOpenKeys ( [ ... openKeys , curSubNav . name ] ) ; } } , [ pathname ] ) ; return ( < div className = { styles . nav } > < Nav type = "normal" openKeys = { openKeys } selectedKeys = { [ pathname ] } defaultSelectedKeys = { [ pathname ] } embeddable activeDirection = "right" hasArrow = { false } onOpen = { ( keys ) => { setOpenKeys ( keys ) ; } } > { getNavMenuItems ( asideMenuConfig , 0 , AUTH_CONFIG ) } < /Nav> < /div>); } ; const PageNav = withRouter ( Navigation ) ; export default PageNav ;