本插件基于umi-plugin-panel-tab[https://github.com/fangzhengjin/umi-plugin-panel-tabs]

感谢作者fangzhengjin

如何使用

安装依赖即可, 以umi-plugin开头的插件会被自动加载，不支持antd V5！！！

配置项

在 config/config.ts - defineConfig 方法中进行配置

export default defineConfig({
  panelTab: {
    use404: true,
    useAuth: true,
    autoI18n: true,
    tabsLimit: 10,
    tabsLimitWait: 500,
    tabsLimitWarnTitle: '提示',
    tabsLimitWarnContent: '您当前打开页面过多, 请关闭不使用的页面以减少卡顿!',
    defaultPage:'/welcome',
  },
});

| 配置项 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | use404 | boolean | true | 使用内置的 404 页面, 该页面会在 tab 中显示 | | useAuth | boolean | false | 使用内置的 403 页面, 加载内置的权限判断 wrapper, 该页面会在 tab 中显示 | | autoI18n | boolean | false (0.0.23 之前的版本起默认 true) | 自动开启国际化, 仅当 ant-design-pro 的 locale 不为 false 且不为空时生效 | | tabsLimit | number | 10 | 用户打开多少页签时弹出提示 | | tabsLimitWait | number | 500 | 页签数量检查防抖时间, 如果一次弹出了多个提示框, 可以适当延长此时间, 单位毫秒 | | tabsLimitWarnTitle | string | 提示 | [配置国际化后此项不生效] 页签数量超限弹窗的标题 | | tabsLimitWarnContent | string | 您当前打开页面过多, 请关闭不使用的页面以减少卡顿! | [配置国际化后此项不生效] 页签数量超限弹窗的内容 |

国际化配置项

| 国际化配置 key | 国际化配置 value | | --- | --- | | panelTab.403.subTitle | 抱歉，你无权访问该页面 | | panelTab.404.subTitle | 抱歉，您访问的页面不存在 | | panelTab.closePage | 关闭页面 | | panelTab.close | 关闭页面 | | panelTab.closeSpecified | 关闭指定页面，激活页面不受影响 closeSpecified('/home') | | panelTab.closeOther | 关闭其他 | | panelTab.closeAll | 关闭所有并打开默认页面 | | panelTab.forceCloseAll | 关闭所有但不打开默认页面 | | panelTab.refresh | 刷新 | | panelTab.tabsLimitWarnContent | 您当前打开页面过多, 请关闭不使用的页面以减少卡顿! |

新增className

1.标签栏 className:'panelTabsBar' 2.标签className:'pannel-tab' 2.当前激活标签className:'pannel-tab-active'

额外的配置项

在config/route.ts中所有具有 name 属性的路由默认都会在标签页中显示, 如果不希望在标签也中出现此路由有两种方式:

1. 移除 route 中此路由配置的 name 属性
2. 在该路由中配置属性hideInPanelTab, 将其设置为true, 此路由就不会在标签页中显示
3. 开启后路由里配置的菜单名会被当作菜单名国际化的 key，插件会去 locales 文件中查找 menu.[key]对应的文案，默认值为该 key, 配置可参照 ant-design-pro 菜单国际化

export default [
  {
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    component: './Welcome',
    hideInPanelTab: true,
  },
];

自定义场景使用

提供了 hook 方便在其他组件中使用

import { Button, Result } from 'antd';
import React from 'react';
import { usePanelTab } from 'umi';

export default () => {
  const {
    close,
    closeCurrent,
    closeOther,
    refresh,
    refreshCurrent,
    closeAll,
    forceCloseAll
  } = usePanelTab();
  return (
    <Result
      status="404"
      title="404"
      subTitle="抱歉，您访问的页面不存在。"
      extra={
        <Button type="primary" onClick={closeCurrent}>
          关闭页面
        </Button>
      }
    />
  );
};

常见问题

Q: 配置后标签栏位置出现了偏移

A: 请在 app.tsx 的 layout 方法中添加 disableContentMargin: true 配置

Q: 登录页出现了标签页怎么办？

A: 登录页不要在路由写 name, 有 name 就有标签页，或者在 name 下方再加一个配置，hideInPanelTab: true,也可以在标签中隐藏

Q: 需要自定义控制缓存?

A: 请参阅依赖 umi-plugin-keep-alive 与 react-activation

LICENSE

MIT