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

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;
 
@@ -628,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) => {
@@ -737,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 "-";
 
@@ -753,7 +796,6 @@ class BasicLayout extends React.PureComponent {
         return value;
       }
 
-      let endPerformance = performance.now();
 
       return dicData[value] || value;
     }
@@ -838,143 +880,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 +941,6 @@ class BasicLayout extends React.PureComponent {
             pathname: newKey,
           });
           this.checkisNavSlide();
-          
-          // 延迟检查DOM节点变化，确保React完成渲染
-          setTimeout(() => {
-            console.log(`[页签删除] 删除页签 ${targetKey} 后的DOM状态:`);
-            this.countTabPaneDOMNodes();
-          }, 100);
         },
       );
     },
@@ -1069,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) => {
@@ -1675,7 +1614,7 @@ class BasicLayout extends React.PureComponent {
             tabBarGutter={8}
             onEdit={this.onEdit}
             tabBarExtraContent={OperationsSlot}
-            destroyInactiveTabPane={true}
+            // destroyInactiveTabPane={true}
             animated={false}
             hideAdd
             ref={(tabsRef) => {
@@ -1740,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' }}
           >
@@ -1754,119 +1694,24 @@ 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}"]`);
+      const currentElement = document.getElementById('globalTabs-panel-' + this.props.item.key);
       if (currentElement) {
         // 移除所有可能的事件监听器
         const events = ['click', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'focus', 'blur'];
@@ -1874,36 +1719,56 @@ class WrapperComponent extends React.Component {
           currentElement.removeEventListener(eventType, this.handleEvent, true);
           currentElement.removeEventListener(eventType, this.handleEvent, false);
         });
-        console.log(`[清理] 已清理页签 ${this.props.item.key} 的DOM事件监听器`);
+        
+        // 清理拖拽相关的事件监听器
+        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;
       }
       
       // 强制垃圾回收提示
       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);
   }
   
   // 通用事件处理器，用于清理
   handleEvent = (event) => {
     // 空的事件处理器，仅用于清理时移除监听器
   };
+  
+  // 拖拽事件处理器，用于清理
+  handleDragEvent = (event) => {
+    // 空的拖拽事件处理器，仅用于清理时移除监听器
+  };
 
   shouldComponentUpdate(nextProps) {
     if (window.__POWERED_BY_WUJIE__ && nextProps?.item?.key?.indexOf('edit-template-template') > -1) {