Mdeical_Sur_Report/工程分析/实现方案-2026-04-18-23-39-35.md

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

方案目标

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

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

修改文件 1：src/types.ts

在 DEFAULT_FORM_FIELDS 数组中，为所有字段显式设置 hasUnderline: false（如果当前为 true 或未指定）。

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

在编辑字段的回显逻辑中：

setEditFieldHasUnderline(field.hasUnderline === true);

确保 undefined 时默认不勾选。

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

恢复默认显示下划线的白名单机制：

@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

// 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：

.smart-field-wrapper .field-value {
  min-width: 24px;
  padding: 0;
  margin: 0;
  ...
}

需求 4：ReportEditor 表单逆向联动

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

1. 新增 useEffect 监听 activeFieldKey：

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 规则。