# vite-antd5-react-admin **Repository Path**: joshua_er/vite-antd5-react-admin ## Basic Information - **Project Name**: vite-antd5-react-admin - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-05-13 - **Last Updated**: 2026-01-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: 后台管理系统 ## README ## 项目介绍 本项目基于 React + Vite + Ant Design（版本 4 和 5）构建，采用现代化前端开发技术栈，主要面向企业级后台管理系统。项目集成了丰富的 UI 组件、路由管理、状态管理（Mobx）、权限控制、字典数据处理、API 管理等模块，适用于快速搭建具备权限管理、数据展示、内容编辑等功能的管理系统。 项目使用 [Mobx](https://mobx.js.org) 进行全局状态管理，同时支持动态路由加载、多标签页管理、统一 API 请求封装等功能。此外，项目整合了 ECharts 图表库、百度地图、富文本编辑器（WangEditor5）、文件上传（Aliyun OSS）等实用组件，具备良好的可扩展性和维护性。 --- ## 技术栈 - **React**：用于构建用户界面的 JavaScript 库。 - **Vite**：下一代前端构建工具，提供极速冷启动和热更新。 - **Ant Design**：企业级 UI 设计语言和组件库（使用版本 4 和 5）。 - **Mobx**：响应式状态管理库，用于管理全局状态。 - **ECharts**：百度开源的可视化图表库。 - **Axios**：用于处理 HTTP 请求。 - **路由管理**：使用自定义路由管理模块实现异步加载和权限控制。 --- ## 项目结构说明 ### 核心模块 - `src/api/`：封装所有接口请求，包括用户管理、订单、产品、字典、文件管理、访客日志等模块。 - `src/components/`：通用布局组件，如 Sider、Header、Content、Tabs 箌理等。 - `src/pages/`：各业务模块页面，包括登录、工作台、客户管理、产品管理、字典管理、访客日志管理等。 - `src/router/`：路由配置模块，支持本地路由与异步路由加载。 - `src/service/`：封装网络请求、文件下载、Token 管理等底层服务逻辑。 - `src/ui/`：大量封装后的通用 UI 组件，如表格、上传、富文本、SKU 管理、日期选择器等。 - `src/utils/`：工具函数集合，如时间格式化、Base64 转换、Token 获取、UUID 生成等。 - `src/data/mobxStore.js`：Mobx 全局状态存储，管理用户信息、权限、字典数据、标签页状态等。 --- ## 功能亮点 - **权限控制**：通过 `authButton`、`authRouter`、`permissionList` 实现按钮级和页面级权限控制。 - **多标签页管理**：使用 Mobx 管理标签页状态，支持添加、切换、关闭标签页。 - **统一 API 管理**：每个业务模块都有独立 API 文件，统一管理请求逻辑。 - **自定义组件库**：提供大量可复用的 UI 组件，如 `XxTable`, `XxCard`, `XxUpload`, `XxEditable`, `XxPagination` 等。 - **富文本编辑器**：集成 WangEditor5，支持自定义插件（如图片右浮动）。 - **图表可视化**：使用 ECharts 实现柱状图、饼图、环图等数据可视化组件。 - **百度地图集成**：支持地图中心设置、标记添加、图层控制等功能。 - **动态路由加载**：通过 `asyncRouter.js` 实现动态路由加载与权限匹配。 --- ## 快速开始 ### 安装依赖 ```bash npm install ``` 或使用 yarn： ```bash yarn install ``` ### 启动开发服务器 ```bash npm run dev ``` 或 ```bash yarn dev ``` 访问 `http://localhost:3000` 进入开发模式。 ### 构建生产版本 ```bash npm run build ``` 或 ```bash yarn build ``` 构建后文件将输出到 `dist/` 目录。 --- ## 使用说明 ### 登录模块 - 页面入口：`src/pages/login/index.jsx` - 登录逻辑封装于 `src/api/login.js`，包含 token 获取、用户信息更新等。 ### 工作台模块 - 页面入口：`src/pages/WorkBench/workbench.jsx` - 包含数据卡片展示、访问趋势图等组件，使用 `Bar`、`CardUvCount`、`CardArticleCount` 等组件。 ### 客户管理模块 - 客户列表：`src/pages/custManager/custList/index.jsx` - 客户详情：`src/pages/custManager/custList/custDetail.jsx` - 会员等级编辑：`src/pages/custManager/vipLevel/index.jsx` ### 产品管理模块 - 产品列表：`src/pages/product/list/index.jsx` - 品牌管理：`src/pages/product/brand/index.jsx` - 分类管理：`src/pages/product/category/index.jsx` - 属性管理：`src/pages/product/propertyList/index.jsx` ### 字典管理模块 - 字典管理：`src/pages/system/dict/index.jsx` - 字典数据管理：`src/pages/system/dict/data/index.jsx` ### 文件管理模块 - 文件列表：`src/pages/system/filemanager/index.jsx` - 文件上传：`src/ui/xx-upload/xx-AliOssUpload.jsx` - OSS 客户端配置：`src/ui/xx-AliyunOSSUpload/client/AliOss.js` ### 路由管理模块 - 路由配置：`src/router/config/localRouter.js` - 动态路由加载：`src/router/config/asyncRouter.js` - 路由解析工具：`src/router/utils/parseRoutes.js` --- ## 开发文档 ### 列表页面开发流程 详见 `doc/development.md`，包含如下内容： - `searchFields`：搜索字段配置说明。 - `columns`：表格列配置说明。 - 示例代码：如何快速构建一个列表页面。 --- ## 贡献指南 欢迎贡献代码和改进文档。请遵循以下步骤： 1. Fork 项目并创建新分支。 2. 提交你的更改。 3. 发起 Pull Request 并说明修改内容。 --- ## 协议 本项目采用 [MIT License](https://opensource.org/licenses/MIT)，详情请查看 `LICENSE` 文件。 --- ## 联系方式 如有问题或建议，请提交 Issue 或联系项目维护者。