enzo/hive-manage-v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
hive-manage-v3/docs/superpowers/plans/pixel-perfect-spec.md
T

5.1 KiB
Raw Permalink Blame History

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)
  • 顶部居中: 🐝 蜜蜂图标 + "知微蜂巢" 白色粗体 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
  • 阴影超过三层
Reference in New Issue View Git Blame Copy Permalink