# 插入位置计算最终修复

## 问题回顾

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

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

## 根本原因

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

## 解决方案

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

### 修复前

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

### 修复后

```typescript
// 基于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前面
```

## 技术细节

### 插入位置计算逻辑

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

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

### 标题生成优化

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

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

## 核心改进

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

## 验证标准

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

## 修复时间

2026-01-12

## 总结

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