JARVIS/docs/superpowers/specs/2026-03-20-stats-dashboard-design.md

# 数据统计页面重新设计

## 1. 概述与目标

重新设计数据统计页面，使其与项目现有的深色赛博朋克/终端风格保持一致。采用单页垂直滚动布局，集成迷你图表，提供清晰的数据可视化。

## 2. 设计语言

### 视觉风格
- **主题**：深色赛博朋克 + 终端美学
- **背景**：`var(--bg-void)` 深空黑
- **强调色**：青色 `#00f5d4` (现有变量 `var(--accent-cyan)`)
- **辅助色**：紫色 `#a855f7` (用于知识库等模块)
- **卡片背景**：`rgba(13,21,37,0.8)` 半透明深蓝
- **边框**：`1px solid var(--border-dim)`，hover时发光

### 字体
- **数字**：等宽字体 `var(--font-mono)`，大号加粗，带发光效果
- **标签**：`var(--font-display)`，9-10px，字母间距 0.15em
- **正文**：`var(--font-mono)`，12-13px

### 动效
- 卡片 hover：边框发光 + 微弱上浮
- 数字：首次加载时淡入
- 图表：绘制动画 300ms

## 3. 页面结构

### 单页垂直滚动布局（无 Tabs）

```
┌─────────────────────────────────────────────────────┐
│  // DATA METRICS                        [页面标题]  │
├─────────────────────────────────────────────────────┤
│  [SYSTEM HEALTH]  系统健康模块                      │
│  [CONVERSATIONS]  对话统计模块                      │
│  [KNOWLEDGE]      知识库模块                        │
│  [KANBAN]         看板模块                          │
│  [COMMUNITY]      社区模块                          │
│  [INSIGHTS]       个人洞察模块                      │
└─────────────────────────────────────────────────────┘
```

## 4. 模块详细设计

### 4.1 系统健康 (SYSTEM HEALTH)

**位置**：页面最顶部，无需认证即可访问

**卡片布局**：4列网格

**指标卡片**：
| 指标 | 图标 | 格式 |
|------|------|------|
| CPU 使用率 | Cpu | 45% + 7天迷你柱状图 |
| 内存占用 | MemoryStick | 62% + 7天迷你柱状图 |
| 磁盘使用 | HardDrive | 38% + 7天迷你柱状图 |
| 运行时间 | Clock | 7d 3h 20m |

**卡片样式**：
- 尺寸：自适应，最小 160px
- 数字大小：24px，等宽加粗
- 趋势图：高度 24px，7个数据点
- 标签：9px，letter-spacing 0.15em

### 4.2 对话统计 (CONVERSATIONS)

**需要认证**

**顶部汇总**：横排4个数字卡片
| 指标 | 值 |
|------|-----|
| 总对话数 | 1,234 |
| 总消息数 | 5,678 |
| Input Tokens | 12.5M |
| Output Tokens | 45.2M |

**图表**：30天趋势迷你折线图
- 4条线：对话数、消息数、Input Token、Output Token
- 图例在图表下方
- 图表高度：120px
- 颜色使用主题色

### 4.3 知识库 (KNOWLEDGE)

**需要认证**

**顶部汇总**：
| 指标 | 值 |
|------|-----|
| 新建标签 | 156 |
| 文档数 | 89 |
| 标签关系 | 423 |

**图表**：30天趋势迷你折线图
- 3条线：新建标签、文档、标签关系
- 使用紫色系 `var(--accent-purple)`

### 4.4 看板 (KANBAN)

**需要认证**

**顶部汇总**：
| 指标 | 值 |
|------|-----|
| 待办任务 | 12 |
| 新建任务 | 45 (30天) |
| 已完成任务 | 38 (30天) |

**图表**：30天对比柱状图
- 两组柱：新建任务 vs 已完成任务
- 使用青色和绿色对比

### 4.5 社区 (COMMUNITY)

**需要认证**

**顶部汇总**：
| 指标 | 值 |
|------|-----|
| 发帖数 | 23 |
| 回复数 | 156 |
| AI 执行 | 12 |

**图表**：30天趋势迷你折线图
- 3条线：发帖、回复、AI执行

### 4.6 个人洞察 (INSIGHTS)

**需要认证**

**布局**：2列

**左侧 - 活跃时段**：
- 24小时柱状图
- 显示高峰时段标记

**右侧 - Top 标签**：
- 列表形式显示前5个常用标签
- 显示使用次数

**Token趋势**：
- 本月 vs 上月对比
- 百分比变化（带颜色指示上升/下降）

## 5. 组件清单

### MetricCard 指标卡片
```
Props:
- icon: Component (lucide图标)
- label: string
- value: string | number
- trend?: number[] (可选，迷你图数据)
- accentColor?: string (默认cyan)

States:
- default: 静态显示
- hover: 边框发光，轻微上浮
- loading: 骨架屏
- error: 显示 "--" 和错误图标
```

### MiniLineChart 迷你折线图
```
Props:
- data: { date: string, value: number }[]
- color?: string
- height?: number (默认40px)

Features:
- 纯CSS实现或tiny echarts
- 无坐标轴，仅保留趋势
- 数据点过多时自动采样
```

### MiniBarChart 迷你柱状图
```
Props:
- data: number[]
- color?: string
- height?: number (默认24px)
- maxBars?: number (默认7)
```

### SectionHeader 区块标题
```
Props:
- title: string
- tag?: 'cyan' | 'purple' | 'amber' (标签颜色)

Style:
- 格式：// SECTION_NAME
- 左侧竖线装饰
- 标签 Chip 在右侧
```

### SummaryRow 汇总行
```
Props:
- items: { label: string, value: string | number }[]
- columns?: number (默认4)
```

## 6. 技术实现

### 前端
- **框架**：Vue 3 + TypeScript (已有)
- **图表库**：使用 CSS 实现迷你图，或 echarts (已有)
- **图标**：lucide-vue-next (已有)
- **状态管理**：Pinia (已有)
- **API**：StatsView 中已有 stats API 调用

### 后端
- 复用现有 `app/routers/stats.py` 和 `app/services/stats_service.py`
- 确保所有接口正确返回数据

### 样式
- 复用 `ChatView.vue` 中的设计变量和样式模式
- 使用 CSS Grid 实现响应式布局
- 变量：`--bg-panel`, `--accent-cyan`, `--border-dim`, `--font-mono` 等

## 7. 响应式断点

| 设备 | 列数 |
|------|------|
| >= 1200px | 4列 |
| 768px - 1199px | 2列 |
| < 768px | 1列 |

## 8. 错误与空状态

### Error State
- 显示错误图标和文字
- 提供刷新按钮
- 保持页面结构完整

### Empty State
- 各模块独立空状态
- 不阻塞其他模块显示
- 友好提示文案

### Loading State
- 骨架屏动画
- 与卡片结构一致

## 9. 访问控制

| 模块 | 认证要求 | 说明 |
|------|----------|------|
| 系统健康 | 否 | 所有人可看 |
| 对话统计 | 是 | 需登录 |
| 知识库 | 是 | 需登录 |
| 看板 | 是 | 需登录 |
| 社区 | 是 | 需登录 |
| 个人洞察 | 是 | 需登录 |

未登录用户访问需认证模块时：
- 显示占位卡片结构
- 提示"请先登录"
- 不发送无效请求

## 10. 数据刷新

- 页面进入时加载所有数据
- 支持手动刷新按钮（每个模块独立刷新）
- 数字变化时无动画（避免干扰）