AIGC/demo/DASHBOARD_README.md

数据仪表盘功能说明

功能概述

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

核心指标

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

图表展示

• 日活用户趋势: 最近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字段）：

   -- 运行 migration_add_created_at.sql
   

3. 数据库中有用户、订单、支付数据

前端

1. 安装依赖：

   cd demo/frontend
   npm install
   

2. 启动前端服务：

   npm run dev
   

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

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

数据库迁移

如果users表没有created_at字段，需要运行迁移脚本：

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. 建议在生产环境中添加数据缓存机制

扩展功能

可以考虑添加的功能：

• 数据导出功能
• 自定义时间范围查询
• 实时数据更新
• 更多图表类型
• 数据对比分析