87 lines
4.4 KiB
Markdown
87 lines
4.4 KiB
Markdown
# 测试方案 — 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 |
|
||
|
||
## 验收标准
|
||
|
||
- [ ] `npm run lint` 无 TypeScript 编译错误
|
||
- [ ] 时间格式输入框支持点击展开下拉列表、选择选项、手写输入并记忆新格式
|
||
- [ ] date 字段下拉只显示日期格式，time 字段只显示时间格式
|
||
- [ ] 表格内插入图片占位符不弹 prompt，结构完整，使用 div 块级容器
|
||
- [ ] 普通文本中插入图片占位符仍弹 prompt，使用 span 行内容器
|
||
- [ ] 打印多页时每一页上下均有约 15mm 留白，左右约 10mm
|
||
|
||
## 测试方式
|
||
|
||
全部使用手工功能验证（项目无单元测试框架）。
|