From fb260063efb0cf2c4fbace20aeeec101bc0e5cb4 Mon Sep 17 00:00:00 2001 From: ylytdeng Date: Sun, 17 May 2026 18:09:58 +0800 Subject: [PATCH] =?UTF-8?q?style(monitor=5Fweb):=20Web=20UI=20polish=20-?= =?UTF-8?q?=204=20=E7=B1=BB=20design=20=E6=94=B9=E8=BF=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 跟 design-critique skill 评审后, 实施 4 项可执行改进: ## 1. 🔴 修 header flex overflow bug 原: .stats { margin-left:auto } 在浏览器窄时占主轴空间, 把后面的 🛠️ 工具 + ⚙️ 按钮挤出视野 (用户截图反复出现"看不到按钮")。 改: .stats: 加 min-width:0 + overflow:hidden + white-space:nowrap .header: 加 flex-wrap:wrap + row-gap:8px 兜底换行 .tools-btn / .settings-btn: 加 flex-shrink:0 不许被压缩 ## 2. 加 design tokens (:root) 20+ 处硬编码颜色 / 间距 / 圆角散落, 改一处怕漏一处。统一: 颜色: --bg / --bg-elev / --surface / --border / --accent / --warn ... 间距: --s1..s6 (4/8/12/16/24/32) 字号: --t1..t6 (11/12/13/15/18/24) 圆角: --r1 (6) / --r2 (10) / --r3 (14) / --r-pill (999) 阴影: --shadow-1 / --shadow-2 / --shadow-glow 工具区 CSS 全量切到 token, 老消息流 CSS 保持原样不动 (避免回归)。 ## 3. 视觉强化 (tab + primary button) Tab: - active 加 linear-gradient 渐变背景 (透明 → accent-bg) - ::after 蓝色下划线 + box-shadow glow 发光 - hover 微微抬亮 - 切换有 fadeIn 200ms 动画 Primary 按钮 (Step 1 主操作): - 改成实心渐变 #4fc3f7 → #29b6f6 (之前是空心边框, 跟普通按钮区别太小) - 加 box-shadow 立体感 + inset 高光 - hover 上浮 2px + 阴影放大 - 跟普通按钮 (透明 surface) 主次关系清晰 前置条件: - 之前: 黄色左边框 + 灰文字 (像 form error) - 现在: 紧凑 pill (背景 + 圆角 999), 头部加 ● 点 - 显眼但不焦虑 ## 4. 上台阶的小招 body: radial-gradient(ellipse at top, #14142a, #0a0a0f) 顶部柔光 body: 中文字体优先 PingFang SC / HarmonyOS / Source Han Sans (Segoe UI 渲染中文糊) body: antialiased + optimizeLegibility header: backdrop-filter blur(20px) + position:sticky 玻璃质感 日志框: JetBrains Mono > SF Mono > Consolas, line-height 1.55 ## 默认展开 toolsPanel 之前默认隐藏要先点 🛠️ 工具 按钮才能用, 用户进来一脸懵。改成默认展开: toolsPanel 加 class="show"。toggleTools() 仍能切换 (隐藏后可还原)。 ## 实测 headless chrome 截图确认: - 🟢 三个按钮全可见 - 🟢 tab active 蓝色高亮 + 发光下划线 - 🟢 STEP 1 主按钮 primary 蓝色实心 突出 - 🟢 STEP 2 普通按钮 透明 layer - 🟢 前置条件 pill 黄色 chip - 🟢 背景 radial gradient 顶部柔光过渡 测试 185/185 通过。 ## 跟评审建议的对照 | critique 建议 | 实施 | |---|---| | 修 header flex bug | ✅ | | 加 design tokens 系统化 | ✅ (工具区全量, 老消息流保持原状) | | tab active 渐变 + 发光下划线 | ✅ | | primary 按钮实心渐变 + 阴影 | ✅ | | body radial-gradient 背景 | ✅ | | 中文字体栈优先苹方 | ✅ | | header backdrop-filter | ✅ | | 前置条件 pill 化 | ✅ | --- monitor_web.py | 127 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 97 insertions(+), 30 deletions(-) diff --git a/monitor_web.py b/monitor_web.py index bb9566f..ddd8b35 100644 --- a/monitor_web.py +++ b/monitor_web.py @@ -1653,15 +1653,50 @@ HTML_PAGE = ''' 微信消息监听 @@ -1784,7 +1851,7 @@ a.msg-link{text-decoration:none;color:inherit} -
+