Mdeical_Sur_Report/工程分析/测试方案-2026-04-16-17-21-58.md

测试方案 — 2026-04-16-17-21-58

测试环境准备

1. 项目已完成上一次构建，无类型错误。
2. 使用测试账号 admin / 123456（超级管理员）登录系统。
3. 进入 图文报告生成 页面并上传视频完成抽帧，确保视频分析面板有关键帧截图。

---

测试项清单

测试项 1："插入" 按钮位于底部正确位置且不遮盖图片

测试步骤：

1. 将鼠标悬停到任意关键帧截图卡片上。
2. 观察 "插入" 按钮的位置。

预期结果：

• 按钮位于卡片底部，**时间格式（如 00:15）**和 "可拖拽" 提示之间。
• 按钮不覆盖在图片上，图片内容完全可见，无遮挡。

---

测试项 2："插入" 按钮为蓝色实体按钮样式

测试步骤：

1. 鼠标悬停到关键帧卡片，观察 "插入" 按钮的颜色和形状。

预期结果：

• 按钮为蓝色实体胶囊按钮（bg-accent 背景 + 白色文字 + 圆角 + 轻微阴影）。
• 按钮颜色与底部 "可拖拽" 的蓝色一致，视觉上协调统一。
• 不是纯文字链接样式。

---

测试项 3：显隐行为与 "可拖拽" 同步

测试步骤：

1. 鼠标移入关键帧卡片。
2. 鼠标移出关键帧卡片。

预期结果：

• 移入时，"插入" 按钮与 "可拖拽" 文字同时淡入显示。
• 移出时，"插入" 按钮与 "可拖拽" 文字同时淡出隐藏。

---

测试项 4：点击功能与事件冒泡正常

测试步骤：

1. 鼠标悬停到关键帧卡片，点击 "插入" 按钮。

预期结果：

• 编辑器中第一个空置的 image-placeholder 被自动填充（或弹出 没有可插入图片的空位 提示）。
• 视频播放器时间不发生变化（未触发卡片跳转）。

---

测试项 5：构建与类型检查回归

测试步骤：

1. 在项目根目录执行：

   npm run lint
   npm run build
   

预期结果：

• npm run lint 无 TypeScript 编译错误。
• npm run build 构建成功。

---

回归验证范围

• 拖拽插入功能未被破坏。
• 关键帧卡片的删除、手动徽章显示正常。
• 编辑器保存、打印功能正常。