# 测试方案 — 字段聚焦高亮、删除按钮显隐控制与 .map Bug 修复（2026-04-17-11-14-28）

## 一、编译检查

- 执行 `npm run lint`（`tsc --noEmit`），确保全量 TypeScript 无编译错误。

## 二、功能验证步骤

### 测试 1：TemplateManage 字段聚焦高亮
1. 进入【模板管理】，选择默认模板。
2. 点击模板中的任意智能字段方框（如"姓名"），观察背景色是否明显变深（如 `#e2e8f0`），边框是否变深，是否有蓝色外发光。
3. 点击另一个字段方框，确认高亮状态随焦点切换。

### 测试 2：TemplateManage 删除按钮位置与显隐
1. 鼠标悬浮在智能字段方框上（不点击），确认字段**右上角**出现红色圆形 ×。
2. 鼠标移开字段区域，确认红色 × 消失。
3. 点击字段方框使其获得焦点，确认红色 × 保持显示。
4. 点击红色 ×，确认该字段被删除，模板自动保存。

### 测试 3：ReportEditor 中不显示删除按钮
1. 进入【新建报告】或编辑已有报告。
2. 观察编辑器中的所有智能字段方框，确认**没有任何红色 × 显示**（无论悬浮还是聚焦）。
3. 在 ReportEditor 的 field-value 中输入文字，确认编辑器正常工作。

### 测试 4：ReportEditor multi_select 脏数据兼容性
1. DevTools Console 执行以下代码，手动构造一份脏数据报告（`surgeon` 为字符串而非数组）：
   ```js
   const dirtyReport = {
     id: 'test_dirty_001',
     title: '测试脏数据报告',
     patientName: '张三',
     hospitalId: 'H0001',
     author: 'admin',
     authorName: '管理员',
     createdAt: new Date().toISOString(),
     status: 'draft',
     content: '<p>测试内容</p>',
     surgeon: '张医生', // 脏数据：应该是数组
     assistant: [],
     anesthesiologist: ['周医生']
   };
   const reports = JSON.parse(localStorage.getItem('reports') || '[]');
   reports.push(dirtyReport);
   localStorage.setItem('reports', JSON.stringify(reports));
   ```
2. 刷新页面，进入【报告管理】，点击编辑该测试报告。
3. 确认页面**没有白屏崩溃**，右侧【基本信息】中的"手术者"字段正确显示为单标签 `张医生`，且可以正常添加/删除标签。
4. 删除该测试报告，避免污染数据。

## 三、预期结果

- `npm run lint` 0 错误。
- TemplateManage 中字段聚焦时有明显高亮效果。
- TemplateManage 中删除按钮仅悬浮/聚焦时显示在右上角，点击可删除字段。
- ReportEditor 中完全看不到删除按钮。
- ReportEditor 能兼容非数组类型的 multi_select 脏数据，不崩溃。