diff --git a/.claude/memory/decisions.md b/.claude/memory/decisions.md index 2db8b2b..48e9c7a 100644 --- a/.claude/memory/decisions.md +++ b/.claude/memory/decisions.md @@ -47,12 +47,13 @@ ```css body { background: #05080f; /* 全屏深色画布 */ - min-height: 100vh; min-width: 1280px; - display: flex; align-items: center; justify-content: center; + min-height: 760px; min-width: 1320px; /* PAD(720+40padding)×(1280+40padding) */ + display: grid; place-items: center; /* 用 grid 居中,不用 flex(见下文 Why) */ padding: 20px; } .device-frame { width: 1280px; height: 720px; /* PAD 横屏逻辑画布 */ + flex-shrink: 0; /* 兜底保护:即使在 flex 容器中也禁止被压缩 */ border-radius: 24px; /* 硬件外壳圆角 */ box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); overflow: hidden; /* 防止内容溢出滚动条 */ @@ -67,7 +68,15 @@ body { - 所有 1280×720 主屏页面(餐线营养秤、档口营养秤、配比秤、净菜柜、毛菜秤等)均按此模板改造 - 副屏(如 480×320 双屏小屏)复用现有 `.screen-frame` 并升级阴影/圆角即可,无需新增 `.device-frame` - 内部 `height: calc(100vh - X)` 必须改为 `height: calc(100% - X)`,避免视口与外壳尺寸耦合 +- **body 用 `display: grid; place-items: center`,不要用 flex**。2026-08-14 毛菜秤改造严重踩坑:`body { display:flex; justify-content:center; align-items:center; min-width:1280px; padding:20px }` 配合 `.device-frame { width:1280px; flex-shrink:0 }` 时,flex 算法在主轴计算上把 device-frame 的 hypothetical main size 算成 1648px(1280 + 神秘 368px),导致 `justify-content:center` 把 device-frame 反向定位到 offsetLeft=-48,横向滚动条出现,视觉上"完全偏左不居中"。即使 `flex-shrink:0` 也救不了——这只防止压缩,不防止 flex 容器对 item 尺寸的错误估算。改用 grid 后,scrollWidth=1600=viewport、offsetLeft=160 完美居中。**这跟之前 commit 2373704 餐线营养秤的 flex 方案表现不同**,怀疑与 Chromium 版本/页面其他元素 min-content 计算有关,但 grid 方案在所有页面都稳定。 +- **`.device-frame` 仍要加 `flex-shrink: 0`** 作为兜底(虽然 body 已改 grid,但留作子项保护不会出错) +- **body `min-width` / `min-height` 必须把 padding 算进去**:`min-width: 1320px` (= 1280 + 40 padding),`min-height: 760px` (= 720 + 40 padding)。注意 `* { box-sizing: border-box }` 下 min-width 作用在 border-box,所以 padding 已包含在 1320 内,不会重复加。 - PAD 内禁止可见滚动条(见 [[feedback.md#PAD 终端页面内禁止可见滚动条]]) +- **PAD 外壳改造的强制验证步骤**:改造完成后必须用浏览器实测 + 1. `document.querySelector('.device-frame').clientWidth === 1280` + 2. `document.querySelector('.device-frame').getBoundingClientRect().left === (window.innerWidth - 1280) / 2`(居中验证) + 3. `document.body.scrollWidth === window.innerWidth`(无横向溢出) + 不能只靠代码审查。CSS flex/grid 子项宽度行为反直觉,代码看着对但实际塌缩/偏移很常见。 **See Also**: - [[feedback.md#PAD 终端页面内禁止可见滚动条]] diff --git a/.idea/claudeCodeTabState.xml b/.idea/claudeCodeTabState.xml index b02f633..381792d 100644 --- a/.idea/claudeCodeTabState.xml +++ b/.idea/claudeCodeTabState.xml @@ -7,7 +7,7 @@