@bit-sun/business-component 2.2.2 → 2.2.3

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

@@ -1,1479 +1,1479 @@
-// @ts-nocheck
-import type {
-  MenuDataItem,
-  BasicLayoutProps as ProLayoutProps,
-  Settings,
-} from '@ant-design/pro-layout';
-import ProLayout from '@ant-design/pro-layout';
-import React, { useState, createRef, useRef } from 'react';
-import {
-  Tabs,
-  Dropdown,
-  Menu,
-} from 'antd';
-import {
-  Link,
-  useIntl,
-  history,
-  useModel,
-} from 'umi';
-import {
-  DashOutlined,
-  MenuUnfoldOutlined,
-  CaretLeftOutlined,
-  HomeOutlined,
-  DoubleLeftOutlined,
-  DoubleRightOutlined,
-} from '@ant-design/icons';
-import SearchFunc from './Components/SearchFunc';
-import { debounce } from 'lodash';
-
-import AllFunc from './Components/AllFunc';
-import {
-  getBreadcrumbNameMap,
-  ergodicMenuRoutes,
-  matchPath,
-  encodeUrlQuery,
-} from './utils';
-import moment from 'moment';
-import GlobalHeaderCom from './Components/GlobalHeader';
-import CustomerMenu from './Components/CustomerMenu';
-import CustomerMenuHeader from './Components/CustomerMenu/globalMenu/customMenuHeader';
-import './index.less';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import ENUM from '@/utils/enumConfig';
-import { memoizeOneFormatter } from '@/utils/utils';
-
-const { TabPane } = Tabs;
-
-export const RouterContext = React.createContext({});
-
-export type BasicLayoutProps = {
-  breadcrumbNameMap: Record<string, MenuDataItem>;
-  route: ProLayoutProps['route'] & {
-    authority: string[];
-  };
-  settings: Settings;
-} & ProLayoutProps;
-
-export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
-  breadcrumbNameMap: Record<string, MenuDataItem>;
-};
-
-const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
-  menuList.map((item) => {
-    return {
-      ...item,
-      children: item.children ? menuDataRender(item.children) : undefined,
-    };
-  });
-
-let UN_LISTTEN_DRP;
-let routerArray = [];
-let lastTwoRouterArray = [1, 2];
-
-let draggerTabKeys = [];
-
-const type = 'DraggableTabNode';
-const DraggableTabNode = ({ index, children, moveNode }) => {
-  const ref = useRef(null);
-  const [{ isOver, dropClassName }, drop] = useDrop({
-    accept: type,
-    collect: (monitor) => {
-      const { index: dragIndex } = monitor.getItem() || {};
-
-      if (dragIndex === index) {
-        return {};
-      }
-
-      return {
-        isOver: monitor.isOver(),
-        dropClassName: 'dropping',
-      };
-    },
-    drop: (item) => {
-      moveNode(item.index, index);
-    },
-  });
-  const [, drag] = useDrag({
-    type,
-    item: {
-      index,
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-  drop(drag(ref));
-  return (
-    <div
-      ref={ref}
-      style={{
-        marginRight: 24,
-      }}
-      className={isOver ? dropClassName : ''}
-    >
-      {children}
-    </div>
-  );
-};
-
-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);
-  });
-  const orderTabs = tabs.slice().sort((a, b) => {
-    const orderA = order.indexOf(a.key);
-    const orderB = order.indexOf(b.key);
-
-    if (orderA !== -1 && orderB !== -1) {
-      return orderA - orderB;
-    }
-
-    if (orderA !== -1) {
-      return -1;
-    }
-
-    if (orderB !== -1) {
-      return 1;
-    }
-
-    const ia = tabs.indexOf(a);
-    const ib = tabs.indexOf(b);
-    return ia - ib;
-  });
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <Tabs renderTabBar={renderTabBar} {...props}>
-        {orderTabs}
-      </Tabs>
-    </DndProvider>
-  );
-};
-
-const ItemMenu = (props) => {
-  const {
-    info: { key },
-    operateFun,
-    listenRouterState,
-  } = props;
-  let index = listenRouterState.findIndex((item) => item.key === key);
-
-  const menu = (
-    <Menu>
-      <Menu.Item key="0" style={{ fontSize: '12px', textAlign: 'center' }}>
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'self');
-          }}
-        >
-          关闭当前标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === 0}
-        key="1"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'left');
-          }}
-        >
-          关闭其左侧标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === listenRouterState.length - 1}
-        key="2"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'right');
-          }}
-        >
-          关闭其右侧标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === listenRouterState.length - 1}
-        key="3"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'other');
-          }}
-        >
-          关闭其他标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === listenRouterState.length - 1}
-        key="4"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'all');
-          }}
-        >
-          关闭全部标签
-        </a>
-      </Menu.Item>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu} trigger={['hover']}>
-      <a
-        className="ant-dropdown-link"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <img style={{ marginRight: '-12px' }} src="./biaoqian-icon.svg" />
-      </a>
-    </Dropdown>
-  );
-};
-
-class BasicLayout extends React.PureComponent {
-  allFunc: any = createRef('');
-  customerMenuRef: any = createRef('');
-  actionRef: any = createRef<{
-    reload: () => void;
-  }>();
-  constructor(props) {
-    super(props);
-    routerArray = this.updateTree(props.route.routes);
-    const homeRouter = routerArray.filter(
-      (itemroute) => itemroute.key === '/',
-    )[0];
-    const breadcrumbNameMap = getBreadcrumbNameMap(
-      memoizeOneFormatter(props.route.routes, ''),
-    );
-    const hideMenuArray = ergodicMenuRoutes(props.route.routes);
-
-    this.state = {
-      listenRouterState: [
-        { ...homeRouter, key: '/', tab: '欢迎', closable: false },
-      ],
-      listenRouterKey: ['/'],
-      activeKey: '/',
-      homeRouter,
-      customerMatchs: [],
-      breadcrumbNameMap,
-      hideMenuArray,
-      keyWord: '',
-      collapse: false,
-      drawerLeftParams: {
-        visible: false,
-        width: 690,
-        title: '搜索',
-        onClose: () => {
-          this.setState({
-            drawerLeftParams: {
-              ...this.state.drawerLeftParams,
-              visible: false,
-            },
-          });
-        },
-      },
-      currentSubMenuData: [],
-      showSubMenu: false,
-      isSlider: false,
-    };
-  }
-
-  componentDidMount() {
-    const {
-      history,
-      location,
-      itemPath,
-      pathToRegexp,
-    } = this.props;
-
-    let istParent = 0;
-
-    var self = this;
-
-    window.top != window &&
-      window.addEventListener('message', function (e) {
-        istParent = 1;
-        if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
-          localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
-        } else {
-          localStorage.setItem('isTabChange', true);
-        }
-
-        if (typeof e.data === 'string') {
-          let newKey = encodeUrlQuery(e.data.replace(/^\/\w+\//, '/'));
-          history.push(newKey);
-        } else {
-          const info = e.data;
-          if (info.type === 'remove') {
-            self.tabActions['remove'](info.key.replace(/^\/\w+\//, '/'));
-          }
-        }
-      });
-
-    UN_LISTTEN_DRP = history.listen((route) => {
-      if ((window as any).__POWERED_BY_QIANKUN__) {
-        if (window.location.href.indexOf(`/${itemPath}`) === -1) return;
-      }
-      const {
-        listenRouterState,
-        listenRouterKey,
-        customerMatchs,
-        hideMenuArray,
-      } = this.state;
-      let newListenRouterState = [...listenRouterState];
-      let newListenRouterKey = [...listenRouterKey];
-
-      let replaceRouter = routerArray.filter((itemRoute) =>
-        pathToRegexp(itemRoute.key || '').test(route.pathname),
-      )[0];
-
-      if (!istParent) {
-        if (route.pathname === '/') return;
-        window.parent.postMessage(`/parent/${itemPath}${route.pathname}`, '*');
-      }
-
-      let currentKey = '';
-
-      if (replaceRouter && replaceRouter.isOnlyOnePage) {
-        // 处理中英文和特殊字符
-        currentKey = decodeURIComponent(route.pathname);
-      } else {
-        currentKey = decodeURIComponent(
-          route.pathname + this.parseQueryString(route.search),
-        );
-      }
-
-      // 防止出错
-      if (listenRouterKey.length !== listenRouterState.length) {
-        listenRouterState.forEach((item, index) => {
-          listenRouterKey[index] = item.key;
-        });
-      }
-
-      if (!listenRouterKey.includes(currentKey)) {
-        if (!replaceRouter) {
-          replaceRouter = routerArray.filter(
-            (itemroute) => itemroute.key === '/404',
-          )?.[0];
-
-          this.setState(
-            {
-              listenRouterState: [
-                ...listenRouterState,
-                { ...replaceRouter, key: currentKey, tab: '404' },
-              ],
-              activeKey: currentKey,
-              listenRouterKey: [...listenRouterKey, currentKey],
-            },
-            () => {
-              this.checkisNavSlide();
-            },
-          );
-        } else {
-          const match = matchPath(route.pathname, { path: replaceRouter.key }, pathToRegexp);
-          newListenRouterState = [
-            ...newListenRouterState,
-            {
-              ...replaceRouter,
-              query: route.query,
-              match: match,
-              key: currentKey,
-              tab: this.getPageTitle(route.pathname) + '',
-            },
-          ];
-          newListenRouterKey = [...listenRouterKey, currentKey];
-        }
-      }
-
-      // 处理hideMenu页面自动关闭
-      lastTwoRouterArray.push(route.pathname);
-      lastTwoRouterArray.shift();
-      if (
-        !localStorage.getItem('isTabChange') &&
-        !localStorage.getItem('isMenuClick')
-      ) {
-        if (
-          lastTwoRouterArray[0] &&
-          typeof lastTwoRouterArray[0] === 'string'
-        ) {
-          let needRemoveKeyArray = hideMenuArray.filter((itemRoute) =>
-            pathToRegexp(itemRoute.path || '').test(lastTwoRouterArray[0]),
-          );
-          // lastTwoRouterArray[0] != lastTwoRouterArray[1] 该判断条件用于判断是否是tab删除操作，如果是tab页删除操作，删除的是不是最后一个打开的tab页，执行history.push会导致错误的将最后打开的那个tab页也删除掉
-          if (
-            needRemoveKeyArray.length &&
-            lastTwoRouterArray[0] != lastTwoRouterArray[1]
-          ) {
-            if (
-              (!(
-                lastTwoRouterArray[0].indexOf('/order/mainOrder/supplement') >=
-                0
-              ) ||
-                !pathToRegexp(
-                  '/order/mainOrder/:parmode/separateOrder/:id',
-                ).test(lastTwoRouterArray[1])) &&
-              (!pathToRegexp(
-                '/order/mainOrder/:parmode/separateOrder/:id',
-              ).test(lastTwoRouterArray[0]) ||
-                !(
-                  lastTwoRouterArray[1].indexOf(
-                    'order/mainOrder/separateOrder/',
-                  ) >= 0
-                ))
-            ) {
-              if (!route.state?.thisHideInMenuDoNotClose) {
-                newListenRouterState = newListenRouterState.filter((item) => {
-                  const [pathname] = item.key ? item.key.split('?') : [];
-                  return pathname && pathname !== lastTwoRouterArray[0];
-                });
-                newListenRouterKey = newListenRouterKey.filter((item) => {
-                  const [pathname] = item ? item.split('?') : [];
-                  return pathname && pathname !== lastTwoRouterArray[0];
-                });
-              }
-            }
-          }
-        }
-        // refs?.tableRef?.current?.refreshTable();
-      } else {
-        setTimeout(() => {
-          // 处理页面刷新两面
-          localStorage.removeItem('isTabChange');
-          localStorage.removeItem('isMenuClick');
-        }, 0);
-      }
-      this.setState(
-        {
-          //路由监听函数最后执行setState，避免处理hideMenu类型页面自动关闭的逻辑块内获取不到最新state的listenRouterState和listenRouterKey
-          activeKey: currentKey,
-          listenRouterState: newListenRouterState,
-          listenRouterKey: newListenRouterKey,
-        },
-        () => {
-          this.checkisNavSlide();
-        },
-      );
-
-      istParent = 0;
-    });
-
-    if (
-      localStorage.getItem('firstPage') &&
-      localStorage.getItem('firstPage')?.startsWith(`#/${itemPath}/`)
-    ) {
-      istParent = 1;
-      history.push(
-        localStorage
-          .getItem('firstPage')
-          ?.slice(1)
-          .replace(/^\/\w+\//, '/'),
-      );
-    } else {
-      history.push(location);
-    }
-  }
-
-  componentWillUnmount() {
-    // eslint-disable-next-line no-unused-expressions
-    UN_LISTTEN_DRP && UN_LISTTEN_DRP();
-  }
-
-  parseQueryString = (queryString) => {
-    if (!queryString) {
-      return '';
-    }
-
-    if (queryString.indexOf('?') < 0) {
-      return `?${queryString}`;
-    }
-
-    return queryString;
-  };
-
-  updateTree = (Tree) => {
-    const treeData = Tree;
-    const treeList = [];
-    // 递归获取树列表
-    const getTreeList = (data) => {
-      data.forEach((node) => {
-        if (node.routes && node.routes.length > 0) {
-          getTreeList(node.routes);
-        } else {
-          treeList.push({
-            tab: node.locale,
-            key: node.path,
-            locale: node.locale,
-            closable: true,
-            content: node.component,
-            name: node.name,
-            hideInMenu: node.hideInMenu,
-            isOnlyOnePage: node.isOnlyOnePage,
-          });
-        }
-      });
-    };
-    getTreeList(treeData);
-    return treeList;
-  };
-
-  getDictionarySource = (dicCode: string, needConvertInterger = false) => {
-    const { dictionaryData } = this.props;
-
-    let dicData = {};
-
-    if (!dictionaryData) {
-      let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
-        ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES))
-        : {};
-      dicData = storageDic[dicCode];
-    } else {
-      dicData = dictionaryData[dicCode];
-    }
-    // if (!dicData || !dicData.length) {
-    //   throw new Error(`当前没有${dicCode}字典值`);
-    // }
-
-    try {
-      if (needConvertInterger) {
-        dicData = dicData.map((item: { text: string; value: string }) => ({
-          ...item,
-          value: parseFloat(item.value),
-        }));
-      }
-    } catch (e) { }
-
-    return dicData;
-  };
-
-  getDictionaryTextByValue = (dicCode: string, value: string) => {
-    let dicData = [];
-    let dictionaryData: any;
-    if (!dictionaryData) {
-      let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
-        ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES))
-        : {};
-      dicData = storageDic[dicCode];
-    } else {
-      dicData = dictionaryData[dicCode];
-    }
-
-    if (!dicData || !dicData.length) {
-      // throw new Error(`当前没有${dicCode}字典值`);
-    }
-
-    if (value === undefined) return '- -';
-
-    const dicItemArray = dicData?.filter(
-      (item: { value: string }) => item.value === value.toString(),
-    );
-
-    if (!dicItemArray?.length) {
-      // throw new Error(`当前${dicCode}字典值合没有${value}的数据`)
-      return value;
-    }
-
-    return dicItemArray[0].text;
-  };
-
-  timeFormat = (timeStr, format, notNeedConvertTimeZone) => {
-    if (!timeStr) return '- -';
-
-    if (notNeedConvertTimeZone) {
-      return moment(timeStr).format(format);
-    }
-
-    return moment(timeStr).add(8, 'hours').format(format) || '- -';
-  };
-
-  onChange = (key) => {
-    // console.log('onChange');
-    if (key !== this.state.activeKey) {
-      this.setState({
-        activeKey: key,
-      });
-      localStorage.setItem('isTabChange', '1');
-      let newKey = encodeUrlQuery(key);
-      history.push(newKey);
-    }
-  };
-
-  getPageTitle = (pathname) => {
-    const { formatMessage } = this.props;
-    const { breadcrumbNameMap } = this.state;
-    const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
-
-    if (!currRouterData) {
-      return '';
-    }
-    const pageName = formatMessage({
-      id: currRouterData.locale || currRouterData.name,
-      defaultMessage: currRouterData.name,
-    });
-
-    return `${pageName}`;
-  };
-
-  matchParamsPath = (pathname, breadcrumbNameMap) => {
-    const { pathToRegexp } = this.props;
-    const pathKey = Object.keys(breadcrumbNameMap).find((key) =>
-      pathToRegexp(key).test(pathname),
-    );
-    return breadcrumbNameMap[pathKey];
-  };
-
-  onEdit = (
-    targetKey: React.MouseEvent | React.KeyboardEvent | string,
-    action: string,
-  ) => {
-    this.tabActions[action](targetKey);
-  };
-
-  tabActions: any = {
-    remove: (targetKey: string) => {
-      const { listenRouterState, activeKey, customerMatchs, listenRouterKey } =
-        this.state;
-
-      let lastIndex: number = 0;
-      let newActiveKey: string | undefined = activeKey;
-      let newListenRouterState = [];
-      let newListenRouterKey = [];
-
-      if (targetKey === activeKey) {
-        listenRouterState.forEach((pane, i) => {
-          if (pane.key === targetKey) {
-            lastIndex = i - 1;
-          }
-        });
-
-        newListenRouterState = listenRouterState.filter(
-          (item) => item.key !== targetKey,
-        );
-        newListenRouterKey = listenRouterKey.filter(
-          (item) => item !== targetKey,
-        );
-
-        if (lastIndex < 0) {
-          lastIndex = 0;
-        }
-
-        newActiveKey = newListenRouterState[lastIndex].key;
-      } else {
-        newListenRouterState = listenRouterState.filter(
-          (item) => item.key !== targetKey,
-        );
-        newListenRouterKey = listenRouterKey.filter(
-          (item) => item !== targetKey,
-        );
-      }
-
-      this.setState(
-        {
-          activeKey: newActiveKey,
-          listenRouterState: newListenRouterState,
-          listenRouterKey: newListenRouterKey,
-        },
-        () => {
-          let newKey = encodeUrlQuery(newActiveKey);
-          history.push({
-            pathname: newKey,
-          });
-          this.checkisNavSlide();
-        },
-      );
-    },
-  };
-
-  updateState = (newListenRouterState, newListenRouterKey, cb) => {
-    this.setState(
-      {
-        listenRouterState: newListenRouterState,
-        listenRouterKey: newListenRouterKey,
-      },
-      () => {
-        this.checkisNavSlide();
-        if (cb) cb();
-      },
-    );
-  };
-
-  handleClose = () => {
-    this.setState({
-      drawerLeftParams: {
-        ...this.state.drawerLeftParams,
-        visible: false,
-      },
-      isCollapse: true,
-    });
-    this.allFunc.current?.close?.();
-    this.customerMenuRef.current?.close?.();
-  };
-
-  handleMenuClick = (item: any) => {
-    if (item.children || !item.component) return;
-    let newKey = encodeUrlQuery(item.path);
-    history.push({
-      pathname: newKey,
-    });
-    this.setShowMenu(false);
-  };
-
-  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}
-        </div>
-        {!!item.children &&
-          !!item.children.length &&
-          this.getMenuDom(item.children)}
-      </div>
-    ));
-  };
-
-  setShowMenu = debounce((isShow) => {
-    this.setState({
-      showSubMenu: isShow,
-    });
-  }, 500);
-
-  //设置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总宽度
-    if (navListWidth - wrapWidth <= 0) return;
-    let maxTransX = navListWidth - wrapWidth; // 允许移动最大宽度
-    let transXStr = document.defaultView?.getComputedStyle(
-      globalTabsNav,
-      null,
-    ).transform;
-    let 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)';
-  };
-
-  checkisNavSlide = () => {
-    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;
-    }
-    this.setState({
-      isSlider: true,
-    });
-  };
-
-  changeListenRouterState = (dragIndex: number, hoverIndex: number) => {
-    const { listenRouterState, listenRouterKey } = this.state;
-    let dragItem = listenRouterState[dragIndex];
-    let dragKeyItem = listenRouterKey[dragIndex];
-
-    listenRouterState.splice(dragIndex, 1);
-    listenRouterState.splice(hoverIndex, 0, dragItem);
-
-    listenRouterKey.splice(dragIndex, 1);
-    listenRouterKey.splice(hoverIndex, 0, dragKeyItem);
-  };
-
-  operateFun = (key, type) => {
-    const { listenRouterState, activeKey, listenRouterKey } = this.state;
-    let deleteKey = '';
-    let newlistenRouterState = [];
-    let newlistenRouterKey = [];
-    let newActiveKey = '';
-    let deleteIndex = 0;
-    if (type === 'self') {
-      deleteIndex = listenRouterState.findIndex((item) => item.key === key);
-      deleteKey = key;
-      if (deleteIndex > 0) {
-        newActiveKey = listenRouterState[deleteIndex - 1].key;
-      } else {
-        newActiveKey = listenRouterState[1].key;
-      }
-      newlistenRouterState = listenRouterState.filter((d) => d.key !== key);
-      newlistenRouterKey = listenRouterKey.filter((d) => d !== key);
-      this.updateState(newlistenRouterState, newlistenRouterKey, () => {
-        if (deleteKey === activeKey) {
-          let newKey = encodeUrlQuery(newActiveKey);
-          history.push({
-            pathname: newKey,
-          });
-        }
-      });
-    }
-    if (type === 'left') {
-      const index = listenRouterState.findIndex((item) => item.key === key);
-      newlistenRouterState = listenRouterState.filter(
-        (d: any, i: number) => i >= index || d.key === '/',
-      );
-      newlistenRouterKey = listenRouterKey.filter(
-        (d: any, i: number) => i >= index || d === '/',
-      );
-      this.updateState(newlistenRouterState, newlistenRouterKey, () => {
-        if (newlistenRouterKey.find((item) => item === activeKey)) {
-          return;
-        } else {
-          let newKey = encodeUrlQuery(key);
-          history.push({
-            pathname: newKey,
-          });
-        }
-      });
-    }
-    if (type === 'right') {
-      const index = listenRouterState.findIndex((item) => item.key === key);
-      newlistenRouterState = listenRouterState.filter(
-        (d: any, i: number) => i <= index || d.key === '/',
-      );
-      newlistenRouterKey = listenRouterKey.filter(
-        (d: any, i: number) => i <= index || d === '/',
-      );
-      this.updateState(
-        listenRouterState.filter(
-          (d: any, i: number) => i <= index || d.key === '/',
-        ),
-        listenRouterKey.filter((d: any, i: number) => i <= index || d === '/'),
-        () => {
-          if (newlistenRouterKey.find((item) => item === activeKey)) {
-            return;
-          } else {
-            let newKey = encodeUrlQuery(key);
-            history.push({
-              pathname: newKey,
-            });
-          }
-        },
-      );
-    }
-    if (type === 'all') {
-      this.updateState(
-        listenRouterState.filter((item) => item.key === '/'),
-        listenRouterKey.filter((item) => item === '/'),
-        () => {
-          history.push({
-            pathname: '/',
-          });
-        },
-      );
-    }
-    if (type === 'other') {
-      this.updateState(
-        listenRouterState.filter(
-          (item) => item.key === key || item.key === '/',
-        ),
-        listenRouterKey.filter((item) => item === key || item === '/'),
-        () => {
-          if (key !== activeKey) {
-            let newKey = encodeUrlQuery(key);
-            history.push({
-              pathname: newKey,
-            });
-          }
-        },
-      );
-    }
-  };
-
-  render() {
-    const {
-      listenRouterState,
-      activeKey,
-      listenRouterKey,
-      drawerLeftParams,
-      collapse,
-      currentSubMenuData,
-      showSubMenu,
-      currentSubPath,
-    } = this.state;
-    const { originRoutes, itemPath, defaultSettings, transparentProps={} } = this.props;
-    const TabTitle: React.FC<{}> = ({ item, index, updateState }) => {
-      return (
-        <div className="tab_title_content">
-          {item.tab}
-          {item.key !== '/' && (
-            <ItemMenu
-              info={item}
-              operateFun={this.operateFun}
-              listenRouterState={listenRouterState}
-            />
-          )}
-        </div>
-      );
-    };
-
-    // 左侧菜单 route
-    const dataShowRoute = this.props.routes.find(
-      (route) => route.path === '/homePage/data-show',
-    ); // 添加数据大屏
-    const { route, ...restPrpos } = this.props;
-    const exist = route.routes.find(
-      (route) => route.path === '/homePage/data-show',
-    );
-    if (dataShowRoute && !exist) {
-      route.routes.splice(1, 0, dataShowRoute);
-    }
-
-    const menu = (
-      <Menu>
-        <Menu.Item
-          key="0"
-          style={{
-            background: '#FFFFFF',
-            color: '#848484',
-            fontSize: '12px',
-            textAlign: 'center',
-          }}
-        >
-          <div>已打开的页签数: {listenRouterState.length}</div>
-        </Menu.Item>
-        <Menu.Item key="1" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              // 关闭全部
-              this.updateState(
-                [
-                  {
-                    ...this.state.homeRouter,
-                    key: '/',
-                    tab: '欢迎',
-                    closable: false,
-                  },
-                ],
-                ['/'],
-                () => {
-                  history.push('/');
-                },
-              );
-            }}
-          >
-            关闭全部标签
-          </a>
-        </Menu.Item>
-        <Menu.Item key="2" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              if (activeKey === '/') return;
-              const index = listenRouterState.findIndex(
-                (item) => item.key === activeKey,
-              );
-              let newActiveKey = '';
-              if (index > 0) {
-                newActiveKey = listenRouterState[index - 1].key;
-              } else {
-                newActiveKey = listenRouterState[1].key;
-              }
-              this.updateState(
-                listenRouterState.filter((d) => d.key !== activeKey),
-                listenRouterKey.filter((d) => d !== activeKey),
-                () => {
-                  let newKey = encodeUrlQuery(newActiveKey);
-                  history.push({
-                    pathname: newKey,
-                  });
-                },
-              );
-            }}
-          >
-            关闭当前标签
-          </a>
-        </Menu.Item>
-        <Menu.Item key="3" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              const index = listenRouterState.findIndex(
-                (item) => item.key === activeKey,
-              );
-              // let deleteKey = listenRouterState[index - 1]?.key;
-              // if (deleteKey === '/') {
-              //   message.warning('首页不可关闭。');
-              //   return;
-              // }
-
-              this.updateState(
-                listenRouterState.filter(
-                  (d: any, i: number) => i >= index || d.key === '/',
-                ),
-                listenRouterKey.filter(
-                  (d: any, i: number) => i >= index || d === '/',
-                ),
-              );
-            }}
-          >
-            关闭其左侧标签
-          </a>
-        </Menu.Item>
-        <Menu.Item key="4" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              let index = listenRouterState.findIndex(
-                (item) => item.key === activeKey,
-              );
-              this.updateState(
-                listenRouterState.filter(
-                  (d: any, i: number) => i <= index || d.key === '/',
-                ),
-                listenRouterKey.filter(
-                  (d: any, i: number) => i <= index || d === '/',
-                ),
-              );
-            }}
-          >
-            关闭其右侧标签
-          </a>
-        </Menu.Item>
-      </Menu>
-    );
-
-    const filterByMenuDate = (
-      data: MenuDataItem[],
-      keyWord: string,
-    ): MenuDataItem[] =>
-      data
-        .map((item) => {
-          if (item.name && item.name.includes(keyWord)) {
-            return {
-              ...item,
-            };
-          }
-          return undefined;
-        })
-        .filter((item) => item) as MenuDataItem[];
-
-    let weiqianduanProps = {};
-    let isWeiqianduan = false;
-
-    if (window.top != window) {
-      isWeiqianduan = true;
-      weiqianduanProps = {
-        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 />
-          </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);
-          }}
-        >
-          <DoubleRightOutlined />
-        </div>
-      ),
-    };
-
-    return (
-      <ProLayout
-        actionRef={this.actionRef}
-        onMenuHeaderClick={() => history.push('/')}
-        menuHeaderRender={({ }) => (
-          <CustomerMenuHeader
-            originRoutes={originRoutes}
-            itemPath={itemPath}
-            handleClose={this.handleClose}
-            collapsed={collapse}
-          />
-        )}
-        menuExtraRender={() => {
-          if (!collapse) {
-            return (
-              <div>
-                <CustomerMenu
-                  originRoutes={originRoutes}
-                  itemPath={itemPath}
-                  ref={this.customerMenuRef}
-                  actionRef={this.actionRef}
-                  handleClose={this.handleClose}
-                  isCollapse={this.state.collapse}
-                />
-              </div>
-            );
-          }
-          return (
-            <div className="collapse_icon_close">
-              <span
-                className="collapse_icon"
-                onClick={() => {
-                  this.setState({
-                    collapse: !collapse,
-                  });
-                }}
-              >
-                <MenuUnfoldOutlined />
-              </span>
-            </div>
-          );
-        }}
-        menuProps={{
-          onClick: () => {
-            localStorage.setItem('isMenuClick', 'true');
-          },
-        }}
-        collapsed={collapse}
-        onCollapse={(boo: boolean) => {
-          this.setState({
-            collapse: boo,
-          });
-        }}
-        menuItemRender={(menuItemProps, defaultDom) => {
-          if (menuItemProps?.path === '/') {
-            return (
-              <>
-                <div className="one_menu_wrap">
-                  <Link
-                    onClick={() => {
-                      localStorage.setItem('isMenuClick', 'true');
-                    }}
-                    to={menuItemProps.path}
-                  >
-                    {defaultDom}
-                  </Link>
-                </div>
-              </>
-            );
-          }
-          return (
-            <Link
-              onClick={() => {
-                localStorage.setItem('isMenuClick', 'true');
-              }}
-              to={menuItemProps.path}
-            >
-              {defaultDom}
-            </Link>
-          );
-        }}
-        subMenuItemRender={(menuItemProps, defaultDom) => {
-          return (
-            <div
-              style={{
-                height: '40px',
-                lineHeight: '40px',
-                position: 'relative',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                boxSizing: 'border-box',
-                paddingRight: '10px',
-              }}
-              onMouseEnter={() => {
-                if (
-                  menuItemProps.pro_layout_parentKeys &&
-                  menuItemProps.pro_layout_parentKeys.length
-                )
-                  return;
-                this.setState({
-                  currentSubMenuData: menuItemProps.children,
-                  currentSubPath: menuItemProps.path,
-                });
-                this.setShowMenu(true);
-              }}
-              onMouseLeave={() => {
-                this.setShowMenu(false);
-              }}
-            >
-              {defaultDom}
-              {showSubMenu &&
-                currentSubPath === menuItemProps.path &&
-                !collapse && (
-                  <CaretLeftOutlined
-                    style={{ position: 'absolute', top: '14px', right: '-4px' }}
-                  />
-                )}
-            </div>
-          );
-        }}
-        collapsedButtonRender={() => {
-          return (
-            <div
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="banquan"
-            >
-              {''}
-            </div>
-          );
-        }}
-        postMenuData={(menus) => {
-          return [...filterByMenuDate(menus || [], this.state.keyWord)];
-        }}
-        links={[
-          !this.state.collapse ? (
-            <AllFunc
-              ref={this.allFunc}
-              itemPath={itemPath}
-              handleClose={this.handleClose}
-              isCollapse={this.state.collapse}
-            />
-          ) : (
-            ''
-          ),
-        ]}
-        onPageChange={() => {
-          const { location } = history;
-          // 如果没有登录，重定向到 login
-          if (
-            !localStorage.getItem(ENUM.BROWSER_CACHE.USER_INFO) &&
-            location.pathname !== '/user/login'
-          ) {
-            history.push('/user/login');
-          }
-        }}
-        headerRender={(props) => <GlobalHeaderCom {...props} />}
-        menu={{
-          request: async () => {
-            return JSON.parse(
-              localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]',
-            );
-          },
-          type: 'group',
-        }}
-        route={route}
-        {...restPrpos}
-        {...defaultSettings}
-        {...weiqianduanProps}
-      >
-        <div id="globalTabsContent" className="globalTabs">
-          <DraggableTabs
-            activeKey={activeKey}
-            id="globalTabs"
-            onChange={this.onChange}
-            // tabBarExtraContent={operations}
-            type="editable-card"
-            tabBarStyle={{
-              background: '#f3f3f3',
-              height: '28px',
-              marginRight: 0,
-              fontSize: '12px',
-              color: '#2C2F2E70',
-              marginBottom: '-2px',
-              position: 'fixed',
-              top: 50,
-              zIndex: 10,
-              width: collapse ? 'calc(100% - 75px)' : 'calc(100% - 167px)',
-              display: isWeiqianduan ? 'none' : 'flex',
-            }}
-            tabPosition="top"
-            tabBarGutter={8}
-            onEdit={this.onEdit}
-            tabBarExtraContent={OperationsSlot}
-            animated={false}
-            hideAdd
-          >
-            {listenRouterState.map((item, index) => (
-              <TabPane
-                tab={
-                  <TabTitle
-                    item={item}
-                    index={index}
-                    updateState={this.updateState}
-                  />
-                }
-                style={{ marginTop: isWeiqianduan ? 0 : 30 }}
-                key={item.key}
-                closable={item.key !== '/'}
-                closeIcon={<img src="./biaoqian-guanbi-icon.svg" />}
-              >
-                <WrapperComponent
-                  item={item}
-                  routerProps={this.props}
-                  getDictionarySource={this.getDictionarySource}
-                  getDictionaryTextByValue={this.getDictionaryTextByValue}
-                  timeFormat={this.timeFormat}
-                  transparentProps={transparentProps}
-                />
-              </TabPane>
-            ))}
-          </DraggableTabs>
-          <div
-            className="globalTabsOper"
-            style={{
-              position: 'fixed',
-              top: '50px',
-              zIndex: 10,
-              background: '#fff',
-              display: isWeiqianduan ? 'none' : 'block',
-              borderLeft: '1px solid #E4E4E4',
-            }}
-          >
-            <Dropdown overlay={menu} trigger={['click']}>
-              <a
-                className="ant-dropdown-link"
-                onClick={(e) => e.preventDefault()}
-              >
-                <DashOutlined />
-              </a>
-            </Dropdown>
-          </div>
-          <SearchFunc itemPath={itemPath} {...drawerLeftParams}></SearchFunc>
-          <div
-            onMouseEnter={() => {
-              this.setShowMenu(true);
-            }}
-            onMouseLeave={() => {
-              this.setShowMenu(false);
-            }}
-            className={'sub_menu_content'}
-            style={{ display: showSubMenu && !collapse ? 'block' : 'none' }}
-          >
-            {this.getMenuDom(currentSubMenuData)}
-          </div>
-        </div>
-      </ProLayout>
-    );
-  }
-}
-
-class WrapperComponent extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  render() {
-    const {
-      item,
-      routerProps,
-      getDictionarySource,
-      getDictionaryTextByValue,
-      timeFormat,
-      transparentProps,
-    } = this.props;
-    return (
-      <>
-        {React.createElement(item.content, {
-          getDictionarySource: getDictionarySource,
-          getDictionaryTextByValue: getDictionaryTextByValue,
-          timeFormat: timeFormat,
-          ...routerProps,
-          ...transparentProps,
-          match: item.match,
-        })}
-      </>
-    );
-  }
-}
-
-export default (props) => {
-  const { initialState = {} } = useModel('@@initialState');
-
-  const { dictionaryData } = initialState;
-  const intl = useIntl();
-  const { formatMessage } = intl;
-  return (
-    <BasicLayout
-      {...props}
-      dictionaryData={dictionaryData}
-      formatMessage={formatMessage}
-    />
-  );
-};
+// @ts-nocheck
+import type {
+  MenuDataItem,
+  BasicLayoutProps as ProLayoutProps,
+  Settings,
+} from '@ant-design/pro-layout';
+import ProLayout from '@ant-design/pro-layout';
+import React, { useState, createRef, useRef } from 'react';
+import {
+  Tabs,
+  Dropdown,
+  Menu,
+} from 'antd';
+import {
+  Link,
+  useIntl,
+  history,
+  useModel,
+} from 'umi';
+import {
+  DashOutlined,
+  MenuUnfoldOutlined,
+  CaretLeftOutlined,
+  HomeOutlined,
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+} from '@ant-design/icons';
+import SearchFunc from './Components/SearchFunc';
+import { debounce } from 'lodash';
+
+import AllFunc from './Components/AllFunc';
+import {
+  getBreadcrumbNameMap,
+  ergodicMenuRoutes,
+  matchPath,
+  encodeUrlQuery,
+} from './utils';
+import moment from 'moment';
+import GlobalHeaderCom from './Components/GlobalHeader';
+import CustomerMenu from './Components/CustomerMenu';
+import CustomerMenuHeader from './Components/CustomerMenu/globalMenu/customMenuHeader';
+import './index.less';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import ENUM from '@/utils/enumConfig';
+import { memoizeOneFormatter } from '@/utils/utils';
+
+const { TabPane } = Tabs;
+
+export const RouterContext = React.createContext({});
+
+export type BasicLayoutProps = {
+  breadcrumbNameMap: Record<string, MenuDataItem>;
+  route: ProLayoutProps['route'] & {
+    authority: string[];
+  };
+  settings: Settings;
+} & ProLayoutProps;
+
+export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
+  breadcrumbNameMap: Record<string, MenuDataItem>;
+};
+
+const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
+  menuList.map((item) => {
+    return {
+      ...item,
+      children: item.children ? menuDataRender(item.children) : undefined,
+    };
+  });
+
+let UN_LISTTEN_DRP;
+let routerArray = [];
+let lastTwoRouterArray = [1, 2];
+
+let draggerTabKeys = [];
+
+const type = 'DraggableTabNode';
+const DraggableTabNode = ({ index, children, moveNode }) => {
+  const ref = useRef(null);
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: (monitor) => {
+      const { index: dragIndex } = monitor.getItem() || {};
+
+      if (dragIndex === index) {
+        return {};
+      }
+
+      return {
+        isOver: monitor.isOver(),
+        dropClassName: 'dropping',
+      };
+    },
+    drop: (item) => {
+      moveNode(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: {
+      index,
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+  return (
+    <div
+      ref={ref}
+      style={{
+        marginRight: 24,
+      }}
+      className={isOver ? dropClassName : ''}
+    >
+      {children}
+    </div>
+  );
+};
+
+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);
+  });
+  const orderTabs = tabs.slice().sort((a, b) => {
+    const orderA = order.indexOf(a.key);
+    const orderB = order.indexOf(b.key);
+
+    if (orderA !== -1 && orderB !== -1) {
+      return orderA - orderB;
+    }
+
+    if (orderA !== -1) {
+      return -1;
+    }
+
+    if (orderB !== -1) {
+      return 1;
+    }
+
+    const ia = tabs.indexOf(a);
+    const ib = tabs.indexOf(b);
+    return ia - ib;
+  });
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <Tabs renderTabBar={renderTabBar} {...props}>
+        {orderTabs}
+      </Tabs>
+    </DndProvider>
+  );
+};
+
+const ItemMenu = (props) => {
+  const {
+    info: { key },
+    operateFun,
+    listenRouterState,
+  } = props;
+  let index = listenRouterState.findIndex((item) => item.key === key);
+
+  const menu = (
+    <Menu>
+      <Menu.Item key="0" style={{ fontSize: '12px', textAlign: 'center' }}>
+        <a
+          onClick={(e) => {
+            e.stopPropagation();
+            operateFun(key, 'self');
+          }}
+        >
+          关闭当前标签
+        </a>
+      </Menu.Item>
+      <Menu.Item
+        disabled={index === 0}
+        key="1"
+        style={{ fontSize: '12px', textAlign: 'center' }}
+      >
+        <a
+          onClick={(e) => {
+            e.stopPropagation();
+            operateFun(key, 'left');
+          }}
+        >
+          关闭其左侧标签
+        </a>
+      </Menu.Item>
+      <Menu.Item
+        disabled={index === listenRouterState.length - 1}
+        key="2"
+        style={{ fontSize: '12px', textAlign: 'center' }}
+      >
+        <a
+          onClick={(e) => {
+            e.stopPropagation();
+            operateFun(key, 'right');
+          }}
+        >
+          关闭其右侧标签
+        </a>
+      </Menu.Item>
+      <Menu.Item
+        disabled={index === listenRouterState.length - 1}
+        key="3"
+        style={{ fontSize: '12px', textAlign: 'center' }}
+      >
+        <a
+          onClick={(e) => {
+            e.stopPropagation();
+            operateFun(key, 'other');
+          }}
+        >
+          关闭其他标签
+        </a>
+      </Menu.Item>
+      <Menu.Item
+        disabled={index === listenRouterState.length - 1}
+        key="4"
+        style={{ fontSize: '12px', textAlign: 'center' }}
+      >
+        <a
+          onClick={(e) => {
+            e.stopPropagation();
+            operateFun(key, 'all');
+          }}
+        >
+          关闭全部标签
+        </a>
+      </Menu.Item>
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu} trigger={['hover']}>
+      <a
+        className="ant-dropdown-link"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <img style={{ marginRight: '-12px' }} src="./biaoqian-icon.svg" />
+      </a>
+    </Dropdown>
+  );
+};
+
+class BasicLayout extends React.PureComponent {
+  allFunc: any = createRef('');
+  customerMenuRef: any = createRef('');
+  actionRef: any = createRef<{
+    reload: () => void;
+  }>();
+  constructor(props) {
+    super(props);
+    routerArray = this.updateTree(props.route.routes);
+    const homeRouter = routerArray.filter(
+      (itemroute) => itemroute.key === '/',
+    )[0];
+    const breadcrumbNameMap = getBreadcrumbNameMap(
+      memoizeOneFormatter(props.route.routes, ''),
+    );
+    const hideMenuArray = ergodicMenuRoutes(props.route.routes);
+
+    this.state = {
+      listenRouterState: [
+        { ...homeRouter, key: '/', tab: '欢迎', closable: false },
+      ],
+      listenRouterKey: ['/'],
+      activeKey: '/',
+      homeRouter,
+      customerMatchs: [],
+      breadcrumbNameMap,
+      hideMenuArray,
+      keyWord: '',
+      collapse: false,
+      drawerLeftParams: {
+        visible: false,
+        width: 690,
+        title: '搜索',
+        onClose: () => {
+          this.setState({
+            drawerLeftParams: {
+              ...this.state.drawerLeftParams,
+              visible: false,
+            },
+          });
+        },
+      },
+      currentSubMenuData: [],
+      showSubMenu: false,
+      isSlider: false,
+    };
+  }
+
+  componentDidMount() {
+    const {
+      history,
+      location,
+      itemPath,
+      pathToRegexp,
+    } = this.props;
+
+    let istParent = 0;
+
+    var self = this;
+
+    window.top != window &&
+      window.addEventListener('message', function (e) {
+        istParent = 1;
+        if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
+          localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
+        } else {
+          localStorage.setItem('isTabChange', true);
+        }
+
+        if (typeof e.data === 'string') {
+          let newKey = encodeUrlQuery(e.data.replace(/^\/\w+\//, '/'));
+          history.push(newKey);
+        } else {
+          const info = e.data;
+          if (info.type === 'remove') {
+            self.tabActions['remove'](info.key.replace(/^\/\w+\//, '/'));
+          }
+        }
+      });
+
+    UN_LISTTEN_DRP = history.listen((route) => {
+      if ((window as any).__POWERED_BY_QIANKUN__) {
+        if (window.location.href.indexOf(`/${itemPath}`) === -1) return;
+      }
+      const {
+        listenRouterState,
+        listenRouterKey,
+        customerMatchs,
+        hideMenuArray,
+      } = this.state;
+      let newListenRouterState = [...listenRouterState];
+      let newListenRouterKey = [...listenRouterKey];
+
+      let replaceRouter = routerArray.filter((itemRoute) =>
+        pathToRegexp(itemRoute.key || '').test(route.pathname),
+      )[0];
+
+      let currentKey = '';
+
+      if (replaceRouter && replaceRouter.isOnlyOnePage) {
+        // 处理中英文和特殊字符
+        currentKey = decodeURIComponent(route.pathname);
+      } else {
+        currentKey = decodeURIComponent(
+          route.pathname + this.parseQueryString(route.search),
+        );
+      }
+
+      if (!istParent) {
+        if (route.pathname === '/') return;
+        window.parent.postMessage(`/parent/${itemPath}${currentKey}`, '*');
+      }
+
+      // 防止出错
+      if (listenRouterKey.length !== listenRouterState.length) {
+        listenRouterState.forEach((item, index) => {
+          listenRouterKey[index] = item.key;
+        });
+      }
+
+      if (!listenRouterKey.includes(currentKey)) {
+        if (!replaceRouter) {
+          replaceRouter = routerArray.filter(
+            (itemroute) => itemroute.key === '/404',
+          )?.[0];
+
+          this.setState(
+            {
+              listenRouterState: [
+                ...listenRouterState,
+                { ...replaceRouter, key: currentKey, tab: '404' },
+              ],
+              activeKey: currentKey,
+              listenRouterKey: [...listenRouterKey, currentKey],
+            },
+            () => {
+              this.checkisNavSlide();
+            },
+          );
+        } else {
+          const match = matchPath(route.pathname, { path: replaceRouter.key }, pathToRegexp);
+          newListenRouterState = [
+            ...newListenRouterState,
+            {
+              ...replaceRouter,
+              query: route.query,
+              match: match,
+              key: currentKey,
+              tab: this.getPageTitle(route.pathname) + '',
+            },
+          ];
+          newListenRouterKey = [...listenRouterKey, currentKey];
+        }
+      }
+
+      // 处理hideMenu页面自动关闭
+      lastTwoRouterArray.push(route.pathname);
+      lastTwoRouterArray.shift();
+      if (
+        !localStorage.getItem('isTabChange') &&
+        !localStorage.getItem('isMenuClick')
+      ) {
+        if (
+          lastTwoRouterArray[0] &&
+          typeof lastTwoRouterArray[0] === 'string'
+        ) {
+          let needRemoveKeyArray = hideMenuArray.filter((itemRoute) =>
+            pathToRegexp(itemRoute.path || '').test(lastTwoRouterArray[0]),
+          );
+          // lastTwoRouterArray[0] != lastTwoRouterArray[1] 该判断条件用于判断是否是tab删除操作，如果是tab页删除操作，删除的是不是最后一个打开的tab页，执行history.push会导致错误的将最后打开的那个tab页也删除掉
+          if (
+            needRemoveKeyArray.length &&
+            lastTwoRouterArray[0] != lastTwoRouterArray[1]
+          ) {
+            if (
+              (!(
+                lastTwoRouterArray[0].indexOf('/order/mainOrder/supplement') >=
+                0
+              ) ||
+                !pathToRegexp(
+                  '/order/mainOrder/:parmode/separateOrder/:id',
+                ).test(lastTwoRouterArray[1])) &&
+              (!pathToRegexp(
+                '/order/mainOrder/:parmode/separateOrder/:id',
+              ).test(lastTwoRouterArray[0]) ||
+                !(
+                  lastTwoRouterArray[1].indexOf(
+                    'order/mainOrder/separateOrder/',
+                  ) >= 0
+                ))
+            ) {
+              if (!route.state?.thisHideInMenuDoNotClose) {
+                newListenRouterState = newListenRouterState.filter((item) => {
+                  const [pathname] = item.key ? item.key.split('?') : [];
+                  return pathname && pathname !== lastTwoRouterArray[0];
+                });
+                newListenRouterKey = newListenRouterKey.filter((item) => {
+                  const [pathname] = item ? item.split('?') : [];
+                  return pathname && pathname !== lastTwoRouterArray[0];
+                });
+              }
+            }
+          }
+        }
+        // refs?.tableRef?.current?.refreshTable();
+      } else {
+        setTimeout(() => {
+          // 处理页面刷新两面
+          localStorage.removeItem('isTabChange');
+          localStorage.removeItem('isMenuClick');
+        }, 0);
+      }
+      this.setState(
+        {
+          //路由监听函数最后执行setState，避免处理hideMenu类型页面自动关闭的逻辑块内获取不到最新state的listenRouterState和listenRouterKey
+          activeKey: currentKey,
+          listenRouterState: newListenRouterState,
+          listenRouterKey: newListenRouterKey,
+        },
+        () => {
+          this.checkisNavSlide();
+        },
+      );
+
+      istParent = 0;
+    });
+
+    if (
+      localStorage.getItem('firstPage') &&
+      localStorage.getItem('firstPage')?.startsWith(`#/${itemPath}/`)
+    ) {
+      istParent = 1;
+      history.push(
+        localStorage
+          .getItem('firstPage')
+          ?.slice(1)
+          .replace(/^\/\w+\//, '/'),
+      );
+    } else {
+      history.push(location);
+    }
+  }
+
+  componentWillUnmount() {
+    // eslint-disable-next-line no-unused-expressions
+    UN_LISTTEN_DRP && UN_LISTTEN_DRP();
+  }
+
+  parseQueryString = (queryString) => {
+    if (!queryString) {
+      return '';
+    }
+
+    if (queryString.indexOf('?') < 0) {
+      return `?${queryString}`;
+    }
+
+    return queryString;
+  };
+
+  updateTree = (Tree) => {
+    const treeData = Tree;
+    const treeList = [];
+    // 递归获取树列表
+    const getTreeList = (data) => {
+      data.forEach((node) => {
+        if (node.routes && node.routes.length > 0) {
+          getTreeList(node.routes);
+        } else {
+          treeList.push({
+            tab: node.locale,
+            key: node.path,
+            locale: node.locale,
+            closable: true,
+            content: node.component,
+            name: node.name,
+            hideInMenu: node.hideInMenu,
+            isOnlyOnePage: node.isOnlyOnePage,
+          });
+        }
+      });
+    };
+    getTreeList(treeData);
+    return treeList;
+  };
+
+  getDictionarySource = (dicCode: string, needConvertInterger = false) => {
+    const { dictionaryData } = this.props;
+
+    let dicData = {};
+
+    if (!dictionaryData) {
+      let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
+        ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES))
+        : {};
+      dicData = storageDic[dicCode];
+    } else {
+      dicData = dictionaryData[dicCode];
+    }
+    // if (!dicData || !dicData.length) {
+    //   throw new Error(`当前没有${dicCode}字典值`);
+    // }
+
+    try {
+      if (needConvertInterger) {
+        dicData = dicData.map((item: { text: string; value: string }) => ({
+          ...item,
+          value: parseFloat(item.value),
+        }));
+      }
+    } catch (e) { }
+
+    return dicData;
+  };
+
+  getDictionaryTextByValue = (dicCode: string, value: string) => {
+    let dicData = [];
+    let dictionaryData: any;
+    if (!dictionaryData) {
+      let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
+        ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES))
+        : {};
+      dicData = storageDic[dicCode];
+    } else {
+      dicData = dictionaryData[dicCode];
+    }
+
+    if (!dicData || !dicData.length) {
+      // throw new Error(`当前没有${dicCode}字典值`);
+    }
+
+    if (value === undefined) return '- -';
+
+    const dicItemArray = dicData?.filter(
+      (item: { value: string }) => item.value === value.toString(),
+    );
+
+    if (!dicItemArray?.length) {
+      // throw new Error(`当前${dicCode}字典值合没有${value}的数据`)
+      return value;
+    }
+
+    return dicItemArray[0].text;
+  };
+
+  timeFormat = (timeStr, format, notNeedConvertTimeZone) => {
+    if (!timeStr) return '- -';
+
+    if (notNeedConvertTimeZone) {
+      return moment(timeStr).format(format);
+    }
+
+    return moment(timeStr).add(8, 'hours').format(format) || '- -';
+  };
+
+  onChange = (key) => {
+    // console.log('onChange');
+    if (key !== this.state.activeKey) {
+      this.setState({
+        activeKey: key,
+      });
+      localStorage.setItem('isTabChange', '1');
+      let newKey = encodeUrlQuery(key);
+      history.push(newKey);
+    }
+  };
+
+  getPageTitle = (pathname) => {
+    const { formatMessage } = this.props;
+    const { breadcrumbNameMap } = this.state;
+    const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
+
+    if (!currRouterData) {
+      return '';
+    }
+    const pageName = formatMessage({
+      id: currRouterData.locale || currRouterData.name,
+      defaultMessage: currRouterData.name,
+    });
+
+    return `${pageName}`;
+  };
+
+  matchParamsPath = (pathname, breadcrumbNameMap) => {
+    const { pathToRegexp } = this.props;
+    const pathKey = Object.keys(breadcrumbNameMap).find((key) =>
+      pathToRegexp(key).test(pathname),
+    );
+    return breadcrumbNameMap[pathKey];
+  };
+
+  onEdit = (
+    targetKey: React.MouseEvent | React.KeyboardEvent | string,
+    action: string,
+  ) => {
+    this.tabActions[action](targetKey);
+  };
+
+  tabActions: any = {
+    remove: (targetKey: string) => {
+      const { listenRouterState, activeKey, customerMatchs, listenRouterKey } =
+        this.state;
+
+      let lastIndex: number = 0;
+      let newActiveKey: string | undefined = activeKey;
+      let newListenRouterState = [];
+      let newListenRouterKey = [];
+
+      if (targetKey === activeKey) {
+        listenRouterState.forEach((pane, i) => {
+          if (pane.key === targetKey) {
+            lastIndex = i - 1;
+          }
+        });
+
+        newListenRouterState = listenRouterState.filter(
+          (item) => item.key !== targetKey,
+        );
+        newListenRouterKey = listenRouterKey.filter(
+          (item) => item !== targetKey,
+        );
+
+        if (lastIndex < 0) {
+          lastIndex = 0;
+        }
+
+        newActiveKey = newListenRouterState[lastIndex].key;
+      } else {
+        newListenRouterState = listenRouterState.filter(
+          (item) => item.key !== targetKey,
+        );
+        newListenRouterKey = listenRouterKey.filter(
+          (item) => item !== targetKey,
+        );
+      }
+
+      this.setState(
+        {
+          activeKey: newActiveKey,
+          listenRouterState: newListenRouterState,
+          listenRouterKey: newListenRouterKey,
+        },
+        () => {
+          let newKey = encodeUrlQuery(newActiveKey);
+          history.push({
+            pathname: newKey,
+          });
+          this.checkisNavSlide();
+        },
+      );
+    },
+  };
+
+  updateState = (newListenRouterState, newListenRouterKey, cb) => {
+    this.setState(
+      {
+        listenRouterState: newListenRouterState,
+        listenRouterKey: newListenRouterKey,
+      },
+      () => {
+        this.checkisNavSlide();
+        if (cb) cb();
+      },
+    );
+  };
+
+  handleClose = () => {
+    this.setState({
+      drawerLeftParams: {
+        ...this.state.drawerLeftParams,
+        visible: false,
+      },
+      isCollapse: true,
+    });
+    this.allFunc.current?.close?.();
+    this.customerMenuRef.current?.close?.();
+  };
+
+  handleMenuClick = (item: any) => {
+    if (item.children || !item.component) return;
+    let newKey = encodeUrlQuery(item.path);
+    history.push({
+      pathname: newKey,
+    });
+    this.setShowMenu(false);
+  };
+
+  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}
+        </div>
+        {!!item.children &&
+          !!item.children.length &&
+          this.getMenuDom(item.children)}
+      </div>
+    ));
+  };
+
+  setShowMenu = debounce((isShow) => {
+    this.setState({
+      showSubMenu: isShow,
+    });
+  }, 500);
+
+  //设置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总宽度
+    if (navListWidth - wrapWidth <= 0) return;
+    let maxTransX = navListWidth - wrapWidth; // 允许移动最大宽度
+    let transXStr = document.defaultView?.getComputedStyle(
+      globalTabsNav,
+      null,
+    ).transform;
+    let 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)';
+  };
+
+  checkisNavSlide = () => {
+    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;
+    }
+    this.setState({
+      isSlider: true,
+    });
+  };
+
+  changeListenRouterState = (dragIndex: number, hoverIndex: number) => {
+    const { listenRouterState, listenRouterKey } = this.state;
+    let dragItem = listenRouterState[dragIndex];
+    let dragKeyItem = listenRouterKey[dragIndex];
+
+    listenRouterState.splice(dragIndex, 1);
+    listenRouterState.splice(hoverIndex, 0, dragItem);
+
+    listenRouterKey.splice(dragIndex, 1);
+    listenRouterKey.splice(hoverIndex, 0, dragKeyItem);
+  };
+
+  operateFun = (key, type) => {
+    const { listenRouterState, activeKey, listenRouterKey } = this.state;
+    let deleteKey = '';
+    let newlistenRouterState = [];
+    let newlistenRouterKey = [];
+    let newActiveKey = '';
+    let deleteIndex = 0;
+    if (type === 'self') {
+      deleteIndex = listenRouterState.findIndex((item) => item.key === key);
+      deleteKey = key;
+      if (deleteIndex > 0) {
+        newActiveKey = listenRouterState[deleteIndex - 1].key;
+      } else {
+        newActiveKey = listenRouterState[1].key;
+      }
+      newlistenRouterState = listenRouterState.filter((d) => d.key !== key);
+      newlistenRouterKey = listenRouterKey.filter((d) => d !== key);
+      this.updateState(newlistenRouterState, newlistenRouterKey, () => {
+        if (deleteKey === activeKey) {
+          let newKey = encodeUrlQuery(newActiveKey);
+          history.push({
+            pathname: newKey,
+          });
+        }
+      });
+    }
+    if (type === 'left') {
+      const index = listenRouterState.findIndex((item) => item.key === key);
+      newlistenRouterState = listenRouterState.filter(
+        (d: any, i: number) => i >= index || d.key === '/',
+      );
+      newlistenRouterKey = listenRouterKey.filter(
+        (d: any, i: number) => i >= index || d === '/',
+      );
+      this.updateState(newlistenRouterState, newlistenRouterKey, () => {
+        if (newlistenRouterKey.find((item) => item === activeKey)) {
+          return;
+        } else {
+          let newKey = encodeUrlQuery(key);
+          history.push({
+            pathname: newKey,
+          });
+        }
+      });
+    }
+    if (type === 'right') {
+      const index = listenRouterState.findIndex((item) => item.key === key);
+      newlistenRouterState = listenRouterState.filter(
+        (d: any, i: number) => i <= index || d.key === '/',
+      );
+      newlistenRouterKey = listenRouterKey.filter(
+        (d: any, i: number) => i <= index || d === '/',
+      );
+      this.updateState(
+        listenRouterState.filter(
+          (d: any, i: number) => i <= index || d.key === '/',
+        ),
+        listenRouterKey.filter((d: any, i: number) => i <= index || d === '/'),
+        () => {
+          if (newlistenRouterKey.find((item) => item === activeKey)) {
+            return;
+          } else {
+            let newKey = encodeUrlQuery(key);
+            history.push({
+              pathname: newKey,
+            });
+          }
+        },
+      );
+    }
+    if (type === 'all') {
+      this.updateState(
+        listenRouterState.filter((item) => item.key === '/'),
+        listenRouterKey.filter((item) => item === '/'),
+        () => {
+          history.push({
+            pathname: '/',
+          });
+        },
+      );
+    }
+    if (type === 'other') {
+      this.updateState(
+        listenRouterState.filter(
+          (item) => item.key === key || item.key === '/',
+        ),
+        listenRouterKey.filter((item) => item === key || item === '/'),
+        () => {
+          if (key !== activeKey) {
+            let newKey = encodeUrlQuery(key);
+            history.push({
+              pathname: newKey,
+            });
+          }
+        },
+      );
+    }
+  };
+
+  render() {
+    const {
+      listenRouterState,
+      activeKey,
+      listenRouterKey,
+      drawerLeftParams,
+      collapse,
+      currentSubMenuData,
+      showSubMenu,
+      currentSubPath,
+    } = this.state;
+    const { originRoutes, itemPath, defaultSettings, transparentProps={} } = this.props;
+    const TabTitle: React.FC<{}> = ({ item, index, updateState }) => {
+      return (
+        <div className="tab_title_content">
+          {item.tab}
+          {item.key !== '/' && (
+            <ItemMenu
+              info={item}
+              operateFun={this.operateFun}
+              listenRouterState={listenRouterState}
+            />
+          )}
+        </div>
+      );
+    };
+
+    // 左侧菜单 route
+    const dataShowRoute = this.props.routes.find(
+      (route) => route.path === '/homePage/data-show',
+    ); // 添加数据大屏
+    const { route, ...restPrpos } = this.props;
+    const exist = route.routes.find(
+      (route) => route.path === '/homePage/data-show',
+    );
+    if (dataShowRoute && !exist) {
+      route.routes.splice(1, 0, dataShowRoute);
+    }
+
+    const menu = (
+      <Menu>
+        <Menu.Item
+          key="0"
+          style={{
+            background: '#FFFFFF',
+            color: '#848484',
+            fontSize: '12px',
+            textAlign: 'center',
+          }}
+        >
+          <div>已打开的页签数: {listenRouterState.length}</div>
+        </Menu.Item>
+        <Menu.Item key="1" style={{ fontSize: '12px', textAlign: 'center' }}>
+          <a
+            onClick={() => {
+              // 关闭全部
+              this.updateState(
+                [
+                  {
+                    ...this.state.homeRouter,
+                    key: '/',
+                    tab: '欢迎',
+                    closable: false,
+                  },
+                ],
+                ['/'],
+                () => {
+                  history.push('/');
+                },
+              );
+            }}
+          >
+            关闭全部标签
+          </a>
+        </Menu.Item>
+        <Menu.Item key="2" style={{ fontSize: '12px', textAlign: 'center' }}>
+          <a
+            onClick={() => {
+              if (activeKey === '/') return;
+              const index = listenRouterState.findIndex(
+                (item) => item.key === activeKey,
+              );
+              let newActiveKey = '';
+              if (index > 0) {
+                newActiveKey = listenRouterState[index - 1].key;
+              } else {
+                newActiveKey = listenRouterState[1].key;
+              }
+              this.updateState(
+                listenRouterState.filter((d) => d.key !== activeKey),
+                listenRouterKey.filter((d) => d !== activeKey),
+                () => {
+                  let newKey = encodeUrlQuery(newActiveKey);
+                  history.push({
+                    pathname: newKey,
+                  });
+                },
+              );
+            }}
+          >
+            关闭当前标签
+          </a>
+        </Menu.Item>
+        <Menu.Item key="3" style={{ fontSize: '12px', textAlign: 'center' }}>
+          <a
+            onClick={() => {
+              const index = listenRouterState.findIndex(
+                (item) => item.key === activeKey,
+              );
+              // let deleteKey = listenRouterState[index - 1]?.key;
+              // if (deleteKey === '/') {
+              //   message.warning('首页不可关闭。');
+              //   return;
+              // }
+
+              this.updateState(
+                listenRouterState.filter(
+                  (d: any, i: number) => i >= index || d.key === '/',
+                ),
+                listenRouterKey.filter(
+                  (d: any, i: number) => i >= index || d === '/',
+                ),
+              );
+            }}
+          >
+            关闭其左侧标签
+          </a>
+        </Menu.Item>
+        <Menu.Item key="4" style={{ fontSize: '12px', textAlign: 'center' }}>
+          <a
+            onClick={() => {
+              let index = listenRouterState.findIndex(
+                (item) => item.key === activeKey,
+              );
+              this.updateState(
+                listenRouterState.filter(
+                  (d: any, i: number) => i <= index || d.key === '/',
+                ),
+                listenRouterKey.filter(
+                  (d: any, i: number) => i <= index || d === '/',
+                ),
+              );
+            }}
+          >
+            关闭其右侧标签
+          </a>
+        </Menu.Item>
+      </Menu>
+    );
+
+    const filterByMenuDate = (
+      data: MenuDataItem[],
+      keyWord: string,
+    ): MenuDataItem[] =>
+      data
+        .map((item) => {
+          if (item.name && item.name.includes(keyWord)) {
+            return {
+              ...item,
+            };
+          }
+          return undefined;
+        })
+        .filter((item) => item) as MenuDataItem[];
+
+    let weiqianduanProps = {};
+    let isWeiqianduan = false;
+
+    if (window.top != window) {
+      isWeiqianduan = true;
+      weiqianduanProps = {
+        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 />
+          </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);
+          }}
+        >
+          <DoubleRightOutlined />
+        </div>
+      ),
+    };
+
+    return (
+      <ProLayout
+        actionRef={this.actionRef}
+        onMenuHeaderClick={() => history.push('/')}
+        menuHeaderRender={({ }) => (
+          <CustomerMenuHeader
+            originRoutes={originRoutes}
+            itemPath={itemPath}
+            handleClose={this.handleClose}
+            collapsed={collapse}
+          />
+        )}
+        menuExtraRender={() => {
+          if (!collapse) {
+            return (
+              <div>
+                <CustomerMenu
+                  originRoutes={originRoutes}
+                  itemPath={itemPath}
+                  ref={this.customerMenuRef}
+                  actionRef={this.actionRef}
+                  handleClose={this.handleClose}
+                  isCollapse={this.state.collapse}
+                />
+              </div>
+            );
+          }
+          return (
+            <div className="collapse_icon_close">
+              <span
+                className="collapse_icon"
+                onClick={() => {
+                  this.setState({
+                    collapse: !collapse,
+                  });
+                }}
+              >
+                <MenuUnfoldOutlined />
+              </span>
+            </div>
+          );
+        }}
+        menuProps={{
+          onClick: () => {
+            localStorage.setItem('isMenuClick', 'true');
+          },
+        }}
+        collapsed={collapse}
+        onCollapse={(boo: boolean) => {
+          this.setState({
+            collapse: boo,
+          });
+        }}
+        menuItemRender={(menuItemProps, defaultDom) => {
+          if (menuItemProps?.path === '/') {
+            return (
+              <>
+                <div className="one_menu_wrap">
+                  <Link
+                    onClick={() => {
+                      localStorage.setItem('isMenuClick', 'true');
+                    }}
+                    to={menuItemProps.path}
+                  >
+                    {defaultDom}
+                  </Link>
+                </div>
+              </>
+            );
+          }
+          return (
+            <Link
+              onClick={() => {
+                localStorage.setItem('isMenuClick', 'true');
+              }}
+              to={menuItemProps.path}
+            >
+              {defaultDom}
+            </Link>
+          );
+        }}
+        subMenuItemRender={(menuItemProps, defaultDom) => {
+          return (
+            <div
+              style={{
+                height: '40px',
+                lineHeight: '40px',
+                position: 'relative',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                boxSizing: 'border-box',
+                paddingRight: '10px',
+              }}
+              onMouseEnter={() => {
+                if (
+                  menuItemProps.pro_layout_parentKeys &&
+                  menuItemProps.pro_layout_parentKeys.length
+                )
+                  return;
+                this.setState({
+                  currentSubMenuData: menuItemProps.children,
+                  currentSubPath: menuItemProps.path,
+                });
+                this.setShowMenu(true);
+              }}
+              onMouseLeave={() => {
+                this.setShowMenu(false);
+              }}
+            >
+              {defaultDom}
+              {showSubMenu &&
+                currentSubPath === menuItemProps.path &&
+                !collapse && (
+                  <CaretLeftOutlined
+                    style={{ position: 'absolute', top: '14px', right: '-4px' }}
+                  />
+                )}
+            </div>
+          );
+        }}
+        collapsedButtonRender={() => {
+          return (
+            <div
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className="banquan"
+            >
+              {''}
+            </div>
+          );
+        }}
+        postMenuData={(menus) => {
+          return [...filterByMenuDate(menus || [], this.state.keyWord)];
+        }}
+        links={[
+          !this.state.collapse ? (
+            <AllFunc
+              ref={this.allFunc}
+              itemPath={itemPath}
+              handleClose={this.handleClose}
+              isCollapse={this.state.collapse}
+            />
+          ) : (
+            ''
+          ),
+        ]}
+        onPageChange={() => {
+          const { location } = history;
+          // 如果没有登录，重定向到 login
+          if (
+            !localStorage.getItem(ENUM.BROWSER_CACHE.USER_INFO) &&
+            location.pathname !== '/user/login'
+          ) {
+            history.push('/user/login');
+          }
+        }}
+        headerRender={(props) => <GlobalHeaderCom {...props} />}
+        menu={{
+          request: async () => {
+            return JSON.parse(
+              localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]',
+            );
+          },
+          type: 'group',
+        }}
+        route={route}
+        {...restPrpos}
+        {...defaultSettings}
+        {...weiqianduanProps}
+      >
+        <div id="globalTabsContent" className="globalTabs">
+          <DraggableTabs
+            activeKey={activeKey}
+            id="globalTabs"
+            onChange={this.onChange}
+            // tabBarExtraContent={operations}
+            type="editable-card"
+            tabBarStyle={{
+              background: '#f3f3f3',
+              height: '28px',
+              marginRight: 0,
+              fontSize: '12px',
+              color: '#2C2F2E70',
+              marginBottom: '-2px',
+              position: 'fixed',
+              top: 50,
+              zIndex: 10,
+              width: collapse ? 'calc(100% - 75px)' : 'calc(100% - 167px)',
+              display: isWeiqianduan ? 'none' : 'flex',
+            }}
+            tabPosition="top"
+            tabBarGutter={8}
+            onEdit={this.onEdit}
+            tabBarExtraContent={OperationsSlot}
+            animated={false}
+            hideAdd
+          >
+            {listenRouterState.map((item, index) => (
+              <TabPane
+                tab={
+                  <TabTitle
+                    item={item}
+                    index={index}
+                    updateState={this.updateState}
+                  />
+                }
+                style={{ marginTop: isWeiqianduan ? 0 : 30 }}
+                key={item.key}
+                closable={item.key !== '/'}
+                closeIcon={<img src="./biaoqian-guanbi-icon.svg" />}
+              >
+                <WrapperComponent
+                  item={item}
+                  routerProps={this.props}
+                  getDictionarySource={this.getDictionarySource}
+                  getDictionaryTextByValue={this.getDictionaryTextByValue}
+                  timeFormat={this.timeFormat}
+                  transparentProps={transparentProps}
+                />
+              </TabPane>
+            ))}
+          </DraggableTabs>
+          <div
+            className="globalTabsOper"
+            style={{
+              position: 'fixed',
+              top: '50px',
+              zIndex: 10,
+              background: '#fff',
+              display: isWeiqianduan ? 'none' : 'block',
+              borderLeft: '1px solid #E4E4E4',
+            }}
+          >
+            <Dropdown overlay={menu} trigger={['click']}>
+              <a
+                className="ant-dropdown-link"
+                onClick={(e) => e.preventDefault()}
+              >
+                <DashOutlined />
+              </a>
+            </Dropdown>
+          </div>
+          <SearchFunc itemPath={itemPath} {...drawerLeftParams}></SearchFunc>
+          <div
+            onMouseEnter={() => {
+              this.setShowMenu(true);
+            }}
+            onMouseLeave={() => {
+              this.setShowMenu(false);
+            }}
+            className={'sub_menu_content'}
+            style={{ display: showSubMenu && !collapse ? 'block' : 'none' }}
+          >
+            {this.getMenuDom(currentSubMenuData)}
+          </div>
+        </div>
+      </ProLayout>
+    );
+  }
+}
+
+class WrapperComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const {
+      item,
+      routerProps,
+      getDictionarySource,
+      getDictionaryTextByValue,
+      timeFormat,
+      transparentProps,
+    } = this.props;
+    return (
+      <>
+        {React.createElement(item.content, {
+          getDictionarySource: getDictionarySource,
+          getDictionaryTextByValue: getDictionaryTextByValue,
+          timeFormat: timeFormat,
+          ...routerProps,
+          ...transparentProps,
+          match: item.match,
+        })}
+      </>
+    );
+  }
+}
+
+export default (props) => {
+  const { initialState = {} } = useModel('@@initialState');
+
+  const { dictionaryData } = initialState;
+  const intl = useIntl();
+  const { formatMessage } = intl;
+  return (
+    <BasicLayout
+      {...props}
+      dictionaryData={dictionaryData}
+      formatMessage={formatMessage}
+    />
+  );
+};