admin
38ff67a6a8
- Compress insertSmartField HTML to single-line, remove trailing - Compress smartField helper in defaultContent.ts to single-line - Add white-space: nowrap to .smart-field-wrapper (CSS + inline) - Add keydown interceptor in TemplateManage to prevent Backspace/Delete from removing whole <p> when adjacent to smart-field-wrapper - Update experience record (#14)
46 lines
2.7 KiB
Markdown
46 lines
2.7 KiB
Markdown
# 需求分析 — 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`（可选） |
|
||
|
||
## 待确认问题
|
||
|
||
无。用户已提供详细的问题现象和解决方案思路，可直接进入实现方案。
|