105 lines
4.5 KiB
Markdown
105 lines
4.5 KiB
Markdown
# 测试方案 — 2026-04-18-00-02-08
|
||
|
||
## 测试目标
|
||
|
||
验证拖拽关键帧插入样式修复、图片占位符自定义弹窗与分类隔离、表格插入自定义弹窗三项修复。
|
||
|
||
## 测试环境
|
||
|
||
- 本地开发服务器：`npm run dev`（端口 3000）
|
||
- 浏览器：Chrome/Edge
|
||
- 测试账号：admin / 123456（超级管理员）
|
||
|
||
## 测试用例
|
||
|
||
### TC-1：拖拽关键帧后边框消失 + 图片约束
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 进入「报告编辑器」，上传视频并自动摘取关键帧 | 右侧视频分析面板显示关键帧缩略图 |
|
||
| 2 | 编辑器中插入一个图片占位符 | 显示虚线框占位符 |
|
||
| 3 | 从右侧拖拽关键帧到占位符中 | 图片正常显示，**虚线边框和灰色背景消失**；图片不溢出占位符边界 |
|
||
| 4 | 用 DevTools 检查 `<img>` 元素 | style 包含 `max-width:100%;max-height:100%;object-fit:contain;` |
|
||
|
||
### TC-2：图片占位符插入弹窗（ReportEditor）
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 进入「报告编辑器」 | — |
|
||
| 2 | 点击工具栏「插入图片占位符」 | **不弹出 prompt**，而是弹出居中的自定义 Modal |
|
||
| 3 | Modal 中显示默认宽度 200、高度 200 | — |
|
||
| 4 | 修改宽度为 120，高度为 80 | 输入框值正常变化 |
|
||
| 5 | 选择「静态图片占位」模式 | 模式按钮高亮切换 |
|
||
| 6 | 点击「确认插入」 | Modal 关闭，编辑器中插入行内 `<span>` 占位符，带有 `data-mode="manual"` 属性 |
|
||
| 7 | 用 DevTools 检查插入的元素 | `data-mode="manual"` 存在，style 包含 `width:120px;height:80px;` |
|
||
|
||
### TC-3：图片占位符插入弹窗（TemplateManage）
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 进入「模板管理」 | — |
|
||
| 2 | 点击工具栏「插入图片占位符」 | 弹出自定义 Modal |
|
||
| 3 | 确认插入 | 占位符正常插入，结构完整 |
|
||
|
||
### TC-4：自动帧插入跳过 manual 占位符
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 在编辑器中插入两个占位符：第一个是 frame 模式，第二个是 manual 模式 | — |
|
||
| 2 | 上传视频，开启「自动帧插入」，点击「自动关键帧摘取」 | — |
|
||
| 3 | 观察占位符填充情况 | 只有**第一个 frame 模式**的占位符被自动填入关键帧；第二个 manual 占位符**保持空白** |
|
||
|
||
### TC-5：一键插入跳过 manual 占位符
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 编辑器中先插入一个 manual 占位符，再插入一个 frame 占位符 | — |
|
||
| 2 | 右侧关键帧卡片点击「插入」按钮 | 关键帧填入**第二个 frame 占位符**；manual 占位符不受影响 |
|
||
|
||
### TC-6：拖拽拦截 manual 占位符
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 编辑器中插入一个 manual 占位符 | — |
|
||
| 2 | 从右侧拖拽关键帧到该 manual 占位符上 | 弹出提示「此处为静态图片占位符，仅支持点击插入...」；占位符**不被填充** |
|
||
|
||
### TC-7：表格插入弹窗（ReportEditor）
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 进入「报告编辑器」 | — |
|
||
| 2 | 点击工具栏「插入表格」 | **不弹出 prompt**，弹出自定义 Modal |
|
||
| 3 | Modal 中显示默认行数 2、列数 3 | — |
|
||
| 4 | 修改行数为 4，列数为 2 | 输入框值正常变化 |
|
||
| 5 | 点击「确认插入」 | Modal 关闭，编辑器中插入 4 行 2 列的表格 |
|
||
|
||
### TC-8：表格插入弹窗（TemplateManage）
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 进入「模板管理」 | — |
|
||
| 2 | 点击工具栏「插入表格」 | 弹出自定义 Modal |
|
||
| 3 | 设置行数 3，列数 3，确认插入 | 表格正常插入 |
|
||
|
||
### TC-9：类型检查
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1 | 项目根目录执行 `npm run lint` | `tsc --noEmit` 通过，0 errors |
|
||
|
||
## 验收标准
|
||
|
||
- [ ] `npm run lint` 无 TypeScript 编译错误
|
||
- [ ] 拖拽关键帧后占位符边框和背景消失，图片不溢出
|
||
- [ ] 点击「插入图片占位符」弹出自定义 Modal（非 prompt）
|
||
- [ ] Modal 支持选择占位符模式（frame/manual）
|
||
- [ ] manual 占位符带有 `data-mode="manual"` 属性
|
||
- [ ] 自动帧插入和一键插入跳过 manual 占位符
|
||
- [ ] 拖拽到 manual 占位符被拦截并提示
|
||
- [ ] 点击「插入表格」弹出自定义 Modal（非 prompt）
|
||
- [ ] Modal 支持输入行数/列数并正常插入表格
|
||
|
||
## 测试方式
|
||
|
||
全部使用手工功能验证（项目无单元测试框架）。
|