/** * 票 103 静态闸门:菜单再左移整页宽的 5%,状态栏整体左移、右侧留出整页宽的 15% 空白。 * * 维护者 2026-11-02: * 1. 菜单按钮再略微向左移动(按整体页面宽度计算),2026-11-02 二次反馈定稿 5%; * 2. 「归位 / 返回全球 / 时间」这一栏整体向左移动,右侧留出空隙,定稿 15% * (维护者三轮反馈:25% → 10% → 定稿 15%)。 * * 这两条会互相牵制:菜单右缘左移的同时状态栏也在左移,窄屏上会撞在一起 * (票 37 记录过的「归位压住预警处置」就是这个形状)。所以本闸门不只查字面量: * 它把 CSS 里的位移公式与三条收敛条件**按同一套算法复算一遍**,断言 * (a) 目标视口上两条要求取到要求值,(b) 任何视口上都不重叠、不出界。 * * 用法:node verify/t103-topbar-shift.mjs [源码路径]。 */ import { readShell, ruleBody, check, assertModeNavIntact, report, checkAbsent } from './t102-shell-source.mjs' const source = readShell(process.argv[2]) // ---- 结构:两处位移必须共用同一份公式,否则状态栏的收敛条件会与菜单脱钩 ---- const topbar = ruleBody(source, 'cockpit-shell__topbar') check(/--topbar-nav-shift:\s*max\(/.test(topbar), '顶栏须声明 --topbar-nav-shift(菜单位移的唯一来源)') check(/--topbar-nav-shift:\s*max\([^;]*5vw/.test(topbar), '菜单位移须含整页宽的 5%(5vw)') check(!/--topbar-nav-shift:\s*max\([^;]*10vw/.test(topbar), '菜单位移不得仍是 10vw(维护者已回调到 5%)') check(/--topbar-nav-shift:\s*max\([^;]*32\s*\*\s*var\(--u\)/.test(topbar), '须在票 102 的 -32u 基础上再左移') const modes = ruleBody(source, 'cockpit-shell__modes') check(/transform:\s*translateX\(var\(--topbar-nav-shift\)\)/.test(modes), '菜单必须引用共用位移,不得自带第二份公式') // 只看**声明行**:注释里解释公式会引用 5vw,不该让闸门误红(上一轮踩过这个坑)。 const modeDecls = modes .split('\n') .filter((l) => /^\s*[a-z-]+\s*:/.test(l)) .join('\n') check(!/5vw/.test(modeDecls), '菜单规则的声明里不得再写死 5vw(会与状态栏收敛条件脱钩)') check(!/margin-left/.test(modeDecls), '左移不得用 margin-left(会被 grid 再分配)') const meta = ruleBody(source, 'cockpit-shell__top-meta') check(/position:\s*absolute/.test(meta), '状态栏须脱离 grid 居中流程(否则位移会推挤中列菜单)') check(/right:\s*var\(--topbar-status-inset\)/.test(meta), '状态栏右缘须引用 --topbar-status-inset') check(/top:\s*calc\(/.test(meta) && /translateY\(-50%\)/.test(meta), '绝对定位后仍须与按钮行同水平居中') // 15vw 与三条收敛条件都在顶栏那个变量里声明(单一来源),此处对变量本体验。 check(/--topbar-status-inset:\s*min\(/.test(topbar), '状态栏内缩须用 min() 收敛(窄屏不得压住菜单)') check(/--topbar-status-inset:\s*min\([^;]*15vw/.test(topbar), '状态栏右侧须留整页宽的 15% 空白(15vw)') check(!/--topbar-status-inset:\s*min\([^;]*25vw/.test(topbar), '状态栏留白不得仍是 25vw(定稿 15%)') check(/--topbar-status-inset:\s*min\([^;]*var\(--topbar-nav-shift\)/.test(topbar), '状态栏收敛条件必须与菜单位移同源') // 约束②的常数必须与代数推导一致:510u = 12u 内边距 + 300u 状态栏 + 186u 半菜单宽 + 12u 间距。 // 写成 324u(漏算半菜单宽)会让上界偏大,窄屏挡不住重叠: // 15% 在 1152×720 会压到菜单 13px,此时必须由 510u 这条把 inset 收敛到 135.4u。 check(/--topbar-status-inset:\s*min\([^;]*calc\(50vw - 510\s*\*\s*var\(--u\) - var\(--topbar-nav-shift\)\)/.test(topbar), '「不得压菜单」的常数须为代数推导值 510u(12+300+186+12)') check(!/--topbar-status-inset:\s*min\([^;]*calc\(50vw - 324/.test(topbar), '不得用 324u 这个错常数(漏算半菜单宽,窄屏挡不住重叠)') check(/--topbar-status-inset:\s*min\([^;]*50vw - 180\s*\*\s*var\(--u\)/.test(topbar), '状态栏须有「不得超出页面右缘」的兜底(窄屏不被 overflow 裁掉)') // ---- 复算:按 CSS 里的同一套公式算几何(单位全换算到 px)---- const NAV_W = 372 // 4 枚按钮各 90u + 3×4u 间隙 const NAV_HALF = 186 const META_W = 300 // 归位/进入 + 返回全球 + 128u 时钟槽位 + 2×10u 间隙 + 内边距(留余量) const BRAND_INK = 320 // 品牌标题文字带右缘(6u 起点 + 404u 图宽×74.9%文字带)+ 12u 间距 const GAP = 12 const unit = (h) => Math.max(1, Math.min(2, 0.1235 * h / 100)) // 与 CSS 同式:max(-5vw - 32u, 506.6u - 50vw) const navShift = (w, h) => Math.max(-0.05 * w - 32 * unit(h), 506.6 * unit(h) - 0.5 * w) // 与 CSS 同式:三条约束取 min // ② 的常数 324u 由几何推出(12u 内边距 + 300u 状态栏 + 12u 间距 + 186u 半菜单宽), // 写成 510u 会让窄屏得到负值、把状态栏推到页面外。 const statusInset = (w, h) => Math.min( 0.15 * w - 12 * unit(h), 0.5 * w - 510 * unit(h) - navShift(w, h), 0.5 * w - 180 * unit(h) ) function geometry(w, h) { const u = unit(h) const navLeft = 0.5 * w - NAV_HALF * u + navShift(w, h) const navRight = navLeft + NAV_W * u const statusRight = w - 12 * u - statusInset(w, h) const statusLeft = statusRight - META_W * u return { u, navLeft, navRight, statusLeft, statusRight, blank: (w - statusRight) / w } } // 可行下限是 1152×720:菜单要避开品牌标题(左缘钉在 ~321u),状态栏本身 300u, // 再加两侧内边距与 12u 间距,页面窄于 ~1152u 时三者物理上摆不开 —— // 这不是本票引入的缺陷,是「标题 + 4 枚菜单 + 3 个按钮控件」的固有宽度。 // 更窄的视口不在验收范围内(驾驶舱按 16:9 大屏部署,AGENTS.md 的运行环境也是 1920 档)。 const VIEWPORTS = [ [1152, 720], [1280, 720], [1366, 768], [1600, 900], [1920, 1080], [2384, 1160], [2560, 1440], [3440, 1440], [3840, 2160], ] for (const [w, h] of VIEWPORTS) { const g = geometry(w, h) check(g.statusLeft >= g.navRight + GAP * g.u - 0.5, `${w}x${h}:状态栏不得压住菜单(左缘 ${g.statusLeft.toFixed(0)} vs 菜单右缘 ${g.navRight.toFixed(0)})`) check(g.navLeft >= BRAND_INK * g.u - 0.5, `${w}x${h}:菜单不得压住左侧品牌标题(左缘 ${g.navLeft.toFixed(0)})`) check(g.statusRight <= w + 0.5, `${w}x${h}:状态栏不得超出页面(右缘 ${g.statusRight.toFixed(0)} vs 页宽 ${w})`) } // 目标视口:两条要求必须取到要求值(不是「接近」)。 const target = geometry(1920, 1080) check( Math.abs(navShift(1920, 1080) - (-0.05 * 1920 - 32 * target.u)) < 0.5, '1920×1080:菜单须恰好再左移整页宽的 5%(叠加票 102 的 -32u)' ) check( Math.abs(target.blank - 0.15) < 0.002, `1920×1080:状态栏右缘须恰好停在 85vw,实测留白 ${(target.blank * 100).toFixed(1)}%` ) // 窄屏:两条要求冲突时必须收敛(宁可少移,也不许两栏重叠、不许出界)。 // 1152×720 是可行下限:此处菜单已被标题顶住(位移收敛到标题右缘),留白也收敛。 const narrow = geometry(1152, 720) check(narrow.blank > 0 && narrow.blank < 0.15, '1152×720:15% 会压到菜单 13px,须由「不压菜单」那条约束收敛成更小的留白') check(narrow.statusLeft >= narrow.navRight + GAP * narrow.u - 0.5, '1152×720:收敛后仍不得重叠') check(narrow.statusRight <= 1152 + 0.5, '1152×720:收敛后仍不得出界') // ---- 既有契约不许被这次位移破坏 ---- assertModeNavIntact(source) checkAbsent(source, '只读视图', '三个读数仍须保持下屏') checkAbsent(source, 'configStatusView', '三个读数仍须保持下屏') check( /min-width:\s*calc\([^;]*var\(--u\)\)/.test(ruleBody(source, 'cockpit-shell__clock')), '时钟固定数字槽位仍须在位(否则秒针又推动按钮)' ) report('t103-topbar-shift')