# 需求分析 — 2026-04-17-19-26-17

## 用户反馈的 6 项需求

### 1. 移除插入字段中的"图片"类型字段
在 `template-manage` 的"插入字段"Tab 中，"图片"分类（包含手术者签名、医院Logo）不再需要。需要：
- 从插入字段的分类列表中移除"图片"；
- 从 `DEFAULT_FORM_FIELDS` 中移除 `surgeonSignature` 和 `hospitalLogo`；
- 清理 `TemplateManage.tsx` 中与图片类型字段相关的分类渲染逻辑（如折叠分组、新增字段表单中的"图片"选项等）。

### 2. 细化"插入图片占位符"功能（支持自定义默认宽高）
在 `template-manage` 和 `report-editor` 中，点击工具栏的"插入图片占位符"按钮时：
- 弹出提示框让用户输入默认最大宽度（px）和最大高度（px），留空则表示无限制；
- 提示文字中附加说明："一个文字高度约为 20 像素左右"；
- 将用户输入的宽高写入占位符的 `style` 属性中（`max-width` / `max-height`）。

### 3. 占位符文字自适应缩写
`class="image-placeholder"` 中的提示文字，如果占位符框太小（通过宽度 < 80px 判断），则将 "插入/点击放置图片" 缩写为 "插入图片"。

### 4. 手术者签名、医院Logo 改用图片占位符
在 `defaultContent.ts` 中：
- 将 `smartField('surgeonSignature')` 替换为行内 `<span class="image-placeholder">`；
- 将顶部的 `hospitalLogo` 占位符替换为标准的 `<span class="image-placeholder">`（保持居中）。

### 5. 插入图片占位符时保持同行
当前使用 `<div>` 插入图片占位符会导致强制换行。需要：
- 将占位符的容器标签从 `<div>` 改为 `<span>`；
- 设置 `display: inline-flex` + `vertical-align: middle`；
- 确保插入后与前后文字保持在同一行。

### 6. 统一两个编辑器的图片占位符点击行为
`template-manage` 中点击图片占位符时目前直接调起本地文件选择器。需要将其改为与 `report-editor` 一致的行为：
- 弹出"图片来源选择器"弹窗；
- 支持"本地上传"、"我的签名"、"系统素材"三种来源；
- 将 `ReportEditor` 中的弹窗逻辑复用到 `TemplateManage` 中。

---

## 影响范围

- `src/types.ts`：移除 `surgeonSignature` 和 `hospitalLogo` 字段（或将其从字段配置中移除）。
- `src/utils/defaultContent.ts`：签名和 Logo 位置替换为 `image-placeholder`。
- `src/pages/TemplateManage.tsx`：
  - 移除"图片"分类相关渲染和新增字段表单选项；
  - 改造 `insertImage()` 支持 prompt 输入宽高；
  - 新增图片来源选择弹窗状态和填充逻辑；
  - 移除 `triggerPlaceholderUpload` 的直接调用。
- `src/pages/ReportEditor.tsx`：
  - 改造 `insertImage()` 支持 prompt 输入宽高；
  - 保持现有的图片来源选择弹窗逻辑不变。

---

## 验收标准

1. `template-manage` 的"插入字段"和"字段管理"中不再出现"图片"分类和相关字段。
2. `defaultContent.ts` 中签名和 Logo 均为 `image-placeholder`。
3. 点击"插入图片占位符"时弹出宽高 prompt，正确应用 `max-width` / `max-height`。
4. 图片占位符使用 `<span>` + `display: inline-flex`，插入后与文字同行。
5. 宽度 < 80px 的占位符显示"插入图片"，否则显示"插入/点击放置图片"。
6. `template-manage` 和 `report-editor` 点击图片占位符均弹出三选一图片来源弹窗。
7. `npm run lint` 通过。