admin
0ff1cbe5f0
- Move delete-btn to top-right of smart-field-wrapper via absolute positioning - Add template-editor-mode class to TemplateManage editor for CSS isolation - Show delete-btn only on hover/focus-within inside template-editor-mode - Add .field-value:focus highlight with background darken and blue glow - Sync defaultContent.ts smartField() HTML structure - Fix ReportEditor multi_select .map crash with Array.isArray guard
57 lines
2.6 KiB
Markdown
57 lines
2.6 KiB
Markdown
# 测试方案 — 字段聚焦高亮、删除按钮显隐控制与 .map Bug 修复（2026-04-17-11-14-28）
|
||
|
||
## 一、编译检查
|
||
|
||
- 执行 `npm run lint`（`tsc --noEmit`），确保全量 TypeScript 无编译错误。
|
||
|
||
## 二、功能验证步骤
|
||
|
||
### 测试 1：TemplateManage 字段聚焦高亮
|
||
1. 进入【模板管理】，选择默认模板。
|
||
2. 点击模板中的任意智能字段方框（如"姓名"），观察背景色是否明显变深（如 `#e2e8f0`），边框是否变深，是否有蓝色外发光。
|
||
3. 点击另一个字段方框，确认高亮状态随焦点切换。
|
||
|
||
### 测试 2：TemplateManage 删除按钮位置与显隐
|
||
1. 鼠标悬浮在智能字段方框上（不点击），确认字段**右上角**出现红色圆形 ×。
|
||
2. 鼠标移开字段区域，确认红色 × 消失。
|
||
3. 点击字段方框使其获得焦点，确认红色 × 保持显示。
|
||
4. 点击红色 ×，确认该字段被删除，模板自动保存。
|
||
|
||
### 测试 3：ReportEditor 中不显示删除按钮
|
||
1. 进入【新建报告】或编辑已有报告。
|
||
2. 观察编辑器中的所有智能字段方框，确认**没有任何红色 × 显示**（无论悬浮还是聚焦）。
|
||
3. 在 ReportEditor 的 field-value 中输入文字，确认编辑器正常工作。
|
||
|
||
### 测试 4：ReportEditor multi_select 脏数据兼容性
|
||
1. DevTools Console 执行以下代码，手动构造一份脏数据报告（`surgeon` 为字符串而非数组）：
|
||
```js
|
||
const dirtyReport = {
|
||
id: 'test_dirty_001',
|
||
title: '测试脏数据报告',
|
||
patientName: '张三',
|
||
hospitalId: 'H0001',
|
||
author: 'admin',
|
||
authorName: '管理员',
|
||
createdAt: new Date().toISOString(),
|
||
status: 'draft',
|
||
content: '<p>测试内容</p>',
|
||
surgeon: '张医生', // 脏数据：应该是数组
|
||
assistant: [],
|
||
anesthesiologist: ['周医生']
|
||
};
|
||
const reports = JSON.parse(localStorage.getItem('reports') || '[]');
|
||
reports.push(dirtyReport);
|
||
localStorage.setItem('reports', JSON.stringify(reports));
|
||
```
|
||
2. 刷新页面，进入【报告管理】，点击编辑该测试报告。
|
||
3. 确认页面**没有白屏崩溃**，右侧【基本信息】中的"手术者"字段正确显示为单标签 `张医生`，且可以正常添加/删除标签。
|
||
4. 删除该测试报告，避免污染数据。
|
||
|
||
## 三、预期结果
|
||
|
||
- `npm run lint` 0 错误。
|
||
- TemplateManage 中字段聚焦时有明显高亮效果。
|
||
- TemplateManage 中删除按钮仅悬浮/聚焦时显示在右上角，点击可删除字段。
|
||
- ReportEditor 中完全看不到删除按钮。
|
||
- ReportEditor 能兼容非数组类型的 multi_select 脏数据，不崩溃。
|