# 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 显示无权限提示