# 实现方案 — 2026-04-16-17-21-58

## 技术思路
将 `ReportEditor.tsx` 中关键帧卡片的 "插入" 按钮从图片层的 absolute 覆盖层移回底部文字行，放置在 `timeFormatted` 与 "可拖拽" 之间。颜色恢复为与 "可拖拽" 一致的蓝色（`bg-accent` / `text-white`），但保留实体胶囊按钮样式。

---

## 修改文件清单

| 文件 | 变更类型 | 说明 |
|------|----------|------|
| `src/pages/ReportEditor.tsx` | 修改 | 移动 "插入" 按钮位置、调整颜色为蓝色 |

---

## 关键代码变更说明

### 当前 JSX 片段（约第 1316~1331 行）

```tsx
<div className="relative">
  <img src={frame.dataUrl} className="w-full aspect-video object-cover rounded-lg" />
  {frame.isManual && <span className="manual-frame-badge">手动</span>}
  <button
    onClick={(e) => { e.stopPropagation(); insertFrameToPlaceholder(frame); }}
    className="absolute inset-0 m-auto w-fit h-fit px-3 py-1.5 bg-emerald-500 text-white text-[10px] font-bold rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-emerald-600"
  >
    插入
  </button>
</div>
<div className="text-[9px] font-bold text-text-muted mt-1.5 px-1 flex justify-between items-center">
  <span>{frame.timeFormatted}</span>
  <span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
</div>
```

### 修改后 JSX 片段

```tsx
<div className="relative">
  <img src={frame.dataUrl} className="w-full aspect-video object-cover rounded-lg" />
  {frame.isManual && <span className="manual-frame-badge">手动</span>}
</div>
<div className="text-[9px] font-bold text-text-muted mt-1.5 px-1 flex justify-between items-center">
  <span>{frame.timeFormatted}</span>
  <div className="flex items-center gap-2">
    <button
      onClick={(e) => { e.stopPropagation(); insertFrameToPlaceholder(frame); }}
      className="px-2 py-0.5 bg-accent text-white text-[9px] font-bold rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-700"
    >
      插入
    </button>
    <span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
  </div>
</div>
```

### 样式说明
- 按钮位于底部 `timeFormatted` 与 "可拖拽" 之间，不再覆盖图片。
- `px-2 py-0.5 bg-accent text-white rounded-full shadow-sm`：蓝色实体小胶囊按钮，与 "可拖拽" 蓝色一致。
- `hover:bg-blue-700`：加深蓝色反馈。
- `opacity-0 group-hover:opacity-100 transition-opacity`：保持 hover 显隐与 "可拖拽" 同步。

---

## 风险点及应对策略

| 风险 | 影响 | 应对策略 |
|------|------|----------|
| 按钮太小导致不易点击 | 体验下降 | 保留 `px-2 py-0.5` 的实体按钮，比纯文字链接更易点击 |
| 底部文字区域变宽 | 布局错乱 | 使用 `flex items-center gap-2` 控制间距，保持在一行内 |

---

## 改动范围总结
- 纯 JSX 结构和样式的微调整，不修改任何逻辑函数。
- 不引入新依赖。