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