商城后台管理系统

React 18 + MUI v6 + Vite

🔗 后端仓库：mall_server

---

📸 效果预览

🏪 业务简介

商城是一个综合型 B2C 电商平台的后台管理系统，覆盖电商运营全链路：

🛒 商品管理	商品 CRUD、分类管理、属性/属性值、商品组、品牌、单位
📦 订单管理	订单查询、订单状态流转（下单→支付→完成→取消）、收货地址管理
🔄 售后管理	退货退款、换货处理、审核状态跟踪
🏷️ 营销管理	优惠券模板、用户领券/发券记录、秒杀活动
🛍️ 购物管理	购物车、商品评论、收藏、浏览记录、收货地址
👤 系统管理	用户/角色/菜单/部门/岗位/字典，RBAC 权限模型
📊 监控运维	Druid SQL 监控、在线用户、操作日志、定时任务
📢 通用功能	通知公告、验证码、文件上传、敏感词过滤、短信记录、行政区划

---

🛠 技术栈

框架
UI 组件库
路由
状态管理
HTTP
样式方案
工具库	dayjs · js-cookie · jsencrypt (RSA) · qs · screenfull · clipboard
构建工具

---

🎨 UI 组件一览

本项目 100% 使用 MUI 官方组件，抛弃原生 HTML 元素：

场景	使用组件	来源
布局	Box Grid Stack	@mui/material
表单	TextField Switch Checkbox Select Radio	@mui/material
按钮	Button IconButton Fab Chip	@mui/material
数据展示	Table Card Typography Avatar Badge	@mui/material
反馈	Dialog Snackbar Alert Tooltip	@mui/material
导航	Drawer Menu Breadcrumbs AppBar List	@mui/material
图表	LineChart BarChart PieChart Gauge	@mui/x-charts
日期选择	DateTimePicker	@mui/x-date-pickers
图标	Dashboard Store ShoppingCart People 等	@mui/icons-material

---

🚀 快速开始

# 安装依赖
npm install

# 启动开发服务器 (localhost:8013)
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

开发环境通过 Vite proxy 将 /api 和 /v1 请求转发到后端 http://localhost:8011

---

📁 项目结构

mall_web/
├── public/                     # 静态资源
├── screenshots/                # 预览截图
├── src/
│   ├── api/                    # API 接口层 (axios 封装)
│   │   ├── aftersale/          #   售后 API
│   │   ├── common/             #   通用 API
│   │   ├── mall/               #   商品 API
│   │   ├── marketing/          #   营销 API
│   │   ├── order/              #   订单 API
│   │   ├── shopping/           #   购物 API
│   │   └── system/             #   系统 API
│   ├── assets/                 # 图片/字体等资源
│   ├── components/             # 公共组件
│   │   ├── Crud/               #   CRUD 通用组件
│   │   └── Layout/             #   布局组件
│   ├── hooks/                  # 自定义 Hooks
│   │   └── useCrud.js          #   CRUD 逻辑复用
│   ├── pages/                  # 页面组件
│   │   ├── aftersale/          #   售后管理
│   │   ├── common/             #   通用功能
│   │   ├── mall/               #   商品管理
│   │   ├── marketing/          #   营销管理
│   │   ├── monitor/            #   系统监控
│   │   ├── order/              #   订单管理
│   │   ├── shopping/           #   购物管理
│   │   ├── system/             #   系统管理
│   │   └── tools/              #   工具
│   ├── router/                 # 路由配置
│   ├── store/                  # Zustand 状态管理
│   ├── utils/                  # 工具函数
│   ├── App.jsx                 # 应用入口
│   └── main.jsx                # 挂载入口
├── package.json
├── vite.config.js
└── README.md

---

✨ 核心特性

• 全 MUI 组件体系 — 从按钮到图表、日期选择器，100% 使用 MUI 官方组件，零原生 HTML
• 深色主题 — GitHub Dark 风格配色，侧边栏渐变美学
• 动态路由 — 根据后端菜单接口自动生成路由和侧边栏
• useCrud Hook — 封装 CRUD 通用逻辑：分页、搜索、新增、编辑、删除、导出、时间范围查询
• RSA 加密登录 — 前端 RSA 公钥加密密码传输
• 权限控制 — RBAC 角色-菜单权限，按钮级权限控制
• 响应式布局 — 移动端 Drawer 抽屉模式 + PC 端固定侧边栏

---

🎨 主题配色

页面背景	#0D1117
卡片/侧边栏	#1c2235 → #1e2438 → #1b2232 渐变
导航栏	#161B22
输入框	#21262D
主色	#58A6FF → #3B82F6 渐变
主文字	#E6EDF3
次要文字	#8B949E

---

_{Built with ❤️ using React + MUI + Vite}