From 64d335998132c246bd5e1829dda3c62f7f268fc2 Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Thu, 3 Sep 2026 08:50:23 +0800 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E7=AA=84=E5=B1=8F=E9=A1=B6?= =?UTF-8?q?=E6=A0=8F=E5=8F=B3=E4=BE=A7=E6=BA=A2=E5=87=BA=20=E2=80=94=20fle?= =?UTF-8?q?x=20=E8=87=AA=E5=8A=A8=E6=9C=80=E5=B0=8F=E5=B0=BA=E5=AF=B8=20+?= =?UTF-8?q?=20vw=20=E9=99=90=E5=AE=BD=E4=B8=A4=E5=A4=84=E8=AF=AF=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 两个原因叠加导致顶栏横向溢出： 1. "webui4frpc" 是不可断行单词，.sb-brand-text 没给 min-width:0 + overflow:hidden，其 flex 自动最小尺寸就等于 min-content（≈85px）， 顶栏因此拿不出空间给右侧身份区，超出部分溢出。现给品牌文字整条链路 加可收缩约束，标题用 ellipsis 截断。 2. .sb-identity 用 max-width:42vw / .id-name 用 14vw 限宽：vw 含垂直 滚动条宽度，比实际可用内容宽度大；且 max-width 只封顶盒子，内部 flex:0 0 auto 的角色徽标与退出按钮仍会把它撑开。改为全链路 min-width:0 + overflow:hidden，由 flex 自行分配（.sb-foot 也从 flex:0 0 auto 改 0 1 auto，允许被压缩）。 另加 .sidebar { overflow-x: hidden } 作兜底，任何子项算错都不再产生 横向滚动条；≤380px 隐藏角色徽标（它不可收缩，"超级管理员"≈70px）。 验证：tsc --noEmit 通过、npm run build 通过、产物 CSS 已确认规则生效； 三节点部署 0.1.2 后环正常（cycle 推进、pending=0、topo=5）。 --- web/src/App.vue | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/web/src/App.vue b/web/src/App.vue index c151fbd..05f454c 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -384,7 +384,9 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)? align-items: center; gap: 10px; padding: 10px 12px; - overflow: visible; + overflow: hidden; + /* 兵家必争：任何子项算错都不得弄出横向滚动条 */ + overflow-x: hidden; border-right: none; border-bottom: 1px solid var(--w4f-line); padding-top: max(10px, env(safe-area-inset-top)); @@ -403,6 +405,16 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)? gap: 8px; flex: 1 1 auto; min-width: 0; + overflow: hidden; + } + /* 品牌文字必须可收缩：“webui4frpc”是不可断行单词，不给 min-width:0 + + overflow:hidden 的话它的 flex 自动最小尺寸等于 min-content（≨85px）， + 顶栏就拿不出空间给右侧身份区，溢出为横向滚动。 */ + .sb-brand-text { min-width: 0; overflow: hidden; } + .sb-brand-text b { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .sb-logo { width: 30px; height: 30px; border-radius: 10px; } .sb-brand-text b { font-size: 14.5px; } @@ -451,23 +463,30 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)? box-shadow: none; } - /* 身份与主题折进顶条右侧 */ + /* 身份与主题折进顶条右侧。 + 不再用 vw 限宽：vw 含垂直滚动条宽度，会比实际可用内容宽大；而且 + max-width 只封顶盒子，内部 flex:0 0 auto 的徒章/按钮仍会撑出去。 + 改为全链路可收缩（min-width:0 + overflow:hidden），由 flex 自行分配。 */ .sb-foot { margin-top: 0; padding-top: 0; display: flex; align-items: center; gap: 8px; - flex: 0 0 auto; + flex: 0 1 auto; + min-width: 0; } .sb-identity { margin-bottom: 0; padding: 5px 8px; font-size: 11.5px; - max-width: 42vw; + flex: 0 1 auto; + min-width: 0; + max-width: none; + overflow: hidden; } - .sb-identity .id-name { max-width: 14vw; } - .sb-theme { margin-bottom: 0; } + .sb-identity .id-name { min-width: 0; max-width: none; } + .sb-theme { margin-bottom: 0; flex: 0 0 auto; } .sb-theme .sw { width: 22px; height: 22px; border-radius: 7px; } .main { height: auto; flex: 1; min-height: 0; } @@ -479,10 +498,12 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)? } } -/* 极窄（≤ 380px，iPhone SE / 小屏安卓）：进一步压缩顶条 */ +/* 极窄（≤ 380px，iPhone SE / 小屏安卓）：进一步压缩顶条。 + 角色徒章是 flex:0 0 auto 不可收缩的（“超级管理员”≨70px），极窄下隐去， + 用户名与退出按钮保留。 */ @media (max-width: 380px) { .sb-brand-text b { font-size: 13px; } - .sb-identity { max-width: 38vw; padding: 4px 7px; } + .sb-identity { padding: 4px 7px; } .sb-identity .id-level { display: none; } .sb-i { font-size: 9.5px; } .content { padding-left: 10px; padding-right: 10px; }