需求分析 — 2026-04-16-22-23-02

原始需求摘要

在 TemplateManage 模块新增字段库功能，实现在手术记录模板中插入具备**"标签锁定、内容可调"特性的智能占位方格。建立报告正文（ReportEditor 富文本编辑器）与右侧"基本信息"表单之间的双向数据绑定映射**。确保模板固定文本（如"姓名："）在报告编辑端不被误删，同时实现文档内容与结构化表单的同步联动录入。

需求拆解

功能点

模板编辑端 (TemplateManage.tsx)
- 新增右侧"表单字段库"侧边栏，列出所有可映射字段（姓名、性别、年龄、住院号、手术者等）。
- 点击字段库中的字段按钮，在编辑器光标处插入一个特殊 HTML 占位控件。
- 占位控件结构要求：
  - Label（如"姓名："）锁定不可编辑，且不能被单独删除或篡改。
  - Value（方格区域）允许用户输入，并与右侧表单字段双向绑定。
报告编辑端 (ReportEditor.tsx)
- 富文本 → 表单：用户在编辑器占位方格内输入内容时，自动同步更新右侧【基本信息】对应字段的表单值。
- 表单 → 富文本：用户在右侧【基本信息】表单中修改内容时，自动同步更新编辑器内对应占位方格的内容。
- 同步时必须处理光标跳动问题，保证输入体验流畅。
打印适配
- 打印时占位方格的边框样式需要适配 A4 报告风格（如下划线填空或去边框）。
老数据兼容
- 现有模板中的纯文本占位符（如 姓名：<span style="color: #ff0000;">*姓名*</span>）不会被自动转换。
- 仅当管理员在 TemplateManage 中重新编辑模板并插入新控件后，才激活联动能力。

非功能点

不引入第三方富文本编辑器，继续基于现有 contentEditable + document.execCommand 方案。
最小化对 storage.ts 数据结构的侵入。
保持现有 npm run lint 类型检查通过。
多选字段（如 surgeon 数组）在方格中展示为逗号分隔字符串。

影响范围预估

模块	影响程度	说明
`src/pages/TemplateManage.tsx`	高	新增字段库侧边栏、插入控件逻辑
`src/pages/ReportEditor.tsx`	高	双向绑定监听（`onInput` + `useEffect`）、DOM 同步
`src/utils/print.ts`	中	打印样式适配（`@media print` 下 `.field-value` 样式）
`src/index.css`	中	新增 `.smart-field-wrapper`、`.field-label`、`.field-value` 的编辑态/打印态样式
`src/types.ts`	低	可能需要扩展字段映射常量/类型定义
`src/utils/defaultContent.ts`	低	可选：将默认模板中的部分占位符替换为智能控件

待确认问题

无。用户已提供详细需求描述及技术实现思路，可直接进入实现方案设计阶段。

2.9 KiB Raw Blame History Unescape Escape