style: flatten menu items

2025-07-10 09:47:12 +08:00
parent 751ddbb3f3
commit 51450c2b02
23 changed files with 1052 additions and 553 deletions
@@ -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
@@ -20,23 +20,14 @@ import { Avatar, Menu, Spin } from 'antd';
 import _ from 'lodash';
 import React from 'react';

-const themeConfig = [
-  {
-    key: 'realDark',
-    label: 'common.appearance.dark',
-    icon: <MoonOutlined />
-  },
-  {
-    key: 'light',
-    label: 'common.appearance.light',
-    icon: <SunOutlined />
-  }
-  // {
-  //   key: 'auto',
-  //   label: 'common.appearance.system',
-  //   icon: <IconFont type="icon-theme-auto" />
-  // }
-];
+const getMenuStyle = (
+  collapsed: boolean,
+  siderWidth: number,
+  extraStyle: React.CSSProperties = {}
+) => ({
+  width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
+  ...extraStyle
+});

 export const getRightRenderContent = (opts: {
  runtimeConfig: any;
@@ -300,6 +291,20 @@ export const getRightRenderContent = (opts: {
          </span>
        ),
        children: [
+          {
+            key: 'apikeys',
+            label: (
+              <span className="flex flex-center">
+                <IconFont type="icon-key" />
+                <span className="m-l-8" style={{ marginLeft: 8 }}>
+                  {intl?.formatMessage?.({ id: 'menu.apikeys' })}
+                </span>
+              </span>
+            ),
+            onClick: () => {
+              history.push('/api-keys');
+            }
+          },
          {
            key: 'settings',
            label: (
@@ -333,23 +338,17 @@ export const getRightRenderContent = (opts: {
    ]
  };

-  const getMenuStyle = (
-    collapsed: boolean,
-    siderWidth: number,
-    extraStyle: React.CSSProperties = {}
-  ) => ({
-    width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
-    ...extraStyle
-  });
-
  return (
-    <div>
+    <>
      <Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
-      <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
+      {/* <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} /> */}
      <Menu
        {...userMenu}
-        style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
+        style={getMenuStyle(collapsed, siderWidth, {
+          marginTop: 8,
+          marginBottom: 0
+        })}
      />
-    </div>
+    </>
  );
 };
@@ -0,0 +1,240 @@
+import IconFont from '@/components/icon-font';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { useLocation } from '@umijs/max';
+import { Divider, Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { useMemo, useState } from 'react';
+
+interface MenuItem {
+  icon?: string;
+  selectedIcon?: string;
+  defaultIcon?: string;
+  children?: MenuItem[];
+
+  [key: string]: any;
+}
+
+interface SiderMenuProps {
+  menuData: MenuItem[];
+  collapsed?: boolean;
+  onMenuItemClick: (item: MenuItem) => void;
+}
+
+const useStyles = createStyles(({ css, token }) => {
+  console.log('useStyles', token);
+
+  // @ts-ignore
+  const { Menu } = token;
+
+  return {
+    siderMenu: css`
+      &.sider-menu-collapsed {
+        .menu-item {
+          justify-content: center;
+          padding: 0;
+        }
+      }
+    `,
+    groupTitle: css`
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: var(--ant-padding-xs) var(--ant-padding);
+      line-height: var(--ant-menu-group-title-line-height);
+      font-size: 12px;
+      padding-bottom: 4px;
+      color: var(--ant-color-text-secondary);
+      overflow: hidden;
+      height: 30px;
+      transtion: all var(--ant-motion-duration-slow);
+      &:hover {
+        .group-title-text {
+          color: var(--ant-color-text);
+        }
+      }
+      .anticon {
+        transform: scale(0.8);
+      }
+      .group-title-text {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        color: var(--ant-color-text-secondary);
+        font-weight: 400;
+      }
+
+      &.menu-item-group-title-collapsed {
+        height: 1px;
+        padding-block: 0;
+        padding-inline: 0;
+      }
+    `,
+    menuItemContent: css`
+      margin: 4px;
+      border-radius: 4px;
+      overflow: hidden;
+    `,
+    menuItemWrapper: css`
+      display: flex;
+      gap: 12px;
+      cursor: pointer;
+      position: relative;
+      padding-inline: calc(var(--ant-font-size) * 2) var(--ant-padding);
+      padding-left: 16px;
+      overflow: hidden;
+      height: ${Menu.itemHeight}px;
+      line-height: ${Menu.itemHeight}px;
+      color: var(--ant-color-text-secondary);
+      &:hover {
+        background-color: ${Menu.itemHoverBg};
+        color: ${Menu.itemHoverColor};
+      }
+      &.menu-item-selected {
+        background-color: ${Menu.itemSelectedBg};
+        color: ${Menu.itemSelectedColor};
+      }
+      &:active {
+        background-color: ${Menu.itemActiveBg};
+        color: ${Menu.itemActiveColor};
+      }
+      .anticon {
+        font-size: 16px;
+      }
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+    menuItemGroup: css`
+      &.menu-item-group-hidden {
+        display: none;
+      }
+    `
+  };
+});
+
+const SiderMenu: React.FC<SiderMenuProps> = (props) => {
+  const { menuData, collapsed, onMenuItemClick } = props;
+  const { styles, cx } = useStyles();
+  const location = useLocation();
+  const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
+  console.log('SiderMenu', props);
+
+  const dividerStyles = useMemo(() => {
+    if (collapsed) {
+      return {
+        margin: '6px 0'
+      };
+    }
+    return {
+      margin: '6px 16px',
+      width: 'unset',
+      minWidth: 'unset',
+      maxWidth: 'unset'
+    };
+  }, [collapsed]);
+
+  const handleToggleGroup = (e: any, menuGroup: any) => {
+    e.stopPropagation();
+
+    console.log('handleToggleGroup', menuGroup.key);
+
+    if (collapseKeys.has(menuGroup.key)) {
+      collapseKeys.delete(menuGroup.key);
+    } else {
+      collapseKeys.add(menuGroup.key);
+    }
+    setCollapseKeys(new Set(collapseKeys));
+  };
+
+  const menuItemRender = (menuItem: MenuItem, key: string) => {
+    return (
+      <div
+        className={cx(styles.menuItemContent, 'menu-item-content')}
+        key={key}
+      >
+        <div
+          onClick={() => onMenuItemClick(menuItem)}
+          className={cx(styles.menuItemWrapper, 'menu-item', {
+            'menu-item-selected': location.pathname === menuItem.path
+          })}
+        >
+          {collapsed ? (
+            <Tooltip title={menuItem.name} placement="right">
+              <span className="icon-wrapper">
+                <IconFont
+                  type={
+                    location.pathname === menuItem.path
+                      ? menuItem.selectedIcon || ''
+                      : menuItem.defaultIcon || ''
+                  }
+                ></IconFont>
+              </span>
+            </Tooltip>
+          ) : (
+            <>
+              {menuItem.icon}
+              <span>{menuItem.name}</span>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={cx(styles.siderMenu, 'sider-menu', {
+        'sider-menu-collapsed': collapsed
+      })}
+    >
+      {menuData.map((item: MenuItem, index: number) => (
+        <div key={item.key}>
+          {item.children && item.children.length > 0 ? (
+            <>
+              {
+                <div
+                  className={cx(styles.groupTitle, {
+                    'menu-item-group-title-collapsed': collapsed
+                  })}
+                  onClick={(e) => handleToggleGroup(e, item)}
+                >
+                  {!collapsed ? (
+                    <span className="group-title-text">
+                      <span>{item.name}</span>
+                      <CaretDownOutlined
+                        rotate={collapseKeys.has(item.key) ? -90 : 0}
+                      ></CaretDownOutlined>
+                    </span>
+                  ) : (
+                    <Divider style={dividerStyles} />
+                  )}
+                </div>
+              }
+              <div
+                className={cx(styles.menuItemGroup, {
+                  'menu-item-group-collapsed': collapsed,
+                  'menu-item-group-hidden':
+                    !collapsed && collapseKeys.has(item.key)
+                })}
+              >
+                {item.children?.map((child: MenuItem) =>
+                  menuItemRender(child, child.key)
+                )}
+              </div>
+            </>
+          ) : (
+            <>{menuItemRender(item, item.key)}</>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SiderMenu;