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