34 lines
2.7 KiB
Markdown
34 lines
2.7 KiB
Markdown
# UI 对齐复核 · 2026-09-09
|
||
|
||
沿用项目的原生 DOM/CSS 实现流程。范围为导航入口、检索与收藏弹窗、详情操作区、设置网格，以及独立查看器的页眉和页脚。
|
||
|
||
## 修正
|
||
|
||
- 检索表头和结果行共用列定义与 7px 右侧留白，表头和滚动区域均预留稳定的细滚动条空间。原来 10px 滚动条加上结果行独有的 7px padding，使科室和权限列相对表头左移 17px。
|
||
- 权限文字与箭头改为水平 flex 居中；箭头占固定宽度，靠权限列右侧排列，避免字号差异造成基线偏移。
|
||
- 关闭和搜索符号以 CSS 几何绘制，保留原有符号轮廓和按钮语义，避免字体字符自身的留白影响对齐。导航按钮统一行高与最小高度，快捷键框禁止收缩。
|
||
- 搜索输入框清除浏览器默认水平 padding；档案编号禁止压缩，标题允许在自身列内换行。
|
||
- 每个分类按钮始终预留选中标记空间，切换分类不会改变按钮宽度或后续文字位置。
|
||
- 详情导出和设置底部操作使用 flex 居中，移除导出箭头的 float 布局。
|
||
- 设置面板预留稳定滚动条空间；音频和画质网格均使用 32px 列间距，消除展开高级设置时的横移及两组网格的错位。
|
||
|
||
## 实际浏览器验证
|
||
|
||
使用本地 Vite 页面、现有 40 份档案内容，读取 DOM 边界并检查截图。坐标均为浏览器 CSS 像素。
|
||
|
||
| 检查 | 结果 |
|
||
| --- | --- |
|
||
| 1280×720 原始表头 / 首行 | 科室 x=754 / 742.667；权限 x=907.333 / 896，差 11.333px，即基准尺寸 17px |
|
||
| 1280×720 修正后 | 科室均为 x=742.667；权限均为 x=896 |
|
||
| 1920×1080，单条 X-001 | 表头和结果的三列左边界均为 384、1114、1344 |
|
||
| 1366×768，全部 40 行 | 三列左边界约为 273.400、792.511、956.067；所有行相对表头的最大偏差 0px |
|
||
| 1366×768，工程研究 / 单条 X-020 | 三列位置与全部档案一致；六个分类按钮左边界在切换前后完全一致 |
|
||
| 无匹配结果 / 收藏空状态 | 空状态正常居中，表头保留，关闭后焦点返回入口 |
|
||
| 设置展开 / 收起 | 关闭按钮 x 均为 1364.047；音频与画质网格的两列均起于 x=474、971 |
|
||
| 详情页 | 导出文字与箭头居中，与收藏按钮共同位于操作行；页签、正文和元数据目视检查正常 |
|
||
| 独立查看器 | 页脚帮助、拆解/重组按钮组和复位按钮的垂直中心均为 y=982；无需修改 |
|
||
|
||
`npm run build` 通过（TypeScript 与 Vite）。Vite 仍提示主包大于 500kB，与本次 CSS 对齐修正无关。本次未新增仅重复 CSS 声明的单元测试。
|
||
|
||
浏览器验证为 Chromium；其他浏览器的字体栅格化尚未逐一检查。
|