Files
JX-BPOS/apps/web
ChaiHaoandClaude Opus 5 fffb46eae7 修抽屉两处真故障:详情页里被压成 129px、portal 后令牌全失效变透明
用户报「点开连输入框都看不见」,我前两轮量的是货架那条路 —— 那条本来就是好的。
**走详情页进去才踩得到**,两处叠在一起:

① **抽屉被钉进详情卡里**。`.g-drawer` 是 `position: fixed`,而详情页容器 `.g-detail`
   带着入场动画的 `transform` —— **带 transform 的祖先会成为 fixed 的包含块**,
   于是 `inset: 0` 解析成那张卡的盒子:实测面板矩形 520×**129**,头尾一挤,
   中间的输入框整片没了。改走 `createPortal` 挂到 body,与 DOM 位置解绑。

② **portal 之后面板变透明**。整套令牌(--card / --cline / --ink …)定义在 `.gov-root` 上,
   挂到 body 就出了那个作用域:实测 `background-color: rgba(0, 0, 0, 0)` ——
   顶栏与页面内容从抽屉里透出来,字叠字。修法是把 `gov-root` 类跟着portal 一起挂,
   并给面板背景与边框留了字面兜底值。

顺带:z-index 60 → 120(压过顶栏,先前顶栏那一条压在抽屉标题上)。

实测两条路都验:详情页与货架各开一次,面板均为 (760, 0, 520, 577)、背景 rgb(255,255,255)、
四个输入框全在屏内;详情页测试连接照旧只测不存(判词是厂商原话),Esc 与遮罩关得掉。
五闸绿。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
2026-07-30 01:36:44 +08:00
..