xwlaix / ant-design-pro-tabs

基于pro2.0制作的多标签版本,直接引入组件即可使用,十分方便

English | 简体中文 | Русский | Türkçe

Ant Design Pro Tabs

大家想要的,带有tab标签的ant design pro终于来啦!!!

• 参考过多个github网友ui设计以及自己的多次改版,历时两周,最终完成

• 基于最新版ant-design-pro 2.3.0 (2019/3/28)

• 原汁原味,只添加了tab,其他均无修改

• 保留完整权限,输入错误地址仍然可以显示403

• 模块化代码,最低引入一个文件即可完成tab的添加

• 利用sessionStorage,刷新页面仍显可以显示之前未关闭的标签,重新打开浏览器只会显示路由所在的标签

• 刷新页面会提示信息无法被保存

• 样式方面参考了:https://github.com/kuhami/react-ant

• 类库使用:good-storage

• TODO:1. 隐藏标签实现类vue的keep-alive

• BUG:1. 通过路由传参会找不到页面,从而报错

  2. 使用tab后路由redirect失效(目前已经在TabPages写死代码解决问题)

  3. 目前redirect到默认页面后,默认标签不高亮

使用方法:

1. 复制src/components/TabPages文件夹到自己的项目当中
2. scr/layouts/BasicLayout.js中引入该组件

 <Content>
   {children} //注释此行,改为tab组件
   <TabPages {...this.props} homePageKey='/dashboard/home' errorPage={<NoAuth />} />
</Content>				// homePageKey就是项目首页的url地址

开箱即用的中台前端/设计解决方案。

• 预览：http://preview.pro.ant.design
• 首页：http://pro.ant.design/index-cn
• 使用文档：http://pro.ant.design/docs/getting-started-cn
• 更新日志: http://pro.ant.design/docs/changelog-cn
• 常见问题：http://pro.ant.design/docs/faq-cn
• 国内镜像：http://ant-design-pro.gitee.io

特性

• 💎 优雅美观：基于 Ant Design 体系精心设计
• 📐 常见设计模式：提炼自中后台应用的典型页面和场景
• 🚀 最新技术栈：使用 React/umi/dva/antd 等前端前沿技术开发
• 📱 响应式：针对不同屏幕大小设计
• 🎨 主题：可配置的主题满足多样化的品牌诉求
• 🌐 国际化：内建业界通用的国际化方案
• ⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
• 🔢 Mock 数据：实用的本地数据调试方案
• ✅ UI 测试：自动化测试保障前端产品质量

模板

- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表（项目/应用/文章）
- 详情页
  - 基础详情页
  - 高级详情页
- 用户
  - 用户中心页
  - 用户设置页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 帐户
  - 登录
  - 注册
  - 注册成功

使用

使用命令行

$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start         # 访问 http://localhost:8000

使用 docker

# preview 
$ docker pull antdesign/ant-design-pro
$ docker run -p 80:80 antdesign/ant-design-pro
# open http://localhost

# dev 
$ npm run docker:dev

# build 
$ npm run docker:build


# production dev 
$ npm run docker-prod:dev

// production build 
$ npm run docker-prod:build

更多信息请参考 使用文档。

支持环境

现代浏览器及 IE11。

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

参与贡献

我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 😃：

• 在你的公司或个人项目中使用 Ant Design Pro。
• 通过 Issue 报告 bug 或进行咨询。
• 提交 Pull Request 改进 Pro 的代码。