# 测试方案 — 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 编译错误 |

---

## 验收标准

- [ ] 手术开始/终止时间在模板中以方格呈现，且与右侧时/分下拉框双向联动。
- [ ] `TemplateManage` 字段库支持按"填空/单选/多选/时间"分类展示。
- [ ] `TemplateManage` 支持新增自定义字段，新增后可在 ReportEditor 表单和字段库中正常使用。
- [ ] `TemplateManage` 支持删除自定义字段，删除后 ReportEditor 表单和字段库同步移除。
- [ ] 字段显隐开关可控制 ReportEditor 右侧表单是否显示该字段。
- [ ] "患者姓名"和"住院号"为系统锁定字段，不可删除、不可隐藏。
- [ ] `field-value` 方格宽度缩小、行间距恢复正常、排版紧凑。
- [ ] 打印时方格变为下划线风格。
- [ ] 老报告和新用户首次登录均能正常加载，无报错。
- [ ] `npm run lint` 通过。

## 测试方式

手工浏览器验证为主，结合 DevTools 观察 DOM 结构和 `localStorage` 配置。

---

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