2.7 KiB
2.7 KiB
Requirements Document
Introduction
本文档定义了仪表盘数据概览卡片模块的迁移需求。该模块将从老项目（PHP ThinkPHP + Layui）迁移到新项目（ASP.NET Core + Vue 3 + Element Plus）。仪表盘是后台管理系统的首页，提供关键业务数据的实时概览。
Glossary
- Dashboard: 仪表盘，后台管理系统的首页，展示关键业务数据概览
- Overview_Card: 数据概览卡片，展示单个统计指标的UI组件
- Today_Registrations: 今日注册用户数，当天新注册的用户数量
- Today_Consumers: 今日消费用户数，当天有消费行为的用户数量
- Today_Consumption: 当日消费总金额，当天所有订单的支付金额总和
- Total_Consumption: 总消费金额，历史所有订单的支付金额总和
- Admin_Web: 新项目前端，基于 Vue 3 + Element Plus 的后台管理前端
Requirements
Requirement 1: 数据概览卡片展示
User Story: As a 运营人员, I want to 在仪表盘首页看到关键业务数据概览, so that I can 快速了解当日和总体业务状况。
Acceptance Criteria
- WHEN 用户访问仪表盘页面 THEN THE Dashboard SHALL 显示4个数据概览卡片
- THE Overview_Card SHALL 展示今日注册用户数，使用蓝绿渐变背景色
- THE Overview_Card SHALL 展示今日消费用户数，使用粉黄渐变背景色
- THE Overview_Card SHALL 展示当日消费总金额，使用红粉渐变背景色
- THE Overview_Card SHALL 展示总消费金额，使用灰色背景色
- WHEN 页面加载时 THEN THE Dashboard SHALL 从后端API获取最新统计数据
- WHEN API请求失败 THEN THE Dashboard SHALL 显示错误提示并展示默认值0
Requirement 2: 数据概览卡片样式
User Story: As a 运营人员, I want to 数据概览卡片有清晰的视觉层次, so that I can 快速识别不同类型的数据。
Acceptance Criteria
- THE Overview_Card SHALL 使用响应式布局，在不同屏幕尺寸下自适应
- THE Overview_Card SHALL 包含图标、数值和标签三个元素
- THE Overview_Card SHALL 在鼠标悬停时有轻微上浮动画效果
- WHEN 数值为金额类型 THEN THE Overview_Card SHALL 格式化显示为货币格式
Requirement 3: 后端API集成
User Story: As a 开发人员, I want to 前端正确调用后端仪表盘API, so that I can 获取准确的统计数据。
Acceptance Criteria
- THE Admin_Web SHALL 调用
GET /api/admin/business/dashboard获取概览数据 - WHEN API返回成功 THEN THE Dashboard SHALL 正确解析并展示所有统计字段
- THE Admin_Web SHALL 在API模块中定义完整的TypeScript接口类型
- WHEN 用户无dashboard:view权限 THEN THE Dashboard SHALL 显示无权限提示