测试方案 — 2026-04-16-22-35-38
测试目标
验证默认模板中的红色占位符已正确替换为智能占位方格，且双向绑定字段 key 与右侧【基本信息】表单字段名完全一致，确保新建报告时联动功能直接生效。
测试环境
- 浏览器：Chrome / Edge
- 前置条件：已登录系统（建议使用
admin 账号）
- 测试页面：
/report-editor、/template-manage
测试用例设计
用例 1：新建报告 — 默认模板自动加载智能控件
| 步骤 |
操作 |
预期结果 |
| 1.1 |
进入 /report-editor（新建报告） |
编辑器加载默认模板，姓名、性别、年龄、科别、床号、住院号等位置显示为带边框的可填方格 |
| 1.2 |
右键检查第一个姓名方格的 DOM |
HTML 结构为 <span class="smart-field-wrapper" ...><span class="field-label">姓名：</span><span class="field-value" data-bind="patientName" ...></span></span> |
| 1.3 |
检查性别方格的 data-bind |
属性值为 patientGender |
| 1.4 |
检查年龄方格的 data-bind |
属性值为 patientAge |
用例 2：报告编辑端 — 姓名方格输入联动表单
| 步骤 |
操作 |
预期结果 |
| 2.1 |
在编辑器"姓名"方格内输入"张三" |
右侧【基本信息】"患者姓名"字段实时显示"张三" |
| 2.2 |
在编辑器"性别"方格内输入"男" |
右侧"患者性别"字段实时显示"男" |
| 2.3 |
在编辑器"年龄"方格内输入"45" |
右侧"患者年龄"字段实时显示"45" |
用例 3：报告编辑端 — 表单修改联动方格
| 步骤 |
操作 |
预期结果 |
| 3.1 |
在右侧表单"患者姓名"中修改为"李四" |
编辑器内"姓名"方格内容同步变为"李四" |
| 3.2 |
在右侧表单"科别"中输入"普外科" |
编辑器内"科别"方格同步变为"普外科" |
| 3.3 |
在右侧表单"手术名称"中修改为"阑尾切除术" |
编辑器内"手术名称"方格同步变为"阑尾切除术" |
用例 4：模板管理端 — 字段库按钮 key 正确性
| 步骤 |
操作 |
预期结果 |
| 4.1 |
进入 /template-manage |
右侧字段库面板正常显示 |
| 4.2 |
点击"性别"按钮，在编辑器中插入控件 |
插入的控件 data-bind="patientGender" |
| 4.3 |
点击"年龄"按钮，在编辑器中插入控件 |
插入的控件 data-bind="patientAge" |
| 4.4 |
点击"科别"按钮，在编辑器中插入控件 |
插入的控件 data-bind="department" |
用例 5：老数据兼容
| 步骤 |
操作 |
预期结果 |
| 5.1 |
编辑一个之前保存的、含有旧红色占位符的老模板 |
页面正常加载，不报错；旧红色文本仍然显示为普通文字 |
用例 6：类型检查
| 步骤 |
操作 |
预期结果 |
| 6.1 |
在项目根目录执行 npm run lint |
无 TypeScript 编译错误 |
验收标准
测试方式
手工浏览器验证 + DevTools 检查 DOM + npm run lint 类型检查。
⚠️ 请审核以上测试方案，确认无误后回复「确认」或提出修改意见，我将进入最终执行阶段。
