React Admin Template:开箱即用的中台前端/设计解决方案。
2023-02-09 10:36:25
![](https://api.admin.zhjs.top/static/uploads/image/20230209/OVZ2RSN20XR1S4ZH89IIE8_103610_651652736.jpg)
预览
README
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
组件实现权限控制的能力
使用示例如下
import React from 'react';
import { useAuthority, Authority } from 'umi';
const PageA = props => {
const { foo } = props;
const { combinationVerify } = useAuthority();
// 使用 hooks 提供的能力
if (combinationVerify('module1/action1')) {
// 存在 module1/action1 权限,则...
}
return (
<div>
{/** 指定需要验证的权限 */}
<Authority
access="module1/action1"
fallback={<div>Can not read foo content.</div>}
>
Foo content.
</Authority>
{/** 直接指定权限 */}
<Authority
accessible={combinationVerify('module1/action1')}
fallback={<div>Can not update foo.</div>}
>
Update foo.
</Access>
{/** 复杂的校验 */}
<Authority
accessible={combinationVerify('(module1/action1 || module1/action2) && module1/action3')}
fallback={<div>Can not update foo.</div>}
>
Update foo.
</Access>
{/** children 为function */}
<Authority
accessible={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 | ![]() | ![]() |