@bit-sun/business-component 4.2.5-per-alpha.1 → 4.2.5-per-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.2.5-per-alpha.1",
+  "version": "4.2.5-per-alpha.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -63,6 +63,7 @@
   },
   "devDependencies": {
     "@ant-design/pro-layout": "7.1.3",
+    "@babel/parser": "^7.21.0",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.14.185",
     "@types/react": "17.0.2",
@@ -71,18 +72,18 @@
     "acorn": "^7.2.0",
     "acorn-walk": "^7.1.1",
     "antd": "^4.17.2",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "bssula": "^4.2.0",
-    "umi-plugin-bssula": "^4.2.0",
     "dumi": "^1.0.14",
     "father-build": "^1.17.2",
     "gh-pages": "^3.0.0",
     "lint-staged": "^10.0.7",
+    "path-to-regexp": "^2.4.0",
     "prettier": "^2.2.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "rollup-plugin-commonjs": "^10.1.0",
-    "path-to-regexp": "^2.4.0",
-    "@babel/parser": "^7.21.0"
+    "umi-plugin-bssula": "^4.2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/DrawContent.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useEffect, useState, useLayoutEffect, useImperativeHandle, useCallback, useRef, useMemo } from 'react';
 import { List, Tooltip, Input, Button } from 'antd';
 import { Link, formatMessage, history } from 'umi';
 import classNames from 'classnames';
@@ -27,6 +27,13 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
 
   const [moreBtnShow, setMoreBtnShow] = useState(false);
   const [showScroll, setShowScroll] = useState(false);
+  
+  // 添加refs来跟踪组件状态和清理资源
+  const isUnmountedRef = useRef(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const resizeHandlerRef = useRef<(() => void) | null>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const drawContentRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
     getMenuContentHeight();
@@ -51,60 +58,104 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
     setroutesData(routesDataList)
     setAuthorityMenu(authorityMenuList)
 
-    window.onresize = () => {
-      getMenuContentHeight();
+    // 创建resize处理函数并保存引用
+    const handleResize = () => {
+      if (!isUnmountedRef.current) {
+        getMenuContentHeight();
+      }
     };
+    resizeHandlerRef.current = handleResize;
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+     return () => {
+       isUnmountedRef.current = true;
+       if (resizeHandlerRef.current) {
+         window.removeEventListener('resize', resizeHandlerRef.current);
+         resizeHandlerRef.current = null;
+       }
+       if (timeoutRef.current) {
+         clearTimeout(timeoutRef.current);
+         timeoutRef.current = null;
+       }
+       if (debounceTimerRef.current) {
+         clearTimeout(debounceTimerRef.current);
+         debounceTimerRef.current = null;
+       }
+       // 清理DOM引用
+       drawContentRef.current = null;
+     };
   }, []);
 
   useLayoutEffect(() => {
-    setTimeout(() => {
-      let drawContentHeight=document.getElementById("drawContent").scrollHeight;
-      if (drawContentHeight > rightMenuHeight) {
-        setMoreBtnShow(true);
+    timeoutRef.current = setTimeout(() => {
+      if (!isUnmountedRef.current) {
+        // 使用缓存的DOM引用，避免重复查询
+        if (!drawContentRef.current) {
+          drawContentRef.current = document.getElementById("drawContent");
+        }
+        if (drawContentRef.current) {
+          let drawContentHeight = drawContentRef.current.scrollHeight;
+          if (drawContentHeight > rightMenuHeight) {
+            setMoreBtnShow(true);
+          }
+        }
+      }
+    }, 0);
+    
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
-    }, 0)
-  }, [])
+    };
+  }, [rightMenuHeight])
 
-  const getMenuContentHeight = () => {
-    let clientHeight = document.body.clientHeight;
-    setHeight(clientHeight - 190);
-    setDrawHeight(clientHeight - 70)
-  }
+  const getMenuContentHeight = useCallback(() => {
+    if (!isUnmountedRef.current) {
+      let clientHeight = document.body.clientHeight;
+      setHeight(clientHeight - 190);
+      setDrawHeight(clientHeight - 70);
+    }
+  }, []);
 
 
-  const renderChildItem = (child) => {
+  // 优化递归渲染函数，使用React.memo减少重复渲染
+  const renderChildItem = useCallback((child) => {
     if (!child.hideInMenu && child.children) {
       return (
-        <>
+        <React.Fragment key={child.path || child.locale}>
           <List.Item style={{ color: '#000', fontWeight: 'bold' }}>
             {formatMessage({ id: `${child.locale}` })}
           </List.Item>
           {child.children.map((menuItem: any) => {
             return renderChildItem(menuItem)
           })}
-        </>
+        </React.Fragment>
       );
     } else if (!child.hideInMenu && child.path) {
+      const displayText = formatMessage({ id: `${child.locale}` });
+      const truncatedText = displayText.length > 10 
+        ? `${formatMessage({ id: `${child.name}` }).slice(0, 10)}...` 
+        : displayText;
+      
       return (
-        <List.Item style={{fontSize: '12px'}} className="allFuncOnMouserover">
+        <List.Item key={child.path} style={{fontSize: '12px'}} className="allFuncOnMouserover">
           <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
-            <Tooltip
-              title={formatMessage({ id: `${child.locale}` })}
-            >
-              {formatMessage({ id: `${child.locale}` }).length > 10
-                ? `${formatMessage({
-                  id: `${child.name}`,
-                }).slice(0, 10)}...`
-                : formatMessage({ id: `${child.locale}` })}
+            <Tooltip title={displayText}>
+              {truncatedText}
             </Tooltip>
-            <img className="allFuncOnMouseroverImg" src={right}></img>
+            <img className="allFuncOnMouseroverImg" src={right} alt="arrow"></img>
           </Link>
         </List.Item>
       );
     }
-  }
+    return null;
+  }, [onMenuClick]);
 
-  const onMenuClick = (e, item) => {
+  const onMenuClick = useCallback((e, item) => {
+    if (isUnmountedRef.current) return;
+    
     e.stopPropagation();
     e.preventDefault();
     let searchHistory = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
@@ -127,10 +178,74 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
       pathname: item.path
     })
     onClose();
-  };
+  }, [itemPath, onClose]);
+
+  // 创建debounce搜索函数
+  const debouncedSearch = useCallback((value: string) => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => {
+      if (!isUnmountedRef.current) {
+        searchMenuData(authorityMenu, value, setSearchMenuData);
+      }
+    }, 600);
+  }, [authorityMenu]);
+
+  const handleSearchChange = useCallback((e: any) => {
+    if (!isUnmountedRef.current) {
+      debouncedSearch(e.target.value);
+    }
+  }, [debouncedSearch]);
+
+  // 优化菜单项点击处理器
+  const handleMenuItemClick = useCallback((item: any) => {
+    if (isUnmountedRef.current) return;
+    
+    if (item.component) {
+      history.push({
+        pathname: item.path
+      });
+      onClose();
+    } else {
+      setCurrentOneLevel(item.path);
+      let currentDom = document.getElementById(item.path);
+      currentDom && currentDom.scrollIntoView();
+    }
+  }, [onClose]);
+
+  // 优化关闭按钮点击处理器
+  const handleCloseClick = useCallback(() => {
+    if (!isUnmountedRef.current) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // 优化搜索结果点击处理器
+  const handleSearchResultClick = useCallback((item: any) => {
+    if (!isUnmountedRef.current) {
+      onMenuClick({stopPropagation: () => {}, preventDefault: () => {}}, item);
+    }
+  }, [onMenuClick]);
+
+  // 优化更多按钮点击处理器
+  const handleMoreButtonClick = useCallback(() => {
+    if (!isUnmountedRef.current) {
+      setShowScroll(true);
+      setMoreBtnShow(false);
+    }
+  }, []);
 
 
-  let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+  // 使用useMemo缓存searchHistoryList，避免每次渲染都重新解析localStorage
+  const searchHistoryList = useMemo(() => {
+    try {
+      return JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+    } catch (error) {
+      console.warn('Failed to parse search history:', error);
+      return [];
+    }
+  }, [itemPath]);
   return (
     <div style={{height: `${drawHeight}px`}} className={'global_menu_draw_content'}>
       <div className={'drawerWarp_left'}>
@@ -145,17 +260,8 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
               }}
               onClick={(e) => {
                 e.stopPropagation();
-                e.preventDefault()
-                if (item.component) {
-                  history.push({
-                    pathname: item.path
-                  })
-                  onClose();
-                } else {
-                  setCurrentOneLevel(item.path);
-                  let currentDom = document.getElementById(item.path);
-                  currentDom && currentDom.scrollIntoView();
-                }
+                e.preventDefault();
+                handleMenuItemClick(item);
               }}
             >
               {item.name}
@@ -164,7 +270,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
       </div>
       <div style={{flexGrow: 1, position: 'relative'}}>
         <img
-          onClick={() => {onClose()}} 
+          onClick={handleCloseClick} 
           style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
         
         <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
@@ -173,9 +279,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
             placeholder="请输入关键词"
             allowClear
             prefix={<SearchOutlined />}
-            onChange={debounce((e: any) => {
-              searchMenuData(authorityMenu, e.target.value, setSearchMenuData);
-            }, 600)}
+            onChange={handleSearchChange}
           />
           <div style={{marginTop: '10px'}}>
             <span style={{ color: '#8c8c8c', opacity: '0.6' }}>最近访问:&nbsp;&nbsp;&nbsp;</span>
@@ -194,9 +298,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
             (<div className={'search_menu_content'}>
               {
                 SearhData.map((item: any) => (
-                  <div onClick={(e) => {
-                    onMenuClick(e, item);
-                  }} key={item.path}>{item.name}</div>
+                  <div onClick={() => handleSearchResultClick(item)} key={item.path}>{item.name}</div>
                 ))
               }
             </div>) : (
@@ -262,10 +364,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
                     height: '30px'
                     }}>
                   <span
-                    onClick={() => {
-                      setShowScroll(true);
-                      setMoreBtnShow(false);
-                    }}
+                    onClick={handleMoreButtonClick}
                     style={{color: '#8c8c8c'}}
                     >
                     <CaretDownOutlined />

package/src/components/Business/BsLayouts/Components/CustomerMenu/index.tsx

@@ -4,7 +4,8 @@ import React, {
   useEffect,
   forwardRef,
   useRef,
-  useImperativeHandle
+  useImperativeHandle,
+  useCallback
 } from "react";
 import { Button, Drawer, Modal, Menu } from 'antd';
 import addIcon from '../../../../../assets/addIcon.svg';
@@ -65,19 +66,21 @@ const CustomerMenu = forwardRef(({isCollapse, handleClose, actionRef, originRout
   })
 
 
-  const handleMenuClick = (item: any) => {
+  const handleMenuClick = useCallback((item: any) => {
     if (item.children || !item.component) return;
-    setIsDrawer(!isDrawer);
+    setIsDrawer(false);
     history.push({
       pathname: item.path
     })
-  }
+  }, []);
 
-  const getMenuDom = (menuData) => {
-    return menuData.map(item => (
-      <div style={{paddingLeft: '10px'}}>
-        <div onClick={()=> {handleMenuClick(item)}} className={`${'menu_item'} ${item.children || !item.component ? '' : 'link_style'}`} 
-          style={{fontWeight: item.children || !item.component ? 'bolder' : '400', paddingLeft: '4px'}}>
+  const getMenuDom = useCallback((menuData) => {
+    return menuData.map((item, index) => (
+      <div key={`${item.path || item.name}-${index}`} style={{paddingLeft: '10px'}}>
+        <div 
+          onClick={item.children || !item.component ? undefined : () => handleMenuClick(item)} 
+          className={`${'menu_item'} ${item.children || !item.component ? '' : 'link_style'}`} 
+          style={{fontWeight: item.children || !item.component ? 'bolder' : '400', paddingLeft: '4px', cursor: item.children || !item.component ? 'default' : 'pointer'}}>
           {item.name}
         </div>
         {
@@ -85,7 +88,7 @@ const CustomerMenu = forwardRef(({isCollapse, handleClose, actionRef, originRout
         }
       </div>
     ))
-  }
+  }, [handleMenuClick]);
 
   return (
     <div className={'customer_menu_content'}>