Ant Design Pro Plus

✨ 基于路由的页面标签化展示

兼容性：^umi@2.0.0 | ^umi@3.3.8

• 支持页面的嵌套路由渲染
• 两种标签页模式可选
  • 基于路由，每个路由只渲染一个标签页
  • 基于路由参数，计算出每个路由的所有参数的哈希值，不同的哈希值渲染不同的标签页
• 可固定标签栏
• 快捷操作
  • 刷新标签页 - window.tabsAction.reloadTab()
  • 关闭标签页 - window.tabsAction.closeTab()
  • 返回之前标签页 - window.tabsAction.goBackTab()
  • 关闭并返回之前标签页 - window.tabsAction.closeAndGoBackTab()
  • 获取 location 对应的 tabKey，如果没有入参，返回当前激活的 tabKey - window.tabsAction.getTabKey()
  • 监听 activeKey 变化事件 - window.tabsAction.listenActiveChange()
• reloadable，支持在头部操作栏刷新当前标签页
• follow，路由定义中新增配置，默认打开方式是添加到所有标签页最后面，可通过配置该属性，使得一个标签页在 follow 指定的标签页后面打开（可参考查询页 Demo）
• persistent，支持页面刷新之后恢复上次的标签页状态

注意：

• 返回默认只会返回上次的路由，所以如果上次的路由没有关闭，会在两个路由之前反复横跳，当删除上次打开的标签页之后再调用该返回方法时只会打印警告
• 如需固定标签页头部且渲染 Footer 时，请使用 SwitchTabsLayout 的 footerRender 配置，而不是 ProLayout 提供的 footerRender，以保证组件能正常固定标签页头部

代码结构

├── config
│   └── defaultSettings.ts    # 系统风格配置，新增关于 SwitchTabs 的配置
├── src
│   └── layouts
│       └── SwitchTabsLayout  # 路由加载
│   └── pages
│       └── SwitchTabsDemo    # 标签页功能展示

🎉🎉🎉

已发包 use-switch-tabs，同时通过 use-switch-tabs 进行了重构。 —— 2021.06.19

分支说明

v4-legacy

基于 ant design pro V4 版本的功能分支。

v2-legacy

原仓库名称 ant design pro v2 plus ，代码移到此分支。重命名为 ant design pro plus 后，在 master 分支跟进 ant design pro 中的更新。

umi/v2.x

基于 umi@​2.x 的功能实现。

Q & A

标签页功能从 ant design pro V4 迁移到 V5

Pro V5 在架构上有了较大的重构，通过 Umi 的插件机制屏蔽了更多的实现细节。不过得益于此前已将标签页核心功能发包 use-switch-tabs，故需要做得工作并不多。但是值得注意的一点是需要 @umijs/plugin-layout 的版本不能低于 0.18.0，详见此讨论，因此 @umijs/preset-react 版本不能低于 1.8.28，详见此更新。

最后，实现入口改到了 app.ts，通过此入口可查看具体实现，相关 UI 组件较于 V4 基本没有改动。

补充说明：由于 V5 开始使用了扁平化的路由，以及当前 use-switch-tabs 做了 redirect 的适配，所以在使用页面标签化的功能的时候注意 originalRoutes 需要处理得当，避免 isSwitchTab 判断异常。

基于 children 的标签页功能实现从 umi@​2.x 升级到 umi@​3.x 的问题

相关讨论和分析参考 umijs/umi#4425，最终分析得出了导致暂时无法升级的根本原因，PR umijs/umi#6101 修复了该问题，但需要使用 umi@​3.3.8 以上版本。

性能问题

可使用 withSwitchTab 函数包装页面组件，避免页面反复渲染。值得注意的是，如果在页面中使用了一些特殊的状态，如 useLocation 这样的 hook，会导致无法优化。如果一定要用的话，可自行使用 useMemo 优化。

标签闪烁的问题

在切换的时候标签会出现闪烁的情况 #5，刚开始还没在意，后来发现了原因，参考 ant-design/ant-design#25343。

预览页面不能使用动态路由

由于是部署到 Github Pages，配置了 exportStatic，故无法使用形如 /result/:id 的动态路由。又通过 isProductionEnv 变量避免登录逻辑等问题，如果有接口报错可忽略，重点是功能实现 _(:з」∠)_