From 8ccb234a626bdae3778ed24ebb88fe80b84249b8 Mon Sep 17 00:00:00 2001 From: Administrator Date: Sun, 19 Apr 2026 00:07:14 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-19-00-01-50=20-=20=E9=AB=98=E4=BA=AE?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=9F=94=E5=8C=96=E3=80=81=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E7=A9=BA=E7=99=BD=E5=8F=96=E6=B6=88=E3=80=81=E6=89=93=E5=8D=B0?= =?UTF-8?q?=E9=AB=98=E4=BA=AE=E9=9A=94=E7=A6=BB=E3=80=81=E4=B8=8B=E5=88=92?= =?UTF-8?q?=E7=BA=BF=E9=85=8D=E7=BD=AE=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ReportEditor.tsx | 13 +++-- src/pages/TemplateManage.tsx | 13 +++++ src/utils/print.ts | 2 +- 工程分析/实现方案-2026-04-19-00-01-50.md | 65 ++++++++++++++++++++++++ 工程分析/测试方案-2026-04-19-00-01-50.md | 48 +++++++++++++++++ 工程分析/经验记录.md | 38 ++++++++++++++ 工程分析/需求分析-2026-04-19-00-01-50.md | 26 ++++++++++ 7 files changed, 200 insertions(+), 5 deletions(-) create mode 100644 工程分析/实现方案-2026-04-19-00-01-50.md create mode 100644 工程分析/测试方案-2026-04-19-00-01-50.md create mode 100644 工程分析/需求分析-2026-04-19-00-01-50.md diff --git a/src/pages/ReportEditor.tsx b/src/pages/ReportEditor.tsx index 5bdeca1..f9f57f0 100644 --- a/src/pages/ReportEditor.tsx +++ b/src/pages/ReportEditor.tsx @@ -60,14 +60,16 @@ export default function ReportEditor() { 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'; + (el as HTMLElement).style.backgroundColor = ''; + (el as HTMLElement).style.outline = ''; + (el as HTMLElement).style.outlineOffset = ''; }); 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.style.backgroundColor = '#f1f5f9'; + targetEl.style.outline = '1px solid #94a3b8'; + targetEl.style.outlineOffset = '1px'; targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' }); } } @@ -432,6 +434,9 @@ export default function ReportEditor() { return; } + // 点击空白处清除高亮 + setActiveFieldKey(null); + const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null; if (!placeholder) return; diff --git a/src/pages/TemplateManage.tsx b/src/pages/TemplateManage.tsx index 730df4d..0490086 100644 --- a/src/pages/TemplateManage.tsx +++ b/src/pages/TemplateManage.tsx @@ -499,6 +499,19 @@ export default function TemplateManage() { setFormFields(updated); storage.set('formFieldsConfig', updated); setEditingFieldKey(null); + + // 同步更新编辑器中已插入字段的 classList + if (editorRef.current) { + const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`); + els.forEach(el => { + if (editFieldHasUnderline) { + el.classList.remove('no-underline'); + } else { + el.classList.add('no-underline'); + } + }); + saveTemplateContent(); + } }; const addField = () => { diff --git a/src/utils/print.ts b/src/utils/print.ts index 5d7ff2e..e977e2a 100644 --- a/src/utils/print.ts +++ b/src/utils/print.ts @@ -42,7 +42,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报 .smart-field-wrapper .field-value { min-width: 24px; padding: 0 2px; margin: 0; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: inherit; font-size: inherit; vertical-align: baseline; box-sizing: border-box; outline: none; text-align: center; } .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; } @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 { 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 0px 2px !important; } .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; } } diff --git a/工程分析/实现方案-2026-04-19-00-01-50.md b/工程分析/实现方案-2026-04-19-00-01-50.md new file mode 100644 index 0000000..8685832 --- /dev/null +++ b/工程分析/实现方案-2026-04-19-00-01-50.md @@ -0,0 +1,65 @@ +# 实现方案 —— 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` 的优先级需确保高于任何内联样式。 diff --git a/工程分析/测试方案-2026-04-19-00-01-50.md b/工程分析/测试方案-2026-04-19-00-01-50.md new file mode 100644 index 0000000..d565620 --- /dev/null +++ b/工程分析/测试方案-2026-04-19-00-01-50.md @@ -0,0 +1,48 @@ +# 测试方案 —— 2026-04-19-00-01-50 + +## 测试目标 +验证高亮样式修复、点击空白取消、打印纯净度、下划线同步的有效性。 + +## 测试用例 + +### TC-1：高亮样式柔和 +**前置条件**：ReportEditor 已加载默认模板。 +**步骤**： +1. 点击中间模板中的任意字段。 +**预期结果**：字段显示浅灰色背景和细灰边框（不再是刺眼的蓝色）。 + +### TC-2：点击空白取消高亮 +**前置条件**：ReportEditor 中某个字段已被高亮。 +**步骤**： +1. 点击模板中的空白区域（非字段、非占位符）。 +**预期结果**：字段高亮样式消失，恢复为默认状态。 + +### TC-3：打印不带高亮框 +**前置条件**：ReportEditor 中某个字段处于高亮状态。 +**步骤**： +1. 点击打印预览。 +**预期结果**：打印内容中不显示任何高亮框、outline 或 box-shadow，字段显示正常。 + +### TC-4：勾选下划线后打印生效 +**前置条件**：TemplateManage 中某字段已插入模板，且未勾选下划线。 +**步骤**： +1. 在字段管理中勾选该字段的「打印时显示下划线」。 +2. 保存字段编辑。 +3. 在 ReportEditor 中打印预览。 +**预期结果**：该字段显示下划线。 + +### TC-5：取消下划线后打印不显示 +**前置条件**：TemplateManage 中某字段已勾选下划线并保存。 +**步骤**： +1. 取消勾选该字段的「打印时显示下划线」。 +2. 保存字段编辑。 +3. 在 ReportEditor 中打印预览。 +**预期结果**：该字段不显示下划线。 + +## 回归测试 +- 确保字段插入、编辑、删除功能正常。 +- 确保双向联动（中间点击→右侧高亮、右侧点击→中间高亮）正常。 +- 确保打印样式整体正常。 + +## 测试通过标准 +所有用例均通过，无控制台报错，打印内容纯净无高亮残留。 diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index c2f87aa..c4b05ab 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1185,3 +1185,41 @@ if ((settings.autoInsertDelay || 0) > 0) { - iframe 打印的文件名行为在不同浏览器间存在差异（Chrome 用父窗口 title，Safari 可能用 iframe title），最稳妥的方案是同时设置父窗口 `document.title` 和 iframe 内部 `` 标签。 - 双向联动时，`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除，避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮，逻辑已覆盖。 - 给容器 div 添加 `onClick` 时需注意事件冒泡：容器内的子元素（如 input、button）的点击事件会自然冒泡到容器，如果子元素有自己的 onClick 处理（如 dropdown 选项），需确保已调用 `stopPropagation()`。 + + +--- + +## 记录 38：高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步 + +**A. 具体问题** +1. ReportEditor 中 `.field-value` 激活高亮使用蓝色 box-shadow（`0 0 0 2px #3b82f6`）+ `#eff6ff` 背景，视觉过于刺眼。 +2. 点击编辑器空白区域时，高亮样式不会自动清除，用户必须点击另一个字段才能切换高亮。 +3. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。 +4. TemplateManage 中编辑字段的「打印时显示下划线」勾选后，已插入到模板中的 `.field-value` 仍然保留旧的 `.no-underline` 类，打印时不显示下划线。 + +**B. 产生问题原因** +1. `activeFieldKey` 的 `useEffect` 中使用了高对比度的蓝色阴影和背景色，未考虑柔和视觉体验。 +2. `handleEditorClick` 的 capture 事件处理器仅在点击 `.field-value` 时设置 `activeFieldKey`，没有处理「点击非字段区域时清空」的逻辑。 +3. `print.ts` 的 `@media print` 中只重置了 `border` 和 `background`，遗漏了 `outline` 和 `box-shadow`。 +4. `saveFieldEdit` 仅更新了 JSON state 和 `localStorage` 中的字段配置，没有同步扫描 `editorRef.current` 中已存在的 DOM 元素并更新其 `classList`。 + +**C. 解决问题方案** +1. **柔和高亮**：将 `useEffect` 中的高亮样式改为 `backgroundColor: '#f1f5f9'`（浅灰背景）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`；清除样式时用 `''` 而非硬编码颜色，让 CSS 类重新接管。 +2. **点击空白取消高亮**：在 `handleEditorClick` 中，`.field-value` 判断分支结束后增加 `setActiveFieldKey(null)`，使点击任何非字段区域都会清除高亮。 +3. **打印隔离高亮**：`print.ts` 的 `@media print` 中强制添加 `outline: none !important; box-shadow: none !important;`，确保打印输出不受任何高亮内联样式影响。 +4. **下划线配置同步**：`saveFieldEdit` 末尾增加 DOM 扫描逻辑： + ```ts + if (editorRef.current) { + const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`); + els.forEach(el => { + if (editFieldHasUnderline) el.classList.remove('no-underline'); + else el.classList.add('no-underline'); + }); + saveTemplateContent(); + } + ``` + +**D. 后续如何避免问题** +- 任何通过 JS 直接操作 DOM 添加的内联样式（如高亮），都必须在 `@media print` 中通过 `!important` 强制抹除，防止打印件被屏幕交互样式污染。 +- 当字段配置（如 `hasUnderline`）同时影响「未来插入的元素」和「已存在的 DOM 元素」时，保存逻辑必须包含对已插入 DOM 的同步更新，不能只更新 state。 +- `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为（如点击空白取消）的理想位置，但需注意不要阻断其他正常交互路径（如 placeholder 点击）。 diff --git a/工程分析/需求分析-2026-04-19-00-01-50.md b/工程分析/需求分析-2026-04-19-00-01-50.md new file mode 100644 index 0000000..9c63183 --- /dev/null +++ b/工程分析/需求分析-2026-04-19-00-01-50.md @@ -0,0 +1,26 @@ +# 需求分析 —— 2026-04-19-00-01-50 + +## 需求来源 +用户在实际使用中发现高亮样式刺眼、点击空白不取消高亮、以及下划线勾选无效的问题。 + +## 需求概述 + +### 需求 1：高亮蓝框太明显 +ReportEditor 中 `.field-value` 激活时的蓝框（`box-shadow: 0 0 0 2px #3b82f6` + `#eff6ff` 背景）过于刺眼，希望改为更柔和的选中效果（类似 TemplateManage 中的淡色高亮）。 + +### 需求 2：点击空白处高亮不消失 + 打印带蓝框 +1. 点击模板空白区域时，`.field-value` 的高亮样式不会自动清除。 +2. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。 + +### 需求 3：下划线勾选无效 +在 TemplateManage 的字段管理中勾选「打印时显示下划线」并保存后，已插入到模板中的 `.field-value` 仍然带有 `.no-underline` 类，导致打印时不显示下划线。 + +## 涉及文件 +- `src/pages/ReportEditor.tsx`（需求 1、2） +- `src/utils/print.ts`（需求 2） +- `src/pages/TemplateManage.tsx`（需求 3） + +## 需求影响范围 +- 编辑器高亮交互体验 +- 打印样式纯净度 +- 字段配置与 DOM 的同步机制