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

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 } from 'react';
 import { List, Tooltip, Input, Button } from 'antd';
 import { Link, formatMessage, history } from 'umi';
 import classNames from 'classnames';
@@ -27,6 +27,12 @@ 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);
 
   useEffect(() => {
     getMenuContentHeight();
@@ -51,28 +57,64 @@ 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;
+       }
+     };
   }, []);
 
   useLayoutEffect(() => {
-    setTimeout(() => {
-      let drawContentHeight=document.getElementById("drawContent").scrollHeight;
-      if (drawContentHeight > rightMenuHeight) {
-        setMoreBtnShow(true);
+    timeoutRef.current = setTimeout(() => {
+      if (!isUnmountedRef.current) {
+        const drawContentElement = document.getElementById("drawContent");
+        if (drawContentElement) {
+          let drawContentHeight = drawContentElement.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) => {
+  const renderChildItem = useCallback((child) => {
     if (!child.hideInMenu && child.children) {
       return (
         <>
@@ -102,9 +144,11 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
         </List.Item>
       );
     }
-  }
+  }, [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,7 +171,25 @@ 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]);
 
 
   let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
@@ -144,6 +206,7 @@ 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) {
@@ -164,7 +227,11 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
       </div>
       <div style={{flexGrow: 1, position: 'relative'}}>
         <img
-          onClick={() => {onClose()}} 
+          onClick={() => {
+            if (!isUnmountedRef.current) {
+              onClose();
+            }
+          }} 
           style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
         
         <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
@@ -173,9 +240,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>
@@ -195,7 +260,9 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
               {
                 SearhData.map((item: any) => (
                   <div onClick={(e) => {
-                    onMenuClick(e, item);
+                    if (!isUnmountedRef.current) {
+                      onMenuClick(e, item);
+                    }
                   }} key={item.path}>{item.name}</div>
                 ))
               }
@@ -263,8 +330,10 @@ const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
                     }}>
                   <span
                     onClick={() => {
-                      setShowScroll(true);
-                      setMoreBtnShow(false);
+                      if (!isUnmountedRef.current) {
+                        setShowScroll(true);
+                        setMoreBtnShow(false);
+                      }
                     }}
                     style={{color: '#8c8c8c'}}
                     >

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

@@ -364,17 +364,7 @@ class BasicLayout extends React.PureComponent {
       pathToRegexp,
     } = this.props;
 
-    // 将测试方法暴露到全局，方便调试
-    window.testTabDeletion = this.testTabDeletion;
-    window.countTabPaneDOMNodes = this.countTabPaneDOMNodes;
-    window.testDeleteTab = (key) => {
-      console.log(`[测试] 手动删除页签: ${key}`);
-      this.tabActions.remove(key);
-    };
-    window.forceCleanupDOM = this.forceCleanupDOM;
-    window.analyzeMemoryLeaks = this.analyzeMemoryLeaks;
-    window.forceClearTabPanes = this.forceClearTabPanes;
-    console.log('[调试工具] 已暴露全局方法: window.testTabDeletion(), window.countTabPaneDOMNodes(), window.testDeleteTab(key), window.forceCleanupDOM(), window.analyzeMemoryLeaks(), window.forceClearTabPanes()');
+
     
     let istParent = 0;
 
@@ -838,143 +828,18 @@ class BasicLayout extends React.PureComponent {
     this.tabActions[action](targetKey);
   };
 
-  // DOM节点计数辅助函数
-  countTabPaneDOMNodes = () => {
-    const tabPanes = document.querySelectorAll('.ant-tabs-tabpane');
-    const globalTabsTabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane');
-    const activeTabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane-active');
-    const hiddenTabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane:not(.ant-tabs-tabpane-active)');
-    
-    console.log(`[DOM计数] 全局TabPane节点数: ${tabPanes.length}, globalTabs内TabPane节点数: ${globalTabsTabPanes.length}`);
-    console.log(`[DOM计数] 活跃TabPane节点数: ${activeTabPanes.length}, 非活跃TabPane节点数: ${hiddenTabPanes.length}`);
-    
-    // 详细列出每个TabPane的key和状态
-    globalTabsTabPanes.forEach((pane, index) => {
-      const isActive = pane.classList.contains('ant-tabs-tabpane-active');
-      const key = pane.getAttribute('data-node-key') || pane.id || `未知-${index}`;
-      console.log(`[DOM详情] TabPane ${index + 1}: key=${key}, 活跃=${isActive}`);
-    });
-    
-    return { 
-      total: tabPanes.length, 
-      globalTabs: globalTabsTabPanes.length,
-      active: activeTabPanes.length,
-      hidden: hiddenTabPanes.length
-    };
-  };
 
-  // 测试方法：验证页签删除后DOM状态
-  testTabDeletion = () => {
-    console.log('=== 页签删除测试开始 ===');
-    console.log('当前页签状态:', this.state.listenRouterState.map(item => item.key));
-    console.log('当前活跃页签:', this.state.activeKey);
-    this.countTabPaneDOMNodes();
-    
-    // 提供删除建议
-    const { listenRouterState } = this.state;
-    if (listenRouterState.length > 1) {
-      const testKey = listenRouterState.find(item => item.key !== '/')?.key;
-      if (testKey) {
-        console.log(`建议测试：删除页签 ${testKey}`);
-        console.log(`执行命令：window.testDeleteTab('${testKey}')`);
-      }
-    }
-    console.log('=== 页签删除测试结束 ===');
-  };
 
-  // 强制清理DOM节点的方法
-  forceCleanupDOM = () => {
-    console.log('[强制清理] 开始强制清理DOM节点...');
-    const beforeCount = this.countTabPaneDOMNodes();
-    console.log(`[强制清理] 清理前DOM节点数: ${beforeCount.total}`);
-    
-    // 强制垃圾回收
-    if (window.gc) {
-      window.gc();
-      console.log('[强制清理] 已触发垃圾回收');
-    }
-    
-    // 清理所有可能的引用
-    const tabsContainer = document.getElementById('globalTabs');
-    if (tabsContainer) {
-      const tabPanes = tabsContainer.querySelectorAll('.ant-tabs-tabpane');
-      tabPanes.forEach((pane, index) => {
-        if (pane.style.display === 'none' || pane.getAttribute('aria-hidden') === 'true') {
-          console.log(`[强制清理] 发现隐藏的TabPane节点 ${index}, 尝试清理...`);
-          // 清理事件监听器
-          const clone = pane.cloneNode(true);
-          pane.parentNode?.replaceChild(clone, pane);
-        }
-      });
-    }
-    
-    setTimeout(() => {
-      const afterCount = this.countTabPaneDOMNodes();
-      console.log(`[强制清理] 清理后DOM节点数: ${afterCount.total}`);
-      console.log(`[强制清理] DOM节点减少: ${beforeCount.total - afterCount.total}`);
-    }, 200);
-  };
 
-  // 分析内存泄漏的方法
-  analyzeMemoryLeaks = () => {
-    console.log('[内存分析] 开始分析可能的内存泄漏...');
-    
-    // 检查全局事件监听器
-    const listeners = window.getEventListeners ? window.getEventListeners(document) : {};
-    console.log('[内存分析] 全局事件监听器:', listeners);
-    
-    // 检查定时器
-    console.log('[内存分析] 当前活跃定时器数量:', Object.keys(window).filter(key => key.includes('timeout') || key.includes('interval')).length);
-    
-    // 检查TabPane节点详情
-    const tabsContainer = document.getElementById('globalTabs');
-    if (tabsContainer) {
-      const tabPanes = tabsContainer.querySelectorAll('.ant-tabs-tabpane');
-      console.log(`[内存分析] 发现 ${tabPanes.length} 个TabPane节点:`);
-      tabPanes.forEach((pane, index) => {
-        const key = pane.getAttribute('data-node-key') || pane.id;
-        const isVisible = pane.style.display !== 'none' && pane.getAttribute('aria-hidden') !== 'true';
-        const hasContent = pane.children.length > 0;
-        console.log(`  TabPane ${index}: key=${key}, visible=${isVisible}, hasContent=${hasContent}, children=${pane.children.length}`);
-      });
-    }
-    
-    // 检查React组件实例
-    const reactInstances = document.querySelectorAll('[data-reactroot], [data-react-checksum]');
-    console.log(`[内存分析] React实例数量: ${reactInstances.length}`);
-  };
 
-  // 强制清除所有TabPane节点
-  forceClearTabPanes = () => {
-    console.log('[强制清除] 开始强制清除所有TabPane节点...');
-    const beforeCount = this.countTabPaneDOMNodes();
-    
-    const tabsContainer = document.getElementById('globalTabs');
-    if (tabsContainer) {
-      const tabPanes = tabsContainer.querySelectorAll('.ant-tabs-tabpane');
-      console.log(`[强制清除] 发现 ${tabPanes.length} 个TabPane节点，准备清除...`);
-      
-      tabPanes.forEach((pane, index) => {
-        const key = pane.getAttribute('data-node-key') || pane.id;
-        const isActive = !pane.getAttribute('aria-hidden') && pane.style.display !== 'none';
-        
-        if (!isActive) {
-          console.log(`[强制清除] 移除非活跃TabPane ${index} (key: ${key})`);
-          pane.remove();
-        }
-      });
-    }
-    
-    setTimeout(() => {
-      const afterCount = this.countTabPaneDOMNodes();
-      console.log(`[强制清除] 清除前: ${beforeCount.total}, 清除后: ${afterCount.total}, 减少: ${beforeCount.total - afterCount.total}`);
-    }, 100);
-  };
+
+
+
+
+
 
   tabActions: any = {
     remove: (targetKey: string) => {
-      console.log(`[页签删除] 开始删除页签: ${targetKey}`);
-      this.countTabPaneDOMNodes();
       
       const { listenRouterState, activeKey, customerMatchs, listenRouterKey } =
         this.state;
@@ -1024,12 +889,6 @@ class BasicLayout extends React.PureComponent {
             pathname: newKey,
           });
           this.checkisNavSlide();
-          
-          // 延迟检查DOM节点变化，确保React完成渲染
-          setTimeout(() => {
-            console.log(`[页签删除] 删除页签 ${targetKey} 后的DOM状态:`);
-            this.countTabPaneDOMNodes();
-          }, 100);
         },
       );
     },
@@ -1754,118 +1613,23 @@ class BasicLayout extends React.PureComponent {
 class WrapperComponent extends React.Component {
   constructor(props) {
     super(props);
-    console.log(`WrapperComponent 构造函数: 页签 ${props.item.key} 创建`);
     
-    // 初始化MutationObserver
-    this.domObserver = null;
+    // 初始化组件状态
     this.isUnmounted = false;
-    
-    // 统计当前DOM节点数
-    setTimeout(() => {
-      const tabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane');
-      console.log(`[组件创建] 页签 ${props.item.key} 创建后，DOM中TabPane节点数: ${tabPanes.length}`);
-    }, 0);
   }
 
   componentDidMount() {
-    console.log(`WrapperComponent 挂载: 页签 ${this.props.item.key} 已挂载到DOM`);
-    const tabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane');
-    console.log(`[组件挂载] 页签 ${this.props.item.key} 挂载后，DOM中TabPane节点数: ${tabPanes.length}`);
-    
-    // 设置MutationObserver监控DOM变化
-    this.setupDOMObserver();
+    // 组件挂载完成
   }
   
-  setupDOMObserver = () => {
-    if (this.domObserver || this.isUnmounted) return;
-    
-    const globalTabsContainer = document.getElementById('globalTabs');
-    if (!globalTabsContainer) return;
-    
-    this.domObserver = new MutationObserver((mutations) => {
-      if (this.isUnmounted) return;
-      
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          // 检查是否有TabPane节点被添加或删除
-          const addedTabPanes = Array.from(mutation.addedNodes).filter(node => 
-            node.nodeType === Node.ELEMENT_NODE && 
-            node.classList && 
-            node.classList.contains('ant-tabs-tabpane')
-          );
-          
-          const removedTabPanes = Array.from(mutation.removedNodes).filter(node => 
-            node.nodeType === Node.ELEMENT_NODE && 
-            node.classList && 
-            node.classList.contains('ant-tabs-tabpane')
-          );
-          
-          if (addedTabPanes.length > 0) {
-            console.log(`[DOM监控] 检测到 ${addedTabPanes.length} 个TabPane节点被添加`);
-            addedTabPanes.forEach(node => {
-              const key = node.getAttribute('data-node-key') || '未知';
-              console.log(`[DOM监控] 添加的TabPane: ${key}`);
-            });
-          }
-          
-          if (removedTabPanes.length > 0) {
-            console.log(`[DOM监控] 检测到 ${removedTabPanes.length} 个TabPane节点被删除`);
-            removedTabPanes.forEach(node => {
-              const key = node.getAttribute('data-node-key') || '未知';
-              console.log(`[DOM监控] 删除的TabPane: ${key}`);
-              
-              // 检查是否是当前组件对应的TabPane
-              if (key === this.props.item.key) {
-                console.log(`[DOM监控] 当前组件 ${this.props.item.key} 对应的TabPane已从DOM中删除`);
-              }
-            });
-          }
-          
-          // 统计当前DOM中的TabPane数量
-          const currentTabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane');
-          console.log(`[DOM监控] 当前DOM中TabPane节点总数: ${currentTabPanes.length}`);
-        }
-      });
-    });
-    
-    // 开始观察
-    this.domObserver.observe(globalTabsContainer, {
-      childList: true,
-      subtree: true
-    });
-    
-    console.log(`[DOM监控] 已为页签 ${this.props.item.key} 设置DOM变化监控`);
-  };
+
 
   componentWillUnmount() {
-    console.log(`WrapperComponent 卸载: 页签 ${this.props.item.key} 组件正在销毁`);
-    
     // 设置卸载标志
     this.isUnmounted = true;
     
-    const tabPanes = document.querySelectorAll('#globalTabs .ant-tabs-tabpane');
-    console.log(`[组件卸载] 页签 ${this.props.item.key} 卸载前，DOM中TabPane节点数: ${tabPanes.length}`);
-    
-    // 清理MutationObserver
-    if (this.domObserver) {
-      this.domObserver.disconnect();
-      this.domObserver = null;
-      console.log(`[清理] 已断开页签 ${this.props.item.key} 的DOM监控`);
-    }
-    
-    // 强制清理所有可能的引用和事件监听器
+    // 清理可能的DOM事件监听器
     try {
-      // 清理组件内部的所有引用
-      if (this.props && typeof this.props === 'object') {
-        Object.keys(this.props).forEach(key => {
-          if (this.props[key] && typeof this.props[key] === 'object') {
-            // 不直接删除props，但清理可能的循环引用
-            console.log(`[清理] 检查prop: ${key}`);
-          }
-        });
-      }
-      
-      // 清理可能的DOM事件监听器
       const currentElement = document.querySelector(`#globalTabs .ant-tabs-tabpane[data-node-key="${this.props.item.key}"]`);
       if (currentElement) {
         // 移除所有可能的事件监听器
@@ -1874,30 +1638,16 @@ class WrapperComponent extends React.Component {
           currentElement.removeEventListener(eventType, this.handleEvent, true);
           currentElement.removeEventListener(eventType, this.handleEvent, false);
         });
-        console.log(`[清理] 已清理页签 ${this.props.item.key} 的DOM事件监听器`);
       }
       
       // 强制垃圾回收提示
       if (window.gc && typeof window.gc === 'function') {
         window.gc();
-        console.log(`[清理] 已触发垃圾回收`);
       }
       
     } catch (error) {
-      console.error(`[清理错误] 页签 ${this.props.item.key} 清理过程中出错:`, error);
+      // 清理过程中的错误处理
     }
-    
-    // 延迟检查卸载后的DOM状态
-    setTimeout(() => {
-      const tabPanesAfter = document.querySelectorAll('#globalTabs .ant-tabs-tabpane');
-      console.log(`[组件卸载] 页签 ${this.props.item.key} 卸载后，DOM中TabPane节点数: ${tabPanesAfter.length}`);
-      
-      // 强制检查内存使用情况
-      if (window.performance && window.performance.memory) {
-        const memory = window.performance.memory;
-        console.log(`[内存监控] 卸载后内存使用: ${(memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB / ${(memory.totalJSHeapSize / 1024 / 1024).toFixed(2)}MB`);
-      }
-    }, 100);
   }
   
   // 通用事件处理器，用于清理

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

@@ -1090,7 +1090,7 @@ export default (props: any) => {
    * ]
    * @returns []
    */
-  const getTableSummaryInfo = () => {
+  const getTableSummaryInfo = useCallback(() => {
     const { summaryList, rowSelection, expandable }: any = props;
     if (summaryList && Array.isArray(summaryList)) {
       const summaryRow = rowSelection ? [{}, ...showColumn] : [...showColumn];
@@ -1140,7 +1140,7 @@ export default (props: any) => {
     } else {
       return undefined;
     }
-  };
+  }, [props.summaryList, props.rowSelection, props.expandable, showColumn]);
 
   const columnsDom = <span className="ant-dropdown-link">
     <div onClick={sortTableRef?.current?.showModal} className="ant-dropdown-link">
@@ -1172,6 +1172,9 @@ export default (props: any) => {
       props.statusMapping,
       showSearchFields,
       expandedRowKeys,
+      getTableSummaryInfo,
+      props.summaryList,
+      props.summary,
     ],
   );