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:
@@ -1680,10 +1680,11 @@ body{
|
|||||||
height:100vh;display:flex;flex-direction:column;
|
height:100vh;display:flex;flex-direction:column;
|
||||||
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
||||||
}
|
}
|
||||||
/* 顶部 header: 玻璃质感 + sticky + 防按钮被挤掉 */
|
/* 顶部 header: sticky + 防按钮被挤掉
|
||||||
|
原本用 backdrop-filter:blur(20px) 但每次 SSE 推消息触发 reflow 都要 GPU
|
||||||
|
重绘整个 header, 在低端机 / 高频消息时拖慢渲染。改用纯渐变背景。 */
|
||||||
.header{
|
.header{
|
||||||
background:linear-gradient(135deg,rgba(26,26,46,.85),rgba(22,33,62,.85));
|
background:linear-gradient(135deg,#1a1a2e,#16213e);
|
||||||
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
|
|
||||||
padding:14px 24px;
|
padding:14px 24px;
|
||||||
border-bottom:1px solid var(--border);
|
border-bottom:1px solid var(--border);
|
||||||
display:flex;align-items:center;gap:12px;
|
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="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>
|
<button class="settings-btn" onclick="toggleSettings()" title="通知设置"><svg class="i"><use href="#i-settings"/></svg></button>
|
||||||
</div>
|
</div>
|
||||||
<div id="toolsPanel" class="show">
|
<div id="toolsPanel">
|
||||||
<div class="tool-tabs">
|
<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 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>
|
<button class="tool-tab" data-pane="wxwork"><svg class="i"><use href="#i-briefcase"/></svg> 企业微信</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user