47 lines
3.7 KiB
Markdown
47 lines
3.7 KiB
Markdown
# 迭代复盘：20-策略列设置拖拽排序
|
||
|
||
## 结论
|
||
|
||
达成（R-024）：策略 tab「列设置」弹层的列排序从 ↑↓ 箭头点按升级为**鼠标选中后拖动排序**，
|
||
复用 R-011 Tab 设置已验证的原生 HTML5 DnD 模式；老师 2026-09-10 页面确认交互直观，验收通过。
|
||
|
||
## 事实记录
|
||
|
||
### src/client/views/ColumnSettingsPopover.jsx（单文件改动，服务端零改动）
|
||
|
||
- 排序交互升级：每行新增 ≡ 拖拽手柄（整行 draggable），拖到目标位置松手即重排；↑↓ 箭头保留作兜底微调。
|
||
- **落点立即持久化**：勾选显隐 / 拖拽 / ↑↓ 任一操作立即调 strategy-columns/update 整表提交；弹层去掉「保存」
|
||
按钮只留「关闭」，Toast 反馈；saving 期间禁用拖拽与勾选防并发写；失败回滚到服务端最新配置。
|
||
- **落点指示修订（老师验收反馈）**：初版为整行高亮（overKey → 目标行淡蓝底），老师反馈无法判断插入目标列的
|
||
前/后；改为**行间间隙高亮线**——按鼠标在目标行内的 Y 坐标取上半/下半，决定线画在该行上缘（插其前）/下缘（插其后），
|
||
明确指示精确插入位置；drop 事件内按坐标重算（不依赖 state 闭包），拖回原位置不重复写库，onDragEnd 清理残留。
|
||
- 修复：间隙线渲染曾误将 style 对象直接作 React child（`{gapLineStyle(i)}`），改为条件渲染 `<div style={gapLineStyle(i)}/>`。
|
||
|
||
### 验证
|
||
|
||
- pnpm typecheck 0 错；pnpm build 通过（client bundle 185KB 含间隙线逻辑，grep 确认编译产物）；
|
||
- test-r013-columns.mjs 回归：11 过 / 5 败 —— **与本次改动无关**（git stash 基线验证同样 11/5）；
|
||
失败根因：脚本仍按 R-013 时期期望「6 个基础列」，而 COLUMN_META 已有 10 列（R-015 新增涨停/跌停/今开/最高 4 个默认隐藏列），
|
||
测试期望未随迭代 13 更新的存量债务，不在本迭代范围，列为遗留事项。
|
||
|
||
### 文档
|
||
|
||
- docs/05-需求池/R-024.md：定稿 + 变更记录（整行高亮 → 间隙高亮线）；
|
||
- docs/03-设计约束/UI交互约束.md：新增 UI约束-007（列表/弹层排序交互规范：间隙高亮线标准，Tab 设置是否统一待老师评估）；
|
||
- docs/04-迭代记录/20-策略列设置拖拽排序/：迭代目标 + 技术实现方案（含实现纪要）+ 验收标准（10 项）。
|
||
|
||
## 遗留事项（待老师决策）
|
||
|
||
1. **test-r013-columns.mjs 期望过期**：COLUMN_META 现 10 列（R-015 新增 4 行情列默认隐藏），脚本期望仍为 6 列，
|
||
默认列数相关 5 项断言失败。建议后续小迭代同步更新脚本期望（或重构为从 COLUMN_META 推导期望），本次未动。
|
||
2. **Tab 设置整行高亮是否统一为间隙高亮线**：UI约束-007 列设置弹层已用间隙线，Tab 设置（UI约束-003）仍为整行高亮；
|
||
老师反馈列设置「直观多了」——若 Tab 设置同样已存在「无法判断插入前/后」的观感问题，可同模式调整（独立小任务，本次未动）。
|
||
|
||
## 经验沉淀（候选）
|
||
|
||
- 排序类拖拽的落点指示，**间隙线（两行之间）比整行高亮更符合用户观感**：整行高亮只能表达「落在哪一行」，
|
||
无法表达「插入该行前还是后」；主流列表/表格拖拽（如 Notion、表格列排序）均用间隙指示。
|
||
- 服务端整表覆盖语义（updateStrategyColumns 整表提交）天然适配前端即时持久化，无需逐条增量接口；
|
||
「保存按钮」在每次变更即写库后失去存在意义（本迭代据此移除）。
|
||
- 回归脚本的期望值要随数据模型演进同步更新（test-r013-columns 教训：R-015 扩展 COLUMN_META 后脚本未跟随，
|
||
留下 5 项静默失败，直到本迭代回归才暴露）。 |