使用 React 制作一套商城系统，系统分为两端：前台产品端与后台管理端。具体需求如下：
| 模块 | 说明 |
|---|---|
| 商城主页面 | 包含搜索框、轮播图、热门商品展示 |
| 分类页 | 展示所有商品的分类索引 |
| 购物车 | 查看加入购物车的商品，支持数量修改、删除、选中结算 |
| 我的页面 | 展示用户个人信息、订单列表等 |
| 商品详情页 | 展示商品详细信息，可加入购物车或立即购买 |
| 创建订单页 | 确认收货地址、商品清单，生成订单 |
| 支付页面 | 模拟支付流程（可前端模拟，如展示支付成功/失败） |
| 订单详情页 | 查看订单状态、商品信息、物流信息等 |
| 模块 | 说明 |
|---|---|
| 后台登录 | 独立后台登录页面，验证身份后才能进入管理界面 |
| 权限管理 | 实现用户角色管理，不同角色可访问不同后台模块（如管理员可管理商品和订单，普通运营只能查看订单） |
| 商品管理 | 商品的增删改查、上下架（商品/分类/订单三选一完成即可，但建议优先商品管理） |
| 分类管理 | 商品分类的增删改查（若选择此模块） |
| 订单管理 | 查看订单列表、修改订单状态、发货操作（若选择此模块） |
注：商品管理、分类管理、订单管理中，至少完成一个完整的管理功能。
| 功能 | 说明 |
|---|---|
| 用户登录 | 前台用户登录/注册功能，登录后才能进行购物车、下单等操作 |
| 数据联动 | 前后台数据需联动（可使用 localStorage 实现简单联动，或使用 Mock 数据模拟后端接口） |
| 要求 | 说明 |
|---|---|
| React 框架 | 使用 React Hooks（useState, useEffect 等）进行状态管理 |
| 组件化 | 合理拆分组件，页面组件与公共组件分离 |
| 路由 | 使用 React Router 实现多页面跳转（前台与后台路由分开） |
| 状态管理（可选） | 可使用 Context 或 Redux 管理全局状态（如用户信息、购物车） |
| UI 组件库 | 可以使用 Ant Design、Material-UI 等组件库加速开发 |
| 数据存储 | 可使用 localStorage 或 Mock.js 模拟后端数据，不强制使用真实后端 |
| 样式 | 可使用 CSS 模块、Tailwind CSS 或组件库自带样式 |
| 加分项 | 说明 |
|---|---|
| 后端联动 | 接入真实后端 API（如 Node.js + Express + JSON Server 或 Mock 接口） |
| 数据持久化 | 刷新页面后购物车、用户登录状态等不丢失 |
| 表单验证 | 登录、注册、添加商品等表单进行验证并给出提示 |
| 分页/无限滚动 | 商品列表、订单列表实现分页或滚动加载 |
| 支付模拟优化 | 支付倒计时、支付二维码模拟等增强体验 |
| 响应式布局 | 适配手机、平板、PC 不同屏幕尺寸 |
| 性能优化 | 使用 React.memo、useCallback、懒加载等优化首屏加载 |
| 单元测试 | 对核心组件或工具函数编写简单测试 |
| 部署上线 | 将项目部署到 Vercel、Netlify 等平台并提供可访问链接 |
项目根目录/
├── metadata.json ← 【必填】填写组长姓名、学号、作业名称
├── package.json
├── README.md ← 项目说明文档
├── index.html
├── vite.config.js （若使用 Vite）
├── src/
│ ├── main.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ ├── pages/ ← 页面组件（Home, Category, Cart, User, ProductDetail, Order, Pay, Admin...）
│ ├── components/ ← 公共组件（Header, Footer, SearchBar, Carousel, ProductCard...）
│ ├── hooks/ ← 自定义 Hooks
│ ├── utils/ ← 工具函数（存储、格式化等）
│ ├── contexts/ ← 全局 Context
│ ├── assets/ ← 静态资源
│ └── mock/ ← Mock 数据（可选）
├── public/ ← 公共资源目录
└── tool/
│ ├── check.cjs ← 自检脚本
│ └── pack.cjs ← 打包脚本
npm install打开根目录的 metadata.json，填写你的信息：
{
"studentName": "张三",
"studentId": "20240001",
"assignmentName": "第四次作业"
}npm run dev浏览器会自动打开开发页面，修改代码后页面会自动刷新（HMR）。
- 在
src/App.jsx中编写根组件逻辑和布局 - 根据需要在
src/下创建子组件文件 - 在
src/App.css中编写样式 - 如有图片资源放入
src/assets/目录 - 完成后撰写
Report.md作业报告 - 运行自检脚本，确认没有遗漏：
node tool/check.cjs- 自检全部通过后，运行打包脚本生成提交文件：
node tool/pack.cjs打包完成后，会在根目录生成：
{学号}_{姓名}_{作业名称}.zip