From 0e393f265d0f6c74823a10f893794b35b1db0f5e Mon Sep 17 00:00:00 2001 From: enzo Date: Wed, 22 Jul 2026 22:28:07 +0800 Subject: [PATCH] fix: color tokens aligned to reference image pixel extraction --- backend/alembic.ini | 149 ++++++++++++++++++ docs/superpowers/plans/pixel-perfect-spec.md | 154 +++++++++++++++++++ docs/superpowers/plans/visual-fix-spec.md | 58 +++++++ frontend/src/styles/tokens.css | 28 ++-- 4 files changed, 375 insertions(+), 14 deletions(-) create mode 100644 backend/alembic.ini create mode 100644 docs/superpowers/plans/pixel-perfect-spec.md create mode 100644 docs/superpowers/plans/visual-fix-spec.md diff --git a/backend/alembic.ini b/backend/alembic.ini new file mode 100644 index 0000000..807ded2 --- /dev/null +++ b/backend/alembic.ini @@ -0,0 +1,149 @@ +# A generic, single database configuration. + +[alembic] +# path to migration scripts. +# this is typically a path given in POSIX (e.g. forward slashes) +# format, relative to the token %(here)s which refers to the location of this +# ini file +script_location = %(here)s/alembic + +# template used to generate migration file names; The default value is %%(rev)s_%%(slug)s +# Uncomment the line below if you want the files to be prepended with date and time +# see https://alembic.sqlalchemy.org/en/latest/tutorial.html#editing-the-ini-file +# for all available tokens +# file_template = %%(year)d_%%(month).2d_%%(day).2d_%%(hour).2d%%(minute).2d-%%(rev)s_%%(slug)s +# Or organize into date-based subdirectories (requires recursive_version_locations = true) +# file_template = %%(year)d/%%(month).2d/%%(day).2d_%%(hour).2d%%(minute).2d_%%(second).2d_%%(rev)s_%%(slug)s + +# sys.path path, will be prepended to sys.path if present. +# defaults to the current working directory. for multiple paths, the path separator +# is defined by "path_separator" below. +prepend_sys_path = . + + +# timezone to use when rendering the date within the migration file +# as well as the filename. +# If specified, requires the tzdata library which can be installed by adding +# `alembic[tz]` to the pip requirements. +# string value is passed to ZoneInfo() +# leave blank for localtime +# timezone = + +# max length of characters to apply to the "slug" field +# truncate_slug_length = 40 + +# set to 'true' to run the environment during +# the 'revision' command, regardless of autogenerate +# revision_environment = false + +# set to 'true' to allow .pyc and .pyo files without +# a source .py file to be detected as revisions in the +# versions/ directory +# sourceless = false + +# version location specification; This defaults +# to /versions. When using multiple version +# directories, initial revisions must be specified with --version-path. +# The path separator used here should be the separator specified by "path_separator" +# below. +# version_locations = %(here)s/bar:%(here)s/bat:%(here)s/alembic/versions + +# path_separator; This indicates what character is used to split lists of file +# paths, including version_locations and prepend_sys_path within configparser +# files such as alembic.ini. +# The default rendered in new alembic.ini files is "os", which uses os.pathsep +# to provide os-dependent path splitting. +# +# Note that in order to support legacy alembic.ini files, this default does NOT +# take place if path_separator is not present in alembic.ini. If this +# option is omitted entirely, fallback logic is as follows: +# +# 1. Parsing of the version_locations option falls back to using the legacy +# "version_path_separator" key, which if absent then falls back to the legacy +# behavior of splitting on spaces and/or commas. +# 2. Parsing of the prepend_sys_path option falls back to the legacy +# behavior of splitting on spaces, commas, or colons. +# +# Valid values for path_separator are: +# +# path_separator = : +# path_separator = ; +# path_separator = space +# path_separator = newline +# +# Use os.pathsep. Default configuration used for new projects. +path_separator = os + +# set to 'true' to search source files recursively +# in each "version_locations" directory +# new in Alembic version 1.10 +# recursive_version_locations = false + +# the output encoding used when revision files +# are written from script.py.mako +# output_encoding = utf-8 + +# database URL. This is consumed by the user-maintained env.py script only. +# other means of configuring database URLs may be customized within the env.py +# file. +sqlalchemy.url = driver://user:pass@localhost/dbname + + +[post_write_hooks] +# post_write_hooks defines scripts or Python functions that are run +# on newly generated revision scripts. See the documentation for further +# detail and examples + +# format using "black" - use the console_scripts runner, against the "black" entrypoint +# hooks = black +# black.type = console_scripts +# black.entrypoint = black +# black.options = -l 79 REVISION_SCRIPT_FILENAME + +# lint with attempts to fix using "ruff" - use the module runner, against the "ruff" module +# hooks = ruff +# ruff.type = module +# ruff.module = ruff +# ruff.options = check --fix REVISION_SCRIPT_FILENAME + +# Alternatively, use the exec runner to execute a binary found on your PATH +# hooks = ruff +# ruff.type = exec +# ruff.executable = ruff +# ruff.options = check --fix REVISION_SCRIPT_FILENAME + +# Logging configuration. This is also consumed by the user-maintained +# env.py script only. +[loggers] +keys = root,sqlalchemy,alembic + +[handlers] +keys = console + +[formatters] +keys = generic + +[logger_root] +level = WARNING +handlers = console +qualname = + +[logger_sqlalchemy] +level = WARNING +handlers = +qualname = sqlalchemy.engine + +[logger_alembic] +level = INFO +handlers = +qualname = alembic + +[handler_console] +class = StreamHandler +args = (sys.stderr,) +level = NOTSET +formatter = generic + +[formatter_generic] +format = %(levelname)-5.5s [%(name)s] %(message)s +datefmt = %H:%M:%S diff --git a/docs/superpowers/plans/pixel-perfect-spec.md b/docs/superpowers/plans/pixel-perfect-spec.md new file mode 100644 index 0000000..7b2da7a --- /dev/null +++ b/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 +- 阴影超过三层 diff --git a/docs/superpowers/plans/visual-fix-spec.md b/docs/superpowers/plans/visual-fix-spec.md new file mode 100644 index 0000000..5342768 --- /dev/null +++ b/docs/superpowers/plans/visual-fix-spec.md @@ -0,0 +1,58 @@ +修复前端视觉质量问题。项目在 /home/enzo/projects/hive-manage-v3/frontend/。 + +## 问题清单 + +### 1. 全局：浅色背景 +当前 Dashboard 显示白色/浅灰背景，应该是暗色主题。原因：`data-theme` 属性未正确初始化，导致 CSS 变量默认值被 Tailwind 覆盖。 +修复：确保 `` 元素初始化时设置 `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` 并提交。 diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css index 372ab89..12846b7 100644 --- a/frontend/src/styles/tokens.css +++ b/frontend/src/styles/tokens.css @@ -10,28 +10,28 @@ /* === 暗色模式（默认） === */ :root { - /* 背景层级 */ - --bg-root: #0f1117; - --bg-nav: #161822; - --bg-card: #1a1d2e; - --bg-hover: #1e2134; - --bg-elevated: #222639; + /* 背景层级 — 对齐参考图实际色值 */ + --bg-root: #03050a; + --bg-nav: #060810; + --bg-card: #0b0e17; + --bg-hover: #111522; + --bg-elevated: #151b28; /* 边框 */ --border: #2a2d3e; --border-light: rgba(42,45,62,0.5); /* 品牌色 */ - --honey: #f0b90b; - --honey-dim: #b8970e; - --honey-glow: rgba(240,185,11,0.12); + --honey: #e9ab01; + --honey-dim: #c48f00; + --honey-glow: rgba(233,171,1,0.12); /* 功能色 */ - --green: #00c853; - --red: #ff3d3d; - --yellow: #ffab00; - --blue: #448aff; - --orange: #ff6d00; + --green: #23ad3f; + --red: #e04343; + --yellow: #e9ab01; + --blue: #3b82f6; + --orange: #f59e0b; /* 文字 */ --text: #e0e0e0;