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

## 原始需求摘要

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

## 需求拆解

### 功能点

1. **模板编辑端 (`TemplateManage.tsx`)**
   - 新增右侧"表单字段库"侧边栏，列出所有可映射字段（姓名、性别、年龄、住院号、手术者等）。
   - 点击字段库中的字段按钮，在编辑器光标处插入一个特殊 HTML 占位控件。
   - 占位控件结构要求：
     - `Label`（如"姓名："）**锁定不可编辑**，且不能被单独删除或篡改。
     - `Value`（方格区域）**允许用户输入**，并与右侧表单字段双向绑定。

2. **报告编辑端 (`ReportEditor.tsx`)**
   - **富文本 → 表单**：用户在编辑器占位方格内输入内容时，自动同步更新右侧【基本信息】对应字段的表单值。
   - **表单 → 富文本**：用户在右侧【基本信息】表单中修改内容时，自动同步更新编辑器内对应占位方格的内容。
   - 同步时必须处理光标跳动问题，保证输入体验流畅。

3. **打印适配**
   - 打印时占位方格的边框样式需要适配 A4 报告风格（如下划线填空或去边框）。

4. **老数据兼容**
   - 现有模板中的纯文本占位符（如 `姓名：<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` | 低 | 可选：将默认模板中的部分占位符替换为智能控件 |

## 待确认问题

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