fix: color tokens aligned to reference image pixel extraction
This commit is contained in:
enzo
@@ -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 <script_location>/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
|
||||
@@ -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
|
||||
- 阴影超过三层
|
||||
@@ -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` 并提交。
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user