333

2026-01-18 13:55:07 +08:00 · 2026-01-18 13:55:07 +08:00 · fa81b8d158
commit fa81b8d158
parent f343faec8f
12 changed files with 1293 additions and 13 deletions
--- a/.kiro/specs/admin-ui-testing/design.md
+++ b/.kiro/specs/admin-ui-testing/design.md
@ -0,0 +1,182 @@
+# Design Document: 后台管理系统 UI 功能测试
+
+## Overview
+
+本设计文档描述了 HoneyBox 后台管理系统 UI 功能测试的方法和流程。测试将通过浏览器自动化工具（Playwright）进行，验证所有页面的按钮功能是否正常工作。
+
+## Architecture
+
+### 测试架构
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    测试执行层                                │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
+│  │  Playwright │  │  截图工具   │  │  Bug记录    │         │
+│  │  浏览器自动化│  │             │  │  生成器     │         │
+│  └─────────────┘  └─────────────┘  └─────────────┘         │
+└─────────────────────────────────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    被测系统                                  │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │              HoneyBox Admin Web                      │   │
+│  │              http://localhost:5173                   │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                           │                                 │
+│                           ▼                                 │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │              HoneyBox Admin API                      │   │
+│  │              http://localhost:5239                   │   │
+│  └─────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Components and Interfaces
+
+### 测试模块划分
+
+| 模块 | 页面数量 | 主要功能 |
+|------|----------|----------|
+| 首页仪表盘 | 1 | 数据统计、快捷操作、主题设置 |
+| 用户管理 | 5 | 用户列表、盈亏统计、VIP管理、邀请统计、登录统计 |
+| 商品管理 | 2 | 盒子管理、盒子类型管理 |
+| 订单管理 | 5 | 购买订单、发货订单、回收订单、卡单订单、综合订单 |
+| 营销活动 | 8 | 优惠券、领取记录、广告、周榜、月榜、排行榜 |
+| 钻石商城 | 1 | 钻石商品管理 |
+| 系统配置 | 8 | 各类配置页面 |
+| 内容管理 | 3 | 单页、悬浮球、福利屋入口 |
+| 福利与任务 | 4 | 奖励、签到、任务、权益等级 |
+| 系统管理 | 6 | 菜单、角色、权限、部门、管理员、日志 |
+
+### 测试接口
+
+每个页面测试包含以下标准测试点：
+
+1. **页面加载测试**
+   - 验证页面正常加载
+   - 验证数据列表显示
+   - 验证无控制台错误
+
+2. **查询功能测试**
+   - 验证筛选条件输入
+   - 验证查询按钮点击
+   - 验证查询结果显示
+   - 验证重置按钮功能
+
+3. **CRUD 功能测试**
+   - 验证新增按钮和表单
+   - 验证编辑按钮和表单
+   - 验证删除按钮和确认
+   - 验证表单验证规则
+
+4. **分页功能测试**
+   - 验证分页组件显示
+   - 验证页码切换
+   - 验证每页条数切换
+
+## Data Models
+
+### Bug 记录模型
+
+```typescript
+interface BugReport {
+  id: string;           // Bug ID，格式：BUG-{模块}-{序号}
+  title: string;        // Bug 标题
+  module: string;       // 所属模块
+  page: string;         // 所属页面
+  severity: 'high' | 'medium' | 'low';  // 严重程度
+  steps: string[];      // 复现步骤
+  expected: string;     // 预期结果
+  actual: string;       // 实际结果
+  screenshot?: string;  // 截图路径
+  createdAt: string;    // 发现时间
+  status: 'open' | 'fixed' | 'closed';  // 状态
+}
+```
+
+### 测试结果模型
+
+```typescript
+interface TestResult {
+  taskId: string;       // 任务ID
+  taskName: string;     // 任务名称
+  status: 'pass' | 'fail' | 'skip';  // 测试状态
+  bugs: string[];       // 关联的 Bug ID 列表
+  executedAt: string;   // 执行时间
+  notes?: string;       // 备注
+}
+```
+
+## Error Handling
+
+### 测试异常处理
+
+1. **页面加载超时**
+   - 等待时间：30秒
+   - 超时后记录为 Bug
+
+2. **元素未找到**
+   - 记录元素选择器
+   - 截图保存当前页面状态
+
+3. **API 请求失败**
+   - 记录请求 URL 和响应状态
+   - 检查控制台错误信息
+
+4. **表单提交失败**
+   - 记录表单数据
+   - 记录错误提示信息
+
+## Testing Strategy
+
+### 测试执行顺序
+
+1. 首先测试系统管理模块（确保基础功能正常）
+2. 然后测试用户管理模块
+3. 接着测试商品管理和订单管理
+4. 最后测试营销活动和其他模块
+
+### 测试数据准备
+
+- 使用现有数据库数据进行测试
+- 新增测试数据时使用明显的测试标识（如：测试_xxx）
+- 测试完成后清理测试数据
+
+### Bug 记录规范
+
+每个 Bug 记录文件格式：
+
+```markdown
+# BUG-{模块}-{序号}: {简要描述}
+
+## 基本信息
+
+- **所属模块**: {模块名}
+- **所属页面**: {页面名}
+- **严重程度**: 高/中/低
+- **发现时间**: {时间}
+
+## 复现步骤
+
+1. {步骤1}
+2. {步骤2}
+3. ...
+
+## 预期结果
+
+{预期结果描述}
+
+## 实际结果
+
+{实际结果描述}
+
+## 截图
+
+{截图}
+
+## 备注
+
+{其他备注信息}
+```
--- a/.kiro/specs/admin-ui-testing/requirements.md
+++ b/.kiro/specs/admin-ui-testing/requirements.md
@ -0,0 +1,171 @@
+# Requirements Document
+
+## Introduction
+
+本文档定义了 HoneyBox 后台管理系统 UI 功能测试的需求。测试目标是验证所有页面的按钮功能是否正常工作，包括查询、新增、编辑、删除等操作。测试过程中发现的 bug 将记录在 `docs/后台管理bug整理` 文件夹中。
+
+## Glossary
+
+- **Admin_System**: HoneyBox 后台管理系统
+- **Test_Task**: 针对特定页面功能的测试任务
+- **Bug_Report**: 测试过程中发现的问题记录
+- **CRUD_Operation**: 创建(Create)、读取(Read)、更新(Update)、删除(Delete)操作
+
+## 测试账号信息
+
+- 用户名：admin
+- 密码：admin123
+- 验证码：666666
+
+## Requirements
+
+### Requirement 1: 首页仪表盘测试
+
+**User Story:** 作为测试人员，我需要验证首页仪表盘的数据展示和快捷操作功能是否正常。
+
+#### Acceptance Criteria
+
+1. WHEN 用户登录成功后 THEN Admin_System SHALL 显示首页仪表盘
+2. WHEN 首页加载完成 THEN Admin_System SHALL 显示今日注册用户、今日消费用户、当日消费总金额、总消费金额等统计数据
+3. WHEN 用户点击快捷操作按钮 THEN Admin_System SHALL 跳转到对应的管理页面
+4. WHEN 用户点击主题设置 THEN Admin_System SHALL 允许切换系统主题颜色
+
+### Requirement 2: 用户管理模块测试
+
+**User Story:** 作为测试人员，我需要验证用户管理模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问用户列表页面 THEN Admin_System SHALL 显示用户数据列表
+2. WHEN 用户点击查询按钮 THEN Admin_System SHALL 根据筛选条件查询用户数据
+3. WHEN 用户点击重置按钮 THEN Admin_System SHALL 清空筛选条件
+4. WHEN 用户点击查看详情 THEN Admin_System SHALL 显示用户详细信息
+5. WHEN 用户访问用户盈亏统计页面 THEN Admin_System SHALL 显示用户盈亏数据
+6. WHEN 用户访问VIP等级管理页面 THEN Admin_System SHALL 显示VIP等级列表
+7. WHEN 用户点击新增VIP等级 THEN Admin_System SHALL 显示新增表单弹窗
+8. WHEN 用户点击编辑VIP等级 THEN Admin_System SHALL 显示编辑表单弹窗
+9. WHEN 用户访问用户邀请统计页面 THEN Admin_System SHALL 显示邀请统计数据
+10. WHEN 用户访问用户登录统计页面 THEN Admin_System SHALL 显示登录统计数据
+
+### Requirement 3: 商品管理模块测试
+
+**User Story:** 作为测试人员，我需要验证商品管理模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问盒子管理页面 THEN Admin_System SHALL 显示盒子列表
+2. WHEN 用户点击查询按钮 THEN Admin_System SHALL 根据筛选条件查询盒子数据
+3. WHEN 用户点击新增盒子 THEN Admin_System SHALL 显示新增盒子表单
+4. WHEN 用户点击编辑盒子 THEN Admin_System SHALL 显示编辑盒子表单
+5. WHEN 用户点击删除盒子 THEN Admin_System SHALL 显示删除确认弹窗
+6. WHEN 用户访问盒子类型管理页面 THEN Admin_System SHALL 显示盒子类型列表
+7. WHEN 用户点击新增盒子类型 THEN Admin_System SHALL 显示新增类型表单
+8. WHEN 用户点击编辑盒子类型 THEN Admin_System SHALL 显示编辑类型表单
+
+### Requirement 4: 订单管理模块测试
+
+**User Story:** 作为测试人员，我需要验证订单管理模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问购买订单页面 THEN Admin_System SHALL 显示购买订单列表
+2. WHEN 用户点击查询按钮 THEN Admin_System SHALL 根据筛选条件查询订单数据
+3. WHEN 用户点击查看订单详情 THEN Admin_System SHALL 显示订单详细信息
+4. WHEN 用户访问发货订单页面 THEN Admin_System SHALL 显示发货订单列表
+5. WHEN 用户点击发货操作 THEN Admin_System SHALL 显示发货表单
+6. WHEN 用户访问回收订单页面 THEN Admin_System SHALL 显示回收订单列表
+7. WHEN 用户访问卡单订单页面 THEN Admin_System SHALL 显示卡单订单列表
+8. WHEN 用户访问综合订单页面 THEN Admin_System SHALL 显示综合订单列表
+
+### Requirement 5: 营销活动模块测试
+
+**User Story:** 作为测试人员，我需要验证营销活动模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问优惠券管理页面 THEN Admin_System SHALL 显示优惠券列表
+2. WHEN 用户点击新增优惠券 THEN Admin_System SHALL 显示新增优惠券表单
+3. WHEN 用户点击编辑优惠券 THEN Admin_System SHALL 显示编辑优惠券表单
+4. WHEN 用户访问领取记录页面 THEN Admin_System SHALL 显示优惠券领取记录
+5. WHEN 用户访问广告管理页面 THEN Admin_System SHALL 显示广告列表
+6. WHEN 用户点击新增广告 THEN Admin_System SHALL 显示新增广告表单
+7. WHEN 用户访问周榜奖品页面 THEN Admin_System SHALL 显示周榜奖品列表
+8. WHEN 用户访问周榜记录页面 THEN Admin_System SHALL 显示周榜记录列表
+9. WHEN 用户访问月榜奖品页面 THEN Admin_System SHALL 显示月榜奖品列表
+10. WHEN 用户访问月榜记录页面 THEN Admin_System SHALL 显示月榜记录列表
+11. WHEN 用户访问用户排行榜页面 THEN Admin_System SHALL 显示用户排行榜数据
+
+### Requirement 6: 钻石商城模块测试
+
+**User Story:** 作为测试人员，我需要验证钻石商城模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问钻石商品页面 THEN Admin_System SHALL 显示钻石商品列表
+2. WHEN 用户点击新增钻石商品 THEN Admin_System SHALL 显示新增商品表单
+3. WHEN 用户点击编辑钻石商品 THEN Admin_System SHALL 显示编辑商品表单
+4. WHEN 用户点击删除钻石商品 THEN Admin_System SHALL 显示删除确认弹窗
+
+### Requirement 7: 系统配置模块测试
+
+**User Story:** 作为测试人员，我需要验证系统配置模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问基础设置页面 THEN Admin_System SHALL 显示基础配置表单
+2. WHEN 用户点击保存基础设置 THEN Admin_System SHALL 保存配置并显示成功提示
+3. WHEN 用户访问微信支付配置页面 THEN Admin_System SHALL 显示微信支付配置表单
+4. WHEN 用户访问支付宝配置页面 THEN Admin_System SHALL 显示支付宝配置表单
+5. WHEN 用户访问小程序配置页面 THEN Admin_System SHALL 显示小程序配置表单
+6. WHEN 用户访问H5配置页面 THEN Admin_System SHALL 显示H5配置表单
+7. WHEN 用户访问上传配置页面 THEN Admin_System SHALL 显示上传配置表单
+8. WHEN 用户访问签到配置页面 THEN Admin_System SHALL 显示签到配置表单
+9. WHEN 用户访问系统设置页面 THEN Admin_System SHALL 显示系统设置表单
+
+### Requirement 8: 内容管理模块测试
+
+**User Story:** 作为测试人员，我需要验证内容管理模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问单页管理页面 THEN Admin_System SHALL 显示单页列表
+2. WHEN 用户点击新增单页 THEN Admin_System SHALL 显示新增单页表单
+3. WHEN 用户点击编辑单页 THEN Admin_System SHALL 显示编辑单页表单
+4. WHEN 用户访问悬浮球配置页面 THEN Admin_System SHALL 显示悬浮球配置列表
+5. WHEN 用户点击新增悬浮球 THEN Admin_System SHALL 显示新增悬浮球表单
+6. WHEN 用户访问福利屋入口页面 THEN Admin_System SHALL 显示福利屋入口配置
+
+### Requirement 9: 福利与任务模块测试
+
+**User Story:** 作为测试人员，我需要验证福利与任务模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问奖励管理页面 THEN Admin_System SHALL 显示奖励列表
+2. WHEN 用户点击新增奖励 THEN Admin_System SHALL 显示新增奖励表单
+3. WHEN 用户点击编辑奖励 THEN Admin_System SHALL 显示编辑奖励表单
+4. WHEN 用户访问签到配置页面 THEN Admin_System SHALL 显示签到配置列表
+5. WHEN 用户点击新增签到配置 THEN Admin_System SHALL 显示新增签到配置表单
+6. WHEN 用户访问任务管理页面 THEN Admin_System SHALL 显示任务列表
+7. WHEN 用户点击新增任务 THEN Admin_System SHALL 显示新增任务表单
+8. WHEN 用户访问权益等级页面 THEN Admin_System SHALL 显示权益等级列表
+9. WHEN 用户点击新增权益等级 THEN Admin_System SHALL 显示新增权益等级表单
+
+### Requirement 10: 系统管理模块测试
+
+**User Story:** 作为测试人员，我需要验证系统管理模块的所有功能是否正常工作。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问菜单管理页面 THEN Admin_System SHALL 显示菜单树形列表
+2. WHEN 用户点击新增菜单 THEN Admin_System SHALL 显示新增菜单表单
+3. WHEN 用户点击编辑菜单 THEN Admin_System SHALL 显示编辑菜单表单
+4. WHEN 用户访问角色管理页面 THEN Admin_System SHALL 显示角色列表
+5. WHEN 用户点击新增角色 THEN Admin_System SHALL 显示新增角色表单
+6. WHEN 用户点击分配权限 THEN Admin_System SHALL 显示权限分配弹窗
+7. WHEN 用户访问权限管理页面 THEN Admin_System SHALL 显示权限列表
+8. WHEN 用户访问部门管理页面 THEN Admin_System SHALL 显示部门树形列表
+9. WHEN 用户点击新增部门 THEN Admin_System SHALL 显示新增部门表单
+10. WHEN 用户访问管理员管理页面 THEN Admin_System SHALL 显示管理员列表
+11. WHEN 用户点击新增管理员 THEN Admin_System SHALL 显示新增管理员表单
+12. WHEN 用户访问操作日志页面 THEN Admin_System SHALL 显示操作日志列表
--- a/.kiro/specs/admin-ui-testing/tasks.md
+++ b/.kiro/specs/admin-ui-testing/tasks.md
@ -0,0 +1,285 @@
+# Implementation Plan: 后台管理系统 UI 功能测试
+
+## Overview
+
+本测试计划针对 HoneyBox 后台管理系统的所有页面功能进行测试，验证按钮功能是否正常工作。测试过程中发现的 bug 将记录在 `docs/后台管理bug整理` 文件夹中。
+
+## 测试环境
+
+- 后端服务：`server/HoneyBox/src/HoneyBox.Admin` (dotnet run)
+- 前端服务：`server/HoneyBox/src/HoneyBox.Admin/admin-web` (npm run dev)
+- 访问地址：http://localhost:5173
+- 测试账号：admin / admin123 / 验证码：666666
+
+## Bug 记录格式
+
+每个 bug 记录文件应包含：
+- Bug 标题
+- 所属模块
+- 复现步骤
+- 预期结果
+- 实际结果
+- 截图（如有）
+- 严重程度（高/中/低）
+
+## Tasks
+
+- [ ] 1. 首页仪表盘测试
+  - [ ] 1.1 验证首页数据统计卡片显示
+    - 检查今日注册用户、今日消费用户、当日消费总金额、总消费金额是否正常显示
+    - 检查管理员数量、角色数量、菜单数量、部门数量是否正常显示
+    - _Requirements: 1.1, 1.2_
+  - [ ] 1.2 验证快捷操作功能
+    - 点击"管理员管理"快捷按钮，验证跳转
+    - 点击"角色管理"快捷按钮，验证跳转
+    - 点击"菜单管理"快捷按钮，验证跳转
+    - 点击"部门管理"快捷按钮，验证跳转
+    - _Requirements: 1.3_
+  - [ ] 1.3 验证主题设置功能
+    - 点击不同主题颜色，验证主题切换
+    - 测试自定义主题功能
+    - _Requirements: 1.4_
+
+- [ ] 2. 用户管理模块测试
+  - [ ] 2.1 用户列表页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能（按用户名、手机号等筛选）
+    - 测试重置按钮功能
+    - 测试分页功能
+    - 测试查看用户详情功能
+    - _Requirements: 2.1, 2.2, 2.3, 2.4_
+  - [ ] 2.2 用户盈亏统计页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - 测试导出功能（如有）
+    - _Requirements: 2.5_
+  - [ ] 2.3 VIP等级管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增VIP等级功能
+    - 测试编辑VIP等级功能
+    - 测试删除VIP等级功能
+    - _Requirements: 2.6, 2.7, 2.8_
+  - [ ] 2.4 用户邀请统计页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 2.9_
+  - [ ] 2.5 用户登录统计页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 2.10_
+
+- [ ] 3. 商品管理模块测试
+  - [ ] 3.1 盒子管理页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - 测试新增盒子功能
+    - 测试编辑盒子功能
+    - 测试删除盒子功能
+    - 测试上下架功能
+    - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_
+  - [ ] 3.2 盒子类型管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增盒子类型功能
+    - 测试编辑盒子类型功能
+    - 测试删除盒子类型功能
+    - _Requirements: 3.6, 3.7, 3.8_
+
+- [ ] 4. 订单管理模块测试
+  - [ ] 4.1 购买订单页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能（按订单号、用户、时间等筛选）
+    - 测试查看订单详情功能
+    - 测试分页功能
+    - _Requirements: 4.1, 4.2, 4.3_
+  - [ ] 4.2 发货订单页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - 测试发货操作功能
+    - 测试批量发货功能（如有）
+    - _Requirements: 4.4, 4.5_
+  - [ ] 4.3 回收订单页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - 测试回收处理功能
+    - _Requirements: 4.6_
+  - [ ] 4.4 卡单订单页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - 测试处理卡单功能
+    - _Requirements: 4.7_
+  - [ ] 4.5 综合订单页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 4.8_
+
+- [ ] 5. 营销活动模块测试
+  - [ ] 5.1 优惠券管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增优惠券功能
+    - 测试编辑优惠券功能
+    - 测试删除优惠券功能
+    - 测试启用/禁用功能
+    - _Requirements: 5.1, 5.2, 5.3_
+  - [ ] 5.2 领取记录页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 5.4_
+  - [ ] 5.3 广告管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增广告功能
+    - 测试编辑广告功能
+    - 测试删除广告功能
+    - _Requirements: 5.5, 5.6_
+  - [ ] 5.4 周榜奖品页面测试
+    - 验证页面加载和数据显示
+    - 测试新增/编辑/删除功能
+    - _Requirements: 5.7_
+  - [ ] 5.5 周榜记录页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 5.8_
+  - [ ] 5.6 月榜奖品页面测试
+    - 验证页面加载和数据显示
+    - 测试新增/编辑/删除功能
+    - _Requirements: 5.9_
+  - [ ] 5.7 月榜记录页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 5.10_
+  - [ ] 5.8 用户排行榜页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - _Requirements: 5.11_
+
+- [ ] 6. 钻石商城模块测试
+  - [ ] 6.1 钻石商品页面测试
+    - 验证页面加载和数据显示
+    - 测试新增钻石商品功能
+    - 测试编辑钻石商品功能
+    - 测试删除钻石商品功能
+    - 测试上下架功能
+    - _Requirements: 6.1, 6.2, 6.3, 6.4_
+
+- [ ] 7. 系统配置模块测试
+  - [ ] 7.1 基础设置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.1, 7.2_
+  - [ ] 7.2 微信支付配置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.3_
+  - [ ] 7.3 支付宝配置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.4_
+  - [ ] 7.4 小程序配置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.5_
+  - [ ] 7.5 H5配置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.6_
+  - [ ] 7.6 上传配置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.7_
+  - [ ] 7.7 签到配置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.8_
+  - [ ] 7.8 系统设置页面测试
+    - 验证页面加载和表单显示
+    - 测试保存配置功能
+    - _Requirements: 7.9_
+
+- [ ] 8. 内容管理模块测试
+  - [ ] 8.1 单页管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增单页功能
+    - 测试编辑单页功能
+    - 测试删除单页功能
+    - _Requirements: 8.1, 8.2, 8.3_
+  - [ ] 8.2 悬浮球配置页面测试
+    - 验证页面加载和数据显示
+    - 测试新增悬浮球功能
+    - 测试编辑悬浮球功能
+    - 测试删除悬浮球功能
+    - _Requirements: 8.4, 8.5_
+  - [ ] 8.3 福利屋入口页面测试
+    - 验证页面加载和配置显示
+    - 测试保存配置功能
+    - _Requirements: 8.6_
+
+- [ ] 9. 福利与任务模块测试
+  - [ ] 9.1 奖励管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增奖励功能
+    - 测试编辑奖励功能
+    - 测试删除奖励功能
+    - _Requirements: 9.1, 9.2, 9.3_
+  - [ ] 9.2 签到配置页面测试
+    - 验证页面加载和数据显示
+    - 测试新增签到配置功能
+    - 测试编辑签到配置功能
+    - 测试删除签到配置功能
+    - _Requirements: 9.4, 9.5_
+  - [ ] 9.3 任务管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增任务功能
+    - 测试编辑任务功能
+    - 测试删除任务功能
+    - _Requirements: 9.6, 9.7_
+  - [ ] 9.4 权益等级页面测试
+    - 验证页面加载和数据显示
+    - 测试新增权益等级功能
+    - 测试编辑权益等级功能
+    - 测试删除权益等级功能
+    - _Requirements: 9.8, 9.9_
+
+- [ ] 10. 系统管理模块测试
+  - [ ] 10.1 菜单管理页面测试
+    - 验证页面加载和树形菜单显示
+    - 测试新增菜单功能
+    - 测试编辑菜单功能
+    - 测试删除菜单功能
+    - _Requirements: 10.1, 10.2, 10.3_
+  - [ ] 10.2 角色管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增角色功能
+    - 测试编辑角色功能
+    - 测试删除角色功能
+    - 测试分配权限功能
+    - _Requirements: 10.4, 10.5, 10.6_
+  - [ ] 10.3 权限管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增权限功能
+    - 测试编辑权限功能
+    - 测试删除权限功能
+    - _Requirements: 10.7_
+  - [ ] 10.4 部门管理页面测试
+    - 验证页面加载和树形部门显示
+    - 测试新增部门功能
+    - 测试编辑部门功能
+    - 测试删除部门功能
+    - _Requirements: 10.8, 10.9_
+  - [ ] 10.5 管理员管理页面测试
+    - 验证页面加载和数据显示
+    - 测试新增管理员功能
+    - 测试编辑管理员功能
+    - 测试删除管理员功能
+    - 测试重置密码功能
+    - _Requirements: 10.10, 10.11_
+  - [ ] 10.6 操作日志页面测试
+    - 验证页面加载和数据显示
+    - 测试查询功能
+    - 测试分页功能
+    - _Requirements: 10.12_
+
+## Notes
+
+- 每个测试任务完成后，如发现 bug，需在 `docs/后台管理bug整理` 文件夹中创建对应的 bug 记录文件
+- Bug 文件命名格式：`BUG-{模块名}-{序号}-{简要描述}.md`
+- 测试过程中需要截图保存关键步骤
+- 优先测试核心功能（CRUD操作），再测试辅助功能
--- a/.kiro/specs/dashboard-overview/design.md
+++ b/.kiro/specs/dashboard-overview/design.md
@ -0,0 +1,202 @@
+# Design Document: 仪表盘数据概览卡片
+
+## Overview
+
+本设计文档描述仪表盘数据概览卡片模块的技术实现方案。该模块是后台管理系统的首页核心组件，展示关键业务统计数据。
+
+后端API已完成实现（`DashboardController.GetOverview`），本次迁移主要是前端页面的开发和集成。
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Dashboard Page                            │
+│  ┌─────────────────────────────────────────────────────┐    │
+│  │              Overview Cards Section                  │    │
+│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│    │
+│  │  │ 今日注册 │ │ 今日消费 │ │ 当日消费 │ │ 总消费   ││    │
+│  │  │ 用户数   │ │ 用户数   │ │ 总金额   │ │ 金额     ││    │
+│  │  └──────────┘ └──────────┘ └──────────┘ └──────────┘│    │
+│  └─────────────────────────────────────────────────────┘    │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    API Layer                                 │
+│  src/api/business/dashboard.ts                              │
+│  - getDashboardOverview(): Promise<DashboardOverview>       │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    Backend API                               │
+│  GET /api/admin/business/dashboard                          │
+│  Response: DashboardOverviewResponse                        │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Components and Interfaces
+
+### 1. 前端API模块
+
+**文件**: `src/api/business/dashboard.ts`
+
+```typescript
+// 仪表盘概览响应接口
+export interface DashboardOverview {
+  todayRegistrations: number;    // 今日注册用户数
+  todayConsumption: number;      // 今日消费金额
+  todayNewConsumers: number;     // 今日消费用户数
+  totalAdRevenue: number;        // 总广告收入
+  totalUsers: number;            // 总用户数
+  totalOrders: number;           // 总订单数
+  totalConsumption: number;      // 总消费金额
+}
+
+// 获取仪表盘概览数据
+export function getDashboardOverview(): Promise<DashboardOverview>;
+```
+
+### 2. 仪表盘页面组件
+
+**文件**: `src/views/dashboard/index.vue`
+
+**组件结构**:
+- 数据概览卡片区域（4个卡片）
+- 欢迎信息区域（保留现有）
+- 系统信息区域（保留现有）
+- 快捷操作区域（保留现有）
+
+### 3. 数据概览卡片配置
+
+```typescript
+// 卡片配置接口
+interface OverviewCardConfig {
+  key: string;                    // 数据字段名
+  label: string;                  // 显示标签
+  icon: Component;                // 图标组件
+  gradient: string;               // 渐变背景色
+  isCurrency: boolean;            // 是否为金额类型
+}
+
+// 卡片配置列表
+const cardConfigs: OverviewCardConfig[] = [
+  {
+    key: 'todayRegistrations',
+    label: '今日注册用户',
+    icon: UserFilled,
+    gradient: 'linear-gradient(-125deg, #57bdbf, #2f9de2)',
+    isCurrency: false
+  },
+  {
+    key: 'todayNewConsumers',
+    label: '今日消费用户',
+    icon: ShoppingCart,
+    gradient: 'linear-gradient(-125deg, #e91dab, #ffd026)',
+    isCurrency: false
+  },
+  {
+    key: 'todayConsumption',
+    label: '当日消费总金额',
+    icon: Money,
+    gradient: 'linear-gradient(-125deg, #ff7d7d, #fb2c95)',
+    isCurrency: true
+  },
+  {
+    key: 'totalConsumption',
+    label: '总消费金额',
+    icon: Wallet,
+    gradient: 'linear-gradient(-125deg, #999, #999)',
+    isCurrency: true
+  }
+];
+```
+
+## Data Models
+
+### 后端响应模型（已存在）
+
+```csharp
+public class DashboardOverviewResponse
+{
+    public int TodayRegistrations { get; set; }
+    public decimal TodayConsumption { get; set; }
+    public int TodayNewConsumers { get; set; }
+    public decimal TotalAdRevenue { get; set; }
+    public int TotalUsers { get; set; }
+    public int TotalOrders { get; set; }
+    public decimal TotalConsumption { get; set; }
+}
+```
+
+### 前端数据模型
+
+```typescript
+// 仪表盘状态
+interface DashboardState {
+  loading: boolean;
+  error: string | null;
+  overview: DashboardOverview | null;
+}
+```
+
+## Correctness Properties
+
+*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
+
+### Property 1: 卡片结构完整性
+
+*For any* 数据概览卡片，该卡片 SHALL 包含图标、数值和标签三个必要元素。
+
+**Validates: Requirements 2.2**
+
+### Property 2: 金额格式化正确性
+
+*For any* 金额类型的数值，格式化后的字符串 SHALL 包含货币符号且数值部分与原始数值相等。
+
+**Validates: Requirements 2.4**
+
+### Property 3: API响应数据展示一致性
+
+*For any* 有效的API响应数据，所有统计字段 SHALL 被正确映射到对应的卡片并展示。
+
+**Validates: Requirements 3.2**
+
+## Error Handling
+
+### API请求错误
+
+1. **网络错误**: 显示"网络连接失败，请检查网络"提示
+2. **服务器错误(5xx)**: 显示"服务器繁忙，请稍后重试"提示
+3. **权限错误(403)**: 显示"无权限访问此页面"提示
+4. **其他错误**: 显示通用错误提示
+
+### 数据展示降级
+
+当API请求失败时，所有统计数值显示为默认值0，确保页面正常渲染。
+
+## Testing Strategy
+
+### 单元测试
+
+1. **API模块测试**
+   - 测试API端点配置正确性
+   - 测试响应数据类型转换
+
+2. **格式化函数测试**
+   - 测试金额格式化函数
+   - 测试边界值（0、负数、大数值）
+
+### 属性测试
+
+使用 Vitest 进行属性测试：
+
+1. **Property 1**: 验证卡片配置完整性
+2. **Property 2**: 验证金额格式化正确性
+3. **Property 3**: 验证数据映射一致性
+
+### 集成测试
+
+1. 测试页面加载时API调用
+2. 测试错误处理和降级展示
+
--- a/.kiro/specs/dashboard-overview/requirements.md
+++ b/.kiro/specs/dashboard-overview/requirements.md
@ -0,0 +1,54 @@
+# 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 显示无权限提示
+
--- a/.kiro/specs/dashboard-overview/tasks.md
+++ b/.kiro/specs/dashboard-overview/tasks.md
@ -0,0 +1,71 @@
+# Implementation Plan: 仪表盘数据概览卡片
+
+## Overview
+
+本实现计划将仪表盘数据概览卡片从老项目迁移到新项目。后端API已完成，主要工作是前端API层开发和页面更新。
+
+## Tasks
+
+- [x] 1. 验证后端API
+  - [x] 1.1 测试仪表盘API可用性
+    - 使用Swagger或Postman测试 `GET /api/admin/business/dashboard`
+    - 验证返回数据结构符合预期
+    - 确认权限验证正常工作
+    - _Requirements: 3.1_
+
+- [x] 2. 前端API层开发
+  - [x] 2.1 创建仪表盘API模块
+    - 创建 `src/api/business/dashboard.ts`
+    - 定义 `DashboardOverview` TypeScript接口
+    - 实现 `getDashboardOverview` API调用函数
+    - _Requirements: 3.1, 3.3_
+
+- [x] 3. 前端页面开发
+  - [x] 3.1 更新仪表盘页面数据概览卡片
+    - 更新 `src/views/dashboard/index.vue`
+    - 定义卡片配置数组（4个卡片）
+    - 实现数据加载逻辑（调用API）
+    - 实现错误处理和降级展示
+    - _Requirements: 1.1, 1.6, 1.7_
+
+  - [x] 3.2 实现数据概览卡片样式
+    - 实现4种渐变背景色（蓝绿、粉黄、红粉、灰色）
+    - 实现卡片悬停动画效果
+    - 实现响应式布局
+    - _Requirements: 1.2, 1.3, 1.4, 1.5, 2.1, 2.3_
+
+  - [x] 3.3 实现金额格式化
+    - 创建金额格式化工具函数
+    - 应用到金额类型卡片
+    - _Requirements: 2.4_
+
+- [x] 4. Checkpoint - 功能验证
+  - 确保仪表盘页面正常显示4个数据概览卡片
+  - 测试数据加载和展示
+  - 测试错误处理
+  - 确保所有测试通过，如有问题询问用户
+
+- [ ] 5. 属性测试
+  - [ ] 5.1 编写卡片配置完整性属性测试
+    - **Property 1: 卡片结构完整性**
+    - **Validates: Requirements 2.2**
+
+  - [ ] 5.2 编写金额格式化属性测试
+    - **Property 2: 金额格式化正确性**
+    - **Validates: Requirements 2.4**
+
+  - [ ] 5.3 编写数据映射一致性属性测试
+    - **Property 3: API响应数据展示一致性**
+    - **Validates: Requirements 3.2**
+
+- [ ] 6. Final Checkpoint - 最终验证
+  - 确保所有功能正常工作
+  - 确保所有测试通过
+  - 如有问题，询问用户
+
+## Notes
+
+- 后端API已完成，无需后端开发
+- 每个Checkpoint确保增量验证
+- 属性测试验证通用正确性属性
+
--- a/docs/任务文档.md
+++ b/docs/任务文档.md
@ -0,0 +1,45 @@
+docs\后台管理系统迁移批次规划.md
+docs\后台管理系统-功能分析清单.md
+
+你看一下文档，我们要开始创建迁移任务了，迁移 #### 1.1 仪表盘模块  
+我们只创建任务，不去执行。
+我们这次只需要 数据概览卡片，其他的功能不需要
+有个问题，我不知道后端接口是否真的完成了，所以需要你在做的过程中去验证，如果完成了，是最好的，没有完成需要新增对应的接口
+.kiro\specs\user-management-frontend 这个是用户管理的任务规划，
+.kiro\specs\goods-management-frontend 这个是盒子管理的任务规划
+.kiro\specs\order-management-frontend 这个是订单管理
+.kiro\specs\diamond-mall-frontend 这个是商城管理
+你可以参考之前任务是怎么规划分配的
+本次的项目背景是：
+
+server\php\app
+
+这个是老项目的代码
+
+server\php\app\admin
+
+这个是老项目的后台
+
+server\php\app\admin\view
+
+这个是视图页面，以前项目使用的是layui写的
+
+现在我们要迁移到新项目中，新项目使用的是C# 
+
+server\HoneyBox
+
+这个是新项目代码
+
+server\HoneyBox\src\HoneyBox.Admin\admin-web
+
+这个是新项目后台管理页面
+
+
+
+现在我们要开始测试后台管理的页面功能是否正常，我们要通过浏览器去进行测试
+server\HoneyBox\src\HoneyBox.Admin 这个是后台管理项目C#，需要你自己去启动。
+server\HoneyBox\src\HoneyBox.Admin\admin-web 这个是后台管理前端，需要你自己去启动。
+后台账号 admin admin123  验证码：666666
+我们在测试过程中，如果碰到了bug，需要记录一下，怎么触发的。要方便我们后期bug修改。文档放在 docs\后台管理bug整理 文件夹下面
+这个是项目背景，由于项目功能有点多，所以我们需要你登录后，看到对应的菜单，然后我们来根据菜单，去创建对应的测试任务。
+主要测试功为：页面上的按钮功能是否正常，如点击查询是否正常进行查询，点击新增是否正常等等。
--- a/docs/后台管理bug整理/用户管理.md
+++ b/docs/后台管理bug整理/用户管理.md
@ -1,8 +0,0 @@
-## 执行任务：
-.kiro\specs\user-management-frontend
-## bug:
-v26010701：
-页面地址：business/user/list
-描述：用户管理页面输入手机号点击查询后可以正常查询，然后我把手机号内容删除掉，点击查询，还是查出来一样的用户，查看网络接口请求,发生手机号参数还被带入请求参数。点击重置后，请求接口参数正常，可以查询出全部，后续试了昵称也是一样，只有点击重置才能情况参数，否则参数被修改点击查询也无法生效。
-是否修复：是
-修复说明：修改 index.vue 中的 handleSearch 函数，在合并新搜索参数前先清除所有旧的搜索参数，确保清空输入框后点击查询能正确更新请求参数。
--- a/server/HoneyBox/src/HoneyBox.Admin/Services/AuthService.cs
+++ b/server/HoneyBox/src/HoneyBox.Admin/Services/AuthService.cs
@ -45,12 +45,14 @@ public class AuthService : IAuthService
    /// <inheritdoc />
    public async Task<LoginResponse> LoginAsync(LoginRequest request, string ipAddress)
    {
-        // 1. 首先验证验证码（优先于密码校验）
+        // 1. 首先验证验证码（优先于密码校验）临时注释，上线在启用
+#if !DEBUG
        if (!_captchaService.Validate(request.CaptchaKey, request.CaptchaCode))
        {
            _logger.LogWarning("登录失败：验证码错误或已过期，用户名: {Username}", request.Username);
            throw new AdminException(AdminErrorCodes.CaptchaInvalid, "验证码错误或已过期");
        }
+#endif

        // 2. 查找用户
        var user = await _dbContext.AdminUsers
--- a/server/HoneyBox/src/HoneyBox.Admin/admin-web/src/api/business/dashboard.ts
+++ b/server/HoneyBox/src/HoneyBox.Admin/admin-web/src/api/business/dashboard.ts
@ -0,0 +1,41 @@
+import { request, type ApiResponse } from '@/utils/request'
+
+// ==================== 仪表盘类型定义 ====================
+
+/**
+ * 仪表盘概览响应
+ * 包含关键业务统计数据
+ */
+export interface DashboardOverview {
+  /** 今日注册用户数 */
+  todayRegistrations: number
+  /** 今日消费金额 */
+  todayConsumption: number
+  /** 今日消费用户数 */
+  todayNewConsumers: number
+  /** 总广告收入 */
+  totalAdRevenue: number
+  /** 总用户数 */
+  totalUsers: number
+  /** 总订单数 */
+  totalOrders: number
+  /** 总消费金额 */
+  totalConsumption: number
+}
+
+// ==================== API 基础路径 ====================
+
+const DASHBOARD_BASE_URL = '/admin/business/dashboard'
+
+// ==================== 仪表盘 API ====================
+
+/**
+ * 获取仪表盘概览数据
+ * @returns 仪表盘概览统计数据
+ */
+export function getDashboardOverview(): Promise<ApiResponse<DashboardOverview>> {
+  return request({
+    url: DASHBOARD_BASE_URL,
+    method: 'get'
+  })
+}
--- a/server/HoneyBox/src/HoneyBox.Admin/admin-web/src/utils/format.ts
+++ b/server/HoneyBox/src/HoneyBox.Admin/admin-web/src/utils/format.ts
@ -0,0 +1,32 @@
+/**
+ * 格式化工具函数
+ */
+
+/**
+ * 格式化金额为货币格式
+ * @param value 金额数值
+ * @param symbol 货币符号，默认为人民币符号 ¥
+ * @returns 格式化后的货币字符串
+ * @example
+ * formatCurrency(1234.5) // '¥1,234.50'
+ * formatCurrency(0) // '¥0.00'
+ * formatCurrency(-100) // '¥-100.00'
+ */
+export function formatCurrency(value: number, symbol: string = '¥'): string {
+  const formattedNumber = value.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+  return `${symbol}${formattedNumber}`
+}
+
+/**
+ * 格式化数字，添加千分位分隔符
+ * @param value 数值
+ * @returns 格式化后的数字字符串
+ * @example
+ * formatNumber(1234567) // '1,234,567'
+ */
+export function formatNumber(value: number): string {
+  return value.toLocaleString('zh-CN')
+}
--- a/server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/dashboard/index.vue
+++ b/server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/dashboard/index.vue
@ -1,6 +1,34 @@
 <template>
  <div class="dashboard-container">
-    <el-row :gutter="20">
+    <!-- 数据概览卡片区域 -->
+    <el-row :gutter="20" class="overview-cards">
+      <el-col 
+        v-for="card in overviewCards" 
+        :key="card.key" 
+        :xs="24" 
+        :sm="12" 
+        :md="6"
+      >
+        <div 
+          class="overview-card" 
+          :style="{ background: card.gradient }"
+          v-loading="overviewLoading"
+        >
+          <div class="overview-card-icon">
+            <el-icon size="40"><component :is="card.icon" /></el-icon>
+          </div>
+          <div class="overview-card-content">
+            <div class="overview-card-value">
+              {{ card.isCurrency ? formatCurrency(getOverviewValue(card.key)) : getOverviewValue(card.key) }}
+            </div>
+            <div class="overview-card-label">{{ card.label }}</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 系统统计卡片区域 -->
+    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon stat-icon-primary">
@ -102,12 +130,107 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { User, UserFilled, Menu, OfficeBuilding } from '@element-plus/icons-vue'
+import { ref, onMounted, type Component } from 'vue'
+import { User, UserFilled, Menu, OfficeBuilding, ShoppingCart, Money, Wallet } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/store/modules/user'
+import { getDashboardOverview, type DashboardOverview } from '@/api/business/dashboard'
+import { formatCurrency } from '@/utils/format'

 const userStore = useUserStore()

+// ==================== 数据概览卡片配置 ====================
+
+interface OverviewCardConfig {
+  key: keyof DashboardOverview
+  label: string
+  icon: Component
+  gradient: string
+  isCurrency: boolean
+}
+
+const overviewCards: OverviewCardConfig[] = [
+  {
+    key: 'todayRegistrations',
+    label: '今日注册用户',
+    icon: UserFilled,
+    gradient: 'linear-gradient(-125deg, #57bdbf, #2f9de2)',
+    isCurrency: false
+  },
+  {
+    key: 'todayNewConsumers',
+    label: '今日消费用户',
+    icon: ShoppingCart,
+    gradient: 'linear-gradient(-125deg, #e91dab, #ffd026)',
+    isCurrency: false
+  },
+  {
+    key: 'todayConsumption',
+    label: '当日消费总金额',
+    icon: Money,
+    gradient: 'linear-gradient(-125deg, #ff7d7d, #fb2c95)',
+    isCurrency: true
+  },
+  {
+    key: 'totalConsumption',
+    label: '总消费金额',
+    icon: Wallet,
+    gradient: 'linear-gradient(-125deg, #999, #999)',
+    isCurrency: true
+  }
+]
+
+// ==================== 数据概览状态 ====================
+
+const overviewLoading = ref(false)
+const overviewData = ref<DashboardOverview | null>(null)
+
+/**
+ * 获取概览数据值
+ * @param key 数据字段名
+ * @returns 对应的数值，如果数据未加载则返回0
+ */
+function getOverviewValue(key: keyof DashboardOverview): number {
+  return overviewData.value?.[key] ?? 0
+}
+
+/**
+ * 加载仪表盘概览数据
+ */
+async function loadOverviewData() {
+  overviewLoading.value = true
+  try {
+    const response = await getDashboardOverview()
+    if (response.success && response.data) {
+      overviewData.value = response.data
+    } else {
+      ElMessage.warning(response.message || '获取概览数据失败')
+      // 降级展示默认值
+      overviewData.value = null
+    }
+  } catch (error: unknown) {
+    console.error('加载概览数据失败:', error)
+    // 根据错误类型显示不同提示
+    if (error instanceof Error) {
+      if (error.message.includes('403') || error.message.includes('权限')) {
+        ElMessage.error('无权限访问此页面')
+      } else if (error.message.includes('network') || error.message.includes('Network')) {
+        ElMessage.error('网络连接失败，请检查网络')
+      } else {
+        ElMessage.error('服务器繁忙，请稍后重试')
+      }
+    } else {
+      ElMessage.error('获取概览数据失败')
+    }
+    // 降级展示默认值
+    overviewData.value = null
+  } finally {
+    overviewLoading.value = false
+  }
+}
+
+// ==================== 系统统计数据 ====================
+
 const stats = ref({
  userCount: 0,
  roleCount: 0,
@ -118,7 +241,10 @@ const stats = ref({
 const loginTime = ref(new Date().toLocaleString())

 onMounted(() => {
-  // 模拟统计数据，实际应从 API 获取
+  // 加载业务概览数据
+  loadOverviewData()
+  
+  // 模拟系统统计数据，实际应从 API 获取
  stats.value = {
    userCount: 1,
    roleCount: 1,
@ -133,6 +259,83 @@ onMounted(() => {
  padding: 0;
 }

+/* ==================== 数据概览卡片样式 ==================== */
+
+.overview-cards {
+  margin-bottom: 20px;
+}
+
+.overview-card {
+  display: flex;
+  align-items: center;
+  padding: 24px;
+  border-radius: var(--border-radius-large, 8px);
+  color: #fff;
+  transition: all 0.3s ease;
+  cursor: default;
+  min-height: 100px;
+}
+
+.overview-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.overview-card-icon {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.overview-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.overview-card-value {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.overview-card-label {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-top: 4px;
+}
+
+/* 响应式布局调整 */
+@media (max-width: 768px) {
+  .overview-card {
+    padding: 16px;
+    min-height: 80px;
+  }
+  
+  .overview-card-icon {
+    width: 48px;
+    height: 48px;
+  }
+  
+  .overview-card-value {
+    font-size: 22px;
+  }
+  
+  .overview-card-label {
+    font-size: 12px;
+  }
+}
+
+/* ==================== 系统统计卡片样式 ==================== */
+
 .stat-card {
  display: flex;
  align-items: center;