# 需求分析 — 2026-04-17-09-36-07

## 原始需求摘要

全面优化 `TemplateManage` 模板编辑器的交互体验，解决以下三个核心问题：
1. 消除从右侧字段库插入智能字段后产生的多余空格与排版松散问题。
2. 修复在行尾插入字段时出现的异常换行，以及按 Backspace 删除字段时误删整行的底层 Bug。
3. 将常用基本信息字段（姓名、性别、年龄等）直接预置到系统默认模板中，实现开箱即用。

## 需求拆解

### 功能点

1. **消除插入字段后的多余空格**
   - 问题：`insertSmartField` 生成的 HTML 字符串末尾带有 ` `，且可能包含换行符，导致字段后跟随大量不可见空格。
   - 方案：移除 ` `，将 HTML 压缩为一行；调整 `margin` 为更小的值（如 `0 2px`）。

2. **修复异常换行与 Backspace 误删整行**
   - 问题 2a（异常换行）：当在"住院号："等行尾插入 `smart-field-wrapper` 后，即使空间足够，字段也可能被挤到下一行。这与 `inline-block` 的默认换行行为以及 `contenteditable="false"` 节点的边界处理有关。
   - 问题 2b（Backspace 误删）：光标位于 `contenteditable="false"` 的字段节点之后时，浏览器内核（Webkit/Blink）无法正确选中该不可编辑节点，会向上寻址删除其父级 `<p>` 节点，导致整行被删。
   - 方案：
     - 给 `smart-field-wrapper` 增加 `white-space: nowrap`。
     - 在 `TemplateManage.tsx` 中增加 `keydown` 事件监听，拦截 Backspace/Delete，当光标紧挨着 `.smart-field-wrapper` 时，手动选中并删除该节点，阻止默认行为。

3. **默认模板预置字段控件**
   - 问题：当前 `defaultContent.ts` 中第一行是红色纯文本占位符（`*姓名* *性别*...`），用户需要手动在 `TemplateManage` 中逐个替换为智能字段。
   - 方案：修改 `defaultContent.ts`，将第一行的纯文本直接替换为 `smartField('patientName')` 等智能控件，使新建模板时即自带可联动的字段方格。

### 非功能点

- 不引入新的依赖。
- 保持 `npm run lint` 通过。
- 保持现有 `ReportEditor` 的双向绑定逻辑不受影响。

## 影响范围预估

| 模块 | 影响程度 | 说明 |
|------|---------|------|
| `src/pages/TemplateManage.tsx` | 高 | 修改 `insertSmartField` HTML 结构、增加 `keydown` 拦截逻辑保护字段节点 |
| `src/utils/defaultContent.ts` | 中 | 默认模板第一行替换为预置的智能字段控件 |
| `src/index.css` | 低 | 给 `.smart-field-wrapper` 增加 `white-space: nowrap`（可选） |

## 待确认问题

无。用户已提供详细的问题现象和解决方案思路，可直接进入实现方案。