admin
5fee3352c1
- Remove surgeonSignature and hospitalLogo from DEFAULT_FORM_FIELDS. - Replace logo and signature in default template with inline image-placeholder spans. - Enhance insertImage() in both editors with prompt for max-width/height (px). - Abbreviate placeholder text to '插入图片' when width < 80px. - Force inline insertion using display:inline-flex + vertical-align:middle. - Port image-source picker modal from ReportEditor to TemplateManage. - Remove legacy triggerPlaceholderUpload direct upload logic.
63 lines
3.4 KiB
Markdown
63 lines
3.4 KiB
Markdown
# 需求分析 — 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` 通过。
|