feat: TemplateManage field system upgrade and bidirectional navigation
- 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.
This commit is contained in:
238
工程分析/实现方案-2026-04-17-18-38-47.md
Normal file
238
工程分析/实现方案-2026-04-17-18-38-47.md
Normal file
@@ -0,0 +1,238 @@
|
||||
# 实现方案 — 2026-04-17-18-38-47
|
||||
|
||||
## 变更文件
|
||||
|
||||
1. `src/types.ts`
|
||||
2. `src/utils/defaultContent.ts`
|
||||
3. `src/pages/TemplateManage.tsx`
|
||||
4. `src/pages/ReportEditor.tsx`
|
||||
5. `src/index.css`
|
||||
|
||||
---
|
||||
|
||||
## 一、types.ts 修改
|
||||
|
||||
### 1.1 扩展 FieldType
|
||||
```typescript
|
||||
export type FieldType = 'text' | 'single_select' | 'multi_select' | 'time' | 'date' | 'signature' | 'image';
|
||||
```
|
||||
|
||||
### 1.2 更新 DEFAULT_FORM_FIELDS
|
||||
在现有字段基础上追加/修改：
|
||||
- `preoperativeDiagnosis`（术前诊断，单选）
|
||||
- `postoperativeDiagnosis`（术后诊断，单选）
|
||||
- `postOpCondition`（手术后情况，单选，默认选项含"患者麻醉恢复后安返病房"）
|
||||
- `pathologyCheck`（是否送病理检查，单选，选项["是","否"]）
|
||||
- `frozenPathology`（冰冻病理结果，单选）
|
||||
- `specimenDescription`（切除标本描述，单选）
|
||||
- `hospitalLogo`（医院Logo，图片，type: 'image'，对应默认模板顶部 logo）
|
||||
|
||||
所有新增诊断类字段默认 `visibleInForm: true, isSystemLocked: true`。
|
||||
|
||||
---
|
||||
|
||||
## 二、defaultContent.ts 修改
|
||||
|
||||
将模板 HTML 中的静态占位文本替换为 `smartField(...)`：
|
||||
|
||||
```javascript
|
||||
// 术前诊断
|
||||
<strong>术前诊断：</strong>${smartField('preoperativeDiagnosis')}
|
||||
|
||||
// 术后诊断
|
||||
<strong>术后诊断：</strong>${smartField('postoperativeDiagnosis')}
|
||||
|
||||
// 手术后情况
|
||||
<strong>手术后情况</strong>：${smartField('postOpCondition')}
|
||||
|
||||
// 切除标本描述
|
||||
<strong>切除标本描述</strong>：${smartField('specimenDescription')}
|
||||
|
||||
// 是否送病理检查
|
||||
<strong>是否送病理检查</strong>：${smartField('pathologyCheck')}
|
||||
|
||||
// 冰冻病理结果
|
||||
<strong>冰冻病理结果</strong>：${smartField('frozenPathology')}
|
||||
|
||||
// 手术者签名
|
||||
手术者签名：${smartField('surgeonSignature')}
|
||||
|
||||
// 医院 Logo 替换为图片字段占位符（使用 image-placeholder 结构但带 data-bind）
|
||||
// 保留原有居中样式
|
||||
```
|
||||
|
||||
Logo 部分不再硬编码 `<img src="/logo_square.png">`，改为可管理的图片占位符：
|
||||
```html
|
||||
<div class="image-placeholder" data-placeholder="true" data-bind="hospitalLogo" contenteditable="false">
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<p class="placeholder-text" style="color: #94a3b8; font-size: 11px; margin: 0; pointer-events: none;">插入/点击放置图片</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、TemplateManage.tsx 修改
|
||||
|
||||
### 3.1 新增字段表单修复（需求 1）
|
||||
在 category `onChange` 中：
|
||||
- 选择"单选" → `type` 强制设为 `single_select`
|
||||
- 选择"多选" → `type` 强制设为 `multi_select`
|
||||
- 选择"图片" → `type` 强制设为 `image`
|
||||
|
||||
在 type select 的 options 渲染中，移除单选/多选/图片下的"文本" option：
|
||||
```tsx
|
||||
<option value="text">文本</option>
|
||||
{newFieldForm.category === '单选' && <option value="single_select">下拉单选</option>}
|
||||
{newFieldForm.category === '多选' && <option value="multi_select">标签多选</option>}
|
||||
{newFieldForm.category === '时间' && <><option value="date">日期</option><option value="time">时分</option></>}
|
||||
{newFieldForm.category === '图片' && <option value="image">图片</option>}
|
||||
```
|
||||
|
||||
### 3.2 字段管理折叠分组（需求 5）
|
||||
新增状态：
|
||||
```tsx
|
||||
const [expandedCategories, setExpandedCategories] = useState<string[]>(['填空','单选','多选','时间','图片']);
|
||||
```
|
||||
|
||||
将字段管理列表改为按 category 分组渲染。每组一个可点击标题栏，点击时 toggle 该 category 在 `expandedCategories` 中的存在性。展开的组内渲染对应字段列表。
|
||||
|
||||
### 3.3 字段管理点击编辑选项（需求 3）
|
||||
新增状态：
|
||||
```tsx
|
||||
const [editingFieldKey, setEditingFieldKey] = useState<string | null>(null);
|
||||
const [editFieldOptions, setEditFieldOptions] = useState('');
|
||||
const [editFieldLabel, setEditFieldLabel] = useState('');
|
||||
```
|
||||
|
||||
在字段分组列表中，每个字段行增加 `onClick`：
|
||||
```tsx
|
||||
onClick={() => { setEditingFieldKey(field.key); setEditFieldOptions((field.options || []).join(', ')); setEditFieldLabel(field.label); }}
|
||||
```
|
||||
|
||||
当 `editingFieldKey === field.key` 时，将该行替换为编辑表单：
|
||||
- 显示字段名 input（仅非系统锁定字段可改 label，系统字段只读展示）。
|
||||
- 选项 input（逗号分隔）。
|
||||
- "保存"/"取消"按钮。
|
||||
|
||||
保存函数：
|
||||
```tsx
|
||||
const saveFieldEdit = (key: string) => {
|
||||
const updated = formFields.map(f => {
|
||||
if (f.key !== key) return f;
|
||||
const next = { ...f, options: ['单选','多选','图片'].includes(f.category) ? editFieldOptions.split(/[,，]/).map(s => s.trim()).filter(Boolean) : f.options };
|
||||
if (!f.isSystemLocked) next.label = editFieldLabel.trim() || f.label;
|
||||
return next;
|
||||
});
|
||||
setFormFields(updated);
|
||||
storage.set('formFieldsConfig', updated);
|
||||
setEditingFieldKey(null);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.4 编辑器点击联动侧边栏（需求 6、7）
|
||||
在现有的 `handleEditorClick` 事件监听中（已存在于 `useEffect`），增加非 delete-btn 的 `smart-field-wrapper` 点击处理：
|
||||
|
||||
```typescript
|
||||
const smartField = targetEl.closest('.smart-field-wrapper') as HTMLElement | null;
|
||||
if (smartField) {
|
||||
const valueSpan = smartField.querySelector('.field-value');
|
||||
const fieldKey = valueSpan?.getAttribute('data-bind') || smartField.getAttribute('data-bind');
|
||||
if (fieldKey) {
|
||||
setActiveFieldKey(fieldKey);
|
||||
const field = formFields.find(f => f.key === fieldKey);
|
||||
if (field) {
|
||||
// 展开对应分组
|
||||
setExpandedCategories(prev => prev.includes(field.category) ? prev : [...prev, field.category]);
|
||||
// 滚动到可视区域
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById(`sidebar-field-${fieldKey}`);
|
||||
el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
新增状态 `const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);`。
|
||||
|
||||
在"插入字段"Tab 的按钮上增加 `id={`sidebar-field-${field.key}`}` 和动态高亮类：
|
||||
```tsx
|
||||
className={... + (activeFieldKey === field.key ? ' ring-2 ring-accent bg-blue-50 border-accent' : '')}
|
||||
```
|
||||
|
||||
在"字段管理"Tab 的字段卡片上同样增加 `id` 和高亮边框。
|
||||
|
||||
### 3.5 素材管理（需求 4 的一部分）
|
||||
在"字段管理"Tab 底部新增"素材库"折叠面板（或放在图片分组下方）。
|
||||
|
||||
新增状态：
|
||||
```tsx
|
||||
const [imageAssets, setImageAssets] = useState<{id: string, name: string, dataUrl: string}[]>([]);
|
||||
```
|
||||
|
||||
初始化时从 `storage.get('imageAssets', [])` 读取。若为空且存在 `/logo_square.png`，则通过 `fetch('/logo_square.png') -> blob -> FileReader` 将其转为 Base64 并作为默认素材 `hospital-logo` 存入。
|
||||
|
||||
提供本地上传按钮：选择图片后用 Canvas 压缩（max 500px）转 Base64，追加到 `imageAssets` 并保存 `storage.set('imageAssets', ...)`。
|
||||
|
||||
---
|
||||
|
||||
## 四、ReportEditor.tsx 修改
|
||||
|
||||
### 4.1 图片来源选择弹窗（需求 4）
|
||||
新增状态：
|
||||
```tsx
|
||||
const [imagePickerOpen, setImagePickerOpen] = useState(false);
|
||||
const [imagePickerTarget, setImagePickerTarget] = useState<HTMLElement | null>(null);
|
||||
const [imageAssets, setImageAssets] = useState<{id: string, name: string, dataUrl: string}[]>([]);
|
||||
```
|
||||
|
||||
修改 `triggerPlaceholderUpload` 的调用逻辑：当点击无图片的 `image-placeholder` 时，不再直接 `input.click()`，而是：
|
||||
```tsx
|
||||
setImagePickerTarget(placeholder);
|
||||
setImagePickerOpen(true);
|
||||
```
|
||||
|
||||
弹窗 JSX（Modal）包含三个 Tab 按钮：
|
||||
- **本地上传**：内部隐藏 `<input type="file" accept="image/*">`，点击"选择文件"触发，读取后填充 placeholder。
|
||||
- **我的签名**：若 `currentUser.signature` 存在，展示签名缩略图，点击后填充。
|
||||
- **系统素材**：读取 `imageAssets` 列表，展示缩略图网格，点击后填充。
|
||||
|
||||
填充函数：
|
||||
```tsx
|
||||
const fillPlaceholderSrc = (placeholder: HTMLElement, src: string) => {
|
||||
placeholder.innerHTML = `<span class="delete-btn" contenteditable="false">×</span><img src="${src}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" draggable="false">`;
|
||||
placeholder.classList.add('has-image');
|
||||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||||
saveDraftToStorage();
|
||||
};
|
||||
```
|
||||
|
||||
### 4.2 图片字段在 TemplateManage 中的插入
|
||||
在 `TemplateManage.tsx` 的 `insertSmartField` 中，对 `type === 'image'` 的字段，不再插入 `span.smart-field-wrapper`，而是插入 `image-placeholder`：
|
||||
```tsx
|
||||
if (field.type === 'image') {
|
||||
const id = 'ph_' + Date.now();
|
||||
const html = `<div id="${id}" class="image-placeholder" data-placeholder="true" data-bind="${field.key}" contenteditable="false"><span class="delete-btn" contenteditable="false">×</span><p class="placeholder-text" style="color: #94a3b8; font-size: 11px; margin: 0; pointer-events: none;">插入/点击放置图片</p></div>`;
|
||||
// 同样的 Range.insertNode 逻辑插入 html
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、index.css 修改
|
||||
|
||||
新增/微调以下样式：
|
||||
1. `.accordion-header`：字段管理分组标题样式（可复用现有按钮类）。
|
||||
2. `.accordion-body`：分组内容过渡动画（可选）。
|
||||
3. `.sidebar-field-active`：高亮边框/背景色。
|
||||
4. 图片选择弹窗遮罩与内容卡片样式（可复用现有 Modal 样式）。
|
||||
|
||||
---
|
||||
|
||||
## 回滚策略
|
||||
|
||||
修改前 `git` 仓库已处于干净状态（最新提交 `b155dd4`）。若验证失败，可执行 `git reset --hard b155dd4` 回滚。
|
||||
|
||||
## 无新增 npm 依赖
|
||||
|
||||
所有改动均利用现有 React + Tailwind 能力完成。
|
||||
81
工程分析/测试方案-2026-04-17-18-38-47.md
Normal file
81
工程分析/测试方案-2026-04-17-18-38-47.md
Normal file
@@ -0,0 +1,81 @@
|
||||
# 测试方案 — 2026-04-17-18-38-47
|
||||
|
||||
## 测试目标
|
||||
|
||||
验证 7 项需求全部正确实现，且不影响现有报告编辑、保存、打印等核心流程。
|
||||
|
||||
---
|
||||
|
||||
## 测试步骤
|
||||
|
||||
### 1. 编译检查
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
- **预期**：`tsc --noEmit` 通过，0 errors。
|
||||
|
||||
---
|
||||
|
||||
### 2. 默认模板与字段初始化（需求 2）
|
||||
1. 清空浏览器 `localStorage`（或打开无痕窗口），重新登录进入 `/template-manage`。
|
||||
2. 检查默认模板内容：
|
||||
- "术前诊断"、"术后诊断"、"手术后情况"、"切除标本描述"、"是否送病理检查"、"冰冻病理结果"、"手术者签名"、"医院Logo" 均显示为可交互的智能字段/图片占位符，不再显示灰色静态文字。
|
||||
3. 进入右侧"字段管理"Tab，确认新增的系统字段（术前诊断、术后诊断…）已存在且带默认选项。
|
||||
|
||||
---
|
||||
|
||||
### 3. 新增字段表单联动（需求 1）
|
||||
1. 在"字段管理 → 新增字段"中：
|
||||
- 选择分类"单选"，确认类型下拉只有"下拉单选"。
|
||||
- 选择分类"多选"，确认类型下拉只有"标签多选"。
|
||||
- 选择分类"图片"，确认类型下拉只有"图片"。
|
||||
- 选择分类"填空"，确认类型下拉只有"文本"。
|
||||
|
||||
---
|
||||
|
||||
### 4. 字段管理折叠与编辑（需求 3、5）
|
||||
1. 在"字段管理"Tab 中，确认字段按"填空/单选/多选/时间/图片"分组折叠显示。
|
||||
2. 点击某一分组标题，确认该组展开/收起状态切换。
|
||||
3. 点击"术前诊断"字段行，确认进入编辑模式，出现选项输入框。
|
||||
4. 在选项输入框中追加一个选项（如"急性胆囊炎"），点击保存，确认字段列表刷新。
|
||||
5. 刷新页面，确认修改后的选项仍然保留（已持久化到 `localStorage`）。
|
||||
6. 确认系统锁定字段没有"删除"按钮，但非系统字段仍有"删除"按钮。
|
||||
|
||||
---
|
||||
|
||||
### 5. 素材管理与图片字段（需求 4）
|
||||
1. 在"字段管理"中确认存在"素材库"区域，默认已包含"医院Logo"素材（由 `/logo_square.png` 自动转换而来）。
|
||||
2. 点击素材库"上传图片"，选择一张本地图片，确认上传后素材列表新增一项。
|
||||
3. 在"插入字段"Tab 中，点击"医院Logo"插入到编辑器，确认插入的是图片占位符。
|
||||
4. 切换到 `/report-editor`（新建报告），确认模板顶部 Logo 显示为图片占位符。
|
||||
5. 点击该 Logo 占位符，确认弹出"图片来源选择器"弹窗。
|
||||
6. 在弹窗中分别测试：
|
||||
- 选择"本地上传"并上传新图，确认占位符被替换为新图。
|
||||
- 删除后重新点击，选择"系统素材"中的医院 Logo，确认替换为 Logo。
|
||||
- 删除后重新点击，选择"我的签名"（需确保当前用户已上传签名），确认替换为签名图。
|
||||
|
||||
---
|
||||
|
||||
### 6. 编辑器与侧边栏双向联动（需求 6、7）
|
||||
1. 在 `/template-manage` 中，切换到"插入字段"Tab。
|
||||
2. 点击编辑器正文中的"术前诊断"智能字段，确认右侧"插入字段"中"术前诊断"按钮出现高亮边框，并自动滚动到可视区域。
|
||||
3. 切换到"字段管理"Tab，点击编辑器正文中的"手术名称"智能字段，确认：
|
||||
- 右侧"手术名称"字段卡片出现高亮边框；
|
||||
- 若该字段所在分组原本被折叠，则自动展开；
|
||||
- 自动滚动到可视区域。
|
||||
4. 点击编辑器空白处，确认高亮消失（`activeFieldKey` 重置为 null）。
|
||||
|
||||
---
|
||||
|
||||
### 7. 回归测试
|
||||
1. **保存模板**：修改模板后点击"保存模板"，刷新页面，内容不丢失。
|
||||
2. **打印预览**：点击打印预览，确认所有智能字段、图片占位符渲染正常。
|
||||
3. **撤销重做**：删除一个字段后按 `Ctrl+Z`，确认字段恢复。
|
||||
4. **报告编辑**：在 `/report-editor` 中填写表单，确认双向同步（表单 → 正文、正文 → 表单）仍然正常。
|
||||
5. **完成报告**：点击"完成报告"，确认弱提示（签名确认弹窗）逻辑仍然生效。
|
||||
|
||||
---
|
||||
|
||||
## 判定标准
|
||||
|
||||
全部测试通过后方可认为任务完成。若任何测试失败，需回滚并重新分析根因。
|
||||
35
工程分析/经验记录.md
35
工程分析/经验记录.md
@@ -575,3 +575,38 @@ ange.insertNode(fragment) 精确插入到 Range 位置；
|
||||
- 在 contentEditable 中实现自定义撤销栈时，必须**同时拦截界面按钮和键盘快捷键**的 undo/redo，否则两套历史机制会互相冲突。
|
||||
- document.execCommand('insertHTML') 对块级元素边界（尤其是 <br> 结尾）的自动修正行为不可控；需要精确插入时，应优先使用 Range.insertNode() 手动操作 DOM。
|
||||
- 任何对 contentEditable 的 DOM 修改后，都应同步保存内容（saveTemplateContent），确保 localStorage 中的模板数据与编辑器状态一致。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 22：TemplateManage 字段体系升级与双向交互联动
|
||||
|
||||
**A. 具体问题**
|
||||
1. 新增字段时单选/多选分类仍显示"文本"选项，联动逻辑错误。
|
||||
2. 默认模板中存在大量静态灰色占位文本（术前诊断、术后诊断等），无法与右侧表单双向绑定。
|
||||
3. 字段管理列表平铺展示，无分组折叠，系统字段选项不可修改。
|
||||
4. 图片占位符只能通过本地上传填充，无法使用签名图或系统素材。
|
||||
5. 编辑器中的智能字段与右侧侧边栏完全无联动。
|
||||
|
||||
**B. 问题产生原因**
|
||||
1. `newFieldForm.category` onChange 时未正确过滤 type select 的 options。
|
||||
2. `DEFAULT_FORM_FIELDS` 缺少术前/术后诊断等临床字段，导致 `defaultContent.ts` 只能写死占位文本。
|
||||
3. 字段管理 UI 未按 category 分组，也未提供编辑系统字段选项的入口。
|
||||
4. `ReportEditor.tsx` 中图片占位符点击后直接调用 `input.click()`，缺少多渠道选择机制。
|
||||
5. `TemplateManage.tsx` 的 `handleEditorClick` 仅处理了删除逻辑，未处理点击高亮/导航。
|
||||
|
||||
**C. 解决问题方法**
|
||||
1. **类型联动修复**：category onChange 时强制设置对应 type（单选→single_select、多选→multi_select、图片→image）；type select 使用条件渲染，只显示当前 category 支持的选项。
|
||||
2. **扩展默认字段**：在 `types.ts` 追加 `preoperativeDiagnosis`、`postoperativeDiagnosis`、`postOpCondition`、`specimenDescription`、`pathologyCheck`、`frozenPathology`、`hospitalLogo` 等系统字段，全部 `isSystemLocked: true`。
|
||||
3. **替换模板占位文本**：在 `defaultContent.ts` 中将所有灰色占位文本替换为 `smartField(...)`，Logo 替换为带 `data-bind="hospitalLogo"` 的 `image-placeholder`。
|
||||
4. **字段管理折叠与编辑**：新增 `expandedCategories` 状态实现折叠面板；新增 `editingFieldKey` 等状态实现点击编辑（系统字段 label 只读、选项可编辑）。
|
||||
5. **素材库与图片字段**：`FieldType` 扩展 `'image'`；初始化时自动将 Logo 转 Base64 存入 `imageAssets`；`insertSmartField` 对图片类型插入 `image-placeholder`。
|
||||
6. **图片来源选择弹窗**：`ReportEditor.tsx` 点击图片占位符弹出 Modal，支持本地上传、我的签名、系统素材三选一。
|
||||
7. **编辑器-侧边栏双向联动**：点击 `smart-field-wrapper` 时读取 `data-bind`，高亮并滚动定位到右侧对应字段，自动展开分组。
|
||||
|
||||
**D. 经验与教训总结**
|
||||
- category→type 的联动应在 state 变更层强制收敛，而不是仅依赖 JSX 条件渲染。
|
||||
- 升级静态占位文本为字段时，必须同步修改 `DEFAULT_FORM_FIELDS`、`defaultContent.ts` 和 `formFieldsConfig`。
|
||||
- 图片字段与普通文本字段的 DOM 结构差异大，插入逻辑需要按 type 分支。
|
||||
- 编辑器与侧边栏联动建议使用 `scrollIntoView` + 临时 CSS 类，避免复杂的状态同步。
|
||||
- 新增 localStorage key 时应提供合理的默认值或降级处理。
|
||||
|
||||
77
工程分析/需求分析-2026-04-17-18-38-47.md
Normal file
77
工程分析/需求分析-2026-04-17-18-38-47.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# 需求分析 — 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` 通过，无编译错误。
|
||||
Reference in New Issue
Block a user