docs/v1.0/client/rfcs/110-fix-insert-position.md

插入位置计算最终修复

问题回顾

插入新分镜功能存在位置计算错误：

• 插入位置基于变化后的orderIndex而非用户看到的UI位置
• 导致插入位置与用户预期不符

根本原因

使用 storyboard.orderIndex + 1 计算插入位置，但orderIndex在插入操作后会发生变化，导致后续插入位置错误。

解决方案

改用基于UI显示位置的计算方法：

修复前

// 基于数据库orderIndex计算（错误）
onClick={() => handleInsertStoryboard(storyboard.orderIndex + 1)}

修复后

// 基于UI显示位置计算（正确）
onClick={() => handleInsertStoryboard(index + 2)}

测试验证

测试场景

1. 初始状态：13个分镜
2. 第一次插入：点击第一个插入按钮
3. 第二次插入：点击第二个分镜后的插入按钮

测试结果

初始状态: ["分镜1","分镜2","分镜3","分镜4","分镜5","分镜6",...]

第一次插入后: ["新分镜1","分镜1","分镜2","分镜3","分镜4","分镜5","分镜6",...]
✅ 正确：新分镜插入到最前面

第二次插入后: ["新分镜1","分镜1","分镜2","新分镜3","分镜3","分镜4","分镜5","分镜6",...]
✅ 正确：新分镜插入到分镜2后面，分镜3前面

技术细节

插入位置计算逻辑

// 第一个插入按钮：始终插入到位置1
handleInsertStoryboard(1);

// 分镜后插入按钮：插入到当前显示位置+1
handleInsertStoryboard(index + 2);
// index是数组索引(0开始)，index+1是显示位置(1开始)，index+2是插入位置

标题生成优化

// 修复前：可能与现有分镜标题冲突
title: `分镜${targetOrderIndex}`;

// 修复后：使用"新分镜"前缀，避免冲突
title: `新分镜${targetOrderIndex}`;

核心改进

1. 位置计算准确：基于UI显示位置而非数据库orderIndex
2. 用户体验一致：插入位置与按钮位置完全匹配
3. 标题区分明确：新分镜使用"新分镜"前缀，避免混淆
4. 多次插入稳定：连续插入操作位置都准确

验证标准

• ✅ 第一个插入按钮：新分镜出现在最前面
• ✅ 分镜后插入按钮：新分镜出现在对应分镜后面
• ✅ 多次插入：每次位置都准确
• ✅ 标题清晰：新分镜标题与原有分镜区分

修复时间

2026-01-12

总结

通过改用基于UI显示位置的计算方法，彻底解决了插入位置错误的问题。现在用户点击哪个插入按钮，新分镜就会准确插入到对应位置，完全符合用户预期。