React Admin Template

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

✨ 特性

• 🛡 TypeScript: 应用程序级 JavaScript 的语言
• 💎 优雅美观：基于 Ant Design 体系精心设计
• 🚀 最新技术栈：使用 React/umi/antd 等前端前沿技术开发
• 🌐 国际化：内建业界通用的国际化方案
• 🔢 Mock 数据：实用的本地数据调试方案
• ⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
• 🔐 优秀的权限设计：目前能找到的最好的权限实现方案

🎉 推荐

• 微前端版本 micro-frontends-template 正在同步开发中...
• 好用的水印组件 watermark

📜 目录

├── config # umi 相关配置
├── docker # docker 相关配置
├── mock # 本地模拟数据
├── public # 静态资源
├── src # 源代码
│ ├── assets # 本地静态资源
│ ├── common # 类型定义、常量
│ ├── components # 全局公用组件
│ ├── config # 全局配置
│ ├── layouts # 布局文件
│ ├── locales # 国际化资源
│ ├── models # 路由
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 所有请求
│ ├── utils # 全局公用方法
│ ├── app.tsx # 运行时配置文件
│ ├── authority.ts # 权限定义文件
│ ├── global.less # 全局样式
│ └── typings.d.ts # 补充类型定义
├── package.json # package.json
└── tsconfig.json # tsconfig.json

🔐 关于权限

基于 umi-plugin-authority 提供权限功能，暴露 useAuthority hooks 和 Authority 组件实现权限控制的能力

使用示例如下

importReactfrom'react';import{useAuthority,Authority}from'umi';constPageA=props=>{const{ foo }=props;const{ combinationVerify }=useAuthority();// 使用 hooks 提供的能力 if(combinationVerify('module1/action1')){// 存在 module1/action1 权限，则...}return(<div>{/** 指定需要验证的权限 */}<Authorityaccess="module1/action1"fallback={<div>Can not read foo content.</div>}>
Foo content.
</Authority>{/** 直接指定权限 */}<Authorityaccessible={combinationVerify('module1/action1')}fallback={<div>Can not update foo.</div>}>
Update foo.
</Access>{/** 复杂的校验 */}<Authorityaccessible={combinationVerify('(module1/action1 || module1/action2) && module1/action3')}fallback={<div>Can not update foo.</div>}>
Update foo.
</Access>{/** children 为function */}<Authorityaccessible={combinationVerify('module3/action1')}fallback={<div>Can not delete foo.</div>}>{(isMatch)=><span>权限校验结果: {isMatch}</span>}</Authority></div>);};

⌨️ 本地开发

# 克隆项目到本地
git clone git@github.com:ts-react/react-admin-template.git
# 切换到项目目录cd ./react-admin-template
# 安装依赖
yarn
# 启动服务
npm run start

🖥 支持环境

现代浏览器及 IE11。

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

👥 社区互助

Github Issue	钉钉群	微信群
issues