Mdeical_Sur_Report/工程分析/实现方案-2026-04-19-00-01-50.md

实现方案 —— 2026-04-19-00-01-50

方案目标

修复高亮样式、实现点击空白取消、阻断打印高亮、同步字段下划线配置到已插入的 DOM。

需求 1 & 2：优化高亮样式、点击空白取消、阻断打印

修改文件 1：src/pages/ReportEditor.tsx

1. 点击空白取消高亮：在 handleEditorClick 中，如果点击目标不是 .field-value，则设置 setActiveFieldKey(null)。

2. 柔和高亮样式：修改 activeFieldKey 的 useEffect：

   • 清除样式时：恢复为 ''（空字符串）而非硬编码颜色，让 CSS 类重新接管
   • 高亮时：backgroundColor: '#f1f5f9'（浅灰）、outline: '1px solid #94a3b8'（细灰边框）、outlineOffset: '1px'
   • 不再使用 box-shadow

修改文件 2：src/utils/print.ts

在 @media print 中强制抹除 outline 和 box-shadow：

@media print {
  .smart-field-wrapper .field-value {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2px 1px 2px !important;
  }
  .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
}

需求 3：修复下划线勾选无效

修改文件：src/pages/TemplateManage.tsx

在 saveFieldEdit 函数中，保存字段配置后，扫描编辑器中所有 data-bind 匹配的 .field-value，根据新的 hasUnderline 值动态添加/移除 .no-underline 类：

if (editorRef.current) {
  const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${editingFieldId}"]`);
  els.forEach(el => {
    if (editFieldHasUnderline) {
      el.classList.remove('no-underline');
    } else {
      el.classList.add('no-underline');
    }
  });
  saveTemplateContent();
}

涉及文件及修改点

文件	修改点
src/pages/ReportEditor.tsx	handleEditorClick 点击空白取消高亮；useEffect 柔和高亮样式
src/utils/print.ts	@media print 强制抹除 outline/box-shadow
src/pages/TemplateManage.tsx	saveFieldEdit 同步更新已插入字段的 classList

风险与注意事项

1. handleEditorClick 中增加 setActiveFieldKey(null) 时，需确保不会影响 .image-placeholder 的点击处理逻辑（placeholder 点击在 field-value 判断之后）。
2. useEffect 中清除样式时使用 style.backgroundColor = '' 而非 = '#f8fafc'，这样可以让元素的 CSS 类样式重新生效，避免硬编码颜色与 CSS 类冲突。
3. saveFieldEdit 中扫描 DOM 并修改 classList 后，必须调用 saveTemplateContent() 将变更持久化到 localStorage。
4. 打印样式中 outline: none !important 和 box-shadow: none !important 的优先级需确保高于任何内联样式。