测试方案 — 2026-04-17-00-13-09
测试目标
验证手术时间方框联动、动态字段分类管理体系、字段显隐控制、自定义字段新增删除、以及 UI 紧凑化优化的正确性与稳定性。
测试环境
- 浏览器：Chrome / Edge
- 前置条件：已登录系统（建议使用
admin 超级管理员账号）
- 测试页面：
/template-manage、/report-editor
测试用例设计
用例 1：手术时间方框联动
| 步骤 |
操作 |
预期结果 |
| 1.1 |
进入 /report-editor（新建报告） |
默认模板中"手术开始时间："和"手术终止时间："后各有一个可填方格 |
| 1.2 |
检查方格的 data-bind 属性 |
分别为 startTime 和 endTime |
| 1.3 |
在右侧【基本信息】选择手术开始时间 "09" 时 "30" 分 |
编辑器内"手术开始时间"方格自动显示 "09:30" |
| 1.4 |
在编辑器"手术终止时间"方格内输入 "14:45" |
右侧表单"手术终止时间"下拉框自动变为 "14" 时 "45" 分 |
| 1.5 |
删除方格内内容 |
右侧时/分下拉框恢复为空（"--"） |
用例 2：字段库分类展示与插入
| 步骤 |
操作 |
预期结果 |
| 2.1 |
进入 /template-manage |
右侧字段库面板显示两个 Tab："插入字段"和"字段管理"，默认在"插入字段" |
| 2.2 |
观察"插入字段"Tab |
字段按"填空"、"单选"、"多选"、"时间"四组分类展示 |
| 2.3 |
点击"时间"分类下的"手术开始时间" |
编辑器光标处插入带有 data-bind="startTime" 的方格 |
| 2.4 |
点击"多选"分类下的"手术者" |
编辑器中插入 data-bind="surgeon" 的方格 |
用例 3：字段显隐控制
| 步骤 |
操作 |
预期结果 |
| 3.1 |
在 /template-manage 切换到"字段管理"Tab |
显示所有非系统锁定字段列表 |
| 3.2 |
找到"患者性别"字段，取消其"显示"勾选 |
该字段右侧出现未勾选状态 |
| 3.3 |
进入 /report-editor |
右侧【基本信息】中不再出现"患者性别"输入项 |
| 3.4 |
返回 /template-manage，重新勾选"患者性别"的"显示" |
— |
| 3.5 |
再次进入 /report-editor |
"患者性别"重新出现在右侧表单中 |
用例 4：系统锁定字段保护
| 步骤 |
操作 |
预期结果 |
| 4.1 |
在 /template-manage 的"字段管理"中查看"患者姓名"和"住院号" |
这两个字段不在列表中（或显示为灰色不可操作状态） |
| 4.2 |
尝试在 ReportEditor 中隐藏"患者姓名" |
无法操作，因为 TemplateManage 中没有提供隐藏开关 |
用例 5：自定义字段新增与使用
| 步骤 |
操作 |
预期结果 |
| 5.1 |
在 /template-manage "字段管理"Tab 中，输入新字段名"术中失血量"，选择分类"填空"，类型"text"，点击添加 |
列表中出现"术中失血量"字段，且"显示"已默认勾选 |
| 5.2 |
切换到"插入字段"Tab |
"填空"分类下出现"术中失血量"按钮 |
| 5.3 |
点击"术中失血量"按钮插入编辑器 |
编辑器中出现 data-bind="custom_xxxx" 的方格 |
| 5.4 |
进入 /report-editor |
右侧【基本信息】中出现"术中失血量"文本输入框 |
| 5.5 |
在编辑器方格中输入"200ml" |
右侧表单同步显示"200ml" |
用例 6：自定义字段删除
| 步骤 |
操作 |
预期结果 |
| 6.1 |
在 /template-manage "字段管理"中，点击"术中失血量"的"删除"按钮 |
该字段从列表中消失 |
| 6.2 |
切换到"插入字段"Tab |
"术中失血量"按钮已不在"填空"分类中 |
| 6.3 |
进入 /report-editor |
右侧表单中不再显示"术中失血量" |
用例 7：自定义单选/多选字段
| 步骤 |
操作 |
预期结果 |
| 7.1 |
在字段管理中新增字段"手术体位"，分类"单选"，类型"single_select"，选项填入"仰卧位, 侧卧位, 俯卧位" |
新增成功 |
| 7.2 |
在 /report-editor 中查看右侧表单 |
"手术体位"显示为下拉选择框，包含三个选项 |
| 7.3 |
选择"侧卧位" |
编辑器内对应方格显示"侧卧位" |
用例 8：UI 紧凑化验证
| 步骤 |
操作 |
预期结果 |
| 8.1 |
在 /report-editor 中观察姓名方格 |
方格宽度明显变小（约 32px 起），不再撑大行间距 |
| 8.2 |
对比方格与周围普通文字的行高 |
行高基本一致，段落排版紧凑自然 |
| 8.3 |
进入打印预览 |
方格边框消失，变为细下划线，不破坏打印版面 |
用例 9：老数据兼容
| 步骤 |
操作 |
预期结果 |
| 9.1 |
编辑一份之前保存的老报告（不含新自定义字段） |
页面正常加载，老字段正常显示和编辑 |
| 9.2 |
检查 localStorage 中 formFieldsConfig |
首次访问后自动生成默认配置 |
用例 10：类型检查
| 步骤 |
操作 |
预期结果 |
| 10.1 |
执行 npm run lint |
无 TypeScript 编译错误 |
验收标准
测试方式
手工浏览器验证为主，结合 DevTools 观察 DOM 结构和 localStorage 配置。
⚠️ 请审核以上测试方案，确认无误后回复「确认」或提出修改意见，我将进入最终执行阶段。
