官方说明请参阅 /v2/README.zh-CN
预览:https://theprimone.top/ant-design-pro-v2-plus
为了实现基于 Github Pages 的在线预览的功能,仅将功能示例和 Dashboard 下的分析页数据写到了代码中,以便查看页面效果。
官方仓库没有针对部署到非根目录情况下的登录重定向,已提交 pull request fix: redirect with deploy on non-root path。
- dva-base-models 基于 dva 的基础 model 配置
- antd-form-mate 基于 ant design 的表单组件
- antd-curd 基于 ant design 的增删改查页面组件
除 UI 组件外,尽量使用 TypeScript 开发。
可通过配置实现 children 的标签页展示。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
activeKey | 激活 tab 的唯一标识 | string | - |
activeTitle | 激活 tab 展示的标题 | string | - |
handleTabChange | 切换 tab 时的回调函数。设置新的的 activeKey | (keyToSwitch: string, activedTabs: any[]) => void; | - |
handleRemoveTab | 删除 tab 时的回调函数。可直接设置新的 activeKey 为相邻的 nextTabKey | (removeKey: string, nextTabKey: string, activedTabs: any[]) => void | - |
children | 与当前 tab 对应的 children | JSX.Element | - |
extraTabProperties | 当前 tab 的扩展属性 | {} | {} |
tabsConfig | 可自行配置 Tabs 属性,除 activeKey , onEdit , onChange 外 |
TabsProps | - |
此外,还在 RightContent
中实现了刷新当前标签页的功能,默认开启。如果不需要,可在 defaultSettings 设置 reloadTab
为 false
即可。
router.push()
会注入该路由的 component ,所以根据条件处理该 children component 即可。
可通过 defaultSettings 中的 pageTabs
配置是否开启标签页功能,默认开启。
关注实现的可参考基于 ant design pro 2.3.1 页面标签化展示的研究与实现。
由于是通过路由的方式实现的标签页的功能,测试发现会出现一定的性能问题,可参考 issue #2 。对于不会通过路由再次刷新的页面可使用如下方式:
shouldComponentUpdate() {
return false;
}
所以在遍历获取标签页的 id
和名称时,添加了判断标签页是否需要路由刷新(如果一个导航菜单的页面需要渲染,这个页面没有父组件而有子组件,也就是子路由,那么这个导航菜单需要路由刷新)的逻辑。再简单封装一下 children
:
class StaticChildren extends React.Component {
shouldComponentUpdate() {
return false;
}
render() {
const { children } = this.props;
return children;
}
}
当标签页不需要刷新时,调用 StaticChildren
包装 children
即可。
<StaticChildren>{children}</StaticChildren>
又由于大多数的标签页都不需要额外的路由刷新,所以,渲染性能上得到了较大的优化。
从服务器获取菜单时,我的做法是直接返回路由的结构,也就是直接修改 routes
,由于当前实际开发的项目只保存并返回了路由的 name
、 path
、 routes
和 authority
,所以还需要遍历所有的配置式路由(简单起见,可从面包屑映射中取值即可),并注入以下四个属性:
icon
component
hideInMenu
hideChildrenInMenu
以保证菜单和标签页功能的正常使用。
- 默认开启 hideOnSinglePage
- 间隔行着色
- 多选功能可选,通过
checkable
控制
表格型增删改查
列表型增删改查
自定义 renderItem
,这里自定义为 Card
前置依赖:
如果需要新建一个类似基础增删改查的页面,快速开发指南:
- 配置页面路由
- 对接增删改查接口
- 基于 dva-base-models 配置,model ,见 base-models/curd.ts,主要是根据接口实现 src/utils/model.tsx 中的
getData
和getList
、isResponseOk
方法,以便 model 能正确获取并处理相关数据 - 配置对象表单数据映射 map.js (参考 CurdPage/map.js ),用于对象的详情,新建和编辑对象
- 如需配置表单相关全局参数,可从
antd-curd
中导出formMateConfig
进行配置(参考 global.js ) - 配置页面 index.js (参考 CurdPage/index.js ),主要是配置查询面板和数据列模型
通过配置化的方式快速实现了一个增删改查页面的需求,让开发者可以尽量少的关心底层的逻辑实现。同时也提供了较为灵活的 API 去扩展特定页面的特定需求。更多参数配置,可到 antd-curd 中查看。