236 lines
7.2 KiB
Markdown
236 lines
7.2 KiB
Markdown
# 仪表盘接口实现清单
|
||
|
||
## 需要实现的接口总览
|
||
|
||
后端需要实现以下3个核心接口来支持前端仪表盘功能:
|
||
|
||
### 1. 获取仪表盘统计数据
|
||
- **接口**: `GET /coder/dashboard/getStatistics`
|
||
- **权限**: `dashboard:view`
|
||
- **功能**: 获取用户、登录、存储、活跃度等核心统计数据
|
||
|
||
### 2. 获取登录趋势数据
|
||
- **接口**: `GET /coder/dashboard/getLoginTrend`
|
||
- **权限**: `dashboard:view`
|
||
- **功能**: 获取最近N天的登录趋势图表数据
|
||
|
||
### 3. 获取完整仪表盘数据(推荐)
|
||
- **接口**: `GET /coder/dashboard/getAllData`
|
||
- **权限**: `dashboard:view`
|
||
- **功能**: 一次性获取所有仪表盘数据,减少前端请求次数
|
||
|
||
## 实现优先级
|
||
|
||
### 🔴 高优先级(必须实现)
|
||
1. **getAllData接口** - 前端仪表盘主要依赖此接口
|
||
2. **用户统计数据** - 核心统计卡片必需
|
||
3. **登录趋势数据** - 登录趋势图表必需
|
||
|
||
### 🟡 中优先级(建议实现)
|
||
4. **存储统计数据** - 存储相关统计卡片
|
||
5. **今日活跃统计** - 活跃度统计卡片
|
||
|
||
### 🟢 低优先级(可选实现)
|
||
6. **单独的统计接口** - 可根据需要拆分实现
|
||
7. **高级缓存策略** - 性能优化
|
||
8. **实时数据推送** - WebSocket实时更新
|
||
|
||
## 核心数据结构
|
||
|
||
### 前端期望的数据格式
|
||
```typescript
|
||
interface DashboardData {
|
||
userStats: {
|
||
totalUsers: number // 总用户数
|
||
todayNewUsers: number // 今日新增
|
||
activeUsers: number // 活跃用户
|
||
onlineUsers: number // 在线用户
|
||
}
|
||
loginStats: {
|
||
todayLogins: number // 今日登录
|
||
totalLogins: number // 累计登录
|
||
loginTrend: Array<{ // 登录趋势
|
||
date: string // 日期
|
||
count: number // 登录次数
|
||
label: string // 显示标签
|
||
}>
|
||
}
|
||
storageStats: {
|
||
totalFiles: number // 总文件数
|
||
totalImages: number // 总图片数
|
||
totalSize: string // 总大小
|
||
todayUploads: number // 今日上传
|
||
storageUsage: number // 使用率%
|
||
availableSpace: string // 可用空间
|
||
}
|
||
dailyActivityStats: {
|
||
todayVisits: number // 今日访问
|
||
todayOperations: number // 今日操作
|
||
activeUsers: number // 活跃用户
|
||
newContent: number // 新增内容
|
||
apiCalls: number // API调用
|
||
avgResponseTime: number // 平均响应时间
|
||
}
|
||
systemStatus?: {
|
||
diskUsage: number // 磁盘使用率%
|
||
memoryUsage: number // 内存使用率%
|
||
cpuUsage: number // CPU使用率%
|
||
systemHealth: string // 系统健康状态
|
||
uptime: string // 运行时间
|
||
lastBackup: string // 最后备份时间
|
||
}
|
||
}
|
||
```
|
||
|
||
## 数据来源映射
|
||
|
||
### 用户统计 (userStats)
|
||
- `totalUsers`: `SELECT COUNT(*) FROM sys_login_user`
|
||
- `todayNewUsers`: `SELECT COUNT(*) FROM sys_login_user WHERE DATE(create_time) = CURDATE()`
|
||
- `activeUsers`: `SELECT COUNT(DISTINCT user_id) FROM sys_login_log WHERE login_time >= DATE_SUB(NOW(), INTERVAL 30 DAY)`
|
||
- `onlineUsers`: 通过Sa-Token获取当前在线会话数
|
||
|
||
### 登录统计 (loginStats)
|
||
- `todayLogins`: `SELECT COUNT(*) FROM sys_login_log WHERE DATE(login_time) = CURDATE() AND status = 'success'`
|
||
- `totalLogins`: `SELECT COUNT(*) FROM sys_login_log WHERE status = 'success'`
|
||
- `loginTrend`: `SELECT DATE(login_time) as date, COUNT(*) as count FROM sys_login_log WHERE login_time >= DATE_SUB(NOW(), INTERVAL 7 DAY) GROUP BY DATE(login_time)`
|
||
|
||
### 存储统计 (storageStats)
|
||
- `totalFiles`: `SELECT COUNT(*) FROM sys_file`
|
||
- `totalImages`: `SELECT COUNT(*) FROM sys_picture`
|
||
- `totalSize`: `SELECT SUM(file_size) FROM sys_file` (转换为GB/MB格式)
|
||
- `todayUploads`: `SELECT COUNT(*) FROM sys_file WHERE DATE(create_time) = CURDATE()`
|
||
- `storageUsage`: 计算已用空间百分比
|
||
- `availableSpace`: 计算剩余可用空间
|
||
|
||
### 今日活跃统计 (dailyActivityStats)
|
||
- `todayVisits`: `SELECT COUNT(*) FROM sys_oper_log WHERE DATE(oper_time) = CURDATE()`
|
||
- `todayOperations`: `SELECT COUNT(*) FROM sys_oper_log WHERE DATE(oper_time) = CURDATE() AND business_type != 'SELECT'`
|
||
- `activeUsers`: 与用户统计中的activeUsers相同
|
||
- `newContent`: 今日新增的内容数量(文件、图片等)
|
||
- `apiCalls`: `SELECT COUNT(*) FROM sys_oper_log WHERE DATE(oper_time) = CURDATE()`
|
||
- `avgResponseTime`: `SELECT AVG(cost_time) FROM sys_oper_log WHERE DATE(oper_time) = CURDATE()`
|
||
|
||
|
||
|
||
## 建议的实现步骤
|
||
|
||
### 第一阶段:基础统计功能
|
||
1. ✅ 创建 `DashboardController`
|
||
2. ✅ 创建 `DashboardService`
|
||
3. ✅ 实现用户统计查询
|
||
4. ✅ 实现登录统计查询
|
||
5. ✅ 实现 `getAllData` 接口
|
||
6. ✅ 前端集成测试
|
||
|
||
### 第二阶段:扩展功能
|
||
1. ✅ 实现存储统计查询
|
||
2. ✅ 实现活跃度统计查询
|
||
3. ✅ 实现登录趋势图表数据
|
||
4. ✅ 添加缓存支持
|
||
|
||
### 第三阶段:性能优化
|
||
1. ✅ 添加Redis缓存支持
|
||
2. ✅ 优化数据库查询
|
||
3. ✅ 实现定时统计任务
|
||
4. ✅ 添加监控日志
|
||
|
||
## 性能优化建议
|
||
|
||
### 缓存策略
|
||
- 统计数据:5分钟缓存
|
||
- 趋势数据:1小时缓存
|
||
|
||
### 数据库优化
|
||
- 添加必要索引
|
||
- 使用聚合查询
|
||
- 考虑分表策略
|
||
|
||
### 查询优化
|
||
```sql
|
||
-- 建议的索引
|
||
CREATE INDEX idx_user_create_time ON sys_login_user(create_time);
|
||
CREATE INDEX idx_login_log_time_status ON sys_login_log(login_time, status);
|
||
CREATE INDEX idx_oper_log_time ON sys_oper_log(oper_time);
|
||
CREATE INDEX idx_file_create_time ON sys_file(create_time);
|
||
```
|
||
|
||
## 权限配置
|
||
|
||
需要在权限系统中添加以下权限:
|
||
|
||
```sql
|
||
-- 权限数据插入
|
||
INSERT INTO sys_menu (menu_name, perms, menu_type) VALUES
|
||
('仪表盘查看', 'dashboard:view', 'F');
|
||
```
|
||
|
||
## API测试用例
|
||
|
||
### 测试接口连通性
|
||
```bash
|
||
# 获取完整仪表盘数据
|
||
curl -X GET \
|
||
"http://localhost:18099/coder/dashboard/getAllData" \
|
||
-H "Authorization: your-token-value"
|
||
|
||
# 获取登录趋势
|
||
curl -X GET \
|
||
"http://localhost:18099/coder/dashboard/getLoginTrend?days=7" \
|
||
-H "Authorization: your-token-value"
|
||
```
|
||
|
||
### 验证数据格式
|
||
确保返回的JSON格式与前端类型定义完全匹配。
|
||
|
||
## 前端集成要点
|
||
|
||
### 1. 替换Mock数据
|
||
```typescript
|
||
// 原来的mock调用
|
||
const dashboardData = ref<DashboardData>(generateMockDashboardData())
|
||
|
||
// 替换为API调用
|
||
const loadDashboardData = async () => {
|
||
const { data } = await getAllDashboardData()
|
||
dashboardData.value = data
|
||
}
|
||
```
|
||
|
||
### 2. 错误处理
|
||
```typescript
|
||
try {
|
||
const { data } = await getAllDashboardData()
|
||
dashboardData.value = data
|
||
} catch (error) {
|
||
coiMsgError('获取仪表盘数据失败')
|
||
// 可选:降级到mock数据
|
||
}
|
||
```
|
||
|
||
### 3. 数据刷新
|
||
```typescript
|
||
// 手动刷新
|
||
const refreshData = async () => {
|
||
await loadDashboardData()
|
||
coiMsgSuccess('数据已刷新')
|
||
}
|
||
|
||
// 自动刷新(可选)
|
||
setInterval(loadDashboardData, 5 * 60 * 1000) // 每5分钟刷新
|
||
```
|
||
|
||
## 部署检查清单
|
||
|
||
- [ ] 后端接口实现完成
|
||
- [ ] 权限配置正确
|
||
- [ ] 数据库索引已创建
|
||
- [ ] 缓存配置已启用
|
||
- [ ] 前端API集成完成
|
||
- [ ] 接口联调测试通过
|
||
- [ ] 性能测试通过
|
||
- [ ] 权限测试通过
|
||
|
||
---
|
||
|
||
**总结**: 实现这3个接口即可完全支持前端仪表盘功能,其中`getAllData`接口是核心,建议优先实现。 |