2.4 KiB
2.4 KiB
疑难问题排查记录（web）
给 AI 协作者：本文件按「现象 → 根因 → 修复 → 约束」四段式记录前端已排查过的疑难问题。 遇到看起来像坏了的样式 / 交互问题，先按现象关键词在这里搜一遍，别从零排查； 解决新问题后按同样结构在末尾追加编号条目。
1. 表单控件聚焦光晕被裁（模块管理 / 菜单管理）
现象（2026-10-16）：表单里的输入框获得焦点时，聚焦环（2px 外发光）上下左右都可能被裁掉一部分， 看起来像"折叠"了一截。菜单管理、模块管理里的表单都有此问题。
根因：
- 聚焦环不是边框，是画在控件边框外侧的 2px
box-shadow（g3soft-libs/packages/ui/src/input/Input.vue:486；Select / DatePicker / RangePicker 同款）。 - 页面结构：白卡
.mm-config-stack（此前带padding: 16px）→ 滚动容器.mm-config-pane（overflow: auto，自身此前无 padding）。 - 关键机制：滚动容器在自己的 padding 边缘裁切内容。内边距放在外层白卡上，保护不了 贴着滚动容器边缘的控件——控件贴着滚动容器左缘（水平 padding 为 0，永远贴边）， 光晕外侧的 2px 就被裁掉。
- 上下方向同理：Tab / 点选靠边的字段时，浏览器只把它自动滚到"刚好进入视野"（贴边），光晕照样被裁。
修复：
- 文件：
web/src/views/module/module-management/index.vue、web/src/views/module/MenuManagement.vue。 - 把内边距从
.mm-config-stack挪到滚动容器.mm-config-pane自己身上（padding: 16px，视觉位置不变）。 .mm-config-pane同时加scroll-padding: 16px：让「聚焦自动滚动」也留出同样余量。- 原型 fms-vue 本来就是这么写的（
.mm-config-pane { padding: 12px 16px 16px }），移植时放错了层。
约束：
- 滚动容器的内边距必须放在滚动容器自己身上，放外层不生效。
- 滚动过程中正掠过边缘的字段，光晕会被裁一瞬——这是滚动容器的固有行为（同页面视口裁切）， 属正常现象；不要为它改组件库的焦点环（"画在控件内侧"是设计变更，需另行决策）。
- 同类结构（外层 padding + 内层 overflow 滚动容器）出现在别处时，套用同一条：让滚动容器自己带 padding。