perf(monitor_web): UI 性能优化 + toolsPanel 默认收起

## 用户反馈

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

## 数据

后端 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 (会另开)
This commit is contained in:
ylytdeng
2026-05-17 18:54:11 +08:00
parent b93e85a1a0
commit dd9db0b25b

View File

@@ -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>