2.4 KiB
2.4 KiB
测试方案 — 2026-04-18-00-43-19
测试目标
验证默认模板 defaultContent.ts 中的全部 .image-placeholder 已正确添加 data-mode 属性，且尺寸、布局与原有模板保持一致。
测试环境
- 本地开发服务器：
npm run dev（端口 3000） - 浏览器：Chrome / Edge
- 测试账号：
admin/123456
测试用例
| 编号 | 场景 | 操作步骤 | 预期结果 |
|---|---|---|---|
| TC-01 | 默认模板 Logo 占位符 | 1. 登录后新建报告（不选择任何模板，加载默认模板）。 2. 查看编辑器顶部的医院 Logo 占位符。 |
占位符尺寸仍为 65×65px；DOM 中可见 data-mode="manual"；从右侧视频分析面板拖拽关键帧到 Logo 占位符时，弹出提示「此处为静态图片占位符...」并拒绝插入。 |
| TC-02 | 默认模板签名占位符 | 1. 新建报告，滚动到底部「手术者签名」处。 2. 查看占位符 DOM。 |
占位符尺寸仍为 200×40px；DOM 中可见 data-mode="manual"；提示文本为「插入/点击放置图片」；拖拽关键帧到签名区域时被拦截。 |
| TC-03 | 默认模板表格内影像占位符 | 1. 新建报告，查看「手术图片说明表格」中的 6 个占位符。 2. 检查 DOM。 |
每个占位符尺寸仍为 100%×150px；DOM 中可见 data-mode="frame"；从右侧拖拽关键帧到表格占位符时，可正常插入。 |
| TC-04 | 自动帧插入过滤 | 1. 新建报告，确保表格内和签名/Logo 占位符均为空。 2. 上传视频并开启「自动帧插入」。 3. 观察自动插入行为。 |
自动插入的关键帧只会填充表格内 data-mode="frame" 的占位符；不会填充 data-mode="manual" 的 Logo 和签名占位符。 |
| TC-05 | 布局无偏移 | 1. 对比修改前后的默认模板预览效果（或打印预览）。 | 所有占位符的位置、大小、边框、背景色与修改前完全一致，无可见差异。 |
验收标准
- TC-01 ~ TC-03：默认模板中 8 个占位符均已正确添加
data-mode，尺寸未改变。 - TC-04：自动帧插入和拖拽逻辑对
manual/frame的隔离生效。 - TC-05：视觉和排版与修改前完全一致。
npm run lint无 TypeScript 编译错误。
测试方式
手工验证。通过浏览器 DevTools 检查 DOM 属性，并通过拖拽/自动插入验证隔离逻辑。