React+Antd多标签页后台管理模板，含状态持久化、权限控制与动态换肤

方案简介

Antd Multi Tabs Admin 是一个基于 React 与 Ant Design 的多标签页后台管理模板。作者因业务上有多页签需求，而网上现成方案多是基于 antd pro 的重型模板，于是从旧框架改造出一个精简版脚手架，主张最少代码、不臃肿。全站使用 React Hooks 开发，抛弃 Class 组件，状态管理采用 Redux Toolkit 并支持持久化，同时封装了 axios 请求、链式面包屑导航、路由权限控制、列表分页搜索联动组件等后台常用能力，适合需要多页签交互的中后台系统开发者快速起步。

亮点与能力

• 多 tab 页签➕右键菜单，提升效率
• Redux / Toolkit 状态管理➕持久化
• 封装实用 axios 请求
• 动态链式面包屑导航
• 菜单页面路由权限控制
• less➕css module 样式隔离，简单样式则可以使用 tailwindcss class 来替代
• 列表➕分页➕多选➕搜索联动组件
• 可自定义 webpack 配置➕优化打包
• api请求模拟(MSW)
• 单点登录(OpenId Connect)集成

组成与分工

• React：基础框架，全站使用 React Hooks 开发，抛弃 Class
• Ant Design：UI 组件体系，多标签页、菜单、面包屑等均基于其精心设计
• Redux Toolkit：状态管理，@Reduxjs/Toolkit 是 Redux 的封装，用于减少 redux 模板代码，按照就近原则分割代码切片
• TypeScript：开发语言，提供类型提示与类型安全
• axios：封装实用请求库
• less.js：实现动态切换主题，js 文件在 /public/less.min.js
• tailwindcss：简单样式可用其 class 替代自定义样式
• MSW：api 请求模拟
• webpack：可自定义配置并优化打包

前置要求

需全局安装 TypeScript，使用 yarn 管理依赖。支持环境为现代浏览器及 IE11（Edge、Firefox、Chrome、Safari、Opera 均 last 2 versions）。

bash
$ npm install -g typescript
$ git clone https://github.com/hsl947/react-antd-multi-tabs-admin.git
$ yarn install
$ yarn start # 访问 http://localhost:666

实施步骤

1. 安装依赖并启动

bash
$ npm install -g typescript
$ git clone https://github.com/hsl947/react-antd-multi-tabs-admin.git
$ yarn install
$ yarn start # 访问 http://localhost:666

2. 配置路由与菜单

所有路由写在 /src/route/routes.ts（包括菜单栏的路由），用于路由权限控制；菜单路由基于路由生成，路由项上增加额外字段标识：是否在菜单栏展示及图标等信息。也可以分开写，增强菜单定制功能。

3. 使用 Redux/Toolkit 管理状态

在 /src/store/slicers 中使用 createSlice 创建切片，定义 initialState 与 reducers，导出 actions 与 selectors，并默认导出 reducer。例如 app 切片管理 theme、collapsed、menuMode 等全局状态。

使用与配置要点

• 权限控制：如不需要权限控制，可自行注释去掉权限功能，涉及 src/components/common/menu/index.tsx 中 creatSubMenu 的 permission 过滤逻辑、src/pages/container/index.tsx 中的 checkAuth、以及 tabPanes 中关闭 tab 时的权限校验，注释后让函数直接返回即可。
• 状态管理：通过 createSlice 定义切片，导出 actions（如 setTheme、setCollapsed、setMenuMode）与 getters（如 selectTheme）使用。
• 换肤：本框架使用 less.js 实现动态切换主题，js 文件在 /public/less.min.js，主题配置文件在 /public/color.less。

注意事项与常见问题

• 引用了 antd 组件后，基本不需要自己额外自定义主题样式，因为主题文件里都有。但如果自己写了自定义组件，切换主题后样式显示不正常，则需要自己在 color.less 底部添加深浅主题对应的样式，具体参考主题文件内额外配置。
• antd@4.17.0-alpha.0 已支持动态主题（实验性），作者建议感兴趣可以去玩玩互相探讨。
• 近期规划包括尝试多种主题色切换或取色器动态换肤功能（调研开发中），以及集成单元测试 jest + enzyme（学习中）。

优缺点

• ✓ 精简不臃肿，原创脚手架
• ✓ 多tab页签提升操作效率
• ✕ 权限控制需手动注释去除
• ✕ 自定义组件换肤需手动补样式

出处

本方案挖掘自开源项目 hsl947/react-antd-multi-tabs-admin，方案内容与实施命令均来自其 README 原文。