- Fix new field type linkage (remove text option under single/multi/image). - Add system fields: pre/post-op diagnosis, pathology checks, etc. - Replace placeholder text in default template with smart fields. - Accordion grouping and inline option editing in field management. - Add image field type, asset library with logo preloading. - Image source picker modal in ReportEditor (local/signature/asset). - Editor-to-sidebar highlight and scroll navigation on smart field click.
4.0 KiB
4.0 KiB
需求分析 — 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的imageAssetskey 存储{id, name, dataUrl}数组。 - 在模板管理的字段管理/系统设置中提供素材上传入口,将现有 Logo 预置为素材。
- 在
ReportEditor中,点击图片占位符时弹出"图片来源选择器",支持三种渠道:- 本地上传(FileReader)
- 用户签名图片(
currentUser.signature) - 系统素材库(
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:新增折叠面板、高亮、弹窗等样式。
验收标准
- 新增字段时,单选/多选分类不再出现"文本"选项。
- 默认模板中所有占位灰字均已替换为可绑定的智能字段。
- 字段管理列表支持按分类折叠,点击字段可编辑选项(包括系统字段)。
- 可新增"图片"类型字段;素材库可上传/查看图片;Logo 已预置为素材。
ReportEditor点击图片占位符可弹出三选一图片来源弹窗。- 点击编辑器中任意智能字段,右侧"插入字段"或"字段管理"Tab 能自动高亮并滚动定位到对应字段。
npm run lint通过,无编译错误。