2.5 KiB
2.5 KiB
需求：R-025 设置页 Tab 设置排序落点统一为间隙高亮线 · 已定稿
登记：2026-09-10 ｜ 来源：老师指令（迭代 20 复盘遗留第 2 项确认）｜ 状态：已定稿（2026-09-10 老师指令） 归属：迭代 21-Tab设置排序间隙高亮统一 ｜ 实现状态：未开始
诉求（老师，2026-09-10）
神之一手设置页的分组 tab 排序（Tab 设置），也改一下上面（列设置弹层）的拖动高亮显示形式。
背景
- R-024/迭代 20 列设置弹层拖拽落点已从整行高亮改为行间间隙高亮线（UI约束-007），老师确认「直观多了」；
- 复盘遗留第 2 项：设置页「Tab 设置」的排序仍是整行高亮（overId → 行淡蓝底，UI约束-003），存在同样的 「无法判断插入前/后」观感问题；老师指令统一为间隙线形式。
定稿结论（2026-09-10 老师指令）
设置页「Tab 设置」排序落点从整行高亮改为行间间隙高亮线（复用 UI约束-007 / R-024 已验证模式）：
- 拖动悬停时按鼠标在目标行内的 Y 坐标（上半/下半）判定，间隙线画在目标行上缘（插其前）/下缘（插其后）；
- drop 事件内按坐标重算插入位置（不依赖 state 闭包）；拖回原位置（to===from 或 to===from+1）跳过写库；
- 保留 onDragEnd 清理残留；整行高亮背景（color-mix 12%）移除；
- 其余维持不变：≡ 手柄、显隐开关、落点立即持久化（tabs/update）、「刷新页面后生效」提示、内置/策略徽标、 saving 期间禁用拖拽。
决策记录
| 项 | 结论 | 讨论 |
|---|---|---|
| 范围 | 仅 Tab 设置（SettingsSection.jsx TabSettings）落点指示 | 老师指令；不动表格结构、不动持久化、不动开关 |
| 落点形式 | 行间间隙高亮线（上缘=前/下缘=后） | 与 R-024 弹层全同，UI约束-007 已定义 |
| 判定 | 目标行内 Y 坐标上下半区 | 与 R-024 全同 |
| 无操作 | to===from 或 to===from+1 跳过写库 | 复用 R-024 数学式 |
| 服务端/API | 零改动 | tabs/update 整表语义不变 |
| 约束更新 | UI约束-003 变更：落点从整行高亮改间隙线；UI约束-007 补「Tab 设置已统一」 | 2026-09-10 老师指令 |
关联
- 上游：UI约束-007（排序交互间隙线标准）、R-024（同款模式实证）、迭代 20 复盘遗留第 2 项；
- 迭代 20 复盘遗留第 1 项（test-r013-columns 期望过期）不在本需求范围。