# 测试方案 — 2026-04-16-22-23-02

## 测试目标

验证 `TemplateManage` 端字段库插入功能、智能占位控件的保护特性，以及 `ReportEditor` 端富文本与基本信息表单之间的双向数据绑定是否稳定可靠。

## 测试环境

- 浏览器：Chrome / Edge
- 前置条件：已登录系统（建议使用 `admin` 超级管理员账号）
- 测试页面：`/template-manage`、`/report-editor`

---

## 测试用例设计

### 用例 1：模板管理端 — 字段库插入与标签锁定

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 1.1 | 进入 `/template-manage` | 页面正常加载，右侧出现"表单字段库"卡片 |
| 1.2 | 将光标定位到编辑器任意位置，点击字段库中的「姓名」按钮 | 编辑器中插入一个带有"姓名："标签和空方格的控件 |
| 1.3 | 尝试用鼠标单独选中"姓名："标签并删除 | **无法单独删除或修改**标签文本，只能整体选中或删除整个控件 |
| 1.4 | 点击空方格并输入"张三" | 方格内正常显示"张三"，光标不跳动 |
| 1.5 | 再次点击「住院号」按钮插入第二个控件 | 两个控件在编辑器中并存，互不干扰 |

### 用例 2：报告编辑端 — 富文本 → 表单单向联动

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 2.1 | 进入 `/report-editor`（新建报告），确保模板已包含至少一个智能占位控件（如"姓名"） | 编辑器加载默认模板，智能控件正确渲染 |
| 2.2 | 点击"姓名"方格，输入"李四" | 右侧【基本信息】表单的"患者姓名"字段**自动同步为"李四"** |
| 2.3 | 继续输入，追加"先生" | 表单字段同步更新为"李四先生"，输入过程光标稳定不跳 |
| 2.4 | 删除方格内部分文字（如删去"先生"） | 表单字段同步回退为"李四" |

### 用例 3：报告编辑端 — 表单 → 富文本单向联动

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 3.1 | 在右侧【基本信息】表单的"患者姓名"字段中输入"王五" | 编辑器内"姓名"方格的内容**自动同步为"王五"** |
| 3.2 | 清空表单中的"患者姓名" | 编辑器内方格内容同步清空，但方格本身保留 |
| 3.3 | 修改"住院号"表单字段 | 仅对应"住院号"方格更新，其他控件不受影响 |

### 用例 4：双向联动并发编辑 — 光标防跳动

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 4.1 | 在方格内快速连续输入一段长文本 | 光标始终位于输入末尾，**不会出现跳到行首或方格外**的现象 |
| 4.2 | 同时通过右侧表单修改同一字段的值 | 若当前焦点在方格内，表单修改不应打断当前输入；失焦后方格内容正确更新 |

### 用例 5：数组类型字段同步

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 5.1 | 在模板中插入「手术者」控件 | 控件正常插入，标签锁定 |
| 5.2 | 在右侧表单中选择多个手术者（如"张医生"、"李医生"） | 编辑器内"手术者"方格显示为"张医生, 李医生" |
| 5.3 | 在右侧表单中取消部分选择 | 方格内容同步更新，逗号分隔格式保持正确 |

### 用例 6：打印样式适配

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 6.1 | 在编辑器中填充若干智能控件 | 编辑态下方格带有浅灰色边框和圆角 |
| 6.2 | 点击"打印"按钮或进入打印预览 | 打印预览中，方格边框消失，变为黑色下划线填空风格 |

### 用例 7：路由切换与草稿保存

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 7.1 | 在 `/report-editor` 中编辑报告，填写带有智能控件的内容 | — |
| 7.2 | 切换到 `/report-manage`，再返回 `/report-editor` | 编辑器内容、基本信息表单值、智能控件内的数据**全部完整保留** |
| 7.3 | 检查 localStorage draft | `reportEditorDraft_{username}` 中 HTML 包含完整的 `data-bind` 属性 |

### 用例 8：老模板兼容性

| 步骤 | 操作 | 预期结果 |
|------|------|---------|
| 8.1 | 打开一个未使用智能控件的老模板（纯文本占位符） | 报告编辑器正常加载，无报错 |
| 8.2 | 在老模板中正常编辑文字 | 文字编辑和表单保存功能不受影响 |

---

## 验收标准

- [ ] `TemplateManage` 右侧正确显示字段库面板，点击可插入控件。
- [ ] 插入控件的 Label 不可单独编辑或删除，Value 方格可正常输入。
- [ ] `ReportEditor` 中方格输入时，右侧表单字段实时同步更新。
- [ ] 右侧表单字段修改时，编辑器内对应方格实时同步更新。
- [ ] 快速输入过程中光标稳定，无跳动或焦点丢失。
- [ ] 数组字段（手术者/助手）在方格中正确显示为逗号分隔字符串。
- [ ] 打印预览中方格样式变为下划线风格，符合 A4 报告规范。
- [ ] 路由切换后，智能控件内的数据不丢失。
- [ ] 老模板无智能控件时，现有编辑功能不受影响。
- [ ] `npm run lint` 类型检查通过，无编译错误。

## 测试方式

手工浏览器验证为主，结合 DevTools 观察 DOM 结构和 `data-bind` 属性。

---

**⚠️ 请审核以上测试方案，确认无误后回复「确认」或提出修改意见，我将进入最终执行阶段。**