mirror of
https://gitcode.com/JianFeeeee/webui4frpc.git
synced 2026-10-02 23:24:00 +00:00
f4fb964734
在 375/320 屏上实机取证（三节点集群 192.168.2.{30,106,60}），修掉四个
独立缺陷。前三个是布局根因，第四个是被前三个掩盖的真 bug。
1. 全站没有 box-sizing 重置
content-box 下 `.sidebar { width:100%; padding:10px 12px }` 在 375 视口
实算 399px（320 屏 344px）。顶栏主题色块右缘 332 > 320，被
`.sidebar{overflow-x:hidden}` 静默裁掉 ⇒ 主题切换在手机上点不到。
桌面侧栏同样是 274px 而非声明的 246px。
注：已有两个「窄屏顶栏右侧溢出」commit（64d3359 用 flex min-width/vw
限宽、0559cc5 改 backdrop-filter）都在治症状，真因是盒模型。
2. fit-view-on-init 把画布缩到不可读
画布用绝对图形坐标（x=60/760，两列随转发数向下增长），bbox 远大于
手机视口。实测合成缩放 375 屏 0.3135 ⇒ 248px 的卡片渲成 85px、
有效字号 4.39px；**1280 桌面也只有 0.6011 / 8.42px**（5 条转发即
触发），所以这不只是窄屏问题。
改为删掉 fit-view-on-init 自己接管：MIN_ZOOM=0.65 下限 +
frameCanvas() 把最左上节点重贴到内边距边缘（fitView 是居中的，窄屏
下会把两列接缝摆在视口正中，两边各看一半）。duration:0 保证量 rect
时动画已停；初始 frame 只认一次，避免后续 add 节点把正在平移的用户
拽走。挂 @init + @nodes-initialized（store 与节点分先后到达，任一
单独触发都会 fit 空画布）。
3. el-dialog 固定宽度超出手机视口
Element Plus 把 width 写成内联 --el-dialog-width。375 屏实测
left=0 right=420，右上关闭按钮在屏外，只能横向滚 overlay 才够得到。
窄屏下 clamp 到 calc(100vw - 24px)。
4. 【滚动塌陷】状态页在手机上完全无法滑动
`.status-page` 是 height:100% + overflow:hidden 的 flex 列，内层
`.status-body` 靠 flex:1 + overflow-y:auto 自己滚。375 屏下可用高度
651px，而两个不可压缩子元素 topbar(122) + kpis(565) 已占 687px ⇒
`.status-body` 被分到 **0px**，其中却有 1682px 内容。同时外层
`.content` scrollHeight==clientHeight（无可滚内容）⇒ 整页没有任何
可滚动元素，手势完全无响应。
修法：让 `.content`（App.vue 已声明 flex:1 + overflow-y:auto）做唯一
滚动容器，页面自身不再 height:100%/overflow。ClusterView /
SettingsView 同类嵌套一并去掉，从根上消灭「按剩余空间算高度」这类
算术错误。另把 ≤380px 的 KPI 单列改回两列（单列四张全宽卡自身就
565px，超过整个视口，是塌陷的起因）。
验证（构建产物挂反代打真后端 + 共享 Chromium CDP）：
- 缩放 0.31→0.65、卡片 85→177px、有效字号 4.39→9.1px（320/375/414/1280 一致）
- bodyScrollW 344→320（320 屏），横向溢出清零；主题色块全部落回屏内
- 对话框 left 12 / right 363（完全在屏内，关闭键可达）
- 9 种视口 × 5 个页面 = 45 格全部「末块可达 + 无横向滚动」，console 零报错
修复前：状态页 375/320/414 全部无滚动；1280 桌面状态/设置同样中招
- 三节点滚动重启部署，集群收敛 pending=0 / topo=4，owner 与实际
worker 进程一一对应，journal 无 panic/fatal，reclaimed=2 各节点自愈