55 lines
2.7 KiB
Markdown
55 lines
2.7 KiB
Markdown
# 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
|
||
|
||
1. WHEN 用户访问仪表盘页面 THEN THE Dashboard SHALL 显示4个数据概览卡片
|
||
2. THE Overview_Card SHALL 展示今日注册用户数，使用蓝绿渐变背景色
|
||
3. THE Overview_Card SHALL 展示今日消费用户数，使用粉黄渐变背景色
|
||
4. THE Overview_Card SHALL 展示当日消费总金额，使用红粉渐变背景色
|
||
5. THE Overview_Card SHALL 展示总消费金额，使用灰色背景色
|
||
6. WHEN 页面加载时 THEN THE Dashboard SHALL 从后端API获取最新统计数据
|
||
7. WHEN API请求失败 THEN THE Dashboard SHALL 显示错误提示并展示默认值0
|
||
|
||
### Requirement 2: 数据概览卡片样式
|
||
|
||
**User Story:** As a 运营人员, I want to 数据概览卡片有清晰的视觉层次, so that I can 快速识别不同类型的数据。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Overview_Card SHALL 使用响应式布局，在不同屏幕尺寸下自适应
|
||
2. THE Overview_Card SHALL 包含图标、数值和标签三个元素
|
||
3. THE Overview_Card SHALL 在鼠标悬停时有轻微上浮动画效果
|
||
4. WHEN 数值为金额类型 THEN THE Overview_Card SHALL 格式化显示为货币格式
|
||
|
||
### Requirement 3: 后端API集成
|
||
|
||
**User Story:** As a 开发人员, I want to 前端正确调用后端仪表盘API, so that I can 获取准确的统计数据。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Admin_Web SHALL 调用 `GET /api/admin/business/dashboard` 获取概览数据
|
||
2. WHEN API返回成功 THEN THE Dashboard SHALL 正确解析并展示所有统计字段
|
||
3. THE Admin_Web SHALL 在API模块中定义完整的TypeScript接口类型
|
||
4. WHEN 用户无dashboard:view权限 THEN THE Dashboard SHALL 显示无权限提示
|
||
|