3.1 KiB
3.1 KiB
测试方案 — 2026-04-16-17-07-04
测试环境准备
- 项目已构建通过，无类型错误。
- 使用测试账号
admin / 123456（超级管理员）登录系统。 - 进入 图文报告生成 页面，确认编辑器中已加载默认模板（包含若干
image-placeholder图片占位符）。 - 在 视频分析 面板中上传至少一个手术视频，等待系统自动抽帧完成。
测试项清单
测试项 1："插入" 按钮显隐行为正确
测试步骤：
- 在视频分析面板中查看自动抽帧的关键帧列表。
- 将鼠标移入某张关键帧截图卡片上。
- 再将鼠标移出该卡片。
预期结果：
- 鼠标移入时，截图卡片底部同时显示 "插入" 和 "可拖拽" 两个提示文字。
- 鼠标移出时，两者同时隐藏。
- "插入" 位于截图时间（如
00:15）和 "可拖拽" 之间。
测试项 2：点击 "插入" 自动填充第一个空置占位符
测试步骤：
- 确认编辑器中存在至少一个尚未填充图片的
.image-placeholder（未显示图片的灰色虚线框）。 - 在视频分析面板中，将鼠标悬停到第一张关键帧截图上，点击 "插入"。
- 再次点击第二张关键帧截图的 "插入"。
预期结果：
- 第一次点击后，编辑器中第一个空置占位符被填充为第一张关键帧图片。
- 第二次点击后，编辑器中第二个空置占位符被填充为第二张关键帧图片。
- 填充后的占位符变为正常图片显示，且带有删除按钮
×。
测试项 3：无空占位符时给出提示
测试步骤：
- 连续点击 "插入" 直到编辑器中所有
image-placeholder都被填满。 - 再次点击任意关键帧的 "插入"。
预期结果：
- 浏览器弹出提示框："没有可插入图片的空位"。
- 不会报错，现有已填充的图片不受影响。
测试项 4：点击 "插入" 不触发视频跳转
测试步骤：
- 点击某张关键帧卡片的 "插入" 按钮。
- 观察左侧视频播放器。
预期结果：
- 视频播放器的当前时间不发生变化（不会因为点击了卡片本身而跳转到该帧位置）。
测试项 5：原有拖拽功能保持正常
测试步骤：
- 手动拖拽视频分析面板中的某张关键帧截图到编辑器中的空置
image-placeholder上。
预期结果：
- 拖拽释放后，该占位符正确显示被拖拽的图片。
- 拖拽功能与 "插入" 按钮功能互不干扰。
测试项 6：构建与类型检查回归
测试步骤：
- 在项目根目录执行：
npm run lint npm run build
预期结果：
npm run lint无 TypeScript 编译错误。npm run build构建成功。
回归验证范围
SystemSettings.tsx未被修改，系统设置功能保持正常。storage.ts未被修改，存储读写保持正常。- 编辑器打印、保存草稿、完成报告功能保持正常。
- 关键帧的 "手动截取"、删除功能保持正常。