优化菜单显示

src/layouts/BasicLayout.tsx

@@ -12,6 +12,7 @@ import RightContent from './components/RightContent';
 // import logo from '../assets/logo.svg';
 import logo from '../../mockStatic/logo.png'
 import MenuSlider from './components/MenuSlider'
+import { getMatchMenu } from '@umijs/route-utils';
 
 export interface BasicLayoutProps extends ProLayoutProps {
   breadcrumbNameMap: {
@@ -31,6 +32,23 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
   };
 };
 
+export const getSelectedMenuKeys = (
+  pathname: string,
+  menuData: MenuDataItem[],
+): string[] => {
+  const menus = getMatchMenu(pathname, menuData);
+  const dispatchMenu = menus.map(v => {
+    if (v.hideInMenu) {
+      const flag = v.key || v.path || ''
+      const substr = flag.substr(0, flag.lastIndexOf('/'))
+      v.path = substr
+      v.key = substr
+    }
+    return v
+  })
+  return dispatchMenu.map(item => item.key || item.path || '');
+};
+
 const defaultFooterDom = (
   <DefaultFooter
     copyright={`${new Date().getFullYear()} 技术组体验出品`}
@@ -63,7 +81,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   };
   const [openKeys, setOpenKeys] = useState<string[]>([])
   const [collapsed, setCollapsed] = useState(false)
-
+  const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>([]);
   const handleMenuCollapse = (payload: boolean): void => {
     setCollapsed(payload)
     if (payload) {
@@ -90,6 +108,19 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const menuRouter = getMenuRouter(menuData, location.pathname)
 
   useEffect(() => {
+    // if pathname can't match, use the nearest parent's key
+    const keys = getSelectedMenuKeys(
+      location.pathname || '/',
+      basicInfo.menuData || [],
+    );
+    const animationFrameId = requestAnimationFrame(() => {
+      setSelectedKeys(keys);
+    });
+    return () =>
+      window.cancelAnimationFrame &&
+      window.cancelAnimationFrame(animationFrameId);
+  }, [location.pathname]);
+  useEffect(() => {
     if (menuRouter && menuRouter.children) {
       if (collapsed) {
         setOpenKeys([])
@@ -118,7 +149,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 
       ]}
       menuRender={() => <MenuSlider
-        currentSelectKey={[location.pathname]}
+        currentSelectKey={selectedKeys}
         openKeys={openKeys}
         menuData={menuData}
         pathname={location.pathname}