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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.2.5-per-alpha.2",
+  "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, useCallback, useRef } 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';
@@ -33,6 +33,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
   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();
@@ -81,15 +82,20 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
          clearTimeout(debounceTimerRef.current);
          debounceTimerRef.current = null;
        }
+       // 清理DOM引用
+       drawContentRef.current = null;
      };
   }, []);
 
   useLayoutEffect(() => {
     timeoutRef.current = setTimeout(() => {
       if (!isUnmountedRef.current) {
-        const drawContentElement = document.getElementById("drawContent");
-        if (drawContentElement) {
-          let drawContentHeight = drawContentElement.scrollHeight;
+        // 使用缓存的DOM引用，避免重复查询
+        if (!drawContentRef.current) {
+          drawContentRef.current = document.getElementById("drawContent");
+        }
+        if (drawContentRef.current) {
+          let drawContentHeight = drawContentRef.current.scrollHeight;
           if (drawContentHeight > rightMenuHeight) {
             setMoreBtnShow(true);
           }
@@ -114,36 +120,37 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
   }, []);
 
 
+  // 优化递归渲染函数，使用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 = useCallback((e, item) => {
@@ -191,8 +198,54 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
     }
   }, [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]);
 
-  let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+  // 优化搜索结果点击处理器
+  const handleSearchResultClick = useCallback((item: any) => {
+    if (!isUnmountedRef.current) {
+      onMenuClick({stopPropagation: () => {}, preventDefault: () => {}}, item);
+    }
+  }, [onMenuClick]);
+
+  // 优化更多按钮点击处理器
+  const handleMoreButtonClick = useCallback(() => {
+    if (!isUnmountedRef.current) {
+      setShowScroll(true);
+      setMoreBtnShow(false);
+    }
+  }, []);
+
+
+  // 使用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'}>
@@ -206,19 +259,9 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
                 color: currentOneLevel === item.path ? '#005cff' : '#000000'
               }}
               onClick={(e) => {
-                if (isUnmountedRef.current) return;
                 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}
@@ -227,11 +270,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
       </div>
       <div style={{flexGrow: 1, position: 'relative'}}>
         <img
-          onClick={() => {
-            if (!isUnmountedRef.current) {
-              onClose();
-            }
-          }} 
+          onClick={handleCloseClick} 
           style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
         
         <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
@@ -259,11 +298,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
             (<div className={'search_menu_content'}>
               {
                 SearhData.map((item: any) => (
-                  <div onClick={(e) => {
-                    if (!isUnmountedRef.current) {
-                      onMenuClick(e, item);
-                    }
-                  }} key={item.path}>{item.name}</div>
+                  <div onClick={() => handleSearchResultClick(item)} key={item.path}>{item.name}</div>
                 ))
               }
             </div>) : (
@@ -329,12 +364,7 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
                     height: '30px'
                     }}>
                   <span
-                    onClick={() => {
-                      if (!isUnmountedRef.current) {
-                        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'}>

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

@@ -618,16 +618,71 @@ class BasicLayout extends React.PureComponent {
     });
     this.timeoutIds.clear();
     
+    // 清理DOM缓存引用
+    if (this.cachedTabsElements) {
+      this.cachedTabsElements.globalTabsNav = null;
+      this.cachedTabsElements.globalTabsNavWrap = null;
+      this.cachedTabsElements = null;
+    }
+    
+    // 清理ref引用
+    if (this.allFunc && this.allFunc.current) {
+      this.allFunc.current = null;
+    }
+    if (this.customerMenuRef && this.customerMenuRef.current) {
+      this.customerMenuRef.current = null;
+    }
+    if (this.actionRef && this.actionRef.current) {
+      this.actionRef.current = null;
+    }
+    
     // 清理实例属性
     this.routerArray = null;
     this.authMenuPathList = null;
     this.docsId = null;
     this.lastTwoRouterArray = null;
-    this.cachedTabsElements = null;
     this.cachedBreadcrumbNameMap = null;
     this.cachedWeiqianduanProps = null;
     this.cachedOperationsSlot = null;
     this.lastIsSliderState = null;
+    
+    // 清理菜单容器的事件监听器
+    const menuContainer = document.querySelector('.sub_menu_content');
+    if (menuContainer) {
+      menuContainer.removeEventListener('click', this.handleMenuContainerClick);
+      // 清理所有菜单项的data属性和引用
+      const menuItems = menuContainer.querySelectorAll('[data-menu-item]');
+      menuItems.forEach(item => {
+        // 从WeakMap中移除引用
+        if (this.menuItemsWeakMap && this.menuItemsWeakMap.has(item)) {
+          this.menuItemsWeakMap.delete(item);
+        }
+        // 清理data属性
+        item.removeAttribute('data-menu-item');
+        item.removeAttribute('data-item-path');
+        item.removeAttribute('data-has-children');
+      });
+    }
+    
+    // 清理WeakMap
+    if (this.menuItemsWeakMap) {
+      // WeakMap会自动清理，但显式清空以确保
+      this.menuItemsWeakMap = null;
+    }
+    
+    // 清理方法引用，断开闭包链
+    this.handleMenuClick = null;
+    this.handleMenuContainerClick = null;
+    this.getMenuDom = null;
+    this.setShowMenu = null;
+    this.getTabsNavElements = null;
+    this.setTabNavTransLate = null;
+    this.checkisNavSlide = null;
+    
+    // 强制触发垃圾回收（如果可用）
+    if (window.gc && typeof window.gc === 'function') {
+      setTimeout(() => window.gc(), 0);
+    }
   }
 
   parseQueryString = (queryString) => {
@@ -727,14 +782,12 @@ class BasicLayout extends React.PureComponent {
   };
 
   getDictionaryTextByValue = (dicCode: string, value: string) => {
-    let startPerformance = performance.now();
     if (window.dicDataTextValue) {
       const dicDataTextValue = window.dicDataTextValue;
       let dicData = [];
 
       dicData = dicDataTextValue[dicCode];
 
-      let endPerformance1 = performance.now();
 
       if (value === undefined) return "-";
 
@@ -743,7 +796,6 @@ class BasicLayout extends React.PureComponent {
         return value;
       }
 
-      let endPerformance = performance.now();
 
       return dicData[value] || value;
     }
@@ -928,29 +980,57 @@ class BasicLayout extends React.PureComponent {
     this.setShowMenu(false);
   };
 
+  // 使用WeakMap存储菜单项引用，避免强引用
+  menuItemsWeakMap = new WeakMap();
+
+  // 容器级别的事件委托处理器
+  handleMenuContainerClick = (event) => {
+    const target = event.target.closest('[data-menu-item]');
+    if (!target) return;
+    
+    const itemPath = target.getAttribute('data-item-path');
+    const hasChildren = target.getAttribute('data-has-children') === 'true';
+    
+    if (!hasChildren && itemPath) {
+      // 从WeakMap中获取完整的item对象
+      const item = this.menuItemsWeakMap.get(target) || { path: itemPath };
+      this.handleMenuClick(item);
+    }
+  };
+
   getMenuDom = (menuData) => {
-    return menuData.map((item) => (
-      <div>
-        <div
-          onClick={() => {
-            this.handleMenuClick(item);
-          }}
-          className={`${'menu_item'} ${item.children || !item.component ? '' : 'link_style'
-            }`}
-          style={{
-            fontWeight: item.children || !item.component ? 'bolder' : '400',
-            paddingLeft: '10px',
-            marginTop: item.children || !item.component ? '5px' : '0px',
-            fontSize: item.children || !item.component ? '14px' : '12px',
-          }}
-        >
-          {item.name}
+    return menuData.map((item, index) => {
+      const hasChildren = item.children || !item.component;
+      
+      return (
+        <div key={`${item.path || item.name}-${index}`}>
+          <div
+            data-menu-item="true"
+            data-item-path={item.path}
+            data-has-children={hasChildren}
+            className={`${'menu_item'} ${hasChildren ? '' : 'link_style'}`}
+            style={{
+              fontWeight: hasChildren ? 'bolder' : '400',
+              paddingLeft: '10px',
+              marginTop: hasChildren ? '5px' : '0px',
+              fontSize: hasChildren ? '14px' : '12px',
+              cursor: hasChildren ? 'default' : 'pointer',
+            }}
+            ref={(el) => {
+              // 使用WeakMap存储元素与item的关联
+              if (el && !hasChildren) {
+                this.menuItemsWeakMap.set(el, item);
+              }
+            }}
+          >
+            {item.name}
+          </div>
+          {!!item.children &&
+            !!item.children.length &&
+            this.getMenuDom(item.children)}
         </div>
-        {!!item.children &&
-          !!item.children.length &&
-          this.getMenuDom(item.children)}
-      </div>
-    ));
+      );
+    });
   };
 
   setShowMenu = debounce((isShow) => {
@@ -1534,7 +1614,7 @@ class BasicLayout extends React.PureComponent {
             tabBarGutter={8}
             onEdit={this.onEdit}
             tabBarExtraContent={OperationsSlot}
-            destroyInactiveTabPane={true}
+            // destroyInactiveTabPane={true}
             animated={false}
             hideAdd
             ref={(tabsRef) => {
@@ -1599,6 +1679,7 @@ class BasicLayout extends React.PureComponent {
             onMouseLeave={() => {
               this.setShowMenu(false);
             }}
+            onClick={this.handleMenuContainerClick}
             className={'sub_menu_content'}
             style={{ display: showSubMenu && !collapse ? 'block' : 'none' }}
           >
@@ -1630,7 +1711,7 @@ class WrapperComponent extends React.Component {
     
     // 清理可能的DOM事件监听器
     try {
-      const currentElement = document.querySelector(`#globalTabs .ant-tabs-tabpane[data-node-key="${this.props.item.key}"]`);
+      const currentElement = document.getElementById('globalTabs-panel-' + this.props.item.key);
       if (currentElement) {
         // 移除所有可能的事件监听器
         const events = ['click', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'focus', 'blur'];
@@ -1638,6 +1719,35 @@ class WrapperComponent extends React.Component {
           currentElement.removeEventListener(eventType, this.handleEvent, true);
           currentElement.removeEventListener(eventType, this.handleEvent, false);
         });
+        
+        // 清理拖拽相关的事件监听器
+        const dragEvents = ['dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'];
+        dragEvents.forEach(eventType => {
+          currentElement.removeEventListener(eventType, this.handleDragEvent, true);
+          currentElement.removeEventListener(eventType, this.handleDragEvent, false);
+        });
+        
+        // 清理react-dnd相关的属性和状态
+        if (currentElement._reactInternalFiber) {
+          delete currentElement._reactInternalFiber;
+        }
+        if (currentElement._reactInternalInstance) {
+          delete currentElement._reactInternalInstance;
+        }
+        
+        // 清理可能的拖拽状态数据
+        const dragStateKeys = Object.keys(currentElement).filter(key => 
+          key.includes('drag') || key.includes('drop') || key.includes('dnd')
+        );
+        dragStateKeys.forEach(key => {
+          try {
+            delete currentElement[key];
+          } catch (e) {
+            // 忽略删除失败的情况
+          }
+        });
+
+        currentElement = null;
       }
       
       // 强制垃圾回收提示
@@ -1654,6 +1764,11 @@ class WrapperComponent extends React.Component {
   handleEvent = (event) => {
     // 空的事件处理器，仅用于清理时移除监听器
   };
+  
+  // 拖拽事件处理器，用于清理
+  handleDragEvent = (event) => {
+    // 空的拖拽事件处理器，仅用于清理时移除监听器
+  };
 
   shouldComponentUpdate(nextProps) {
     if (window.__POWERED_BY_WUJIE__ && nextProps?.item?.key?.indexOf('edit-template-template') > -1) {