开箱即用的中台前端/设计解决方案
最开始的时候,我需要一个 react 开发的 amdin 模版,在开源社区寻找了一边之后,比较中意 ant design pro 的 UI,当我一堆操作把 ant desgin pro 的代码拉下来研究之后,发现内容是在太多了,除了 react、redux 之外,还包含了 umi、dva、ant-design/pro-layout 等其它东西,当这些概念和 ts 结合起来使用的时候,我瞬间感觉无处下手,后面又仔细了阅读了权限设计、菜单栏渲染部分的代码,我得出结论, Ant Design Pro 足够优秀,但不适合我的需求场景。很遗憾,只能放弃使用
但是,Ant Design Pro 的 UI 是我见过的 react admin 系统中最为好看的一个,颜值即正义,既然我无法放弃 Ant Design Pro 的 UI,那干脆模仿 Ant Design Pro 的 UI,自己来实现一个较为简单的版本
- 从零使用
react搭建系统 - 全面使用
react-hooks开发,抛弃class组件写法、所有组件异步加载,提高首屏渲染速度 - 动态权限设计,开发配套的后端 Api
- ...
- UI 框架:
react、react-hook、classnames - UI 组件:
antd、@ant-design/aliyun-theme - 数据管理:
redux、react-redux、redux-thunk、redux-logger - 类型检查:
typescript - 接口请求:
axios - cookies:
js-cookie - 过渡动画:
react-transition-group - CSS 规则:
BEM - 后端 API:
nodejs、eggjs、ts、mysql、sequelize
-首页介绍 - 系统介绍 - 权限管理 - 用户管理 - 角色管理 - 菜单管理;
$ git clone https://github.com/landluck/react-ant-admin.git
$ cd react-ant-admin
$ npm install
$ npm start
. ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── App.test.tsx │ ├── App.tsx │ ├── api │ │ ├── request.ts // Axios 请求统一封装 │ │ └── requestMd.ts // md 单独使用的 axios 实例 │ ├── components // 系统组建和业务无关 │ │ ├── Breadcrumb // 面包屑导航 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── Hamburger // 菜单栏开关 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── HeaderSearch // 头部搜索 │ │ │ └── index.tsx │ │ ├── LayoutHeader // 系统头部 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── LayoutNavBar // 系统头部右侧内容 │ │ │ ├── AvatarDropdown.tsx │ │ │ ├── NavBarItem.tsx │ │ │ ├── NavDropdown.tsx │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── LayoutSettings // 系统设置 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── LayoutSideBar // 侧边栏导航 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── NoticeIcon // 消息通知 │ │ │ ├── NoticeTab.less │ │ │ ├── NoticeTab.tsx │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── SideMenu // 菜单栏 │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── SidebarLogo // 菜单栏logo │ │ │ ├── index.less │ │ │ └── index.tsx │ │ └── TransitionMain // 主体内容过度 │ │ └── index.tsx │ ├── hooks // 自定义 react-hook │ │ └── count.ts │ ├── index.tsx │ ├── layout │ │ ├── AsyncRoutes.tsx // 负责异步路由请求和渲染 │ │ ├── Auth.tsx // 权限校验 │ │ ├── MainRoutes.tsx // 业务路由渲染 │ │ ├── UserLayout.less // 系统用户路由渲染 │ │ ├── UserLayout.tsx │ │ ├── index.less │ │ └── index.tsx // 系统主要layout │ ├── react-app-env.d.ts │ ├── router │ │ ├── config.ts // 项目的路由配置 │ │ └── utils.ts // 路由相关的一些 utils │ ├── serviceWorker.ts │ ├── store // redux │ │ ├── index.ts │ │ ├── module │ │ │ ├── app.ts │ │ │ ├── notice.ts │ │ │ ├── settings.ts │ │ │ └── user.ts │ │ └── types.ts │ ├── styles // 基本公用的样式 │ │ ├── index.less │ │ ├── md.css │ │ └── var.less │ ├── typings // 类型申明 │ │ ├── global.d.ts │ │ └── index.ts │ ├── utils // 工具类 │ │ ├── cookie.ts │ │ ├── store.ts │ │ └── verifty.ts │ └── views // 视图 │ ├── auth │ │ ├── menu │ │ │ ├── AddOrEditMenu.tsx │ │ │ ├── index.tsx │ │ │ └── service.ts │ │ ├── role │ │ │ ├── AddOrEdit.tsx │ │ │ ├── editMenu.tsx │ │ │ ├── index.tsx │ │ │ └── service.ts │ │ └── user │ │ ├── AddOrEdit.tsx │ │ ├── index.tsx │ │ └── service.ts │ ├── components │ │ ├── BaseTable.tsx │ │ ├── PageWrap.tsx │ │ ├── SearchForm.tsx │ │ └── index.less │ ├── dashborad │ │ └── intro │ │ ├── index.tsx │ │ └── intro.md │ ├── error │ │ ├── 403.tsx │ │ └── 404.tsx │ └── system │ ├── component │ │ ├── FormItem.tsx │ │ ├── FormWrap.tsx │ │ └── LoginItem.tsx │ ├── login │ │ ├── index.less │ │ ├── index.tsx │ │ └── service.ts │ ├── recoveryPwd │ │ ├── index.tsx │ │ └── service.ts │ ├── register │ │ ├── index.tsx │ │ └── service.ts │ └── registerResult │ └── index.tsx └── tsconfig.json 37 directories, 89 files
现代浏览器及 IE11