ibmsoft / ant-design-pro-v2-plus

基于 ant-design-pro v2 做一些微小的工作

Home Page:https://theprimone.top/ant-design-pro-v2-plus

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ant Design Pro V2 Plus

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

GitHub license GitHub stars GitHub issues GitHub commit activity

K1TDnP.png

预览:https://theprimone.top/ant-design-pro-v2-plus

为了实现基于 Github Pages 的在线预览的功能,仅将功能示例Dashboard 下的分析页数据写到了代码中,以便查看页面效果。

官方仓库没有针对部署到非根目录情况下的登录重定向,已提交 pull request fix: redirect with deploy on non-root path

✨新增特性

📌新增依赖

☁️功能实现概述

除 UI 组件外,尽量使用 TypeScript 开发。

ChildrenTabs 根据 children 实现标签页切换

可通过配置实现 children 的标签页展示。

API

参数 说明 类型 默认值
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 属性,除 activeKeyonEditonChange TabsProps -

此外,还在 RightContent 中实现了刷新当前标签页的功能,默认开启。如果不需要,可在 defaultSettings 设置 reloadTabfalse 即可。

PageTabs 基于路由实现标签页切换

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 ,由于当前实际开发的项目只保存并返回了路由的 namepathroutesauthority ,所以还需要遍历所有的配置式路由(简单起见,可从面包屑映射中取值即可),并注入以下四个属性:

  • icon
  • component
  • hideInMenu
  • hideChildrenInMenu

以保证菜单和标签页功能的正常使用。

StandardTable 增强

  • 默认开启 hideOnSinglePage
  • 间隔行着色
  • 多选功能可选,通过 checkable 控制

基础增删改查页面

K1TFO0.png

表格型增删改查

K1TEwT.png

列表型增删改查

自定义 renderItem ,这里自定义为 Card

前置依赖:

如果需要新建一个类似基础增删改查的页面,快速开发指南:

  • 配置页面路由
  • 对接增删改查接口
  • 基于 dva-base-models 配置,model ,见 base-models/curd.ts,主要是根据接口实现 src/utils/model.tsx 中的 getDatagetListisResponseOk 方法,以便 model 能正确获取并处理相关数据
  • 配置对象表单数据映射 map.js (参考 CurdPage/map.js ),用于对象的详情,新建和编辑对象
  • 如需配置表单相关全局参数,可从 antd-curd 中导出 formMateConfig 进行配置(参考 global.js
  • 配置页面 index.js (参考 CurdPage/index.js ),主要是配置查询面板和数据列模型

通过配置化的方式快速实现了一个增删改查页面的需求,让开发者可以尽量少的关心底层的逻辑实现。同时也提供了较为灵活的 API 去扩展特定页面的特定需求。更多参数配置,可到 antd-curd 中查看。

About

基于 ant-design-pro v2 做一些微小的工作

https://theprimone.top/ant-design-pro-v2-plus

License:MIT License


Languages

Language:JavaScript 87.4%Language:CSS 9.0%Language:TypeScript 2.9%Language:HTML 0.7%Language:Dockerfile 0.0%