feat: 菜单自适应展开

src/components/Menu/WebMenu/index.tsx

@@ -1,17 +1,29 @@
+import IconFont from "@/components/IconFont";
 import MenuTagContext from "@/contexts/MenuTagContext";
 import { getLocalStorageMenus, getOpenKeysByUrls, getShowMenus, setLocalStorage } from "@/utils/menuUtils";
+import { AppstoreOutlined } from "@ant-design/icons";
 import { Menu } from "antd";
 import { toNumber } from "lodash-es";
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
+const createIcon = item => {
+  item.icon = item.icon ? <IconFont type={item.icon} /> : <AppstoreOutlined />;
+};
+const createMenuIcon = item => {
+  return item.map(v => {
+    createIcon(v);
+    if (v.children) createMenuIcon(v.children);
+    return v;
+  });
+};
+
 const WebMenu = () => {
   const { addTag } = useContext(MenuTagContext);
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const menusList = JSON.parse(getLocalStorageMenus() || "");
-  const newmenus = getShowMenus(menusList.concat());
-
+  const newmenus = createMenuIcon(getShowMenus(menusList.concat()));
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [openKeys, setOpenkeys] = useState([]);
 
@@ -57,7 +69,7 @@ const WebMenu = () => {
 
   return (
     <div style={{ width: "100%" }}>
-      <Menu mode="inline" theme="dark" onClick={onClick} selectedKeys={selectedKeys} openKeys={openKeys} onOpenChange={onOpenChange} items={newmenus} />
+      <Menu mode="inline" theme="dark" onClick={onClick} selectedKeys={selectedKeys} openKeys={openKeys} onOpenChange={onOpenChange} items={newmenus} inlineIndent={12} />
     </div>
   );
 };

src/layout/DefaultLayout/index.tsx

@@ -1,13 +1,14 @@
-import { Alert, Layout, Spin } from "antd";
-import { Outlet } from "react-router-dom";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+import Copyright from "@/components/Footer/Copyright";
 import DefaultLayoutHeader from "@/components/Header/DefaultLayoutHeader";
 import WebMenu from "@/components/Menu/WebMenu";
-import { Suspense, useContext, useEffect } from "react";
-import Copyright from "@/components/Footer/Copyright";
 import TagsView from "@/components/TagsView";
 import MenuTagContext from "@/contexts/MenuTagContext";
-import { ErrorBoundary } from "@/components/ErrorBoundary";
 import FailContainer from "@/pages/FailPage/FailContainer";
+import { Alert, Layout, Spin } from "antd";
+import { throttle } from "lodash-es";
+import { Suspense, useContext, useEffect, useState } from "react";
+import { Outlet } from "react-router-dom";
 
 import styles from "./index.module.scss";
 
@@ -22,6 +23,8 @@ const SuspendFallbackLoading = () => (
 const DefaultLayout = () => {
   const { setTagPlanVisible, refresh } = useContext(MenuTagContext);
 
+  const [collapsed, setCollapsed] = useState(false);
+
   useEffect(() => {
     const clickRemove = () => setTagPlanVisible(false);
     window.addEventListener("click", clickRemove);
@@ -31,13 +34,29 @@ const DefaultLayout = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const resize = throttle(
+    () => {
+      const winW = document.body.clientWidth;
+      setCollapsed(winW < 600);
+    },
+    500,
+    { trailing: true, leading: false }
+  );
+  useEffect(() => {
+    resize();
+    window.addEventListener("resize", resize);
+    return () => {
+      window && window.removeEventListener("resize", resize);
+    };
+  }, []);
+
   return (
     <Layout className={styles.layout}>
       <ErrorBoundary fallbackRender={FailContainer}>
         <DefaultLayoutHeader />
       </ErrorBoundary>
       <Layout className={styles.content}>
-        <Sider className={styles.sider} trigger={null} collapsible collapsed={false} breakpoint="md">
+        <Sider className={styles.sider} trigger={null} collapsible collapsed={collapsed} breakpoint="md">
           <WebMenu />
         </Sider>