Giter Club home page Giter Club logo

ant_design_pro_tabs's Introduction

Ant Design Pro Plus

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

github pages GitHub license GitHub stars GitHub issues GitHub commit activity

Snapshot

✨ 新增特性

基于路由实现标签页切换

  • 两种标签页模式可选
    • 基于路由,每个路由只渲染一个标签页
    • 基于路由参数,计算出每个路由的所有参数的哈希值,不同的哈希值渲染不同的标签页
  • 可固定标签栏
  • 快捷操作
    • 刷新标签页 - window.reloadTab()
    • 关闭标签页 - window.closeTab()
    • 返回之前标签页 - window.goBackTab()
    • 关闭并返回之前标签页 - window.closeAndGoBackTab()
  • follow,路由定义中新增配置,默认打开方式是添加到所有标签页最后面,可通过配置该属性,使得一个标签页在 follow 指定的标签页后面打开(可参考查询页 Demo)

注:返回默认只会返回上次的路由,所以如果上次的路由没有关闭,会在两个路由之前反复横跳,当删除上次打开的标签页之后再调用该返回方法时只会打印警告。

代码结构

├── config
│   └── defaultSettings.ts   # 系统风格配置,新增关于 RouteTabs 的配置
├── src
│   └── components
│       └── RouteTabs        # 核心组件
│   └── hooks
│       └── common           # 使用到的 hook - `useReallyPrevious`
│   └── layouts
│       └── RouteTabsLayout  # 路由加载
│   └── pages
│       └── RouteTabsDemo    # 标签页功能展示

分支说明

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

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

Q & A

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

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

性能问题

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

标签闪烁的问题

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

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

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

ant_design_pro_tabs's People

Contributors

tjsglion avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.