2026-04-18-23-39-35 - 四项修复：下划线默认、PDF文件名、间距缩紧、表单逆向联动

2026-04-18 23:44:17 +08:00
parent 7ab8c919e3
commit d5529a4998
7 changed files with 236 additions and 11 deletions
--- a/工程分析/实现方案-2026-04-18-23-39-35.md
+++ b/工程分析/实现方案-2026-04-18-23-39-35.md
@@ -0,0 +1,108 @@
+# 实现方案 —— 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` 规则。
--- a/工程分析/测试方案-2026-04-18-23-39-35.md
+++ b/工程分析/测试方案-2026-04-18-23-39-35.md
@@ -0,0 +1,64 @@
+# 测试方案 —— 2026-04-18-23-39-35
+
+## 测试目标
+验证下划线修复、文件名统一、间距缩紧和双向联动的正确性。
+
+## 测试用例
+
+### TC-1：基础字段默认不勾选下划线
+**前置条件**：进入模板管理 → 字段管理。  
+**步骤**：
+1. 点击「患者姓名」或「住院号」的编辑按钮。
+**预期结果**：「打印时显示下划线」复选框默认未勾选。
+
+### TC-2：勾选下划线后打印生效
+**前置条件**：某个字段已勾选「打印时显示下划线」。  
+**步骤**：
+1. 在编辑器中插入该字段。
+2. 点击打印预览。
+**预期结果**：该字段显示下划线，且下划线紧贴文字底部。
+
+### TC-3：未勾选下划线打印不显示
+**前置条件**：某个字段未勾选下划线。  
+**步骤**：
+1. 在编辑器中插入该字段。
+2. 点击打印预览。
+**预期结果**：该字段不显示下划线。
+
+### TC-4：PDF 与 JSON 文件名一致
+**前置条件**：报告已填写完整信息。  
+**步骤**：
+1. 分别点击「导出 PDF」和「导出 JSON」。
+**预期结果**：两个文件的文件名前缀完全一致（如 `图文报告-腹腔镜胆囊切除术报告-未知-无号-2026-04-18T23-28`）。
+
+### TC-5：field-value 间距缩紧
+**前置条件**：模板中有 field-value 字段。  
+**步骤**：
+1. 观察字段框内文字与边框的距离。
+2. 打印预览中观察间距。
+**预期结果**：文字紧贴边框，左右无明显空白。
+
+### TC-6：表单逆向联动
+**前置条件**：ReportEditor 已加载默认模板。  
+**步骤**：
+1. 点击右侧「基本信息」中「手术名称」输入框。
+2. 观察中间模板区域。
+**预期结果**：
+- 中间模板中「手术名称」字段高亮显示（蓝色背景 + 蓝色描边）。
+- 页面平滑滚动到该字段位置（视野中央）。
+
+### TC-7：正向联动仍正常
+**前置条件**：ReportEditor 已加载默认模板。  
+**步骤**：
+1. 点击中间模板中的「患者姓名」字段。
+**预期结果**：
+- 右侧表单中高亮「患者姓名」输入框。
+- 右侧滚动到该输入框位置。
+
+## 回归测试
+- 确保字段插入、编辑、删除功能正常。
+- 确保打印样式正常，所有字段类型显示正确。
+- 确保视频分析、图片占位符功能正常。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，下划线逻辑正确，双向联动流畅。
--- a/工程分析/需求分析-2026-04-18-23-39-35.md
+++ b/工程分析/需求分析-2026-04-18-23-39-35.md
@@ -0,0 +1,34 @@
+# 需求分析 —— 2026-04-18-23-39-35
+
+## 需求来源
+用户在实际使用中发现下划线功能异常、导出文件名不一致、输入框间距过大、以及表单缺乏逆向联动等问题。
+
+## 需求概述
+
+### 需求 1：修复下划线勾选状态异常及打印失效
+1. **默认勾选未取消**：`DEFAULT_FORM_FIELDS` 中的基础字段（如患者姓名、住院号）默认 `hasUnderline` 仍为 `true` 或未指定，导致编辑弹窗中仍显示为勾选状态。
+2. **打印失效**：`print.ts` 中 `@media print` 的样式逻辑有问题，导致无论是否勾选「打印时显示下划线」，打印时都不显示下划线。
+3. **下划线紧贴文字**：用户希望勾选后的下划线紧贴文字底部。
+
+### 需求 2：统一 PDF 和 JSON 导出文件名
+当前 PDF 导出文件名与 JSON 不一致（缺少时间后缀或格式不同），希望两者完全一致。
+
+### 需求 3：缩紧 field-value 内文字间距
+`.field-value` 当前有 `padding:0 4px; margin:0 2px`，导致框内文字偏右，打印时左右间距过大。希望缩小 padding 和 margin。
+
+### 需求 4：ReportEditor 表单逆向联动
+当前实现了「点击中间模板字段 → 右侧表单高亮滚动」，但反向逻辑缺失：点击右侧表单输入框时，中间模板内的对应 `.field-value` 不会高亮，也不会滚动到对应位置。
+
+## 涉及文件
+- `src/types.ts`（需求 1）
+- `src/pages/TemplateManage.tsx`（需求 1）
+- `src/utils/print.ts`（需求 1、2、3）
+- `src/utils/defaultContent.ts`（需求 3）
+- `src/pages/ReportEditor.tsx`（需求 2、4）
+- `src/pages/ReportManage.tsx`（需求 2）
+
+## 需求影响范围
+- 字段默认配置数据
+- 打印样式逻辑
+- 输入框内边距/外边距
+- 编辑器双向联动交互