Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pansyjs/react-admin
🎉 A magical react admin
https://github.com/pansyjs/react-admin
admin admin-template ant-design less react single-page-app typescript umi
Last synced: 3 months ago
JSON representation
🎉 A magical react admin
- Host: GitHub
- URL: https://github.com/pansyjs/react-admin
- Owner: pansyjs
- Created: 2018-07-27T07:48:04.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T22:58:15.000Z (3 months ago)
- Last Synced: 2024-04-03T23:38:32.149Z (3 months ago)
- Topics: admin, admin-template, ant-design, less, react, single-page-app, typescript, umi
- Language: TypeScript
- Homepage: https://react-admin-site.vercel.app
- Size: 7.95 MB
- Stars: 195
- Watchers: 12
- Forks: 28
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Lists
- awesome - pansyjs/react-admin - 🎉 A magical react admin (TypeScript)
- awesome-react-cn - 开箱即用的中台前端/设计解决方案
README
React Admin Template
开箱即用的中台前端/设计解决方案。
## ✨ 特性
- 🛡 **TypeScript**: 应用程序级 JavaScript 的语言
- 💎 **优雅美观**：基于 Ant Design 体系精心设计
- 🚀 **最新技术栈**：使用 React/umi/antd 等前端前沿技术开发
- 🌐 **国际化**：内建业界通用的国际化方案
- 🔢 **Mock 数据**：实用的本地数据调试方案
- ⚙️ **最佳实践**：良好的工程实践助您持续产出高质量代码
- 🔐 **优秀的权限设计**：目前能找到的最好的权限实现方案
## 🎉 推荐
- 微前端版本 [micro-frontends-template](https://github.com/pansyjs/micro-frontends-template) 正在同步开发中...
- 好用的水印组件 [watermark](https://github.com/pansyjs/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](https://github.com/alitajs/umi-plugins/tree/master/packages/umi-plugin-authority) 提供权限功能，暴露 `useAuthority` hooks 和 `Authority` 组件实现权限控制的能力
使用示例如下
```tsx
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 (
{/** 指定需要验证的权限 */}
Can not read foo content.}
>
Foo content.
{/** 直接指定权限 */}
Can not update foo.}
>
Update foo.
{/** 复杂的校验 */}
Can not update foo.}
>
Update foo.
{/** children 为function */}
Can not delete foo.}
>
{(isMatch) => 权限校验结果: {isMatch}}
);
};
```
## ⌨️ 本地开发
```sh
# 克隆项目到本地
git clone [email protected]:ts-react/react-admin-template.git
# 切换到项目目录
cd ./react-admin-template
# 安装依赖
yarn
# 启动服务
npm run start
```
## 🖥 支持环境
现代浏览器及 IE11。
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 👥 社区互助
| Github Issue | 钉钉群 | 微信群 |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [issues](https://github.com/ts-react/react-admin-template/issues) | 
| 
|