fix:菜单展开收起优化

src/modules/root/Menu.tsx

-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { Key, useContext, useEffect, useRef, useState } from 'react';
 import {
 import {
   withRouter,
   withRouter,
 } from 'react-router-dom';
 } from 'react-router-dom';
@@ -17,6 +17,7 @@ function Aside(props: any) {
   const ctx: any = useContext(XMContext);
   const ctx: any = useContext(XMContext);
   const [selectKey, setSelectKey] = useState();
   const [selectKey, setSelectKey] = useState();
   const [openKeys, setOpenKeys] = useState(['']);
   const [openKeys, setOpenKeys] = useState(['']);
+  const [lastOpenKeys, setLastOpenKeys] = useState(['']);
   const [topLogoUrl, setTopLogoUrl] = useState("")
   const [topLogoUrl, setTopLogoUrl] = useState("")
   const [collapsed, setCollapsed] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
   const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
   const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
@@ -26,6 +27,7 @@ function Aside(props: any) {
       if (link.indexOf(item.link) !== -1) {
       if (link.indexOf(item.link) !== -1) {
         setSelectKey(item.groupCode);
         setSelectKey(item.groupCode);
         setOpenKeys([])
         setOpenKeys([])
+        setLastOpenKeys([])
       } else if (item.children) {
       } else if (item.children) {
         item.children.map((_item: any, _index: any) => {
         item.children.map((_item: any, _index: any) => {
           if (link.indexOf(_item.link) !== -1) {
           if (link.indexOf(_item.link) !== -1) {
@@ -58,26 +60,41 @@ function Aside(props: any) {
     //   setOpenKeys([])
     //   setOpenKeys([])
     // }
     // }
   }
   }
-  function onOpenChange(key: any) {
-    if (openKeys.includes(key)) {
-      setOpenKeys([]);
-    } else {
-      setOpenKeys([key]);
+  function onOpenChange(key: Key[]) {
+    if (typeof key === "string") {
+      if (openKeys.includes(key)) {
+        setOpenKeys([]);
+        setLastOpenKeys([]);
+      } else {
+        setOpenKeys([key]);
+        setLastOpenKeys([key])
+      }
     }
     }
   }
   }
-  function onOpenChangeForHover(key: any) {
+
+  function onOpenChangeForHover(key: Key[]) {
     if (menuType) {
     if (menuType) {
       return
       return
     }
     }
-    if (openKeys.includes(key)) {
-      setOpenKeys([]);
-    } else {
-      setOpenKeys([key]);
+    if (typeof key === "string") {
+      if (openKeys.includes(key)) {
+        setOpenKeys([]);
+        setLastOpenKeys([]);
+      } else {
+        setOpenKeys([key]);
+        setLastOpenKeys([key])
+      }
     }
     }
   }
   }
+
   function handleMenu() {
   function handleMenu() {
     handleMenuType();
     handleMenuType();
     setCollapsed(!collapsed)
     setCollapsed(!collapsed)
+    if (!collapsed) {
+      setOpenKeys([])
+    } else {
+      setOpenKeys(lastOpenKeys)
+    }
   }
   }
 
 
   return (
   return (
@@ -116,7 +133,9 @@ function Aside(props: any) {
         <Menu
         <Menu
           style={{ minHeight: "100%", background: '#0E1935' }}
           style={{ minHeight: "100%", background: '#0E1935' }}
           selectedKeys={selectKey}
           selectedKeys={selectKey}
-          inlineCollapsed={collapsed}
+          openKeys={openKeys}
+          onOpenChange={onOpenChange}
+          // inlineCollapsed={collapsed}
           mode={menuType ? "inline" : "vertical"}
           mode={menuType ? "inline" : "vertical"}
         >
         >
           {
           {
@@ -129,13 +148,15 @@ function Aside(props: any) {
                         key={item.groupCode} 
                         key={item.groupCode} 
                         style={{ marginTop: 0 }} 
                         style={{ marginTop: 0 }} 
                         title={<div><img src={item.img} className="icon-img"></img><span>{item.groupName}</span></div> } 
                         title={<div><img src={item.img} className="icon-img"></img><span>{item.groupName}</span></div> } 
-                        onTitleClick={() => onOpenChange(item.groupCode)}>
+                        onTitleClick={() => onOpenChange(item.groupCode)}
+                        onTitleMouseEnter={()=> onOpenChangeForHover(item.groupCode)}
+                        >
                   {
                   {
                     item.children.map((_item: any, _index: any) => {
                     item.children.map((_item: any, _index: any) => {
                       if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
                       if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
                         return null;
                         return null;
                       }
                       }
-                      return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index}>
+                      return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index} onMouseLeave={()=> onOpenChangeForHover(item.groupCode)}>
                         <span className="name">{_item.groupName}</span>
                         <span className="name">{_item.groupName}</span>
                       </Menu.Item>
                       </Menu.Item>