推荐一个优秀的React后台管理系统-Coffee-React-Admin

4,381 阅读2分钟

推荐理由

基于React的后台管理系统,主要是由大厂把控的比较多,类似的Antd Pro、UMI,但都是深度绑定。并且网上检索到的项目,时间都比较久,技术栈也比较老。 Coffee-React-Admin是一款开源免费且开箱即用的中后台管理系统模版,采用React 18、Vite 4、Ant Design 5.0、tailwindcss、Mobx等最新技术栈,丰富的内置组件(还在迭代),约定式路由、完整的权限方案。所以,推荐给大家,可以作为项目使用,也可以作为学习使用。 Git地址:github.com/bestycw/rea… 在线地址:bestycw.github.io/react-admin…

Coffee-React-Amin

登录页.png

主题风格

灵动 / 经典主题风格:支持两种主题风格,满足不同用户需求。React 管理后台提供了动态和经典两种主题风格,用户可以根据自己的喜好进行切换。动态主题风格通常具有更加现代化和交互性强的特点,而经典主题风格则更加稳重和传统。同时,也支持亮暗色调控,各种主题色调控。

灵动 首页.png 经典 首页-经典风格.png

自有的布局设置

用户交互区域、Logo、Menu都可以自有配置

系统配置.png

封装了axios和fetch的网络请求

针对axios和fetch的网络请求,分别做了封装,想用哪个用哪个,加入了请求响应拦截、超时重试和取消。同时,还有websocket、流式传输、大文件分割上传、并发请求等功能。 请求功能.png

响应式设计

自动响应屏幕大小,进行布局调整

小屏幕.png

内置国际化

内置了国际化结局方案

权限管理

内置基于RABC的权限方案,可以通过动态路由控制、也可以前端单独控制权限,支持按钮级别的权限控制

权限配置.png

约定式路由

沿用UMI等框架常用的约定式路由,虽然没有框架的功能丰富,但是自由度更高;也可以自己使用路由,但是作为重复程度较高的配置,约定式路由也是懒人方案。

约定路由.png

丰富的组件功能(还在迭代)

表格功能,本身进行了封装,有点类似于Ant Pro中的ProTable。 表格功能.png 表单功能 表单功能.png 正在逐渐增加的各种组件和功能 组件功能.png 各种编辑器 编辑器.png

总结

整体来说,基础功能都比较完善的一套后台管理系统,能够开箱即用;当然还有很多不足,通过和作者沟通,计划会一直丰富迭代,丰富各种小组件和实用功能。如果感兴趣大家可以去支持一下。