Skip to content

yunsii/ant-design-pro-plus

Repository files navigation

Ant Design Pro Plus

官方说明请参阅 /master/README.zh-CN

github pages GitHub license GitHub stars GitHub issues GitHub commit activity

Snapshot

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

兼容性:^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

分支说明

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

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

基于 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 变量避免登录逻辑等问题,如果有接口报错可忽略,重点是功能实现 _(:з」∠)_