3.2 KiB
3.2 KiB
需求：R-024 策略 tab 列设置改为拖拽排序 · 已完成
归档日期：2026-09-10 ｜ 需求状态：已完成 ｜ 实现迭代：迭代 20-策略列设置拖拽排序 讨论记录索引：本文档（定稿 + 变更记录）；登记：2026-09-10 ｜ 来源：老师反馈（策略 tab 列设计细节优化） 实现状态：已实现（迭代 20 验收通过，2026-09-10 老师页面确认）
诉求（老师，2026-09-10）
细节优化，策略 tab 下的列设计，可否做成鼠标选中后、拖动排序的形式？
现状
策略 tab「列设置」弹层（ColumnSettingsPopover，R-013 迭代 11 实现）管理可配置列（基础数据列 + 自定义字段列）：
- 显隐：复选框勾选；
- 排序：↑↓ 箭头按钮（连续点按移动），保存按钮提交整份列配置（one-divine-lot/strategy-columns/update）；
- 代码注释原话：「同 Tab 设置简化版：用箭头替代 DnD，零依赖稳妥」——当时刻意简化。
定稿结论（2026-09-10 老师确认方案 A）
方案 A：列设置弹层内拖拽排序（原生 HTML5 DnD，复用 R-011 Tab 设置已验证模式）
- 弹层每行加 ≡ 拖拽手柄（整行 draggable），按住拖动到目标行松手即重排；落点行高亮提示，视觉沿 Tab 设置（UI约束-003）同一套：color-mix(primary 12%) 淡底。
- 落点立即持久化（对齐 Tab 设置体验）：每次 drop 调一次 one-divine-lot/strategy-columns/update 整表提交（含不可见列保位置）；点按手势（勾选显隐 / ↑↓ 微调）同步立即持久化 → 弹层去掉「保存」按钮， 只留「关闭」，Toast 反馈保存结果。
- ↑↓ 箭头保留作兜底（精准微调场景，与拖拽并存）。
- 固定列（代码/名称/操作/展开箭头）不参与排序，恒显示（维持现状）。
- 边界：不改服务端 API（strategy-columns/update 已是整表覆盖语义，天然兼容）；核心改动在 ColumnSettingsPopover.jsx 单文件；显隐勾选交互不变。
决策记录
| 项 | 结论 | 讨论 |
|---|---|---|
| 拖拽范围 | 方案 A：弹层内拖拽（≡ 手柄） | 老师 2026-09-10 确认；方案 C（表头直拖）改动大、需兼容百分比排序点击，暂不做 |
| 持久化时机 | 落点立即持久化（每次变更即写库） | 对齐 Tab 设置（UI约束-003）体验；strategy-columns/update 为整表覆盖语义，天然支持 |
| ↑↓ 箭头 | 保留作兜底 | 与拖拽并存，兼顾精准微调；不增加额外依赖 |
| 保存按钮 | 移除（改「关闭」） | 所有变更即时持久化后按钮失去意义，避免「忘了点保存」 |
| 服务端 | 零改动 | strategy-columns/update 已是整表覆盖 |
变更记录（追加式）
| 日期 | 变更 | 原因 |
|---|---|---|
| 2026-09-10 | 拖拽落点提示从整行高亮改为行间（两列之间）间隙高亮线，指示精确插入位置（前/后） | 老师反馈：整行高亮只能看出落在哪一行，无法判断会插入目标列的前面还是后面；间隙高亮是主流列表拖拽交互（Tab 设置的整行高亮是否同样调整待老师评估，见 UI约束-007） |