155 lines
5.1 KiB
Markdown
155 lines
5.1 KiB
Markdown
# 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
|
||
- 阴影超过三层
|