# 实现方案 —— 2026-04-18-23-39-35

## 方案目标
修复下划线功能、统一导出文件名、缩紧输入框间距、实现表单逆向联动。

## 需求 1：修复下划线勾选状态异常及打印失效

### 修改文件 1：`src/types.ts`
在 `DEFAULT_FORM_FIELDS` 数组中，为所有字段显式设置 `hasUnderline: false`（如果当前为 `true` 或未指定）。

### 修改文件 2：`src/pages/TemplateManage.tsx`
在编辑字段的回显逻辑中：
```ts
setEditFieldHasUnderline(field.hasUnderline === true);
```
确保 `undefined` 时默认不勾选。

### 修改文件 3：`src/utils/print.ts`
恢复默认显示下划线的白名单机制：
```css
@media print {
  .smart-field-wrapper .field-value {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2px 0px 2px !important;
  }
  .smart-field-wrapper .field-value.no-underline {
    border-bottom: none !important;
  }
}
```

## 需求 2：统一 PDF 和 JSON 导出文件名

### 修改文件：`src/utils/print.ts`
确保 `printDocument` 中：
1. 保存原始 `document.title`
2. 设置 `document.title = docTitle`
3. iframe HTML 中也写入 `<title>${docTitle}</title>`
4. 打印完成后恢复 `document.title`

同时检查 `ReportEditor.tsx` 和 `ReportManage.tsx` 中调用 `printDocument` 时传入的 `docTitle` 是否与 JSON 文件名一致。

## 需求 3：缩紧 field-value 内文字间距

### 修改文件 1：`src/utils/defaultContent.ts`
```ts
// padding:0 4px → padding:0 2px
// margin:0 2px → margin:0
// min-width:32px → min-width:24px
// 增加 text-align:center 让文字居中
```

### 修改文件 2：`src/utils/print.ts`
同步修改打印样式中的 `.field-value`：
```css
.smart-field-wrapper .field-value {
  min-width: 24px;
  padding: 0;
  margin: 0;
  ...
}
```

## 需求 4：ReportEditor 表单逆向联动

### 修改文件：`src/pages/ReportEditor.tsx`

1. **新增 useEffect 监听 activeFieldKey**：
```ts
useEffect(() => {
  if (!editorRef.current) return;
  const allFields = editorRef.current.querySelectorAll('.field-value');
  allFields.forEach(el => {
    (el as HTMLElement).style.backgroundColor = '#f8fafc';
    (el as HTMLElement).style.boxShadow = 'none';
  });
  if (activeFieldKey) {
    const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
    if (targetEl) {
      targetEl.style.backgroundColor = '#eff6ff';
      targetEl.style.boxShadow = '0 0 0 2px #3b82f6';
      targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }
}, [activeFieldKey]);
```

2. **右侧表单添加 onFocus/onClick**：
在右侧表单字段容器的 `onClick` 中增加 `setActiveFieldKey(field.key)`，在 input/select 的 `onFocus` 中也增加 `setActiveFieldKey(field.key)`。

## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/types.ts` | DEFAULT_FORM_FIELDS 中 hasUnderline 设为 false |
| `src/pages/TemplateManage.tsx` | 编辑字段回显逻辑 |
| `src/utils/print.ts` | 打印下划线白名单机制；document.title 设置；field-value 间距 |
| `src/utils/defaultContent.ts` | smartField padding/margin 缩小；text-align:center |
| `src/pages/ReportEditor.tsx` | activeFieldKey useEffect 高亮滚动；表单 onFocus 联动 |
| `src/pages/ReportManage.tsx` | 检查导出文件名一致性 |

## 风险与注意事项
1. `DEFAULT_FORM_FIELDS` 修改后，现有用户的 localStorage 中已保存的字段配置不会自动更新，需要手动编辑或清除 `formFieldsConfig` 才能看到效果。
2. `activeFieldKey` 的 useEffect 直接操作 DOM style，需要确保在组件卸载或切换 tab 时清除高亮。
3. 缩小 padding/margin 后，需要验证在表格单元格（td）内的显示是否正常。
4. 打印样式中 `.field-value.no-underline` 的优先级必须高于基础 `.field-value` 规则。