admin
0c57409c59
- 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.
78 lines
4.0 KiB
Markdown
78 lines
4.0 KiB
Markdown
# 需求分析 — 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` 通过，无编译错误。
|