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

在线预览 | 文档

介绍

react-antd-console 是一个后台管理系统的前端解决方案，封装了后台管理系统必要功能（如登录、鉴权、菜单、面包屑、标签页等），帮助开发人员专注于业务快速开发。项目基于 React 18、Ant design 5、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种布局

侧分栏	侧单栏

头分栏	头单栏

丰富的主题配置

在线预览 | 文档