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

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

@@ -109,12 +109,8 @@ const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
     };
   });
 
+// 将全局变量移到类内部，避免内存泄漏
 let UN_LISTTEN_DRP;
-let routerArray = [];
-let authMenuPathList = [];
-let docsId = [];
-let lastTwoRouterArray = [1, 2];
-
 let draggerTabKeys = [];
 
 const type = 'DraggableTabNode';
@@ -165,35 +161,6 @@ const DraggableTabs = (props) => {
   const { children, changeListenRouterState } = props;
   const [order, setOrder] = useState([]);
 
-  const moveTabNode = (dragKey, hoverKey) => {
-    const newOrder = order.slice();
-    React.Children.forEach(children, (c) => {
-      if (c.key && newOrder.indexOf(c.key) === -1) {
-        newOrder.push(c.key);
-      }
-    });
-    const dragIndex = newOrder.indexOf(dragKey);
-    const hoverIndex = newOrder.indexOf(hoverKey);
-    newOrder.splice(dragIndex, 1);
-    newOrder.splice(hoverIndex, 0, dragKey);
-    changeListenRouterState(dragIndex, hoverIndex);
-    setOrder(newOrder);
-  };
-
-  const renderTabBar = (tabBarProps, DefaultTabBar) => (
-    <DefaultTabBar {...tabBarProps}>
-      {(node) => (
-        <DraggableTabNode
-          key={node.key}
-          index={node.key}
-          moveNode={moveTabNode}
-        >
-          {node}
-        </DraggableTabNode>
-      )}
-    </DefaultTabBar>
-  );
-
   const tabs = [];
   React.Children.forEach(children, (c) => {
     tabs.push(c);
@@ -219,11 +186,9 @@ const DraggableTabs = (props) => {
     return ia - ib;
   });
   return (
-    <DndProvider backend={HTML5Backend}>
-      <Tabs renderTabBar={renderTabBar} {...props}>
-        {orderTabs}
-      </Tabs>
-    </DndProvider>
+    <Tabs {...props}>
+      {orderTabs}
+    </Tabs>
   );
 };
 
@@ -326,17 +291,38 @@ class BasicLayout extends React.PureComponent {
   actionRef: any = createRef<{
     reload: () => void;
   }>();
+  
+  // 将全局变量移到实例属性，避免多实例间的内存泄漏
+  private routerArray = [];
+  private authMenuPathList = [];
+  private docsId = [];
+  private lastTwoRouterArray = [1, 2];
+  private wujieEventHandler = null;
+  private timeoutIds = new Set(); // 管理所有setTimeout
+  
   constructor(props) {
     super(props);
-    authMenuPathList = getAuthMenuPathAndDocsId(props.pathToRegexp)?.menuKeys || [];
-    docsId = getAuthMenuPathAndDocsId(props.pathToRegexp)?.docsId || [];
-    routerArray = this.updateTree(props.route.routes, authMenuPathList);
-    const homeRouter = routerArray.filter(
+    const authData = getAuthMenuPathAndDocsId(props.pathToRegexp);
+    this.authMenuPathList = authData?.menuKeys || [];
+    this.docsId = authData?.docsId || [];
+    this.routerArray = this.updateTree(props.route.routes, this.authMenuPathList);
+    
+    // 初始化内存管理相关属性
+    this.timeoutIds = new Set();
+    this.wujieEventHandler = null;
+    this.cachedTabsElements = null;
+    this.cachedBreadcrumbNameMap = null;
+    this.cachedWeiqianduanProps = null;
+    this.cachedOperationsSlot = null;
+    this.lastIsSliderState = null;
+    const homeRouter = this.routerArray.filter(
       (itemroute) => itemroute.key === '/',
     )[0];
-    const breadcrumbNameMap = getBreadcrumbNameMap(
+    // 缓存breadcrumbNameMap，避免重复创建
+    this.cachedBreadcrumbNameMap = this.cachedBreadcrumbNameMap || getBreadcrumbNameMap(
       memoizeOneFormatter(props.route.routes, ''),
     );
+    const breadcrumbNameMap = this.cachedBreadcrumbNameMap;
     const hideMenuArray = ergodicMenuRoutes(props.route.routes);
 
     this.state = {
@@ -378,6 +364,18 @@ 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;
 
     var self = this;
@@ -402,7 +400,8 @@ class BasicLayout extends React.PureComponent {
     //     }
     //   });
 
-    window.$wujie?.bus.$on("main-route-change", function (appname, info) {
+    // 优化事件处理器，避免内存泄漏
+    this.wujieEventHandler = (appname, info) => {
       if (appname === itemPath) {
         if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
           localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
@@ -411,14 +410,15 @@ class BasicLayout extends React.PureComponent {
         }
         istParent = 1;
         if (info.type === 'main') {
-          let newPath = encodeUrlQuery(info.path);
-          history.push(newPath)
+          const newPath = encodeUrlQuery(info.path);
+          history.push(newPath);
         }
         if (info.type === 'remove') {
           self.tabActions['remove'](info.path);
         }
       }
-    });
+    };
+    window.$wujie?.bus.$on("main-route-change", this.wujieEventHandler);
 
     UN_LISTTEN_DRP = history.listen((route) => {
       // if ((window as any).__POWERED_BY_QIANKUN__) {
@@ -442,7 +442,7 @@ class BasicLayout extends React.PureComponent {
        * @param docsId 通用单据ID的数组，用于进一步筛选路由。
        * @returns 返回与当前路由匹配的第一个路由项，如果没有匹配项则返回undefined。
        */
-      let replaceRouter = routerArray.filter((itemRoute) => {
+      let replaceRouter = this.routerArray.filter((itemRoute) => {
         // 单独处理通用单据预览
         if (window.top !== window && !window.__POWERED_BY_WUJIE__ && route.pathname?.includes('all-general-documents')) {
           return pathToRegexp(itemRoute.key || '').test(route.pathname);
@@ -450,7 +450,7 @@ class BasicLayout extends React.PureComponent {
         // 当路由路径包含'all-general-documents'时，按通用单据处理
         if (route.pathname?.includes('all-general-documents') && shouldUseAuth()) {
           // 检查路由路径是否匹配路由项的键，并且路径中包含至少一个通用单据ID
-          return pathToRegexp(itemRoute.key || '').test(route.pathname) && docsId.some(item => route.pathname.includes(item));
+          return pathToRegexp(itemRoute.key || '').test(route.pathname) && this.docsId.some(item => route.pathname.includes(item));
         }
         // 对于不包含'all-general-documents'的路径，只检查路由路径是否匹配路由项的键
         return  pathToRegexp(itemRoute.key || '').test(route.pathname);
@@ -528,8 +528,8 @@ class BasicLayout extends React.PureComponent {
       }
 
       // -------------------处理页签关闭----------------------------
-      lastTwoRouterArray.push(route.pathname);
-      lastTwoRouterArray.shift();
+      this.lastTwoRouterArray.push(route.pathname);
+      this.lastTwoRouterArray.shift();
 
       const {
         thisHideInMenuDoNotClose = false,
@@ -539,18 +539,18 @@ class BasicLayout extends React.PureComponent {
 
       let needRemoveKey = '';
 
-      // lastTwoRouterArray[0] != lastTwoRouterArray[1] 该判断条件用于判断是否是tab删除操作，如果是tab页删除操作，删除的是不是最后一个打开的tab页，执行history.push会导致错误的将最后打开的那个tab页也删除掉
-      let notSamePageFlag = lastTwoRouterArray[0] != lastTwoRouterArray[1];
+      // this.lastTwoRouterArray[0] != this.lastTwoRouterArray[1] 该判断条件用于判断是否是tab删除操作，如果是tab页删除操作，删除的是不是最后一个打开的tab页，执行history.push会导致错误的将最后打开的那个tab页也删除掉
+      const notSamePageFlag = this.lastTwoRouterArray[0] !== this.lastTwoRouterArray[1];
 
       // 满足包含closePrevPage标识则直接删除上一页
       if (closePrevPage) {
-        needRemoveKey = lastTwoRouterArray[0] && typeof lastTwoRouterArray[0] === 'string' && notSamePageFlag ? lastTwoRouterArray[0] : '';
+        needRemoveKey = this.lastTwoRouterArray[0] && typeof this.lastTwoRouterArray[0] === 'string' && notSamePageFlag ? this.lastTwoRouterArray[0] : '';
       } else {
         // 满足非tabclick或者menuClick的hideInMenu类型菜单自动关闭
         const shouldClosePrev = (!localStorage.getItem('isTabChange') && !localStorage.getItem('isMenuClick'));
-        const needRemoveKeyArray = lastTwoRouterArray[0] && typeof lastTwoRouterArray[0] === 'string' && shouldClosePrev ?
+        const needRemoveKeyArray = this.lastTwoRouterArray[0] && typeof this.lastTwoRouterArray[0] === 'string' && shouldClosePrev ?
           hideMenuArray.filter((itemRoute) =>
-            pathToRegexp(itemRoute.path || '').test(lastTwoRouterArray[0]),
+            pathToRegexp(itemRoute.path || '').test(this.lastTwoRouterArray[0]),
           ) : [];
         needRemoveKey = needRemoveKeyArray.length && notSamePageFlag && !thisHideInMenuDoNotClose ? needRemoveKeyArray[0] : '';
       }
@@ -558,19 +558,22 @@ class BasicLayout extends React.PureComponent {
       if (needRemoveKey) {
         newListenRouterState = newListenRouterState.filter((item) => {
           const [pathname] = item.key ? item.key.split('?') : [];
-          return pathname && pathname !== lastTwoRouterArray[0];
+          return pathname && pathname !== this.lastTwoRouterArray[0];
         });
         newListenRouterKey = newListenRouterKey.filter((item) => {
           const [pathname] = item ? item.split('?') : [];
-          return pathname && pathname !== lastTwoRouterArray[0];
+          return pathname && pathname !== this.lastTwoRouterArray[0];
         });
       }
 
-      setTimeout(() => {
+      // 优化setTimeout管理，避免内存泄漏
+      const timeoutId = setTimeout(() => {
         // 处理页面刷新两面
         localStorage.removeItem('isTabChange');
         localStorage.removeItem('isMenuClick');
+        this.timeoutIds.delete(timeoutId);
       }, 0);
+      this.timeoutIds.add(timeoutId);
 
       // -------------------处理页签关闭 end----------------------------
 
@@ -607,8 +610,34 @@ class BasicLayout extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    // eslint-disable-next-line no-unused-expressions
-    UN_LISTTEN_DRP && UN_LISTTEN_DRP();
+    // 清理路由监听器
+    if (UN_LISTTEN_DRP) {
+      UN_LISTTEN_DRP();
+      UN_LISTTEN_DRP = null;
+    }
+    
+    // 清理wujie事件监听器
+    if (this.wujieEventHandler && window.$wujie?.bus) {
+      window.$wujie.bus.$off("main-route-change", this.wujieEventHandler);
+      this.wujieEventHandler = null;
+    }
+    
+    // 清理所有setTimeout
+    this.timeoutIds.forEach(timeoutId => {
+      clearTimeout(timeoutId);
+    });
+    this.timeoutIds.clear();
+    
+    // 清理实例属性
+    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;
   }
 
   parseQueryString = (queryString) => {
@@ -809,8 +838,144 @@ 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;
 
@@ -859,6 +1024,12 @@ class BasicLayout extends React.PureComponent {
             pathname: newKey,
           });
           this.checkisNavSlide();
+          
+          // 延迟检查DOM节点变化，确保React完成渲染
+          setTimeout(() => {
+            console.log(`[页签删除] 删除页签 ${targetKey} 后的DOM状态:`);
+            this.countTabPaneDOMNodes();
+          }, 100);
         },
       );
     },
@@ -929,49 +1100,53 @@ class BasicLayout extends React.PureComponent {
     });
   }, 500);
 
+  // 缓存DOM元素，避免重复查询
+  getTabsNavElements = () => {
+    if (!this.cachedTabsElements || !this.cachedTabsElements.globalTabsNav) {
+      const globalTabsContainer = document.getElementById('globalTabs');
+      if (globalTabsContainer) {
+        this.cachedTabsElements = {
+          globalTabsNav: globalTabsContainer.getElementsByClassName('ant-tabs-nav-list')?.[0],
+          globalTabsNavWrap: globalTabsContainer.getElementsByClassName('ant-tabs-nav-wrap')?.[0]
+        };
+      }
+    }
+    return this.cachedTabsElements || {};
+  };
+
   //设置tabs标签左右滚动
   setTabNavTransLate = (num) => {
-    let globalTabsNav = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-list')?.[0];
-    let globalTabsNavWrap = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-wrap')?.[0];
-    let wrapWidth = globalTabsNavWrap.offsetWidth; //tabsNav父节点宽度
-    let navListWidth = globalTabsNav.offsetWidth; //tabsNav总宽度
+    const { globalTabsNav, globalTabsNavWrap } = this.getTabsNavElements();
+    if (!globalTabsNav || !globalTabsNavWrap) return;
+    
+    const wrapWidth = globalTabsNavWrap.offsetWidth; //tabsNav父节点宽度
+    const navListWidth = globalTabsNav.offsetWidth; //tabsNav总宽度
     if (navListWidth - wrapWidth <= 0) return;
-    let maxTransX = navListWidth - wrapWidth; // 允许移动最大宽度
-    let transXStr = document.defaultView?.getComputedStyle(
+    
+    const maxTransX = navListWidth - wrapWidth; // 允许移动最大宽度
+    const transXStr = document.defaultView?.getComputedStyle(
       globalTabsNav,
       null,
     ).transform;
-    let transx = transXStr?.split(',')[4]; //当前translateX的值
+    const transx = transXStr?.split(',')[4]; //当前translateX的值
 
     let targetTransX = Math.abs(Number(transx)) + num;
     if (targetTransX <= 0) targetTransX = 0;
     if (targetTransX >= Number(maxTransX)) targetTransX = Number(maxTransX);
-    globalTabsNav.style.transform = 'translateX(-' + targetTransX + 'px)';
+    globalTabsNav.style.transform = `translateX(-${targetTransX}px)`;
   };
 
   checkisNavSlide = () => {
-    if (window.top != window) return;
+    if (window.top !== window) return;
     //监听tabs页签总长度判断是否可点击滑动
-    let globalTabsNav = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-list')?.[0];
-    let globalTabsNavWrap = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-wrap')?.[0];
-    let wrapWidth = globalTabsNavWrap?.offsetWidth; //tabsNav父节点宽度
-    let navListWidth = globalTabsNav?.offsetWidth; //tabsNav总宽度
-    if (navListWidth - wrapWidth <= 0) {
-      this.setState({
-        isSlider: false,
-      });
-      return;
-    }
+    const { globalTabsNav, globalTabsNavWrap } = this.getTabsNavElements();
+    if (!globalTabsNav || !globalTabsNavWrap) return;
+    
+    const wrapWidth = globalTabsNavWrap.offsetWidth; //tabsNav父节点宽度
+    const navListWidth = globalTabsNav.offsetWidth; //tabsNav总宽度
+    
     this.setState({
-      isSlider: true,
+      isSlider: navListWidth - wrapWidth > 0,
     });
   };
 
@@ -1251,54 +1426,58 @@ class BasicLayout extends React.PureComponent {
         })
         .filter((item) => item) as MenuDataItem[];
 
-    let weiqianduanProps = {};
-    let isWeiqianduan = false;
-
-    if (window.top != window) {
-      isWeiqianduan = true;
-      weiqianduanProps = {
+    // 缓存weiqianduanProps，避免重复创建
+    const isWeiqianduan = window.top !== window;
+    if (!this.cachedWeiqianduanProps) {
+      this.cachedWeiqianduanProps = isWeiqianduan ? {
         headerRender: false,
         footerRender: false,
         menuRender: false,
         menuHeaderRender: false,
         menuExtraRender: false,
-      };
+      } : {};
     }
-
-    const OperationsSlot: Record<PositionType, React.ReactNode> = {
-      left: (
-        <div className={'tab_left_operate'}>
-          <div
-            onClick={() => {
-              history.push({
-                pathname: '/',
-              });
-            }}
-          >
-            <HomeOutlined />
+    const weiqianduanProps = this.cachedWeiqianduanProps;
+
+    // 缓存OperationsSlot，避免重复创建
+    if (!this.cachedOperationsSlot || this.lastIsSliderState !== this.state.isSlider) {
+      this.lastIsSliderState = this.state.isSlider;
+      this.cachedOperationsSlot = {
+        left: (
+          <div className={'tab_left_operate'}>
+            <div
+              onClick={() => {
+                history.push({
+                  pathname: '/',
+                });
+              }}
+            >
+              <HomeOutlined />
+            </div>
+            <div
+              style={{ opacity: this.state.isSlider ? 1 : 0.5 }}
+              onClick={() => {
+                this.setTabNavTransLate(-100);
+              }}
+            >
+              <DoubleLeftOutlined />
+            </div>
           </div>
+        ),
+        right: (
           <div
             style={{ opacity: this.state.isSlider ? 1 : 0.5 }}
+            className={'tab_right_operate'}
             onClick={() => {
-              this.setTabNavTransLate(-100);
+              this.setTabNavTransLate(100);
             }}
           >
-            <DoubleLeftOutlined />
+            <DoubleRightOutlined />
           </div>
-        </div>
-      ),
-      right: (
-        <div
-          style={{ opacity: this.state.isSlider ? 1 : 0.5 }}
-          className={'tab_right_operate'}
-          onClick={() => {
-            this.setTabNavTransLate(100);
-          }}
-        >
-          <DoubleRightOutlined />
-        </div>
-      ),
-    };
+        ),
+      };
+    }
+    const OperationsSlot = this.cachedOperationsSlot;
 
     return (
       <ProLayout
@@ -1473,7 +1652,7 @@ class BasicLayout extends React.PureComponent {
         {...weiqianduanProps}
       >
         <div id="globalTabsContent" className="globalTabs">
-          <DraggableTabs
+          <Tabs
             activeKey={activeKey}
             id="globalTabs"
             onChange={this.onChange}
@@ -1496,8 +1675,15 @@ class BasicLayout extends React.PureComponent {
             tabBarGutter={8}
             onEdit={this.onEdit}
             tabBarExtraContent={OperationsSlot}
+            destroyInactiveTabPane={true}
             animated={false}
             hideAdd
+            ref={(tabsRef) => {
+              if (tabsRef && !this.tabsRef) {
+                this.tabsRef = tabsRef;
+                console.log('[Tabs配置] destroyInactiveTabPane已设置为true，animated设置为false');
+              }
+            }}
           >
             {listenRouterState.map((item, index) => (
               <TabPane
@@ -1521,10 +1707,11 @@ class BasicLayout extends React.PureComponent {
                   timeFormat={this.timeFormat}
                   transparentProps={transparentProps}
                   activeKey={activeKey}
+                  listenRouterState={listenRouterState}
                 />
               </TabPane>
             ))}
-          </DraggableTabs>
+          </Tabs>
           <div
             className="globalTabsOper"
             style={{
@@ -1567,17 +1754,186 @@ 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监控`);
+    }
+    
+    // 强制清理所有可能的引用和事件监听器
+    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) {
+        // 移除所有可能的事件监听器
+        const events = ['click', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'focus', 'blur'];
+        events.forEach(eventType => {
+          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);
+  }
+  
+  // 通用事件处理器，用于清理
+  handleEvent = (event) => {
+    // 空的事件处理器，仅用于清理时移除监听器
+  };
+
   shouldComponentUpdate(nextProps) {
-    if (window.__POWERED_BY_WUJIE__ && nextProps?.item?.key?.indexOf('edit-template-template') > -1) { // 适配wujie环境主应用下渲染打印编辑器
-      return true
+    if (window.__POWERED_BY_WUJIE__ && nextProps?.item?.key?.indexOf('edit-template-template') > -1) {
+      return true;
+    }
+    
+    // 检测页签是否已被删除：比较当前和下一个listenRouterState
+    const currentTabExists = this.props.listenRouterState?.some(tab => tab.key === this.props.item.key);
+    const nextTabExists = nextProps.listenRouterState?.some(tab => tab.key === this.props.item.key);
+    
+    // 如果页签从存在变为不存在，说明被删除了，允许更新以便正确销毁
+    if (currentTabExists && !nextTabExists) {
+      console.log(`页签 ${this.props.item.key} 已被删除，允许组件更新以便销毁`);
+      return true;
     }
+    
+    // 如果页签不再是活跃状态，允许更新以便正确销毁
+    if (nextProps.activeKey !== nextProps.item.key && this.props.activeKey === this.props.item.key) {
+      console.log(`页签 ${this.props.item.key} 不再活跃，允许组件更新`);
+      return true;
+    }
+    
+    // 如果页签变为活跃状态或内容发生变化，允许更新
     if (nextProps.activeKey === nextProps.item.key && JSON.stringify(nextProps.item) !== JSON.stringify(this.props.item)) {
       return true;
     }
+    
     return false;
   }
+
   render() {
     const {
       item,