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.

工程分析/经验记录.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 时应提供合理的默认值或降级处理。