Mdeical_Sur_Report/工程分析/实现方案-2026-04-16-17-15-37.md

实现方案 — 2026-04-16-17-15-37

技术思路

仅调整 ReportEditor.tsx 中关键帧卡片的 JSX 结构：将 "插入" 按钮从底部文字行移到图片层的相对定位容器中，并修改其 className 为实体按钮样式（绿色背景、白色文字、圆角、阴影）。

insertFrameToPlaceholder 等逻辑函数无需改动。

---

修改文件清单

文件	变更类型	说明
src/pages/ReportEditor.tsx	修改	移动 "插入" 按钮位置、更新样式 className

---

关键代码变更说明

当前 JSX 片段（约第 1303~1318 行）

<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="text-accent opacity-0 group-hover:opacity-100 transition-opacity hover:underline"
    >
      插入
    </button>
    <span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
  </div>
</div>

修改后 JSX 片段

<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>

样式说明

• absolute inset-0 m-auto w-fit h-fit：使按钮在图片容器内水平和垂直居中。
• px-3 py-1.5：实体按钮的内边距。
• bg-emerald-500 text-white：翠绿背景 + 白色文字，与 "可拖拽" 的蓝色（text-accent）形成明显区分。
• rounded-full shadow-md：圆角胶囊形状 + 轻微阴影，呈现按钮质感。
• opacity-0 group-hover:opacity-100 transition-opacity：保持 hover 显示/隐藏行为与 "可拖拽" 一致。

---

风险点及应对策略

风险	影响	应对策略
按钮遮挡 "手动" 徽章	视觉冲突	"手动" 徽章位于左上角，按钮位于正中央，空间不重叠
按钮点击触发卡片 onClick	视频跳转	保留 e.stopPropagation()
绝对定位在相对容器中未居中	偏位	使用 inset-0 m-auto w-fit h-fit 确保 Flex/Grid 内的居中

---

改动范围总结

• 仅做 JSX 结构和样式的微调整，不修改任何逻辑函数。
• 不引入新依赖。