测试方案 — 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 |
验收标准
测试方式
全部使用手工功能验证（项目无单元测试框架）。
