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

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,8 @@ class BasicLayout extends React.PureComponent {
       pathToRegexp,
     } = this.props;
 
+
+    
     let istParent = 0;
 
     var self = this;
@@ -402,7 +390,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 +400,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 +432,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 +440,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 +518,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 +529,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 +548,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 +600,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 +828,19 @@ class BasicLayout extends React.PureComponent {
     this.tabActions[action](targetKey);
   };
 
+
+
+
+
+
+
+
+
+
+
   tabActions: any = {
     remove: (targetKey: string) => {
+      
       const { listenRouterState, activeKey, customerMatchs, listenRouterKey } =
         this.state;
 
@@ -929,49 +959,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 +1285,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 +1511,7 @@ class BasicLayout extends React.PureComponent {
         {...weiqianduanProps}
       >
         <div id="globalTabsContent" className="globalTabs">
-          <DraggableTabs
+          <Tabs
             activeKey={activeKey}
             id="globalTabs"
             onChange={this.onChange}
@@ -1496,8 +1534,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 +1566,11 @@ class BasicLayout extends React.PureComponent {
                   timeFormat={this.timeFormat}
                   transparentProps={transparentProps}
                   activeKey={activeKey}
+                  listenRouterState={listenRouterState}
                 />
               </TabPane>
             ))}
-          </DraggableTabs>
+          </Tabs>
           <div
             className="globalTabsOper"
             style={{
@@ -1567,17 +1613,77 @@ class BasicLayout extends React.PureComponent {
 class WrapperComponent extends React.Component {
   constructor(props) {
     super(props);
+    
+    // 初始化组件状态
+    this.isUnmounted = false;
+  }
+
+  componentDidMount() {
+    // 组件挂载完成
+  }
+  
+
+
+  componentWillUnmount() {
+    // 设置卸载标志
+    this.isUnmounted = true;
+    
+    // 清理可能的DOM事件监听器
+    try {
+      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);
+        });
+      }
+      
+      // 强制垃圾回收提示
+      if (window.gc && typeof window.gc === 'function') {
+        window.gc();
+      }
+      
+    } catch (error) {
+      // 清理过程中的错误处理
+    }
   }
+  
+  // 通用事件处理器，用于清理
+  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,