Files

3.7 KiB
Raw Permalink Blame History

迭代复盘: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 项静默失败,直到本迭代回归才暴露)。