268 lines
6.6 KiB
Markdown
268 lines
6.6 KiB
Markdown
# 数据统计页面重新设计
|
||
|
||
## 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. 数据刷新
|
||
|
||
- 页面进入时加载所有数据
|
||
- 支持手动刷新按钮（每个模块独立刷新）
|
||
- 数字变化时无动画（避免干扰）
|