Mdeical_Sur_Report/工程分析/需求分析-2026-04-16-17-07-04.md

需求分析 — 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 构建通过。