hive-manage-v3/docs/superpowers/plans/visual-fix-spec.md

修复前端视觉质量问题。项目在 /home/enzo/projects/hive-manage-v3/frontend/。

问题清单

1. 全局：浅色背景

当前 Dashboard 显示白色/浅灰背景，应该是暗色主题。原因：data-theme 属性未正确初始化，导致 CSS 变量默认值被 Tailwind 覆盖。 修复：确保 <html> 元素初始化时设置 data-theme="dark"，且所有页面使用 CSS 变量而非硬编码颜色。

2. 侧边栏：导航项 typo

"Cron1" 应为 "Cron 管理"。

3. Dashboard 卡片：视觉粗糙

• 在线/离线 Gateway 卡片应该有颜色区分（绿色数值/红色数值），当前只有文字
• "vs 昨天" 的变化指示应该有 ↑/↓ 箭头
• Cron 失败 > 3 的卡片应标红
• 整体卡片间距和 padding 应符合设计规范（gap:14px, padding:16px）

4. 蜂群健康分布

柱状图样式简陋，应有：

• 四色柱子（A绿 B蓝 C黄 D红）
• 点击柱子跳转 /health 页面
• D 级 Profile 名称在下方列出
• "共 58 个 Profile" 标题

5. Gateway 异常趋势

• Timeline 组件时间轴应无 "R/F/H/OK" 文字，改用彩色圆点
• 每个点 Hover 显示 tooltip（时间和事件详情）
• 图例正确：●正常 ●心跳超时 ●飞书断连 ●重启

6. Kanban 概览

• 当前显示静态数据，应调用 GET /api/v1/dashboard/kanban-summary API
• 看板名 + RUNNING/READY 状态显示

7. Cron 最近执行

• 调用 GET /api/v1/dashboard/cron-recent API
• 状态正确显示：✅ 成功 / ❌ 失败 / ⏸ 暂停
• 时间显示精确到分钟

8. 侧边栏整体样式

• 背景色：var(--bg-nav) 暗色
• Section 标题：11px uppercase letter-spacing
• NavItem 激活态：honey-glow 背景 + honey 文字色
• 各导航项名称应与 PRD/原型一致

9. Header

• "在线 0 运行中 0 离线 0" 应为实时数据（从 usePolling 或 context 获取）
• 搜索框 placeholder "搜索 Profile / 任务 / Cron / 事件..."
• 主题切换按钮（🌙/☀️）正常工作

10. useTheme hook

确保：

• 初始默认 dark（根元素设置 data-theme="dark"）
• localStorage 持久化
• 切换即时生效

---

先读取当前所有相关文件，然后逐个修复上述问题。每修复 2-3 个问题就运行 npx tsc --noEmit 确认编译通过。最后 npm run build 并提交。