rhinelab-ui/verification/UI-ALIGNMENT.md

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；其他浏览器的字体栅格化尚未逐一检查。