Mdeical_Sur_Report/工程分析/测试方案-2026-04-17-11-14-28.md

测试方案 — 字段聚焦高亮、删除按钮显隐控制与 .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 为字符串而非数组）：

   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 脏数据，不崩溃。