fix: color tokens aligned to reference image pixel extraction

docs/superpowers/plans/pixel-perfect-spec.md

@@ -0,0 +1,154 @@
+# Hive Manage v3 前端视觉重写 — 像素级对齐参考图
+
+## 前置要求
+
+- 所有 CSS 使用 `design-tokens.css` 中的变量（已在 `frontend/src/styles/tokens.css`）
+- 禁止硬编码任何颜色值
+- 间距必须是 4 的倍数
+- 表格行高 44px，padding: 10px 14px
+- 动画 ≤300ms，页面切换无动画
+- 暗色模式下的阴影仅三层：悬浮/弹出/模态
+
+## 1. 登录页 (参考 assets/ref-images/02-login.png)
+
+### 布局
+- 页面背景: var(--bg-root)，纯暗色无纹理
+- 登录卡片: 水平垂直居中，宽约 400px，大圆角(24px)，var(--bg-card) 背景
+- 卡片阴影: var(--shadow-lg)
+
+### Logo
+- 顶部居中: 🐝 蜜蜂图标 + "知微蜂巢" 白色粗体 28px
+- 下方: "Hive Manage v3" 浅灰色 14px var(--text-dim)
+
+### 输入框
+- 标签: 白色小字，输入框上方
+- 输入框: var(--bg-root) 背景，1px solid var(--border)，圆角 8px，高 42px
+- Placeholder: var(--text-muted)，"请输入用户名"/"请输入密码"
+- 密码框右侧有眼睛图标（显示/隐藏切换）
+
+### 按钮
+- "登入": 全宽，var(--honey) 背景，黑色粗体文字，高 48px，圆角 8px
+- 下方 "还没有账号？注册" var(--text-dim) 文字，var(--honey) 链接
+
+## 2. 侧边栏 (参考 01-dashboard-dark.png)
+
+### 分组结构（从上到下）
+**蜂群态势**
+- 📊 蜂群总览 (active: var(--honey-glow) 背景 + var(--honey) 文字)
+- 📡 Gateway 健康 [NEW Badge: 金色小标签]
+- 🏥 Profile 健康分 [NEW Badge]
+- 🤖 工蜂列表
+
+**任务编排**
+- 📋 看板追踪
+- ⏰ Cron 管理 [红色计数 Badge]
+- 🔔 事件管理 [红色计数 Badge]
+
+**通信频道**
+- 📶 频道配置
+- 📡 频道监控 [NEW Badge]
+
+**运维工具**
+- 🔑 密钥管理
+- 📁 文件浏览 [NEW Badge]
+- 💻 Web 终端 [NEW Badge]
+- 📜 蜂群日志 [NEW Badge]
+- 🔌 MCP 接入管理 [NEW Badge]
+- 📤 MCP 对外服务 [NEW Badge]
+
+**知识库管理**
+- 📚 事件档案管理 [NEW Badge]
+
+**系统**
+- 👥 用户管理
+- 📋 审计日志
+- ⚙ 系统设置
+
+### 样式
+- 分组标题: 11px uppercase，var(--text-muted)，letter-spacing 0.5px，padding 8px 10px 4px
+- NavItem: padding 8px 10px，border-radius 4px
+- NavItem 默认: var(--text-dim)
+- NavItem hover: var(--bg-hover) 背景，var(--text) 文字
+- NavItem active: var(--honey-glow) 背景，var(--honey) 文字，font-weight 600
+- Badge: 小圆角标签，红色 Badge 用于计数，金色 Badge 用于 NEW
+
+## 3. Header (参考 01-dashboard-dark.png)
+
+- 高度: 48px，var(--bg-nav) 背景，底边框 1px var(--border)
+- 左侧: 🐝 Logo + 面包屑 "/ 蜂群总览" var(--text-dim)
+- 搜索框: var(--bg-card) 背景，260px 宽，placeholder "搜索 Profile / 任务 / Cron / 事件..."
+- 右侧: 状态标签（在线 12 / 运行中 3）+ 主题切换按钮 + 用户头像
+
+## 4. Dashboard (参考 01-dashboard-dark.png)
+
+### 统计卡片（4列网格）
+- 在线 Gateway: 12（绿色 var(--green)）, ↑ 绿色箭头 "2 vs 昨天"
+- 离线 Gateway: 46（红色 var(--red)）, ↓ 红色箭头 "1 vs 昨天"  
+- 运行中任务: 3（蓝色 var(--blue)）
+- 今日 Cron 失败: 1（红色，失败>3标红）
+
+卡片: var(--bg-card) 背景，1px var(--border)，padding 16px，圆角 8px
+
+### 健康分布
+- 横向堆叠柱状图: A(绿22) B(蓝18) C(黄10) D(红8)
+- 柱高 8px，圆角 4px
+- "查看全部 →" 链接
+- D 级 Profile: 逗号分隔列出名称
+
+### Gateway 异常趋势 (24h)
+- 48 根迷你竖条（每30分钟），绿/红/橙三色
+- 图例: 🟢 正常 🔴 心跳超时 🟠 飞书断连
+
+### Kanban 概览
+- 表格: 看板名 | RUNNING | READY
+- 如: europe-briefing | S4 质检 | S5 编排
+
+### Cron 最近执行
+- 表格: Job | 状态(✅/❌/⏸) | 时间
+- 如: 涉台早报 ✅ 07:15
+
+### 最近异常事件
+- 完整表格: 时间 | Profile | 类型(Badge) | 摘要 | 状态(Badge)
+- 至少 3 行数据
+
+## 5. Gateway 页面 (参考 04-gateway.png)
+
+### 顶部
+- 标题 "Gateway 健康监控"
+- 统计: 共 N 个 · 在线 N · 离线 N · 异常 N
+- 右上角: "最后更新 N 秒前"
+
+### 筛选栏
+- 状态筛选: 全部/在线🔵/离线🔴/异常🟡，选中态 var(--honey) 背景
+- 右侧: 搜索框 + 蜂型筛选下拉
+
+### 异常时间线 (24h)
+- 横向轴线 + 彩色圆点标记事件
+- 红=心跳超时，橙=飞书断连，蓝=重启
+- 圆点下方标注时间+事件名
+
+### 表格
+- 列: Profile名 | 状态Badge | 掉线时长 | 今日重启 | 最新异常 | 操作
+- 异常行: row-danger 样式
+- 操作按钮: var(--honey) 边框 + var(--honey) 文字，深色背景
+
+---
+
+## 执行计划
+
+1. 先读 `frontend/src/styles/tokens.css` 确认变量名
+2. 重写 `LoginPage.tsx` 对齐登录参考图
+3. 重写 `Sidebar.tsx` 对齐侧边栏参考图（分组+Badge）
+4. 重写 `Header.tsx` 对齐 Header 参考图
+5. 重写 `DashboardPage.tsx` 对齐 Dashboard 参考图
+6. 重写 `GatewayPage.tsx` 对齐 Gateway 参考图
+7. 每完成一个文件运行 `npx tsc --noEmit`
+8. 全部完成后 `npm run build`
+9. 提交
+
+**质量红线**: 不允许出现以下情况——
+- 硬编码颜色（必须用 var(--*)）
+- 间距不是 4 的倍数
+- 表格行高不是 44px
+- 动画超过 300ms
+- 阴影超过三层

docs/superpowers/plans/visual-fix-spec.md

@@ -0,0 +1,58 @@
+修复前端视觉质量问题。项目在 /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` 并提交。