upp
umi-plugin-panel-tabs
npm i umi-plugin-panel-tabs
upp

umi-plugin-panel-tabs

umi-plugin-panel-tabs

by ZhengJin Fang

0.0.28-1-SNAPSHOT (see all)TypeScript:Not Found
npm i umi-plugin-panel-tabs
Readme

umi-plugin-panel-tabs

NPM version NPM downloads Netlify Status

演示地址 [https://vibrant-leakey-d5b34a.netlify.app]

image

image

image

如何使用

安装依赖即可, 以umi-plugin开头的插件会被自动加载

配置项

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

export default defineConfig({
  panelTab: {
    use404: true,
    useAuth: true,
    autoI18n: true,
    tabsLimit: 10,
    tabsLimitWait: 500,
    tabsLimitWarnTitle: '提示',
    tabsLimitWarnContent: '您当前打开页面过多, 请关闭不使用的页面以减少卡顿!',
    tabsBarBackgroundColor: '#FFFFFF',
    tabsTagColor: '#1890ff',
    closeAllConfirm: false,
    closeAllConfirmTitle: '提示',
    closeAllConfirmContent: '确认要关闭所有标签吗?',
  },
});
配置项类型默认值说明版本
use404booleantrue使用内置的 404 页面, 该页面会在 tab 中显示-
useAuthbooleanfalse使用内置的 403 页面, 加载内置的权限判断 wrapper, 该页面会在 tab 中显示-
autoI18nbooleanfalse (0.0.25之前的版本默认为 true)自动开启国际化, 仅当 ant-design-pro 的 locale 不为 false 且不为空时生效-
tabsLimitnumber10用户打开多少页签时弹出提示-
tabsLimitWaitnumber500页签数量检查防抖时间, 如果一次弹出了多个提示框, 可以适当延长此时间, 单位毫秒-
tabsLimitWarnTitlestring提示[配置国际化后此项不生效] 页签数量超限弹窗的标题-
tabsLimitWarnContentstring您当前打开页面过多, 请关闭不使用的页面以减少卡顿![配置国际化后此项不生效] 页签数量超限弹窗的内容-
tabsBarBackgroundColorstring#FFFFFF标签栏背景色0.0.26+
tabsTagColorstring#1890ff标签颜色,优先级高于自动使用主题色0.0.26+
closeAllConfirmbooleanfalse操作关闭所有标签是否弹出确认框0.0.29+
closeAllConfirmTitlestring提示[配置国际化后此项不生效] 关闭所有标签弹窗的标题0.0.29+
closeAllConfirmContentstring确认要关闭所有标签吗?[配置国际化后此项不生效] 关闭所有标签弹窗的内容0.0.29+

国际化配置项

国际化配置 key国际化配置 value
panelTab.403.subTitle抱歉,你无权访问该页面
panelTab.404.subTitle抱歉,您访问的页面不存在
panelTab.closePage关闭页面
panelTab.close关闭
panelTab.closeOther关闭其他
panelTab.closeAll关闭所有
panelTab.refresh刷新
panelTab.tabsLimitWarnTitle提示
panelTab.tabsLimitWarnContent您当前打开页面过多, 请关闭不使用的页面以减少卡顿!
panelTab.closeAllConfirmTitle提示
panelTab.closeAllConfirmContent确认要关闭所有标签吗?

额外的配置项

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 方便在其他组件中使用

方法作用
close关闭指定标签
closeCurrent关闭当前激活的标签
closeOther关闭除当前激活外其他标签
refresh刷新指定标签
refreshCurrent刷新当前标签
closeAll关闭所有
refreshAndCloseCurrent关闭当前标签时,刷新指定标签
refreshAndCloseCurrentAndSwitch关闭当前标签时,刷新并切换到指定标签
import { Button, Result } from 'antd';
import React from 'react';
import { usePanelTab } from 'umi';

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

常见问题

看这里 -> https://github.com/fangzhengjin/umi-plugin-panel-tabs/issues/26

LICENSE

MIT

Downloads/wk

25

GitHub Stars

79

LAST COMMIT

9mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

5

OPEN PRs

0
VersionTagPublished
0.0.28-1-SNAPSHOT
latest
1mo ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate