# 需求分析 — 2026-04-16-17-07-04

## 需求背景
在 `report-editor` 页面的 **视频分析 - 关键帧摘取** 区域，目前用户需要通过鼠标拖拽的方式将截图插入到报告编辑器的 `image-placeholder` 中。当关键帧数量较多或占位符位置较远时，拖拽操作不够便捷，用户体验有待提升。

## 功能目标
为每个关键帧截图增加一个 **"插入"** 按钮，实现一键自动插入到编辑器中第一个空置的 `image-placeholder` 中。

具体要求：
1. "插入" 按钮放置在每张截图底部的时间格式（如 `00:15`）与 "可拖拽" 提示文字之间。
2. "插入" 按钮的显隐行为与右侧的 "可拖拽" 文字保持一致：仅当鼠标聚焦/悬停到该截图卡片上时才显示（`opacity-0 group-hover:opacity-100`）。
3. 点击 "插入" 后，系统在当前编辑器内容中查找第一个尚未填充图片的 `.image-placeholder` 元素（即不含 `has-image` class 的占位符）。
4. 找到后，将该关键帧的图片数据自动填充到该占位符中（效果等价于拖拽放下）。
5. 填充后同步更新 `contentRef.current` 并保存草稿。
6. 若编辑器中不存在空置的 `image-placeholder`，则给出提示（如 `alert('没有可插入图片的空位')`）。

## 涉及页面/模块
- `src/pages/ReportEditor.tsx` —— 关键帧列表渲染区域 + 新增插入逻辑

## 验收标准
- [ ] 每个关键帧截图底部出现 "插入" 按钮，位置在时间文字和 "可拖拽" 之间。
- [ ] "插入" 按钮只在鼠标悬停到该截图卡片上时显示，移开即隐藏。
- [ ] 点击 "插入" 后，第一个空置的 `image-placeholder` 被自动填充为该帧图片。
- [ ] 若无可插入的空占位符，弹出友好提示。
- [ ] 插入后编辑器内容、草稿状态正确同步。
- [ ] `npm run lint` 零错误，`npm run build` 构建通过。