后台管理系统的前端解决方案

项目地址 | https://github.com/diandian18/react-antd-console

在线预览 | 文档

介绍

react-antd-console 是一个后台管理系统的前端解决方案，封装了后台管理系统必要功能（如登录、鉴权、菜单、面包屑、标签页等），帮助开发人员专注于业务快速开发。项目基于 React18、Ant design5、Vite 和 TypeScript 等新版本。对于使用到的各项技术，会被持续更新至最新版本

谁适合使用？

如果你将要开发或学习如何开发后台管理系统。并且你是一名新手前端开发者，或者是一名了解一些前端的后端开发者，或者是一名有一定经验的前端开发者，但当下还没有信心把握所有的事情，并且希望循序渐进掌握，那么可以尝试本项目

尽可能简单

无论是使用本项目做开发，还是学习的目的，保持简单是必要的。因此本项目专注于：良好的代码层次设计、定义清晰明确的目录结构、容易改造和拆换的模块分类等。本项目最小化的封装了一些必要的功能，例如登录、鉴权、菜单、面包屑、标签页等。如果你没有自己的 UI 设计，那么可以直接使用本项目封装的功能；如果你有自己的 UI 设计，那么也可以在本项目基础上作方便的改造

功能

• 最新技术栈 : Vite(支持 热更新 )、React18、Ant Design5、TypeScript(近乎100% 的类型覆盖)。
• 专注业务 : 封装好的布局(侧边菜单、面包屑、标签页、页头页脚等)，只需要 专注于业务开发。
• 权限管理 : 支持 菜单级 和按钮级 权限。（Pro edition）
• 路由配置: 一份配置，自动生成路由、菜单、面包屑等，支持嵌套路由、单 / 无布局等配置，支持路由动态变化等。
• 数据管理 : 分层（数据和视图）架构设计，数据管理方案理论上支持接入任意 UI 渲染库 / 框架（包括不限于 React/Vue/Angular）
• 颜色换肤: 支持深 / 浅肤色模式下的任意颜色切换。（Pro edition）
• 风格主题 : 不同的主题风格选择，如 布局 、 菜单 、 标签页 、 面包屑 、 页头页脚 、 动画 等。（Pro edition）
• 丰富组件 : 如 搜索表格 、 引导 、 富文本 、Markdown 等。（Pro edition）
• 其他功能 : 如 响应式设计 、 国际化 、Mock、 环境配置 、 工程化规范 等。

快速开始

# 安装依赖
npm i

# 启动服务
npm start

浏览器访问 http://localhost:9527

构建

# 构建生产环境包
npm run build:prod

浏览器兼容

兼容支持 es2015 的浏览器，不兼容 IE，建议不低于:

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

Pro edition

深 / 浅色主题

Light	Dark

任意主色切换

任意背景色切换

Background Light	Background Dark

4 种布局

侧分栏	侧单栏

头分栏	头单栏

丰富的主题配置

在线预览 | 文档