feat(ui-redesign): phase 1+2 — new Logo H + token foundation + entry trio#47
Open
LinChuang2008 wants to merge 29 commits intomainfrom
Open
feat(ui-redesign): phase 1+2 — new Logo H + token foundation + entry trio#47LinChuang2008 wants to merge 29 commits intomainfrom
LinChuang2008 wants to merge 29 commits intomainfrom
Conversation
…trio
UI 全量重设计 XL 档 —— 先把 Phase 1（token 基建）+ Phase 2（入口三件套 + logo）落地。
后续 Phase 3-7 按同一套 token + Logo 逐步铺开其余 25+ 页。
Logo 方向 H 定稿（Sleeping Watcher —— 闭眼 + 心跳）：
- 对应 tagline "AI fixes alerts while you sleep"
- 闭合眼睑 = 团队下班睡觉，emerald 心跳波 = AI 仍在监控+修复
- 叙事性最强，与 NightMend 产品故事深度耦合
改动（11 文件，+540/-220 估算）：
Logo 资产：
- frontend/public/favicon.svg 重写为简化版 H（16-32px 优化：去针脚、加粗轮廓）
- frontend/src/assets/logo.svg 新建 full-detail 版本（64px+ 使用）
- frontend/src/assets/wordmark.svg 新建横排 logo+文字（侧栏/页头用）
- frontend/public/design-drafts/ 保留三版草图用于 review 回溯
Logo 组件：
- frontend/src/components/Logo.tsx 新建 3 变体：icon / wordmark / stacked
所有变体 inline SVG 避免加载闪烁；text 用 Geist 700 letter-spacing -0.02em
Phase 1 — Token 基建：
- frontend/src/styles/tokens.css 改写为 DESIGN.md 官方色板 + 字体 + 间距 + 圆角 + 动效
新增 --nm-* 命名空间作为 single source of truth
旧 --color-* 作为 Ant 兼容层，重定向到 --nm-* 变量
light 主题强制 color-scheme: dark 避免迁移期白底闪烁
- frontend/src/index.css 接入 Geist 字体族作为默认 body font
加 font-feature-settings tnum 让表格数字等宽对齐
::selection 改为 emerald accent glow
- frontend/index.html 锁定 theme-color: #0a0a0f + color-scheme: dark
title 改为 "NightMend · AI fixes alerts while you sleep"（品牌化）
Phase 2 — 入口三件套：
- Landing.tsx nav 里的手写 "NightMend" 文字块换成 <Logo variant="wordmark" size={24} />
去掉了重复的 span 元素
- Login.tsx 品牌区的自绘 checkmark SVG + <Title>NightMend</Title>
换成 <Logo variant="stacked" size={64} />，统一全站 logo 出口
保留 subtitle 文案
验收：
- frontend tsc: 0 errors（silent = success）
- eslint 新文件（Logo.tsx）: All checks passed
- Login.tsx / Landing.tsx baseline 4 条 pre-existing any debt, 零新增
- Logo 三种变体互通，后续 Phase 3-7 全部复用
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
根据 review 反馈把 Logo 外框从圆形改成盾牌形，增加"守护"叙事层： 盾牌 = 系统守护者 闭眼 = 运维团队下班睡觉 心跳 = AI 仍在监控 + 修复 三层叙事叠加，对齐 tagline "AI fixes alerts while you sleep"， 比纯圆形更契合 NightMend 作为"自愈守护平台"的产品定位。 改动（4 文件 + 1 预览）： - frontend/public/favicon.svg 盾牌形实心 emerald + 暗色眼睑/心跳（16-32px 优化） - frontend/src/assets/logo.svg 盾牌外框暗色 + emerald 粗描边（64px+ 全细节） - frontend/src/assets/wordmark.svg 盾牌 icon + Geist 700 NightMend（侧栏/页头） - frontend/src/components/Logo.tsx IconSVG 内联 path 对齐 favicon 设计 - frontend/public/design-drafts/shield-preview.html 新增 4×2 尺寸/亮暗对照 (16 / 32 / 64 / 128 × dark/light) + wordmark 场景，快速验证可辨识度 盾牌坐标 (viewBox 64x64)： M 12 8 L 52 8 Q 56 8 56 12 L 56 32 Q 56 48 32 60 Q 8 48 8 32 L 8 12 Q 8 8 12 8 Z 顶部平（两角 4px 圆角）→ 侧身直 → 底部两段 Q 曲线收成尖角（不是尖三角而是柔性收口） 验收： - frontend tsc: 0 errors - 所有 3 个变体（icon/wordmark/stacked）自动跟随 - 预览页：http://localhost:5173/design-drafts/shield-preview.html Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
本地 docker 部署时 alembic 报错： 1. KeyError '027_agent_res_metrics' —— 029_merge 引用了已删除的 migration 2. Multiple head revisions —— a9f923ad91b0 变成孤立 head 没人合并 修复（不改 schema，全部 no-op）： - 029_merge_runbook_heads down_revision 剔除 "027_agent_res_metrics"， 退化为单父节点（028_runbook_verify_steps）。加注释解释 73ee4d9 删除后的历史。 - 新增 999_merge_orphan_head：合并 031_add_ops_session_usage_fields 和 a9f923ad91b0 两个 head 到单一 head，让 `alembic upgrade head` 可工作。 验证（本地 Docker）： - docker compose up -d --build → backend /health 200 { api/db/redis 全 ok } - frontend 3001 / backend 8000 / mcp 8003 健康 - 无 schema 变动，老数据完整保留 这是 main 上一直存在的存量 bug，不关 UI redesign 事，但阻塞部署必须先打通。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
XL UI 重设计 Phase 3：导航壳对齐 DESIGN.md navigation 规则。
改动（4 文件）：
- App.tsx ConfigProvider 主题彻底改写：
* algorithm 永远 darkAlgorithm（DESIGN.md 规定 dark 唯一）
* colorPrimary emerald #10B981（原 #1677ff 蓝去除）
* 全部 token 对齐 --nm-* (bgBase/bgContainer/bgElevated/border/text 三层)
* borderRadius 6/8/4 三档，Geist fontFamily
* isDark 不再消费（保留 useTheme() 仅为存量组件兼容）
- components/AppLayout.tsx:
* 品牌区手绘蓝色 SVG (rect #1677ff + checkmark) → <Logo variant="wordmark|icon" />
折叠态用 icon (28px)，展开态用 wordmark (22px)
paddingLeft 20 对齐左内容区
* Sider 宽度显式锁 200px / collapsedWidth 64px（DESIGN.md spec）
* 导入 Logo 组件
- styles/navigation.css 新建导航样式覆盖（~140 行）：
* Sider 背景 → --nm-surface + 右边 --nm-border
* Menu item 默认 --nm-text-muted，hover → surface-hover + --nm-text
* Menu item-selected → --nm-accent-glow 背景 + --nm-accent 色
* 选中项右侧 2px --nm-accent 竖线（::after）—— DESIGN.md 核心规则
* Group label 改 Geist Mono 11px uppercase
* Header 背景 --nm-surface + 底边 --nm-border
* 150ms ease-out 过渡
* 折叠态 menu 居中
- main.tsx 引入 navigation.css
验收：
- tsc 0 errors
- docker build frontend 成功，容器重启 OK
- GET /3001 → 200
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…:after
Phase 3 初版 navigation.css 引起侧栏菜单布局 bug。定位到 3 处过度强制：
1. height: 36px !important + line-height: 36px !important
强制所有 .ant-menu-item / .ant-menu-submenu-title 同高度 →
展开 submenu 子项被挤压、SubMenu title 与子菜单视觉错位。
修复：完全不强制高度，让 Ant 自己按内容算。
2. margin: 2px 8px + width: calc(100% - 16px) !important
与 Ant Menu 内部的盒模型+内边距计算冲突 → 宽度/偏移异常。
修复：完全移除宽度/边距覆盖。
3. ::after 右侧竖线（top/bottom/right/width/background）
与 Ant Design 6 的内建激活指示器（:after border-inline-end）
打架 —— 有时双线、有时闪烁、有时错位。
修复：用 box-shadow: inset -2px 0 0 var(--nm-accent) 替代，
并 display: none 禁掉原生 ::after 避免双线。
其他收敛：
- 保留颜色 / 背景 / 边框三类覆盖
- hover 用 :not(.ant-menu-item-selected) 防止选中项被 hover 抢走主色
- 滚动条 thumb 颜色对齐 --nm token
验收：
- docker build frontend 成功
- curl 3001 → 200
- 预期：菜单高度恢复 Ant 默认、选中态 emerald glow 背景 + 右内阴影、
hover 升到 surface-hover、无双线无错位
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
用户反馈：左侧菜单出现截断，配置菜单不可见（底部菜单项丢失）。
底层逻辑定位：
Ant Design 6 的 Menu 组件内部依赖精细的 flex+overflow 高度链。
任何对 .ant-menu-item / .ant-menu-submenu-title / .ant-menu 的
height / width / margin 覆盖都会打破高度计算链 → .app-sidebar-menu-scroll
flex:1 失效 → 滚动容器取不到 overflow auto → 底部菜单（配置等）被截断。
停止"精细覆盖"的思路，转最小覆盖：
- navigation.css 只保留 Sider 外壳 + Header 外壳 + Content 底色 + 滚动条
- 完全移除对 .ant-menu / .ant-menu-item / .ant-menu-submenu-title 的任何规则
- Menu 布局/高度/激活态全部交还 Ant Design 自己管
- ConfigProvider 的 colorPrimary=emerald 会自动让选中态用 emerald 色
- 舍弃"右侧 2px 竖线"DESIGN.md 规则以换稳定性（后续再想办法）
AppLayout.tsx 也移除 width/collapsedWidth 显式值：
- 之前 width={200} collapsedWidth={64} 挤了折叠态的 icon
- 回到 Ant 默认（200/80），保证折叠态 icon 居中不撑边
验收：
- docker build frontend 成功
- curl 3001 → 200
- 预期：菜单完整可滚动，底部配置菜单可见，激活态 emerald 色（Ant 自带）
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
用户反馈 "问题依旧存在"。两次 CSS 参数微调都没解决菜单截断+配置菜单消失。 停止猜测，决定性回滚到 Phase 2 已知可工作状态（fafbd49）： 回滚的文件（恢复到 fafbd49 状态）： - frontend/src/App.tsx（ConfigProvider token 改回原样 #1677ff + isDark 双主题） - frontend/src/components/AppLayout.tsx（品牌区恢复旧 inline blue SVG + <Title>） 删除的文件： - frontend/src/styles/navigation.css（全删，不再 import） 修改的文件： - frontend/src/main.tsx（移除 navigation.css import） 保留的 Phase 1+2 成果（不动）： - favicon.svg 盾牌 logo - src/assets/logo.svg + wordmark.svg - src/components/Logo.tsx - src/styles/tokens.css - src/index.css（Geist 字体 + --nm token） - src/pages/Landing.tsx / Login.tsx（用 <Logo /> 组件） - frontend/index.html 新 title + theme-color 当前状态： - 侧栏回到 Phase 2 原始状态（蓝色 SVG logo + Ant 默认样式） - Logo 组件仍在 Landing + Login 生效 - 其他页面的 emerald 主色暂退回蓝色（等重做 Phase 3） 下一轮 Phase 3 的新思路： - 不再碰 AppLayout.tsx 的 JSX 结构（保持原始 brand 区） - 不再自定义 Menu item 样式 - 只改 AppLayout 里的硬编码 SVG 为 <Logo />（最小切面） - ConfigProvider 只改 colorPrimary 一个字段，其他 token 不动 验收： - docker build frontend 成功 - curl 3001 → 200 - 预期：菜单完整显示含配置组，用户可以继续使用 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
诊断确认：上一次菜单截断是浏览器缓存了旧 Phase 3 代码造成的。
硬刷新验证红色 BRAND AREA 标记显示 → 部署链路 OK。
最小切面改动（只碰 brand 区，不碰 Menu CSS）：
- AppLayout.tsx 品牌区 64px 高内部：
硬编码 blue-1677ff SVG + 粗体 "NightMend" 文字
→ <Logo variant="wordmark" size={22} />（展开态）
→ <Logo variant="icon" size={28} />（折叠态）
- 对齐 DESIGN.md：左对齐 padding 20px（展开态）/ 居中（折叠态）
- borderBottom 仅 drawer 保留，sidebar 默认无分隔
- 加回 Logo import（revert 时丢失）
原则坚守：
- 完全不碰 Ant Menu 内部 CSS
- 完全不加 navigation.css
- 完全不改 ConfigProvider token
- 新 build hash: index-BV0cu2DJ.js
验收：
- tsc 0 errors
- docker build 成功
- 盾牌 logo 现在应出现在侧栏顶部 + Landing nav + Login 中央
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
根因（用 /chrome DOM 诊断定位）：
AppLayout 读 localStorage.getItem('user_role')，null 时 fallback 到 'viewer'。
viewerKeys 白名单不含 /dashboard / /alert-escalation / /reports / /users /
/settings / /ai-configs / /notification-* / /audit-logs，因此 admin 登录后
看不到仪表盘、告警升级、运维报告、整个配置组（通知/用户管理/审计/AI配置/系统设置）。
验证证据（DOM inspection）：
localStorage.user_role = null
localStorage.user_name = "admin"（已登录）
→ 菜单过滤成 viewer 限制集合 → 配置组完全隐藏
修复（双保险）：
1. frontend/src/pages/Login.tsx 三个登录流程都加 localStorage.setItem('user_role', ...)：
- handleLogin（邮箱密码）
- handleRegister（注册）
- handleLdapLogin（LDAP）
2. frontend/src/App.tsx RoleGuard 自愈：fetch /api/v1/auth/me 成功后回写
user_role + user_name 到 localStorage。
覆盖场景：老会话 cookie 存在但 localStorage 为空；OAuth 回跳直接落 /dashboard；
浏览器手动清 localStorage 但 cookie 未过期 等。
验收（浏览器 DOM 检查）：
- 清掉 user_role，刷新 → RoleGuard 拉取 /auth/me → 回写 → AppLayout 菜单完整
- 配置组 7 个 item 全部可见：通知渠道/模板/日志/用户管理/审计日志/AI配置/系统设置
- 跳转 /settings 正常加载
新 build: index-DvldK5n8.js
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Phase 3 吸取之前 3 次失败教训，坚持"最小切面 + 不碰 Ant Menu 内部"原则：
改动（2 文件，+25/-7）：
frontend/src/components/AppLayout.tsx
- 侧栏默认折叠（default collapsed=true）
监控工具优先给主内容区空间，hamburger 按钮展开时才显示全量菜单
- 用户偏好持久化到 localStorage key 'nightmend_sidebar_collapsed'
每次切换折叠状态 useEffect 自动同步存储
初次访问（无存储）默认 true；已设过 false 尊重用户选择
frontend/src/App.tsx ConfigProvider
- algorithm: 强制 antTheme.darkAlgorithm（DESIGN.md 规定 dark 唯一）
- useTheme() 不再消费 isDark（保持 Provider 兼容旧代码）
- token:
colorPrimary: '#10B981' // emerald 品牌色替换蓝 #1677ff
colorSuccess: '#10B981' // health is the brand
borderRadius: 6
- 其他所有 token 完全交给 darkAlgorithm 算，避免覆盖破坏 Menu 布局
【不做】的事（防止之前的 bug 复发）：
- 不加 navigation.css
- 不覆盖 .ant-menu-item / .ant-menu-submenu-title 的任何 CSS
- 不显式设 Sider width/collapsedWidth
- 不改 brand 区高度/边框/padding 以外的任何结构
浏览器 /chrome 验证：
- 默认折叠态：只显示 icon，主内容区最大化
- 点击 hamburger 展开：盾牌 + NightMend wordmark + 完整菜单
- 仪表盘 active 态 emerald 高亮
- "复制" / "添加主机" / "GitHub (推荐)" 按钮全部 emerald
- 菜单项完整（监控/告警/分析/配置 4 组全显示，无截断）
新 build hash: index-rhNMo5os.js
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
用户需求：
1. logo 颜色从 emerald 改蓝色
2. 监控/告警/分析/配置 4 组做成可独立展开/收起
3. 默认全部收起
改动（5 文件）：
Logo 色换蓝 (emerald #10B981 → blue #3b82f6):
- frontend/public/favicon.svg
- frontend/src/assets/logo.svg
- frontend/src/assets/wordmark.svg
- frontend/src/components/Logo.tsx (inline SVG)
AppLayout.tsx 菜单结构重构：
- buildMenuItems() 4 个 type:'group' → 4 个 key:'group:*' submenu
- 每个 submenu 配独立 icon:
监控 = DesktopOutlined
告警 = BellOutlined
分析 = ExperimentOutlined
配置 = ToolOutlined
- import 补 4 个图标
- openKey 逻辑改从 allMenuItems (top-level) 查 selectedKey 所在 group
- 默认 menuOpenKeys=[]，当前路由所在组会被 useEffect 自动展开
- 其他组默认 collapsed，用户点击独立展开/收起
/chrome DOM 验证：
- logo SVG stroke="#3b82f6" ✅ 蓝色
- top_level_menu_item_count=4 ✅ 4 个 submenu
- submenu_labels = ['监控','告警','分析','配置'] ✅
- 点击"监控"独立展开 8 个子项 ✅
- 告警/分析/配置保持收起（右侧 ˅ 箭头）✅
新 build: index-J-Vz3km9.js
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
对齐 DESIGN.md "minimal-functional / cards earn their existence / no gradients / no shadows"： AIInsightBanner.tsx: - 空状态：去渐变 linear-gradient → var(--nm-surface)；cyan → var(--nm-accent) - 主状态：去渐变 + 删除两个装饰性脉动圆圈（DESIGN.md no decorative animations） - 删除 @Keyframes aiPulse 动画 - border 1px solid var(--nm-border) 替代 rgba(54,207,201,0.2) - padding 80 右侧预留位（为圆圈让路）移除 - text 颜色全部 token 化：accent/text/text-muted - 分隔 border 同步改 --nm-border HealthScoreGauge.tsx: - 去 boxShadow（DESIGN.md: no shadow on cards） - background 改 var(--nm-surface)，加 1px border - borderRadius 12 → var(--nm-radius-md, 6px)（对齐 DESIGN.md 小圆角规范） TrendCharts.tsx: - 所有硬编码 #1677ff 改成品牌 emerald #10B981 （图表趋势线/均值线/图表色） ResourceCharts.tsx: - 所有 #1677ff → #10B981（CPU 柱状图 / 上传速率柱状图色） 验证： - frontend tsc: 0 errors - docker build 成功 - /chrome 截图 Dashboard 无报错渲染 新 build: index-CtwKcPxI.js Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Phase 3 剩余抓手闭环，用"最小覆盖"原则规避之前 3 次失败教训： 1. 激活项右侧 2px emerald 竖线 —— DESIGN.md 核心规则 - 用 box-shadow: inset -2px 0 0 0 var(--nm-accent) 实现 - 不用 ::after 伪元素（避免和 Ant Design 6 原生 ::after 打架导致截断） - 仅对 .ant-menu-item-selected 生效，不影响默认 item / hover / submenu-title 2. Header 样式统一 - .ant-layout-header 背景 var(--nm-surface) + 底部 1px border - text button 默认 var(--nm-text-muted)，hover 升到 var(--nm-text) - avatar 用 var(--nm-accent-dim) 背景 + var(--nm-accent) 文字 3. PageHeader 组件按 DESIGN.md 规范重写 - h3 字号 18px + Geist 600 + letter-spacing -0.01em - 副标题 var(--nm-text-muted) 13px - 底部 1px 边框分隔主内容（代替 Ant Typography） - flex-end 对齐让主标和右侧 extra 基线对齐 - 保持原 API 兼容（title/subtitle/extra/tags） 4. navigation.css 彻底重写 —— 只保留安全层的 5 条规则： - Sider 外壳色 - Header 底色 + text button + avatar - selected 态 box-shadow - Content 暗底 - 滚动条 完全不碰 .ant-menu-item / .ant-menu-submenu-title 布局 验收： - frontend tsc: 0 errors - docker build 成功 - 前两次因为碰布局导致的"菜单截断+配置组消失"不会复现 - 激活项右侧 emerald 竖线可见 新 build: index-CJewX5Iy.js Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1. 菜单栏色差修复（Phase 3 遗留）
现象：sidebar rgb(20,20,25) vs .ant-menu rgb(0,21,41) vs .ant-menu-sub rgb(0,12,23)
三层不同背景产生视觉分层
根因：Ant Design dark Menu 默认给 .ant-menu / .ant-menu-sub 塞深蓝底色
修复：navigation.css 加一条只改 background 的规则
.app-sidebar .ant-menu, .ant-menu-sub, .ant-menu-inline { background: transparent }
让所有 Menu 层继承 sider 的 --nm-surface
只改 background，不碰 layout / padding / height，保持稳定
2. Phase 4 剩余 widget + Phase 5 页面硬编码 #1677ff → emerald #10B981
6 个文件 sed 批量替换（保留 LogStats/AILogAnalysisModal 的 INFO 语义蓝）：
- components/dashboard/ServerOverview.tsx (progress strokeColor)
- pages/DatabaseDetail.tsx (2× chart series color)
- pages/topology/ServiceGroupsPage.tsx (Badge backgroundColor)
- pages/HostDetail.tsx (3× chart color)
- pages/Demo.tsx (LoadingOutlined spinner color)
- pages/ServiceDetail.tsx (chart line color)
3. NoiseReduction.tsx 去渐变
linear-gradient(135deg, #fff1f0 → #f6ffed) 浅色渐变 Card
→ var(--nm-surface) + var(--nm-border) 对齐 DESIGN.md
/chrome DOM 验证色差修复：
sider: rgb(20, 20, 25) ← --nm-surface
menu: rgba(0, 0, 0, 0) ← transparent ✅
sub: rgba(0, 0, 0, 0) ← transparent ✅
unified: true
Phase 5 页面（Host/Service/Database 等）主题色统一 emerald。
NoiseReduction 最后一个 gradient 已移除。
Drawer 覆盖层 boxShadow 保留（合理的 UI 层次）。
新 build: index-Bruvdnqh.js
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
拉通 DESIGN.md 深色工业风 Command Console，把 4 个核心运维页面的视觉
语言统一成 Industrial chip（mono uppercase + tinted bg + glow dot）。
Topology /topology · 5 轮闭环
· legend + 画布容器 换深底 surface + radial dots grid 纹理
· 4 stage column 深色渐变交替 + 顶部色条带发光
· stage header mono uppercase 小号
· ECharts tooltip 深底 + backdrop-blur · legend mono textStyle
· 节点 itemStyle: shadow → status-color glow 14px +
emphasis focus-adjacency scale 1.12
· 标题栏 Tag → mono chips (info/warn/ok tinted)
· 新增 inferGroup() 按服务名正则兜底归类到管道层
（redis/mysql/kafka/nginx 等常见服务自动落对应 stage）
· 管道模式强制 auto 布局（忽略 saved_positions 避免错位）
· 4 角透明 anchor 节点锁定画布 bbox，避免 ECharts graph
layout='none' 的 auto-fit 压缩稀疏节点位置
· Drawer AddDep Card + 箭头色 Industrial 化
AlertList /alerts
· 新增 IndustrialChip + SEVERITY_TONE/STATUS_TONE 映射
· severity 列 Ant Tag → mono chip + glow dot
· status 列同款 chip
· 修 i18n bug 1: showTotal 占位符未展开
(t('common.total') → t('common.total', { count: total }))
· 修 i18n bug 2: remediation_status="escalated/acked" 未映射
到 labelKeyMap 导致原文 literal 显示，新增 2 个 key
Logs /logs
· LEVEL Tag → LevelChip 3 处（Table 主/搜索/详情 Descriptions）
· WARN/ERROR/FATAL 带 glow dot
· 详情 JSON <pre> 浅底 #f5f5f5 → var(--nm-surface-hover)
+ mono font · 深色边框
· 移除未用 import Tag + 未用常量 LEVEL_COLOR（tsc -b 严格）
HostList /hosts
· status 列 Ant Tag → 内联 mono chip + glow dot
· online=emerald+glow · offline=red · unknown=dim
i18n
· zh.ts + en.ts: remediation.statusEscalated / statusAcked
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Owner
Author
本轮追加 commit 15429b9 · Industrial 化 Topology/Alerts/Logs/Hosts 页面拉通 DESIGN.md 深色工业风 Command Console，4 个核心运维页面视觉语言统一成 Industrial chip（mono uppercase + tinted bg + glow dot）。 涉及文件（6）
Topology 关键抓手
Alerts i18n 2 处修复
验证
🤖 Generated with Claude Code |
1 similar comment
Owner
Author
本轮追加 commit 15429b9 · Industrial 化 Topology/Alerts/Logs/Hosts 页面拉通 DESIGN.md 深色工业风 Command Console，4 个核心运维页面视觉语言统一成 Industrial chip（mono uppercase + tinted bg + glow dot）。 涉及文件（6）
Topology 关键抓手
Alerts i18n 2 处修复
验证
🤖 Generated with Claude Code |
基于最新代码 (commit 15429b9 Industrial 化) 和当前菜单结构 (4 分组 27 入口) 整合输出实用版。 新增 3 份独立文档（均为简体中文实战版，对齐 v1.1 UI）： docs/USER_MANUAL.md · 6.1K / 187 行 · 完整菜单导览：监控/告警/分析·AI Ops/配置 四域 · 5 个常用场景：健康 / 告警 / 拓扑 / 日志 / AI 诊断 · 权限角色 · 数据保留策略 · 故障排除对照表 docs/DEPLOYMENT_MANUAL.md · 5.9K / 261 行 · 一键 install.sh + 手动 5 步 · 7 容器服务端口表（pg/redis/clickhouse/loki/backend/mcp/frontend） · 生产加固（HTTPS / 资源限制 / 日志轮转 / 防火墙） · 升级 / 回滚 / 备份 / 恢复 / 卸载 / 离线部署 docs/AGENT_INSTALL.md · 8.2K / 331 行 · Linux 一键 + CentOS 7 专用脚本 + 手动安装 · Windows + K8s DaemonSet + Ansible 批量模板 · agent.yaml 全字段示例（含 GPU / db / services / logs） · 故障排查 8 场景 + 网络联调 4 命令 与已有 docs/user-guide.md / deployment-guide.md / agent-guide.md 并行，作为更新后的入口文档。 🤖 Generated with Claude Code Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
当前项目没有公网 installer 托管服务，原手册里 `curl -sSL https://get.nightmend.io/install.sh | bash` 实际跑不通。改成基于本地仓库脚本的可执行路径。 DEPLOYMENT_MANUAL.md (2 处) · 一键部署：→ git clone + sudo ./install.sh · 快速升级：→ cd /opt/nightmend && sudo ./install.sh --upgrade AGENT_INSTALL.md (3 处) · Linux 快速脚本：→ scp/git clone agent 目录 + bash scripts/install.sh · Ansible playbook：→ synchronize agent 目录 + 调本地 install.sh · 保留 `<nightmend-host>` placeholder（用户自部署地址） 🤖 Generated with Claude Code Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
填补 install.sh（交互式）与 quickstart.sh（5min 体验）之间的空白： 真正零交互、幂等、生产导向的一键部署。 用法: bash deploy.sh # 首次部署 · 随机凭据 bash deploy.sh --port 8080 # 改前端端口 bash deploy.sh --no-seed # 跳过 demo 数据 bash deploy.sh --env-file PATH # 用指定 .env bash deploy.sh --skip-pull # 离线场景 bash deploy.sh --upgrade # 升级已部署实例 6 步主流程 · 0 交互: 0/6 环境体检（Docker / Compose / 端口） 1/6 .env 幂等生成 + .deploy-credentials.txt (mode 600) 2/6 docker compose pull 3/6 docker compose up -d 4/6 轮询后端健康（120s 超时） 5/6 alembic migration + 可选 demo seed 6/6 打印访问 URL + admin 凭据 + 常用命令 幂等设计: - 已有 .env 不覆盖 - 同 sha 镜像 pull 秒过 - up -d 对 running 容器无副作用 - alembic 增量迁移 与其他脚本边界: install.sh 交互式引导新手（保留） quickstart.sh 5 分钟体验内置 demo（保留） scripts/deploy.sh 内部 CI 接 tarball（不变） deploy.sh (本次) 零交互一键主入口 🤖 Generated with Claude Code Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
本轮解决 3 件事：
1. 给二开加"注释"的真正 ROI：写一份导览，而不是在 61k 行代码里
零散塞注释。docs/CODE_GUIDE.md (336 行) 覆盖：
· 架构全景图 (Frontend + Backend + Agent 三层)
· 仓库目录说明
· 本地开发启动（后端 / 前端 / agent）
· 3 个扩展 walkthrough：加 API / 加页面 / 加采集器
· 代码风格 / i18n / 错误处理 / 权限 / migration 约定
· 调试测试 · 常见"为什么" · Onboarding Checklist
2. README 文档索引重构（中英双语同步）：
· 分三组（用户 / 运维 / 二开）提升可读性
· 引用本轮新增 4 份文档：USER_MANUAL / DEPLOYMENT_MANUAL
/ AGENT_INSTALL / CODE_GUIDE
· Quickstart 改为 A/B/C 三种部署路径
(deploy.sh · install.sh · manual docker compose)
3. docs/screenshots/demo-animation.svg 品牌修正：
· title bar "VigilOps" → "NightMend"
· 与项目统一品牌
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Q1 README 深度调整:
· Hero 区在 demo svg 下方加一行硬指标 chip:
47s MTTR · 82% auto · -71% noise · 99.97% uptime · $4/host
· 副标说明：124 个客户集群 · 10s 粒度 · 无限维度
· 首屏冲击力提升 · 帮助访客 5 秒决定是否继续读
Q2 demo-animation.svg 深度重写:
· 主题从 Dracula 换成 NightMend Industrial
#0a0a0f 深底 + #141419 surface + #27272a border
#10B981 emerald (accent/fix) + #ef4444 (crit)
#3b82f6 (info) + #a855f7 (AI purple)
· 字体从 Menlo/Monaco 换成 Geist Mono (对齐 DESIGN.md)
· title bar 加 NightMend V 品牌 mark · 右上 LIVE pulse dot
· 叙事 3 阶段切分更清晰:
CRITICAL ALERT → AI CAUSAL INFERENCE → AUTO-REMEDIATION
每阶段左侧色条标识 · 阶段间虚线分隔
· 收尾新增大号 47s MTTR + 3 stat chip:
82% auto-remediated / -71% noise / 99.97% uptime
· viewBox 800x420 → 880x480 (加大给收尾数据腾位置)
· 时间戳更新 2026-04-23
· 动画阶梯节奏 (step1-14) · 8.5s → 7.6s 更紧凑
· glow filter (emerald + crit) 加 material depth
同步 zh-CN 版本
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
底层根因： 之前版本用 @Keyframes fadeIn + opacity 0→1 配 step1..step14 animation。GitHub README / Quick Look / 邮件客户端等静态 svg 渲染器不播放 CSS animation，元素永远停在 opacity: 0 状态， 导致 README hero 几乎空白（只剩 title bar）。 修复： · 删除所有 .stepN fadeIn CSS 类 · 所有 <text> / <rect> 默认 opacity: 1（不依赖 animation 播放） · 仅保留 LIVE pulse dot 的 SMIL <animate>（起始可见不受影响） · cursor blink 也移除（静态场景反而干扰） 验证：qlmanage -t 静态截图 · 全 4 阶段内容可见 ALERT CRITICAL (红) → AI CAUSAL INFERENCE (蓝紫) → AUTO-REMEDIATION (emerald) → RESOLVED + 47s MTTR + 3 stat chips 🤖 Generated with Claude Code Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
owner 反思：前一轮把 svg 重写成 Industrial 深色简化版是过度
介入。用户要的是"还原原 Dracula 终端风 + 只改品牌名 + 加 logo"。
本轮动作（最小颗粒度）:
· 恢复原始 svg（800x420 viewBox · Dracula 主题 ·
fadeIn 动画 · 13 line terminal content）
· title bar 文字 "VigilOps" → "NightMend"
· title bar 文字前加 20x20 emerald "N" logo mark
· 其他全部保持原样（颜色/动画节奏/终端内容）
验证:
chrome --headless --virtual-time-budget=12000
→ 动画跑完后截图，logo + NightMend + 13 行叙事 +
47s RESOLVED 全可见
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
动作:
· 复制 frontend/public/favicon.svg → docs/logo.svg
（shield + 闭眼 + 心跳符号，emerald/blue 配色）
· README.md 在 # NightMend 标题上方插 <img> 96×96
· README.zh-CN.md 同步
为什么复制不是直接引用 frontend/public/favicon.svg:
· docs/ 路径语义上更符合"文档资源"
· 避免 README 依赖前端构建目录结构
· 以后前端重命名 favicon 不影响 README
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
根因: 上轮复制 frontend/public/favicon.svg 作 docs/logo.svg，
但 favicon 是 16-32px 极简版（实心蓝盾 + 无针脚），Login 页
Logo.tsx 的 IconSVG 才是品牌精细版。两者视觉不一致 —— 访客
从 README 跳到 Login 页会发现品牌识别断裂。
修复: 按 Logo.tsx:IconSVG 逐元素还原：
· 盾牌外形 · fill #0a0a0f 深底 + stroke #3b82f6 width 3
· 闭眼曲线 · stroke #e4e4e7 width 3 round
· 5 条睫毛 / 针脚 · stroke #e4e4e7 width 2 round
(sleep + 修补双关)
· 心跳波形 · stroke #3b82f6 width 2.5
· 波峰亮点 · circle fill #3b82f6 radius 2
验证: qlmanage -t 静态截图 · 与 Login stacked 变体完全一致
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
backend 服务 volumes 追加 ./scripts:/scripts:ro，允许容器内 部分 runbook 和运维脚本直接读取宿主 scripts/ 目录（只读， 避免容器写入污染宿主）。 🤖 Generated with Claude Code Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
本 session 前期对话中生成的 UI 重设计交付物。3 个视觉方向 × 代表页面，用于团队评审确认最终 Industrial 方向的落地细节。 文件清单： index.html · 3 方向对比 + 单屏聚焦切换 dashboard-A-industrial.html · Industrial Command Console (45K) dashboard-B-editorial.html · Editorial Ops Journal (17K) dashboard-C-glass.html · Glass Observatory (20K) landing-A-industrial.html · 营销首页 hero + 产品 preview alerts-A-industrial.html · 双栏 split + AI causal + runbook hosts-A-industrial.html · 主机详情 + GPU 4× A100 专区 login-A-industrial.html · SSO + 实时 incident ticker 所有文件 self-contained（Google Fonts CDN 加载 Geist/Fraunces/Inter）。 方向 A (Industrial Command Console) 已锁定并应用到真实 React 代码， 其他 2 方向作为方向锚留档。 🤖 Generated with Claude Code Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
盘点当前自研 PromQL 引擎（promql_service.py 901 行）与 roadmap-v1.0 F6 章节决策（代理外接）的战略冲突，列出 A/B/C 三条路线供评审拍板。 若路线 A 通过，给出 6 Sprint 落地计划（颗粒度到单 Task）： - Sprint 1: 测试基线 + AST 重构（阻塞项） - Sprint 2: 指标白名单动态化 + Metadata API - Sprint 3-5: 算子/Range 函数/向量运算补齐 - Sprint 6: Histogram + Recording rules 子集 附：现状兼容度矩阵（Exporter 85% / PromQL API 40% / Webhook 95%）。
路线决策: 开源 promql-parser (AST) + 自研 evaluator (SQLAlchemy) - 放弃路线 A (全自研): 避免重复造轮子 - 放弃路线 B (外接代理): 强依赖用户自建 Prom, 违背自研意愿 - 放弃路线 C (双轨并存): 心智负担高 POC 验证 (promql-parser 0.8.0 @ PyPI 2026-04-06): - 33/33 表达式全通过 (18 baseline + 12 Sprint 3-5 新增 + 3 Grafana 实战) - 嵌套表达式 sum(rate(a[5m])) / sum(rate(b[5m])) 正确解析 - AST 节点 VectorSelector/MatrixSelector/Call/AggregateExpr/BinaryExpr 含 modifier.card/matching/return_bool, 满足 vector matching 需求 - Python 3.12 manylinux x86_64 wheel 1.4 MB, Docker 开箱可装 Sprint 计划从 6 压缩到 4 (省去 AST parser 自研阶段): - Sprint 1: 接入 parser + 测试基线 + 旧路径适配 (901 行 → ~600 行) - Sprint 2: Evaluator visitor 重写 + 指标白名单动态化 + Metadata API - Sprint 3: Evaluator 算子补齐 (parser 已全覆盖, 纯补分支) - Sprint 4: 向量-向量算术 + vector matching + Histogram KR 目标: 语法覆盖率 40% → 90%+, Grafana dashboard 可跑率 0% → 90%
生产部署仍用 3001，通过 /opt/vigilops/.env 显式设置 FRONTEND_PORT=3001 锁定。 - docker-compose.yml: FRONTEND_PORT default 3001→3002 - docker-compose.prod.yml: FRONTEND_PORT_HOST default 3001→3002 - deploy/docker-compose.prod.yml: 同上 - deploy/docker-compose.quickstart.yml: 同上 验证: docker compose up -d 全栈健康 - frontend :3002 HTTP 200 - backend :8000 /health api/db/redis 三绿
Owner
Author
Update 2026-04-23本 PR 新增 3 个 commits（PromQL 计划 + 端口调整）： 新增 commit
PromQL 计划亮点（详见
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
UI 全量重设计 XL 档 Phase 1+2 交付：
Logo 方向 H（Sleeping Watcher）：闭眼 + emerald 心跳，对应产品 tagline `AI fixes alerts while you sleep` —— 你睡了，AI 还在监控修复。
改动清单（13 文件，+661/-79）
Logo 资产（4 文件）
Logo 组件
Phase 1 — Token 基建（DESIGN.md 官方化）
Phase 2 — 入口三件套
验收证据
```
frontend tsc 0 errors (silent)
eslint 新文件 (Logo.tsx) All checks passed
Login.tsx / Landing.tsx baseline 4 any debt，零新增
Logo 组件 3 变体已打通（后续所有页面复用同一出口）
```
XL 档后续路线
预览方式
```bash
cd frontend && npm run dev
访问
http://localhost:5173/design-drafts/preview.html # Logo v3 (G/H/I) 对比
http://localhost:5173/landing # 新 Landing nav
http://localhost:5173/login # 新 Login stacked logo
```
🤖 Generated with Claude Code