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

需求分析 — 2026-04-16-17-15-37

需求背景

上一个需求已为关键帧截图添加了 "插入" 按钮，但用户对当前按钮的呈现方式提出了优化诉求：按钮位置在底部文字区域不够醒目，且纯文字链接样式不够直观，蓝色与 "可拖拽" 提示颜色过于接近，辨识度不足。

功能目标

调整关键帧截图卡片上 "插入" 按钮的位置和样式：

1. 位置调整：将 "插入" 按钮从卡片底部的文字区域移到图片中央（覆盖在图片之上）。
2. 样式调整：改为实体按钮样式（带背景色、圆角、内边距、阴影），而非纯文字链接。
3. 颜色调整：不再使用蓝色（text-accent），改用与 "可拖拽" 蓝色提示有明显区分度的颜色（如绿色系 emerald-500），hover 时才显示在图片上方。
4. 保留原有行为：
   • 鼠标未悬停时按钮不可见。
   • 点击后仍按从前到后顺序自动填充第一个空置 image-placeholder。
   • 点击不触发卡片跳转到视频位置。

涉及页面/模块

• src/pages/ReportEditor.tsx —— 关键帧卡片 JSX 结构调整

验收标准

• "插入" 按钮位于关键帧图片的正中央。
• 按钮为实体按钮样式（圆角、背景色、阴影）。
• 按钮颜色不是蓝色，与 "可拖拽" 有明显区分。
• 鼠标悬停到卡片上时按钮淡入显示，移开时淡出隐藏。
• 点击按钮后插入逻辑正常工作。
• npm run lint 零错误，npm run build 构建通过。