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