outsource/mi-assessment
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
2c7693c4e3
mi-assessment/.kiro/specs/admin-frontend/tasks.md
zpc ff62d7db2e 前端
2026-02-04 10:04:50 +08:00

15 KiB
Raw Blame History

Implementation Plan: Admin Frontend Business Modules

Overview

本实现计划将后台管理前端业务模块的设计转换为可执行的开发任务。基于 Vue 3.5 + TypeScript 5.6 + Element Plus 2.9 技术栈，在现有前端模板基础上开发 8 个业务模块页面。

Tasks

  • 1. 项目基础设施搭建

    • 1.1 创建通用类型定义文件

      • 创建 src/types/common.ts，定义 PagedRequest、PagedResult、ApiResponse、UpdateStatusRequest、SortItem 等通用类型
      • Requirements: 18.2

    • 1.2 创建业务模块 API 目录结构

      • 创建 src/api/business/ 目录
      • 创建 8 个 API 文件的基础结构
      • Requirements: 18.1

    • 1.3 创建业务模块页面目录结构

      • 创建 src/views/business/ 目录及子目录
      • 按照设计文档的目录结构创建所有页面文件夹
      • Requirements: 17.1

    • 1.4 扩展路由配置

      • 在 src/router/index.ts 中添加业务模块路由
      • 配置路由 meta 信息（title、icon、permission）
      • Requirements: 17.1, 17.2, 17.4

  • 2. Dashboard 仪表盘模块

    • 2.1 实现 Dashboard API

      • 创建 src/api/business/dashboard.ts
      • 实现 getOverview、getTrends、getPendingItems 接口
      • Requirements: 18.2, 18.4

    • 2.2 扩展 Dashboard 页面

      • 修改 src/views/dashboard/index.vue
      • 实现今日统计卡片（新用户、新订单、收入）
      • 实现累计统计卡片（总用户、总订单、总收入）
      • 实现趋势图表（用户增长、订单趋势、收入趋势）
      • 实现待办事项卡片（待审核提现、待确认预约）
      • 实现日期范围选择器
      • Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7

    • 2.3 编写 Dashboard 属性测试

      • Property 1: Statistics Display Correctness
      • Validates: Requirements 1.1, 1.2

  • 3. Config 系统配置模块

    • 3.1 实现 Config API

      • 创建 src/api/business/config.ts
      • 实现 getConfigList、updateConfig、getConfigByKey 接口
      • Requirements: 18.2, 18.4

    • 3.2 实现 Config 页面

      • 创建 src/views/business/config/index.vue
      • 实现配置列表按 ConfigType 分组显示（折叠面板）
      • 实现配置项内联编辑功能
      • 实现配置值验证（价格、佣金率等）
      • Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7

    • 3.3 编写 Config 验证属性测试

      • Property 2: Config Grouping Correctness
      • Property 3: Config Value Validation
      • Validates: Requirements 2.1, 2.3, 2.4, 2.5

  • 4. Content 内容管理模块

    • 4.1 实现 Content API

      • 创建 src/api/business/content.ts
      • 实现 Banner 相关接口（getList、create、update、delete、updateStatus、updateSort）
      • 实现 Promotion 相关接口（getList、create、update、delete、updateStatus）
      • Requirements: 18.2, 18.4

    • 4.2 实现 Banner 轮播图管理页面

      • 创建 src/views/business/content/banner/index.vue
      • 实现分页表格（图片预览、标题、跳转类型、状态、排序、创建时间、操作）
      • 实现新增/编辑对话框表单
      • 实现跳转类型条件验证（内部页面/外部链接需要 linkUrl，小程序需要 linkUrl 和 appId）
      • 实现状态切换开关
      • 实现删除确认
      • 实现拖拽排序
      • 使用 ImageUpload 组件上传图片
      • 使用 DictSelect 组件选择跳转类型和状态
      • Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 3.10

    • 4.3 实现 Promotion 宣传图管理页面

      • 创建 src/views/business/content/promotion/index.vue
      • 实现分页表格（图片预览、标题、位置、状态、排序、创建时间、操作）
      • 实现新增/编辑对话框表单
      • 实现位置筛选
      • 实现状态切换开关
      • 实现删除确认
      • 使用 DictSelect 组件选择位置和状态
      • Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7

    • 4.4 编写 Banner 链接类型验证属性测试

      • Property 4: Banner Link Type Validation
      • Validates: Requirements 3.3, 3.4

  • 5. Checkpoint - 确保基础模块测试通过

    • 确保所有测试通过，如有问题请询问用户

  • 6. Assessment 测评管理模块

    • 6.1 实现 Assessment API

      • 创建 src/api/business/assessment.ts
      • 实现 AssessmentType 相关接口
      • 实现 Question 相关接口（含批量导入）
      • 实现 Category 相关接口（树形结构）
      • 实现 Mapping 相关接口
      • 实现 Conclusion 相关接口
      • Requirements: 18.2, 18.4

    • 6.2 实现测评类型管理页面

      • 创建 src/views/business/assessment/type/index.vue
      • 实现分页表格（图片、名称、编码、价格、题目数、状态、排序、创建时间、操作）
      • 实现新增/编辑对话框表单（含富文本编辑器）
      • 实现价格验证（正数）
      • 实现状态切换（下线/上线/即将上线）
      • 实现删除确认
      • Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8

    • 6.3 实现题库管理页面

      • 创建 src/views/business/assessment/question/index.vue
      • 实现分页表格（题号、内容预览、测评类型、分类映射、状态、操作）
      • 实现测评类型筛选
      • 实现新增/编辑对话框表单（含富文本编辑器）
      • 实现分类映射对话框（树形选择器）
      • 实现批量导入对话框（Excel 上传）
      • 实现导入结果展示
      • 实现删除确认
      • Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6, 6.7, 6.8

    • 6.4 实现报告分类管理页面

      • 创建 src/views/business/assessment/category/index.vue
      • 实现树形表格展示分类层级
      • 实现测评类型选择器
      • 实现新增/编辑对话框表单（父分类选择、分类类型、计分规则）
      • 实现删除验证（有子分类时禁止删除）
      • 使用 DictSelect 组件选择分类类型和计分规则
      • Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7

    • 6.5 实现报告结论管理页面

      • 创建 src/views/business/assessment/conclusion/index.vue
      • 实现左侧分类树选择
      • 实现右侧结论列表
      • 实现新增/编辑对话框表单（结论类型、标题、富文本内容）
      • 实现删除确认
      • 使用 DictSelect 组件选择结论类型
      • Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6

    • 6.6 编写价格验证属性测试

      • Property 5: Price Field Validation
      • Validates: Requirements 5.3, 12.3

  • 7. User 用户管理模块

    • 7.1 实现 User API

      • 创建 src/api/business/user.ts
      • 实现 getUserList、getUserDetail、updateUserStatus、updateUserLevel、exportUsers 接口
      • Requirements: 18.2, 18.4

    • 7.2 实现用户管理页面

      • 创建 src/views/business/user/index.vue
      • 实现搜索表单（UID、手机号、昵称、用户等级、状态、日期范围）
      • 实现分页表格（UID、手机号、昵称、头像、用户等级、余额、状态、创建时间、最后登录时间、操作）
      • 实现用户详情抽屉（完整用户信息、上级用户、余额、收入统计、订单数、测评数）
      • 实现状态切换开关
      • 实现等级修改对话框
      • 实现导出功能
      • 使用 DictSelect 组件选择用户等级和状态
      • Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7

    • 7.3 编写查询参数处理属性测试

      • Property 6: Query Parameter Handling
      • Validates: Requirements 9.2, 1.4

  • 8. Order 订单管理模块

    • 8.1 实现 Order API

      • 创建 src/api/business/order.ts
      • 实现 getOrderList、getOrderDetail、refundOrder、exportOrders 接口
      • Requirements: 18.2, 18.4

    • 8.2 实现订单管理页面

      • 创建 src/views/business/order/index.vue
      • 实现搜索表单（订单号、用户ID、订单类型、状态、支付方式、日期范围）
      • 实现分页表格（订单号、用户信息、订单类型、商品名称、金额、支付金额、支付方式、状态、支付时间、创建时间、操作）
      • 实现订单详情抽屉（完整订单信息、用户详情、商品详情、支付详情、关联记录）
      • 实现状态颜色映射
      • 实现导出功能
      • 使用 DictSelect 组件选择订单类型、状态、支付方式
      • Requirements: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6

    • 8.3 实现退款功能

      • 在订单详情中添加退款按钮（仅已支付/已完成订单显示）
      • 实现退款对话框表单（退款金额、退款原因）
      • 实现退款金额验证（不超过支付金额）
      • 使用 v-permission 指令控制退款按钮权限
      • Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 11.6

    • 8.4 编写订单状态颜色映射属性测试

      • Property 7: Order Status Color Mapping
      • Validates: Requirements 10.6

    • 8.5 编写退款金额验证属性测试

      • Property 8: Refund Amount Validation
      • Validates: Requirements 11.3

  • 9. Checkpoint - 确保用户和订单模块测试通过

    • 确保所有测试通过，如有问题请询问用户

  • 10. Planner 规划师管理模块

    • 10.1 实现 Planner API

      • 创建 src/api/business/planner.ts
      • 实现 Planner 相关接口（getList、create、update、delete、updateStatus、updateSort）
      • 实现 Booking 相关接口（getList、getDetail、updateStatus、export）
      • Requirements: 18.2, 18.4

    • 10.2 实现规划师管理页面

      • 创建 src/views/business/planner/index.vue
      • 实现分页表格（头像、姓名、职称、价格、状态、排序、创建时间、操作）
      • 实现新增/编辑对话框表单（姓名、头像上传、职称、简介、价格、排序、状态）
      • 实现价格验证（正数）
      • 实现状态切换开关
      • 实现删除确认
      • 实现拖拽排序
      • 使用 ImageUpload 组件上传头像
      • Requirements: 12.1, 12.2, 12.3, 12.4, 12.5, 12.6, 12.7, 12.8

    • 10.3 实现预约记录管理页面

      • 创建 src/views/business/planner/booking/index.vue
      • 实现搜索表单（规划师、用户、日期范围、状态）
      • 实现分页表格（预约ID、用户信息、规划师信息、预约日期、学生信息、状态、创建时间、操作）
      • 实现预约详情抽屉（完整预约信息、用户详情、规划师详情、学生信息）
      • 实现状态修改对话框（待确认/已确认/已完成/已取消）
      • 实现导出功能
      • 使用 DictSelect 组件选择状态
      • Requirements: 13.1, 13.2, 13.3, 13.4, 13.5, 13.6

  • 11. Distribution 分销管理模块

    • 11.1 实现 Distribution API

      • 创建 src/api/business/distribution.ts
      • 实现 InviteCode 相关接口（getList、generate、assign、export）
      • 实现 Commission 相关接口（getList、getDetail、getStatistics、export）
      • 实现 Withdrawal 相关接口（getList、getDetail、approve、reject、complete、export）
      • Requirements: 18.2, 18.4

    • 11.2 实现邀请码管理页面

      • 创建 src/views/business/distribution/invite-code/index.vue
      • 实现搜索表单（邀请码、批次号、分配用户、状态）
      • 实现分页表格（邀请码、批次号、分配用户、分配时间、使用用户、使用时间、状态、创建时间、操作）
      • 实现批量生成对话框（输入生成数量）
      • 实现分配对话框（选择用户）
      • 实现导出功能
      • 使用 DictSelect 组件选择状态
      • Requirements: 14.1, 14.2, 14.3, 14.4, 14.5, 14.6, 14.7

    • 11.3 实现佣金记录管理页面

      • 创建 src/views/business/distribution/commission/index.vue
      • 实现统计卡片（总金额、待结算金额、已结算金额）
      • 实现搜索表单（用户、来源用户、订单、层级、状态、日期范围）
      • 实现分页表格（用户信息、来源用户、订单信息、订单金额、佣金比例、佣金金额、层级、状态、结算时间、创建时间）
      • 实现佣金详情抽屉
      • 实现导出功能
      • 使用 DictSelect 组件选择层级和状态
      • Requirements: 15.1, 15.2, 15.3, 15.4, 15.5, 15.6, 15.7

    • 11.4 实现提现审核管理页面

      • 创建 src/views/business/distribution/withdrawal/index.vue
      • 实现搜索表单（提现单号、用户、状态、日期范围）
      • 实现分页表格（提现单号、用户信息、金额、变更前余额、变更后余额、状态、审核信息、打款时间、创建时间、操作）
      • 实现提现详情抽屉（完整提现信息、用户余额历史）
      • 实现审核通过按钮
      • 实现审核拒绝对话框（输入拒绝原因）
      • 实现完成打款对话框（输入交易流水号）
      • 实现导出功能
      • 使用 v-permission 指令控制审核按钮权限
      • 使用 DictSelect 组件选择状态
      • Requirements: 16.1, 16.2, 16.3, 16.4, 16.5, 16.6, 16.7, 16.8, 16.9

  • 12. 权限控制和字典配置

    • 12.1 实现权限控制

      • 确保所有需要权限控制的按钮使用 v-permission 指令
      • 权限标识格式：模块:操作（如 banner:create, order:refund, withdrawal:approve）
      • Requirements: 19.1, 19.2, 19.3, 19.4

    • 12.2 配置字典数据

      • 在后台字典管理中配置所有需要的字典类型
      • 包括：banner_link_type, common_status, promotion_position, assessment_status, user_level, order_type, order_status, pay_type, booking_status, invite_code_status, commission_level, commission_status, withdrawal_status, category_type, score_rule, conclusion_type, student_grade
      • Requirements: 20.1, 20.2, 20.3

    • 12.3 编写权限控制属性测试

      • Property 9: Permission-Based UI Rendering
      • Validates: Requirements 19.1

    • 12.4 编写字典回退行为属性测试

      • Property 10: Dictionary Fallback Behavior
      • Validates: Requirements 20.4

  • 13. 创建验证工具函数

    • 13.1 创建通用验证函数

      • 创建 src/utils/validation.ts
      • 实现 validatePrice（正数验证）
      • 实现 validateCommissionRate（0-1 范围验证）
      • 实现 validateRefundAmount（不超过支付金额验证）
      • Requirements: 2.4, 2.5, 5.3, 11.3, 12.3

    • 13.2 编写验证函数单元测试

      • 创建 src/utils/__tests__/validation.test.ts
      • 测试所有验证函数的边界情况
      • Requirements: 2.4, 2.5, 5.3, 11.3, 12.3

  • 14. Final Checkpoint - 确保所有测试通过

    • 运行 npm run test 确保所有测试通过
    • 运行 npm run lint 确保代码风格一致
    • 运行 npm run type-check 确保类型检查通过
    • 如有问题请询问用户

Notes

  • 每个任务都引用了具体的需求编号，便于追溯
  • Checkpoint 任务用于确保增量验证
  • 属性测试验证核心业务规则的正确性
  • 单元测试验证具体示例和边界情况