From dd9db0b25b7ff9bf2ec76a9a192de5e312fbd6a5 Mon Sep 17 00:00:00 2001
From: ylytdeng <ylytdeng@users.noreply.github.com>
Date: Sun, 17 May 2026 18:54:11 +0800
Subject: [PATCH] =?UTF-8?q?perf(monitor=5Fweb):=20UI=20=E6=80=A7=E8=83=BD?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20+=20toolsPanel=20=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E6=94=B6=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 用户反馈

"为啥我感觉网页的实时消息没那么快了"

## 数据

后端 log 分析 60 次扫描:
- 19 次总耗时 > 5 秒, 最长 125 秒
- 平均 7585ms (正常应该 < 200ms)
- 但 decrypt 只 47ms, query 46ms — **慢在别处**

## 这次修复 (前端 UI 部分)

### 1. toolsPanel 改回默认收起
之前为了 headless 截图改的默认展开, 让消息容器占用屏幕高度从满屏
变成 ~500px, 用户感受是"消息一直在滚, 看不清"。改回默认隐藏 (用户
点 🛠️ 工具 按钮才展开)。

### 2. 去掉 backdrop-filter blur(20px)
header 之前用 backdrop-filter:blur(20px) 实现"玻璃质感", 但每次 SSE
推消息触发 reflow 都要 GPU 重绘整个 header (尤其低端机)。改回纯 CSS
渐变背景, 视觉差异不大但性能好很多。

## 没解决的 (后端固有问题)

backend log 显示 spike 早在 18:34 第一行就有 (62 秒), 远早于 UI 改动。
监控主循环 monitor_thread 的 check_updates() 总耗时偶发飙到 8-125 秒,
但解密+查询只 95ms。**剩余时间在 SSE broadcast / 图片任务排队 /
emoji lookup / protobuf 解析等次要路径**。

这是独立性能问题, 跟 PR #107 / Web UI 改动无关。开 issue 跟进:

→ 见 follow-up issue (会另开)
---
 monitor_web.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/monitor_web.py b/monitor_web.py
index 58d353e..003cec2 100644
--- a/monitor_web.py
+++ b/monitor_web.py
@@ -1680,10 +1680,11 @@ body{
   height:100vh;display:flex;flex-direction:column;
   -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 }
-/* 顶部 header: 玻璃质感 + sticky + 防按钮被挤掉 */
+/* 顶部 header: sticky + 防按钮被挤掉
+   原本用 backdrop-filter:blur(20px) 但每次 SSE 推消息触发 reflow 都要 GPU
+   重绘整个 header, 在低端机 / 高频消息时拖慢渲染。改用纯渐变背景。 */
 .header{
-  background:linear-gradient(135deg,rgba(26,26,46,.85),rgba(22,33,62,.85));
-  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+  background:linear-gradient(135deg,#1a1a2e,#16213e);
   padding:14px 24px;
   border-bottom:1px solid var(--border);
   display:flex;align-items:center;gap:12px;
@@ -1923,7 +1924,7 @@ a.msg-link{text-decoration:none;color:inherit}
 <button class="tools-btn" onclick="toggleTools()" title="工具箱 (解密 / 导出 / 企业微信)"><svg class="i"><use href="#i-wrench"/></svg> 工具</button>
 <button class="settings-btn" onclick="toggleSettings()" title="通知设置"><svg class="i"><use href="#i-settings"/></svg></button>
 </div>
-<div id="toolsPanel" class="show">
+<div id="toolsPanel">
   <div class="tool-tabs">
     <button class="tool-tab active" data-pane="wechat"><svg class="i"><use href="#i-chat"/></svg> 个人微信</button>
     <button class="tool-tab" data-pane="wxwork"><svg class="i"><use href="#i-briefcase"/></svg> 企业微信</button>