Function TabsLayout

Xmw_web/src/components/TabsLayout/index.tsx:32–152

({
  isKeep,
  keepElements,
  navigate,
  dropByCacheKey,
  dropLeftTabs,
  dropRightTabs,
  dropOtherTabs,
  refreshTab,
  activeKey,
})

};

const TabsLayout: FC<TabsLayoutProps> = ({
  isKeep,
  keepElements,
  navigate,
  dropByCacheKey,
  dropLeftTabs,
  dropRightTabs,
  dropOtherTabs,
  refreshTab,
  activeKey,
}) => {
  const prefix = 'components.TabsLayout.';
  // 国际化工具
  const { formatMessage } = useIntl();
  // hooks 调用
  const { message } = App.useApp();
  /**
   * @description: 点击菜单回调
   */
  const handleClickMenu = useCallback(
    (key: string) => {
      const pathName = location.pathname?.toLowerCase();
      switch (key) {
        case TABSLAYOUT.REFRESH:
          refreshTab(pathName);
          break;
        case TABSLAYOUT.RIGHT:
          dropRightTabs(pathName);
          break;
        case TABSLAYOUT.LEFT:
          dropLeftTabs(pathName);
          break;
        case TABSLAYOUT.OTHERS:
          dropOtherTabs(pathName);
          break;
      }
    },
    [dropLeftTabs, dropOtherTabs, dropRightTabs, refreshTab],
  );
  /**
   * @description: 右键菜单配置项
   */
  const renderMenuItem = (key: EnumValues<typeof TABSLAYOUT>, icon: UmiIcon) => ({
    label: formatMessage({ id: `${prefix}${key}` }),
    icon: <Icon icon={icon} style={{ fontSize: 16, display: 'flex' }} />,
    key: key,
  });
  const menuItems: MenuProps['items'] = [
    // 重新加载
    renderMenuItem(TABSLAYOUT.REFRESH, 'ri:refresh-line'),
    { type: 'divider' },
    // 关闭右侧
    renderMenuItem(TABSLAYOUT.RIGHT, 'ri:skip-right-line'),
    // 关闭左侧
    renderMenuItem(TABSLAYOUT.LEFT, 'ri:skip-left-line'),
    { type: 'divider' },
    // 关闭其它
    renderMenuItem(TABSLAYOUT.OTHERS, 'ri:arrow-left-right-line'),