测试方案 — 2026-04-17-23-38-34
测试目标
验证时间格式自定义下拉组件、表格内图片占位符插入、以及打印多页页边距三项修复。
测试环境
- 本地开发服务器：
npm run dev（端口 3000）
- 浏览器：Chrome/Edge
- 测试账号：admin / 123456（超级管理员）
测试用例
TC-1：时间格式自定义下拉（编辑字段）
| 步骤 |
操作 |
预期结果 |
| 1 |
登录 admin，进入「模板管理」→「字段管理」 |
— |
| 2 |
点击「手术日期」进入编辑模式，聚焦格式输入框 |
输入框下方弹出下拉列表，显示 YYYY-MM-DD、YYYY年MM月DD日 等日期格式 |
| 3 |
点击列表中 YYYY年MM月DD日 |
输入框被填充为 YYYY年MM月DD日，下拉列表关闭 |
| 4 |
点击「手术开始时间」进入编辑模式，聚焦格式输入框 |
下拉列表只显示时间格式（HH:mm、hh:mm A），不出现日期格式 |
| 5 |
在格式输入框中手写输入 MM-DD HH:mm，按 Enter |
新格式被保存，下拉列表中新增 MM-DD HH:mm；重新聚焦后可在列表中看到 |
TC-2：时间格式自定义下拉（新增字段）
| 步骤 |
操作 |
预期结果 |
| 1 |
在字段管理底部点击「新增字段」 |
— |
| 2 |
category 选「时间」，type 选「日期」，聚焦格式输入框 |
下拉列表只显示日期格式 |
| 3 |
type 切换为「时分」，聚焦格式输入框 |
下拉列表只显示时间格式 |
| 4 |
手写输入新格式 hh:mm:ss，按 Enter |
新格式被保存到 customTimeFormats 并出现在列表中 |
TC-3：表格内插入图片占位符（TemplateManage）
| 步骤 |
操作 |
预期结果 |
| 1 |
进入「模板管理」，编辑器中确保存在表格 |
— |
| 2 |
将光标放入表格的某个 <td> 单元格内 |
— |
| 3 |
点击工具栏「插入图片占位符」 |
不弹出 prompt，占位符直接插入到单元格内 |
| 4 |
用 DevTools 检查插入的元素 |
外层标签为 <div class="image-placeholder">，style 包含 width:100%;height:100%;max-width:200px;max-height:200px;，内部结构完整（delete-btn + placeholder-text） |
| 5 |
点击图片占位符填充一张图片 |
图片正常显示，占位符添加 has-image class |
TC-4：普通文本中插入图片占位符（TemplateManage）
| 步骤 |
操作 |
预期结果 |
| 1 |
将光标放在表格外的普通文本段落中 |
— |
| 2 |
点击「插入图片占位符」 |
弹出 prompt 要求输入宽高 |
| 3 |
输入 100*80 |
插入行内 <span class="image-placeholder">，style 包含 width:100px;height:80px;，与前后文字保持在同一行 |
TC-5：表格内插入图片占位符（ReportEditor）
| 步骤 |
操作 |
预期结果 |
| 1 |
进入「报告编辑器」，确保报告内容中有表格 |
— |
| 2 |
将光标放入表格单元格内，插入图片占位符 |
不弹出 prompt，插入自适应 div 占位符 |
| 3 |
从视频分析面板拖拽关键帧到占位符中 |
图片正常填充，结构完整 |
TC-6：打印多页页边距
| 步骤 |
操作 |
预期结果 |
| 1 |
在「报告编辑器」中创建一份内容较多的报告（或复制粘贴大量文本使内容超过1页A4） |
— |
| 2 |
点击「预览/打印」 |
弹出打印对话框 |
| 3 |
在浏览器打印预览中查看第2页 |
第二页顶部和底部均有约 15mm 的留白，不紧贴纸张边缘；左右留白约 10mm |
| 4 |
检查第一页 |
第一页同样有 15mm 上下 / 10mm 左右的均匀留白 |
TC-7：类型检查
| 步骤 |
操作 |
预期结果 |
| 1 |
项目根目录执行 npm run lint |
tsc --noEmit 通过，0 errors |
验收标准
测试方式
全部使用手工功能验证（项目无单元测试框架）。
