# 实现方案 —— 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`：
```css
@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` 类：
```ts
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` 的优先级需确保高于任何内联样式。