88 lines
2.8 KiB
Markdown
88 lines
2.8 KiB
Markdown
---
|
|
name: 统计卡片数据来源问题
|
|
description: 记录分页列表页面统计卡片显示不正确的原因和解决方案
|
|
type: feedback
|
|
---
|
|
|
|
## 问题现象
|
|
|
|
在管理员后台和代理后台的列表页面（如卡密管理、设备管理、用户管理、工单管理），统计卡片显示的数量不正确。例如：
|
|
- 卡密管理页面显示"未使用20张"，但实际数据库中有更多
|
|
- 表格只显示当前页的数据，但统计卡片应该显示全局总数
|
|
|
|
## 根本原因
|
|
|
|
前端使用 `computed` 从当前页面数据计算统计值：
|
|
|
|
```typescript
|
|
// 错误做法：只统计当前页数据
|
|
const unusedCount = computed(() => cards.value.filter(card => card.status === 'unused').length)
|
|
```
|
|
|
|
当使用服务端分页时，`cards.value` 只包含当前页的数据（如20条），而不是全局数据。因此统计值只反映当前页的情况。
|
|
|
|
## 解决方案
|
|
|
|
### 后端修改
|
|
|
|
在 API 响应中添加 `stats` 字段，返回全局统计数据：
|
|
|
|
```go
|
|
// 获取统计数据（无筛选条件时的全局统计）
|
|
var statsUnused, statsUsed, statsBanned int64
|
|
database.DB.Model(&model.Card{}).Where("status = ?", "unused").Count(&statsUnused)
|
|
// ... 其他状态
|
|
|
|
response.Success(c, gin.H{
|
|
"cards": cards,
|
|
"total": total,
|
|
"stats": gin.H{
|
|
"unused": statsUnused,
|
|
"used": statsUsed,
|
|
"banned": statsBanned,
|
|
},
|
|
})
|
|
```
|
|
|
|
### 前端修改
|
|
|
|
1. 添加 `stats` ref 变量：
|
|
```typescript
|
|
const stats = ref({ unused: 0, used: 0, banned: 0 })
|
|
```
|
|
|
|
2. 使用后端返回的统计数据：
|
|
```typescript
|
|
const unusedCount = computed(() => stats.value.unused)
|
|
const usedCount = computed(() => stats.value.used)
|
|
const bannedCount = computed(() => stats.value.banned)
|
|
```
|
|
|
|
3. 从 API 响应中提取统计：
|
|
```typescript
|
|
if (data?.stats) {
|
|
stats.value = data.stats
|
|
}
|
|
```
|
|
|
|
## 已修复的页面
|
|
|
|
- `frontend/src/pages/admin/cards/index.vue` - 卡密管理（管理员）
|
|
- `frontend/src/pages/agent/cards/index.vue` - 卡密管理（代理）
|
|
- `frontend/src/pages/admin/devices/index.vue` - 设备管理
|
|
- `frontend/src/pages/admin/users/index.vue` - 用户管理
|
|
- `frontend/src/pages/admin/tickets.vue` - 工单管理
|
|
|
|
## 相关后端修改
|
|
|
|
- `backend/internal/router/admin/cards.go` - 添加 stats 返回
|
|
- `backend/internal/router/agent/agent.go` - handleGetCards 添加 stats 返回
|
|
- `backend/internal/router/admin/devices.go` - handleGetDevices 添加 stats 返回
|
|
- `backend/internal/router/admin/users.go` - handleGetUsers 已有统计返回
|
|
- `backend/internal/router/admin/tickets.go` - 已有 /tickets/stats 端点
|
|
|
|
## 设计原则
|
|
|
|
**Why:** 服务端分页时，前端只能访问当前页数据，无法获取全局统计
|
|
**How to apply:** 所有需要显示全局统计的分页列表页面，都应从后端获取统计数据，而不是前端计算
|