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)
78 lines
3.4 KiB
Markdown
78 lines
3.4 KiB
Markdown
# 测试方案 — 2026-04-17-09-36-07
|
||
|
||
## 测试目标
|
||
|
||
验证 `TemplateManage` 中插入智能字段后的空格消除、Backspace 删除保护、异常换行修复，以及默认模板预置字段控件的正确性。
|
||
|
||
## 测试环境
|
||
|
||
- 浏览器：Chrome / Edge
|
||
- 前置条件：已登录系统（建议使用 `admin` 超级管理员账号）
|
||
- 测试页面：`/template-manage`
|
||
|
||
---
|
||
|
||
## 测试用例设计
|
||
|
||
### 用例 1：插入字段后无多余空格
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|---------|
|
||
| 1.1 | 进入 `/template-manage` | 默认模板加载，第一行已预置姓名/性别/年龄等智能字段方格 |
|
||
| 1.2 | 将光标定位到编辑器任意位置，点击字段库中的「手术名称」按钮 | 编辑器中插入一个蓝色边框的方格，**方格与后方文字之间没有明显的大片空白** |
|
||
| 1.3 | 右键检查插入元素的 DOM | HTML 中没有 ` `，`smart-field-wrapper` 与前后文本节点紧密相连 |
|
||
|
||
### 用例 2：行尾插入字段不异常换行
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|--------- |
|
||
| 2.1 | 在第一行"住院号："的方格后点击，使光标位于行尾 | — |
|
||
| 2.2 | 点击字段库插入「手术日期」 | 新插入的方格**紧跟在住院号方格后面**，不会跳到下一行（只要一行空间足够） |
|
||
|
||
### 用例 3：Backspace 删除字段不误删整行
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|--------- |
|
||
| 3.1 | 在编辑器中插入一个「手术名称」字段 | 方格正常插入 |
|
||
| 3.2 | 将光标定位到该方格的**紧右侧**（点击方格后方的文字前） | 光标闪烁在方格之后 |
|
||
| 3.3 | 按下键盘 **Backspace** 键 | **仅删除该「手术名称」方格**，方格前方的文字（如"手术名称："）和整行 `<p>` **完好保留** |
|
||
| 3.4 | 再次按 Backspace | 正常删除方格前方的文字字符（如冒号或文字），不会删行 |
|
||
|
||
### 用例 4：Delete 键同样受保护
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|--------- |
|
||
| 4.1 | 将光标定位到「手术名称」方格的**紧左侧**（点击方格前方的文字后） | 光标闪烁在方格之前 |
|
||
| 4.2 | 按下键盘 **Delete** 键 | **仅删除该「手术名称」方格**，整行内容保留 |
|
||
|
||
### 用例 5：默认模板预置字段验证
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|--------- |
|
||
| 5.1 | 进入 `/template-manage`，观察默认模板第一行 | 姓名、性别、年龄、科别、床号、住院号后面**直接就是可填写的蓝色边框方格**，没有红色 `*姓名*` 纯文本占位符 |
|
||
| 5.2 | 新建一个模板 | 新模板内容中也包含第一行的预置智能字段 |
|
||
|
||
### 用例 6：类型检查
|
||
|
||
| 步骤 | 操作 | 预期结果 |
|
||
|------|------|--------- |
|
||
| 6.1 | 在项目根目录执行 `npm run lint` | 无 TypeScript 编译错误 |
|
||
|
||
---
|
||
|
||
## 验收标准
|
||
|
||
- [ ] 插入字段后，方格与前后文字之间没有多余空格。
|
||
- [ ] 行尾插入字段时，空间足够则不会异常跳到下一行。
|
||
- [ ] 按 Backspace/Delete 删除字段时，仅删除该字段节点，不会误删整行。
|
||
- [ ] 默认模板第一行已预置姓名、性别、年龄等智能字段方格。
|
||
- [ ] `npm run lint` 通过。
|
||
|
||
## 测试方式
|
||
|
||
手工浏览器验证，结合 DevTools 观察 DOM 结构和键盘事件响应。
|
||
|
||
---
|
||
|
||
**⚠️ 请审核以上测试方案，确认无误后回复「确认」或提出修改意见，我将进入最终执行阶段。**
|