Files

admin 0ff1cbe5f0 feat: focus highlight, delete-btn visibility isolation, multi_select crash fix

- 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

2026-04-17 11:21:32 +08:00

2.9 KiB

Raw Blame History

需求分析 — 字段聚焦高亮、删除按钮显隐控制与 .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 类型字段时：

{((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 无编译错误。

2.9 KiB Raw Blame History Unescape Escape