# 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
- 阴影超过三层