6.2 KiB
6.2 KiB
Implementation Plan: Admin Frontend Migration
Overview
本实现计划将后台管理系统的业务模块前端页面迁移到 Vue 3 + Element Plus 项目中。按照 API 服务层 → 页面组件 → 路由配置的顺序进行实现。
Tasks
-
1. 创建业务模块 API 服务层
- 1.1 创建仪表盘 API (
src/api/dashboard.ts)- 实现 getDashboardOverview、getAdAccounts、createAdAccount、deleteAdAccount 函数
- Requirements: 1.1, 1.2, 1.3
- 1.2 创建用户管理 API (
src/api/user.ts)- 实现用户列表、详情、资金变动、状态管理、赠送等接口
- Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9
- 1.3 创建 VIP 管理 API (
src/api/vip.ts)- 实现 VIP 等级列表、编辑接口
- Requirements: 3.1, 3.2, 3.3
- 1.4 创建商品管理 API (
src/api/goods.ts)- 实现商品列表、详情、增删改、状态管理、奖品管理接口
- Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7
- 1.5 创建商品类型 API (
src/api/goodsType.ts)- 实现商品类型列表、增删改接口
- Requirements: 5.1, 5.2, 5.3
- 1.6 创建订单管理 API (
src/api/order.ts)- 实现订单列表、详情、卡单、兑换、发货、导出接口
- Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6, 6.7
- 1.7 创建财务管理 API (
src/api/finance.ts)- 实现消费排行、余额/积分/钻石明细、充值记录接口
- Requirements: 7.1, 7.2, 7.3, 7.4, 7.5
- 1.8 创建系统配置 API (
src/api/config.ts)- 实现配置分组列表、配置项获取、配置保存接口
- Requirements: 8.1, 8.2, 8.3
- 1.9 编写 API 服务层属性测试
- Property 3: 请求拦截器Token注入
- Property 5: 错误响应处理
- Validates: Requirements 10.3, 10.4, 1.4
- 1.1 创建仪表盘 API (
-
2. 升级仪表盘页面
- 2.1 升级仪表盘页面 (
src/views/dashboard/index.vue)- 显示业务数据概览(今日注册、消费、订单等)
- 添加广告账户管理功能
- Requirements: 1.1, 1.2, 1.3, 1.4
- 2.1 升级仪表盘页面 (
-
3. 实现用户管理模块
- 3.1 创建用户列表页面 (
src/views/business/user/index.vue)- 实现分页列表、搜索筛选、操作按钮
- Requirements: 2.1
- 3.2 创建用户详情页面 (
src/views/business/user/detail.vue)- 显示用户基本信息、账户信息、统计数据
- Requirements: 2.2, 2.8, 2.9
- 3.3 实现用户操作功能
- 资金变动对话框、封号/解封、测试账号、清空绑定、赠送功能
- Requirements: 2.3, 2.4, 2.5, 2.6, 2.7
- 3.4 编写用户管理页面属性测试
- Property 1: 列表分页数据一致性
- Validates: Requirements 2.1
- 3.1 创建用户列表页面 (
-
4. 实现 VIP 管理模块
- 4.1 创建 VIP 管理页面 (
src/views/business/vip/index.vue)- 实现 VIP 等级列表、编辑对话框
- Requirements: 3.1, 3.2, 3.3
- 4.1 创建 VIP 管理页面 (
-
5. 实现商品管理模块
- 5.1 创建商品列表页面 (
src/views/business/goods/index.vue)- 实现分页列表、搜索筛选、上架/下架操作
- Requirements: 4.1, 4.5
- 5.2 创建商品编辑页面 (
src/views/business/goods/edit.vue)- 实现新增/编辑表单、图片上传
- Requirements: 4.2, 4.3, 4.4
- 5.3 创建奖品管理组件 (
src/views/business/goods/components/PrizeList.vue)- 实现奖品列表、添加/编辑/删除奖品
- Requirements: 4.6, 4.7
- 5.4 编写商品管理页面属性测试
- Property 1: 列表分页数据一致性
- Validates: Requirements 4.1
- 5.1 创建商品列表页面 (
-
6. 实现商品类型管理模块
- 6.1 创建商品类型页面 (
src/views/business/goodsType/index.vue)- 实现类型列表、新增/编辑对话框
- Requirements: 5.1, 5.2, 5.3
- 6.1 创建商品类型页面 (
-
7. 实现订单管理模块
- 7.1 创建订单列表页面 (
src/views/business/order/index.vue)- 实现分页列表、搜索筛选、Tab 切换(全部/卡单/兑换)
- Requirements: 6.1, 6.3, 6.4
- 7.2 创建订单详情页面 (
src/views/business/order/detail.vue)- 显示订单信息、奖品明细
- Requirements: 6.2
- 7.3 创建发货管理页面 (
src/views/business/order/shipping.vue)- 实现发货订单列表、发货对话框
- Requirements: 6.5, 6.6
- 7.4 实现订单导出功能
- 导出按钮、下载 CSV 文件
- Requirements: 6.7
- 7.5 编写订单管理页面属性测试
- Property 1: 列表分页数据一致性
- Validates: Requirements 6.1
- 7.1 创建订单列表页面 (
-
8. 实现财务管理模块
- 8.1 创建消费排行页面 (
src/views/business/finance/ranking.vue)- 实现消费排行榜列表
- Requirements: 7.1
- 8.2 创建余额明细页面 (
src/views/business/finance/money.vue)- 实现余额变动记录列表
- Requirements: 7.2
- 8.3 创建积分明细页面 (
src/views/business/finance/integral.vue)- 实现积分变动记录列表
- Requirements: 7.3
- 8.4 创建钻石明细页面 (
src/views/business/finance/diamond.vue)- 实现钻石变动记录列表
- Requirements: 7.4
- 8.5 创建充值记录页面 (
src/views/business/finance/recharge.vue)- 实现充值记录列表
- Requirements: 7.5
- 8.1 创建消费排行页面 (
-
9. 实现系统配置模块
- 9.1 创建系统配置页面 (
src/views/business/config/index.vue)- 实现配置分组 Tab、配置项表单、保存功能
- Requirements: 8.1, 8.2, 8.3
- 9.2 编写配置页面属性测试
- Property 4: 配置项类型渲染
- Validates: Requirements 8.4
- 9.1 创建系统配置页面 (
-
10. 配置路由和导航
- 10.1 添加业务模块路由配置
- 在 router/index.ts 中添加业务模块路由
- Requirements: 9.1, 9.3
- 10.2 编写路由权限属性测试
- Property 2: 动态菜单权限过滤
- Validates: Requirements 9.2, 9.4
- 10.1 添加业务模块路由配置
-
11. Checkpoint - 功能验证
- 确保所有页面正常渲染
- 确保 API 调用正常
- 确保权限控制正常
- 如有问题请询问用户
Notes
- 所有任务都必须执行,包括测试任务
- 每个任务引用了具体的需求条款以便追溯
- 属性测试验证通用的正确性属性
- 建议按顺序执行,API 层先于页面组件