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
51 lines
2.9 KiB
Markdown
51 lines
2.9 KiB
Markdown
# 需求分析 — 字段聚焦高亮、删除按钮显隐控制与 .map Bug 修复（2026-04-17-11-14-28）
|
||
|
||
## 一、需求来源
|
||
|
||
用户反馈 TemplateManage 中字段删除按钮位置和显示时机需要优化，同时要求字段获得焦点时有视觉高亮反馈，并修复 ReportEditor 中多选字段渲染崩溃的 Bug。
|
||
|
||
## 二、具体需求拆解
|
||
|
||
### 需求 1：field-value 聚焦高亮
|
||
|
||
**期望**：当光标落入 `.field-value`（`contenteditable="true"` 的输入框）时，背景色加深、边框色变化，并带一个短暂的过渡动画，让用户明确感知当前正在编辑哪个字段。
|
||
|
||
### 需求 2：删除按钮定位与显隐控制
|
||
|
||
**期望**：
|
||
- 红色 × 删除按钮从字段内部左侧移到**右上角**（绝对定位）。
|
||
- 仅在鼠标**悬浮在 `.field-value` 上**或 `.field-value` 获得焦点时显示删除按钮。
|
||
- **ReportEditor 中完全不显示**该删除按钮（编辑器中不应有删除字段的入口）。
|
||
|
||
### 需求 3：修复 ReportEditor `.map is not a function` 崩溃
|
||
|
||
**问题**：
|
||
```
|
||
Uncaught TypeError: (y[x.key] || []).map is not a function
|
||
```
|
||
发生在 `ReportEditor.tsx` 渲染 `multi_select` 类型字段时：
|
||
```tsx
|
||
{((reportData as any)[field.key] || []).map((tag: string) => ...
|
||
```
|
||
|
||
**原因**：历史脏数据或异常情况下，`surgeon`/`assistant`/`anesthesiologist` 等字段的值不是数组，而是字符串或其他类型，导致 `.map()` 调用崩溃。
|
||
|
||
**期望**：在渲染前对值做类型安全检查，非数组时安全转换为空数组或包裹为单元素数组，避免页面白屏。
|
||
|
||
## 三、影响范围分析
|
||
|
||
| 文件 | 改动说明 |
|
||
|------|----------|
|
||
| `src/pages/TemplateManage.tsx` | `insertSmartField` 的 HTML 结构调整（wrapper 增加 `position:relative`，delete-btn 改为绝对定位在右上角）。编辑器 div 增加专属 class `template-editor-mode` 用于样式隔离。 |
|
||
| `src/utils/defaultContent.ts` | `smartField()` 辅助函数同步调整 HTML 结构，与 `insertSmartField` 保持一致。 |
|
||
| `src/index.css` | 增加 `.field-value:focus` 高亮样式；重写 `.delete-btn` 样式为绝对定位；增加 `.template-editor-mode .smart-field-wrapper:hover .delete-btn` / `:focus-within .delete-btn` 显隐控制；确保 `.print-content .delete-btn` 打印隐藏。 |
|
||
| `src/pages/ReportEditor.tsx` | 修复 `multi_select` 渲染处的 `.map` 调用，增加 `Array.isArray` 安全转换。 |
|
||
|
||
## 四、验收标准
|
||
|
||
- [ ] TemplateManage 中点击 field-value，背景色明显加深并有过渡动画。
|
||
- [ ] TemplateManage 中鼠标悬浮/聚焦 field-value 时，右上角出现红色 ×；移开后隐藏。
|
||
- [ ] ReportEditor 中所有 smart-field-wrapper 均不显示红色 ×。
|
||
- [ ] ReportEditor 加载存在脏数据（非数组类型）的报告时，multi_select 字段不再崩溃，页面正常渲染。
|
||
- [ ] `npm run lint` 无编译错误。
|