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

## 一、需求来源

用户反馈 TemplateManage 中字段删除按钮位置和显示时机需要优化，同时要求字段获得焦点时有视觉高亮反馈，并修复 ReportEditor 中多选字段渲染崩溃的 Bug。

## 二、具体需求拆解

### 需求 1：field-value 聚焦高亮

**期望**：当光标落入 `.field-value`（`contenteditable="true"` 的输入框）时，背景色加深、边框色变化，并带一个短暂的过渡动画，让用户明确感知当前正在编辑哪个字段。

### 需求 2：删除按钮定位与显隐控制

**期望**：
- 红色 × 删除按钮从字段内部左侧移到**右上角**（绝对定位）。
- 仅在鼠标**悬浮在 `.field-value` 上**或 `.field-value` 获得焦点时显示删除按钮。
- **ReportEditor 中完全不显示**该删除按钮（编辑器中不应有删除字段的入口）。

### 需求 3：修复 ReportEditor `.map is not a function` 崩溃

**问题**：
```
Uncaught TypeError: (y[x.key] || []).map is not a function
```
发生在 `ReportEditor.tsx` 渲染 `multi_select` 类型字段时：
```tsx
{((reportData as any)[field.key] || []).map((tag: string) => ...
```

**原因**：历史脏数据或异常情况下，`surgeon`/`assistant`/`anesthesiologist` 等字段的值不是数组，而是字符串或其他类型，导致 `.map()` 调用崩溃。

**期望**：在渲染前对值做类型安全检查，非数组时安全转换为空数组或包裹为单元素数组，避免页面白屏。

## 三、影响范围分析

| 文件 | 改动说明 |
|------|----------|
| `src/pages/TemplateManage.tsx` | `insertSmartField` 的 HTML 结构调整（wrapper 增加 `position:relative`，delete-btn 改为绝对定位在右上角）。编辑器 div 增加专属 class `template-editor-mode` 用于样式隔离。 |
| `src/utils/defaultContent.ts` | `smartField()` 辅助函数同步调整 HTML 结构，与 `insertSmartField` 保持一致。 |
| `src/index.css` | 增加 `.field-value:focus` 高亮样式；重写 `.delete-btn` 样式为绝对定位；增加 `.template-editor-mode .smart-field-wrapper:hover .delete-btn` / `:focus-within .delete-btn` 显隐控制；确保 `.print-content .delete-btn` 打印隐藏。 |
| `src/pages/ReportEditor.tsx` | 修复 `multi_select` 渲染处的 `.map` 调用，增加 `Array.isArray` 安全转换。 |

## 四、验收标准

- [ ] TemplateManage 中点击 field-value，背景色明显加深并有过渡动画。
- [ ] TemplateManage 中鼠标悬浮/聚焦 field-value 时，右上角出现红色 ×；移开后隐藏。
- [ ] ReportEditor 中所有 smart-field-wrapper 均不显示红色 ×。
- [ ] ReportEditor 加载存在脏数据（非数组类型）的报告时，multi_select 字段不再崩溃，页面正常渲染。
- [ ] `npm run lint` 无编译错误。