# 数据仪表盘功能说明

## 功能概述

数据仪表盘是一个系统数据概览页面，提供以下关键指标和图表：

### 核心指标
- **用户总数**: 系统中注册用户的总数量
- **付费用户数**: 有成功支付记录的用户数量
- **今日收入**: 当天成功支付的金额总和
- **转化率**: 付费用户数占总用户数的百分比

### 图表展示
- **日活用户趋势**: 最近30天的日活跃用户数量变化
- **收入趋势**: 最近30天的收入变化情况
- **订单状态分布**: 不同订单状态的分布饼图
- **支付方式分布**: 不同支付方式的使用情况

### 数据列表
- **最近订单**: 显示最新的10个订单信息

## 技术实现

### 后端实现
- `DashboardService`: 提供数据统计和计算服务
- `DashboardApiController`: 提供RESTful API接口
- 支持的数据源：用户、订单、支付记录

### 前端实现
- `Dashboard.vue`: 主要仪表盘组件
- `dashboard.js`: API调用封装
- 使用ECharts进行图表渲染
- 响应式设计，支持移动端访问

## 访问权限

- 需要管理员权限才能访问
- 路径：`/admin/dashboard`
- API路径：`/api/dashboard/**`

## 安装和运行

### 后端
1. 确保Spring Boot应用正常运行
2. 运行数据库迁移脚本（为users表添加created_at字段）：
   ```sql
   -- 运行 migration_add_created_at.sql
   ```
3. 数据库中有用户、订单、支付数据

### 前端
1. 安装依赖：
   ```bash
   cd demo/frontend
   npm install
   ```

2. 启动前端服务：
   ```bash
   npm run dev
   ```

3. 使用管理员账户登录后访问仪表盘

**注意**: ECharts图表库通过CDN动态加载，无需额外安装npm包

### 数据库迁移
如果users表没有created_at字段，需要运行迁移脚本：
```sql
ALTER TABLE users ADD COLUMN created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP;
UPDATE users SET created_at = CURRENT_TIMESTAMP WHERE created_at IS NULL;
```

## API接口

### 获取所有数据
```
GET /api/dashboard/all
```

### 单独获取各项数据
- `GET /api/dashboard/overview` - 概览数据
- `GET /api/dashboard/daily-active-users` - 日活数据
- `GET /api/dashboard/revenue-trend` - 收入趋势
- `GET /api/dashboard/order-status-distribution` - 订单状态分布
- `GET /api/dashboard/payment-method-distribution` - 支付方式分布
- `GET /api/dashboard/recent-orders` - 最近订单

## 注意事项

1. 所有API都需要管理员权限
2. 数据统计基于现有数据库记录
3. 图表数据为最近30天的趋势
4. 需要确保数据库中有足够的测试数据
5. 建议在生产环境中添加数据缓存机制

## 扩展功能

可以考虑添加的功能：
- 数据导出功能
- 自定义时间范围查询
- 实时数据更新
- 更多图表类型
- 数据对比分析