style: flatten menu items

src/layouts/index.tsx

@@ -28,7 +28,7 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
-import { Button, ConfigProvider, Modal, theme } from 'antd';
+import { Button, ConfigProvider, Modal, Tooltip, theme } from 'antd';
 import 'driver.js/dist/driver.css';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -39,6 +39,7 @@ import { LogoIcon, SLogoIcon } from './Logo';
 import ErrorBoundary from './error-boundary';
 import { getRightRenderContent } from './rightRender';
 import { patchRoutes } from './runtime';
+import SiderMenu from './sider-menu';
 
 const loginPath = '/login';
 
@@ -102,7 +103,8 @@ export default (props: any) => {
     defer: false
   });
   const [modal, contextHolder] = Modal.useModal();
-  const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
+  const { themeData, setTheme, setUserSettings, userSettings, isDarkTheme } =
+    useUserSettings();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
@@ -113,8 +115,9 @@ export default (props: any) => {
   const navigate = useNavigate();
   const intl = useIntl();
   const { clientRoutes, pluginManager } = useAppData();
-  const [collapsed, setCollapsed] = useState(false);
+  // const [collapsed, setCollapsed] = useState(userSettings.collapsed || false);
   const [collapseValue, setCollapseValue] = useState(false);
+  const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
 
   const initialInfo = (useModel && useModel('@@initialState')) || {
     initialState: undefined,
@@ -187,7 +190,11 @@ export default (props: any) => {
 
   const handleToggleCollapse = (e: any) => {
     e.stopPropagation();
-    setCollapsed(!collapsed);
+    // setCollapsed(!collapsed);
+    setUserSettings({
+      ...userSettings,
+      collapsed: !userSettings.collapsed
+    });
   };
 
   const newRoutes = filterRoutes(
@@ -203,6 +210,8 @@ export default (props: any) => {
   const role = initialState?.currentUser?.is_admin ? 'admin' : 'user';
   const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes, role));
 
+  console.log('route============', route);
+
   patchRoutes({
     routes: route.children,
     initialState: initialInfo.initialState
@@ -213,6 +222,24 @@ export default (props: any) => {
     [location.pathname]
   );
 
+  const allRouteKeys = useMemo(() => {
+    const keys = new Set<string>();
+    const childrenRoutes = route?.children || [];
+    const traverseRoutes = (routes) => {
+      routes.forEach((r) => {
+        if (r.path) {
+          keys.add(r.path);
+        }
+        if (r.children) {
+          traverseRoutes(r.children);
+        }
+      });
+    };
+    traverseRoutes(childrenRoutes);
+
+    return keys;
+  }, [route?.children]);
+
   const showUpgrade = useMemo(() => {
     return (
       initialState?.currentUser?.is_admin &&
@@ -256,13 +283,17 @@ export default (props: any) => {
     return () => clearTimeout(timeout);
   }, [initializeMenu, matchedRoute, location]);
 
+  const collapsed = useMemo(() => {
+    return userSettings.collapsed || false;
+  }, [userSettings.collapsed]);
+
   const renderMenuHeader = (logo, title) => {
     return (
       <>
         {logo}
         <div className="collapse-wrap" onClick={handleToggleCollapse}>
           <Button
-            style={{ marginRight: collapsed ? 0 : -14 }}
+            style={{ marginRight: collapsed ? 0 : -14, border: 'none' }}
             size="small"
             type={collapsed ? 'default' : 'text'}
           >
@@ -284,7 +315,29 @@ export default (props: any) => {
     );
   };
 
+  const handleToggleGroup = (menuItemProps, e) => {
+    e.stopPropagation();
+
+    if (collapseKeys.has(menuItemProps.key)) {
+      collapseKeys.delete(menuItemProps.key);
+    } else {
+      collapseKeys.add(menuItemProps.key);
+    }
+    setCollapseKeys(new Set(collapseKeys));
+  };
+
+  const onMenuItemClick = (menuItem) => {
+    navigate(menuItem.path);
+  };
+
+  const menuContentRender = (menuProps, defaultDom) => {
+    return (
+      <SiderMenu {...menuProps} onMenuItemClick={onMenuItemClick}></SiderMenu>
+    );
+  };
+
   const actionRender = (layoutProps) => {
+    console.log('actionRender', layoutProps);
     const dom = getRightRenderContent({
       runtimeConfig,
       loading,
@@ -300,38 +353,36 @@ export default (props: any) => {
     return dom;
   };
 
-  const itemRender = (route, _, routes) => {
-    const { breadcrumbName, title, path } = route;
-    const label = title || breadcrumbName;
-    const last = routes[routes.length - 1];
-    if (last) {
-      if (last.path === path || last.linkPath === path) {
-        return <span>{label}</span>;
-      }
-    }
-    return <Link to={path}>{label}</Link>;
-  };
-
   const menuItemRender = (menuItemProps, defaultDom) => {
+    console.log('defaultdom==========', menuItemProps, defaultDom);
     if (menuItemProps.isUrl || menuItemProps.children) {
       return defaultDom;
     }
     if (menuItemProps.path && location.pathname !== menuItemProps.path) {
       return (
-        <Link
-          to={menuItemProps.path.replace('/*', '')}
-          target={menuItemProps.target}
+        <Tooltip
+          title={collapsed ? menuItemProps.name : false}
+          placement="right"
         >
-          {defaultDom}
-        </Link>
+          <Link
+            to={menuItemProps.path.replace('/*', '')}
+            target={menuItemProps.target}
+          >
+            {defaultDom}
+          </Link>
+        </Tooltip>
       );
     }
-    return <>{defaultDom}</>;
+    return (
+      <Tooltip title={collapsed ? menuItemProps.name : false} placement="right">
+        {defaultDom}
+      </Tooltip>
+    );
   };
 
   const menuDataRender = (menuData) => {
     const currentItem = menuData.find((s) => location.pathname === s.path);
-    return menuData.map((item) => {
+    const result = menuData.map((item) => {
       const newItem = { ...item };
 
       const selected =
@@ -347,18 +398,17 @@ export default (props: any) => {
       }
       if (newItem.children) {
         newItem.children = menuDataRender(newItem.children);
-
-        if (selected) {
-          newItem.icon = <IconFont type={newItem.selectedIcon} />;
-        }
       }
       return newItem;
     });
+
+    return result;
   };
 
   const onPageChange = (route) => {
     const { location } = history;
     const { pathname } = location;
+    console.log('onPageChange', pathname, route);
 
     initRouteCacheValue(pathname);
     dropRouteCache(pathname);
@@ -387,7 +437,11 @@ export default (props: any) => {
   };
 
   const onCollapse = (value) => {
-    setCollapsed(value);
+    // setCollapsed(value);
+    setUserSettings({
+      ...userSettings,
+      collapsed: value
+    });
   };
 
   useEffect(() => {
@@ -467,15 +521,17 @@ export default (props: any) => {
         onCollapse={onCollapse}
         onMenuHeaderClick={onMenuHeaderClick}
         menuHeaderRender={renderMenuHeader}
-        collapsed={collapsed}
+        collapsed={userSettings.collapsed}
         onPageChange={onPageChange}
         formatMessage={formatMessage}
         menu={{
-          locale: true
+          locale: true,
+          type: 'group'
         }}
+        splitMenus={true}
         logo={collapsed ? SLogoIcon : LogoIcon}
+        menuContentRender={menuContentRender}
         menuItemRender={menuItemRender}
-        itemRender={itemRender}
         menuDataRender={menuDataRender}
         disableContentMargin
         fixSiderbar