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)
2.7 KiB
2.7 KiB
需求分析 — 2026-04-17-09-36-07
原始需求摘要
全面优化 TemplateManage 模板编辑器的交互体验，解决以下三个核心问题：
- 消除从右侧字段库插入智能字段后产生的多余空格与排版松散问题。
- 修复在行尾插入字段时出现的异常换行，以及按 Backspace 删除字段时误删整行的底层 Bug。
- 将常用基本信息字段（姓名、性别、年龄等）直接预置到系统默认模板中，实现开箱即用。
需求拆解
功能点
-
消除插入字段后的多余空格
- 问题：
insertSmartField生成的 HTML 字符串末尾带有 ，且可能包含换行符，导致字段后跟随大量不可见空格。 - 方案：移除
，将 HTML 压缩为一行；调整margin为更小的值（如0 2px）。
- 问题：
-
修复异常换行与 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时，手动选中并删除该节点，阻止默认行为。
- 给
- 问题 2a（异常换行）：当在"住院号："等行尾插入
-
默认模板预置字段控件
- 问题：当前
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（可选） |
待确认问题
无。用户已提供详细的问题现象和解决方案思路，可直接进入实现方案。