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

需求分析 — 2026-04-16-17-21-58

需求背景

用户对上一个优化后的 "插入" 按钮位置提出了微调诉求：按钮覆盖在图片正中央会遮挡图片内容，不够理想。

功能目标

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

1. 位置调整：将 "插入" 按钮从图片正中央移回卡片底部，位于**时间格式（如 00:15）**和 "可拖拽" 提示文字之间。
2. 不遮盖图片：按钮不再以 absolute 覆盖层形式存在于图片之上。
3. 颜色调整：按钮恢复为与 "可拖拽" 一致的蓝色（bg-accent / text-white）。
4. 保留实体按钮样式：保持 px-3 py-1.5 rounded-full shadow-md 的实体胶囊按钮外观，不再使用纯文字链接。

涉及页面/模块

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

验收标准

• "插入" 按钮位于关键帧卡片底部，时间文字与 "可拖拽" 之间。
• 按钮不覆盖在图片上，不遮挡图片内容。
• 按钮为蓝色实体胶囊按钮，与 "可拖拽" 蓝色一致。
• 悬停时按钮和 "可拖拽" 同时显示，移开时同时隐藏。
• 点击按钮后插入逻辑正常工作，不触发视频跳转。
• npm run lint 零错误，npm run build 构建通过。