# 需求分析 — 2026-04-17-18-38-47

## 用户反馈的 7 项需求

### 1. 新增字段类型联动修复
在 `template-manage` 的"字段管理 → 新增字段"中，当"分类"选择"单选"或"多选"时，右侧"类型"下拉框里依然保留了"文本"选项。用户认为单选/多选分类下不应再出现"文本"类型。

### 2. 新增默认系统字段并替换模板占位文本
需要新增以下系统字段（默认可见、锁定）：
- 术前诊断（单选）
- 术后诊断（单选）
- 手术后情况（单选，默认选项含"患者麻醉恢复后安返病房"）
- 是否送病理检查（单选，默认选项"是"/"否"）
- 冰冻病理结果（单选）
- 切除标本描述（单选）

同时将 `defaultContent.ts` 中的静态占位文字（灰色提示文本）替换为对应的智能字段绑定，包括：
- "术前诊断" → `preoperativeDiagnosis`
- "术后诊断" → `postoperativeDiagnosis`
- "患者麻醉恢复后安返病房" → `postOpCondition`
- "切除标本描述" → `specimenDescription`
- "是"（是否送病理检查） → `pathologyCheck`
- "冰冻病理结果" → `frozenPathology`
- "签名"（手术者签名处） → `surgeonSignature`（已存在字段）

### 3. 字段管理支持点击编辑选项
在"字段管理"列表中，点击任意字段行（包括系统锁定字段）可进入编辑模式，修改其默认选项（用逗号分隔）。保存后同步更新 `formFieldsConfig`。

### 4. 新增"图片"字段类型与素材管理
- `FieldType` 扩展 `'image'` 类型。
- 新增字段表单中"分类"增加"图片"，"类型"增加"图片"。
- 新增系统字段 `hospitalLogo`（医院Logo），对应模板顶部 `<img src="/logo_square.png">`。
- 建立"素材库"概念：使用 `localStorage` 的 `imageAssets` key 存储 `{id, name, dataUrl}` 数组。
- 在模板管理的字段管理/系统设置中提供素材上传入口，将现有 Logo 预置为素材。
- 在 `ReportEditor` 中，点击图片占位符时弹出"图片来源选择器"，支持三种渠道：
  1. 本地上传（FileReader）
  2. 用户签名图片（`currentUser.signature`）
  3. 系统素材库（`imageAssets`）

### 5. 字段管理按类型折叠分组
"字段管理"Tab 中的字段列表不再平铺，而是按 `category`（填空、单选、多选、时间、图片）分组，采用可折叠的下拉面版（Accordion），支持展开/收起。

### 6. 编辑器 → 字段管理 自动导航
当用户处于"字段管理"Tab 时，点击编辑器正文中的某个 `smart-field-wrapper`，右侧自动：
- 展开该字段所属的分组；
- 滚动并将该字段卡片高亮。

### 7. 编辑器 → 插入字段 自动高亮
当用户处于"插入字段"Tab 时，点击编辑器正文中的某个 `smart-field-wrapper`，右侧自动将对应字段按钮高亮（边框/背景色变化），并滚动到可视区域。

---

## 影响范围

- `src/types.ts`：扩展 `FieldType`，更新 `DEFAULT_FORM_FIELDS`。
- `src/utils/defaultContent.ts`：将占位文本替换为 `smartField(...)`。
- `src/pages/TemplateManage.tsx`：
  - 新增字段表单联动修复；
  - 字段管理列表增加折叠分组与点击编辑；
  - 编辑器点击事件与侧边栏高亮/导航联动；
  - 素材管理 UI。
- `src/pages/ReportEditor.tsx`：
  - 图片占位符触发逻辑改为弹窗选择器；
  - 支持素材库/签名/本地上传三种来源。
- `src/index.css`：新增折叠面板、高亮、弹窗等样式。

---

## 验收标准

1. 新增字段时，单选/多选分类不再出现"文本"选项。
2. 默认模板中所有占位灰字均已替换为可绑定的智能字段。
3. 字段管理列表支持按分类折叠，点击字段可编辑选项（包括系统字段）。
4. 可新增"图片"类型字段；素材库可上传/查看图片；Logo 已预置为素材。
5. `ReportEditor` 点击图片占位符可弹出三选一图片来源弹窗。
6. 点击编辑器中任意智能字段，右侧"插入字段"或"字段管理"Tab 能自动高亮并滚动定位到对应字段。
7. `npm run lint` 通过，无编译错误。