0.0.1-beta.7 • Published 2 years ago
@houkunlin/umi-plugin-panel-tabs v0.0.1-beta.7
@houkunlin/umi-plugin-panel-tabs
如何使用
安装依赖即可, 以umi-plugin
开头的插件会被自动加载
配置项
在 config/config.ts - defineConfig 方法中进行配置
export default defineConfig({
panelTab: {
use404: true,
useAuth: true,
autoI18n: true,
tabsLimit: 10,
tabsLimitWait: 500,
tabsLimitWarnContent: '您当前打开页面过多, 请关闭不使用的页面以减少卡顿!',
tabsBarBackgroundColor: '#FFFFFF',
tabsTagColor: '#1890ff',
},
});
配置项 | 类型 | 默认值 | 说明 | 版本 |
---|---|---|---|---|
use404 | boolean | true | 使用内置的 404 页面, 该页面会在 tab 中显示 | - |
useAuth | boolean | false | 使用内置的 403 页面, 加载内置的权限判断 wrapper, 该页面会在 tab 中显示 | - |
autoI18n | boolean | false (0.0.25之前的版本默认为 true) | 自动开启国际化, 仅当 ant-design-pro 的 locale 不为 false 且不为空时生效 | - |
tabsLimit | number | 10 | 用户打开多少页签时弹出提示 | - |
tabsLimitWait | number | 500 | 页签数量检查防抖时间, 如果一次弹出了多个提示框, 可以适当延长此时间, 单位毫秒 | - |
tabsLimitWarnContent | string | 您当前打开页面过多, 请关闭不使用的页面以减少卡顿! | 配置国际化后此项不生效 页签数量超限弹窗的内容 | - |
tabsBarBackgroundColor | string | #FFFFFF | 标签栏背景色 | 0.0.26 |
tabsTagColor | string | #1890ff | 标签颜色 | 0.0.26 |
国际化配置项
国际化配置 key | 国际化配置 value |
---|---|
panelTab.403.subTitle | 抱歉,你无权访问该页面 |
panelTab.404.subTitle | 抱歉,您访问的页面不存在 |
panelTab.closePage | 关闭页面 |
panelTab.close | 关闭 |
panelTab.closeOther | 关闭其他 |
panelTab.closeAll | 关闭所有 |
panelTab.refresh | 刷新 |
panelTab.tabsLimitWarnContent | 您当前打开页面过多, 请关闭不使用的页面以减少卡顿! |
额外的配置项
在config/route.ts
中所有具有 name 属性的路由默认都会在标签页中显示, 如果不希望在标签也中出现此路由有两种方式:
- 移除 route 中此路由配置的 name 属性
- 在该路由中配置属性
hideInPanelTab
, 将其设置为true
, 此路由就不会在标签页中显示 - 开启后路由里配置的菜单名会被当作菜单名国际化的 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, // 关闭所有页面
goBack, // 关闭当前页面,并返回上一个路由页面
} = 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
0.0.1-beta.7
2 years ago
0.0.1-beta.6
2 years ago
0.0.1-beta.4
2 years ago
0.0.1-beta.3
2 years ago
0.0.1-beta.2
2 years ago
0.0.1-beta.1
2 years ago
0.0.2-7.6
2 years ago
0.0.2-7.5
2 years ago
0.0.2-7.4
2 years ago
0.0.2-7.3
2 years ago
0.0.2-7.2
2 years ago
0.0.2-7.1
2 years ago
0.0.27
2 years ago