# 需求：R-024 策略 tab 列设置改为拖拽排序 · 已完成

> 归档日期：2026-09-10 ｜ 需求状态：已完成 ｜ 实现迭代：[迭代 20-策略列设置拖拽排序](../04-迭代记录/20-策略列设置拖拽排序/迭代复盘.md)
> 讨论记录索引：本文档（定稿 + 变更记录）；登记：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） |