Files

admin 5fee3352c1 refactor: unify image-placeholder across editors and remove image field type

- 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.

2026-04-17 19:34:03 +08:00

3.4 KiB

Raw Blame History

需求分析 — 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 输入宽高；
- 保持现有的图片来源选择弹窗逻辑不变。

验收标准

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

3.4 KiB Raw Blame History Unescape Escape