35 lines
2.4 KiB
Markdown
35 lines
2.4 KiB
Markdown
# 疑难问题排查记录（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。
|