From b24ba08658011a53ade32d0d67c8c57a7cdd63d1 Mon Sep 17 00:00:00 2001
From: admin <572701190@qq.com>
Date: Sun, 19 Apr 2026 18:25:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=89=93=E5=8D=B0=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?AI=E5=8C=BA=E5=9F=9F=E8=93=9D=E6=A1=86=20+=20diff=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=AD=97=E4=BD=93=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- print.ts的iframe样式中增加.ai-region隐藏规则：去除边框/背景/内边距，隐藏右上角标签
- diffModal右侧AI提议版本容器增加style属性：fontFamily SimSun、fontSize 12pt、lineHeight 1.5
- 确保打印输出和diff对比的视觉一致性
---
 src/pages/ReportEditor.tsx         |  1 +
 src/utils/print.ts                 |  2 ++
 工程分析/20260419_1822/实现方案.md | 58 ++++++++++++++++++++++++++++++
 工程分析/20260419_1822/测试方案.md | 41 +++++++++++++++++++++
 工程分析/20260419_1822/需求分析.md | 31 ++++++++++++++++
 工程分析/经验记录.md               | 28 +++++++++++++++
 6 files changed, 161 insertions(+)
 create mode 100644 工程分析/20260419_1822/实现方案.md
 create mode 100644 工程分析/20260419_1822/测试方案.md
 create mode 100644 工程分析/20260419_1822/需求分析.md

diff --git a/src/pages/ReportEditor.tsx b/src/pages/ReportEditor.tsx
index 570c1af..7a96e5a 100644
--- a/src/pages/ReportEditor.tsx
+++ b/src/pages/ReportEditor.tsx
@@ -2633,6 +2633,7 @@ export default function ReportEditor() {
                   suppressContentEditableWarning
                   onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
                   dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
+                  style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
                 ></div>
               </div>
             </div>
diff --git a/src/utils/print.ts b/src/utils/print.ts
index 9e2dcbd..a7f6067 100644
--- a/src/utils/print.ts
+++ b/src/utils/print.ts
@@ -41,6 +41,8 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
           .smart-field-wrapper .field-label { color: #64748b; user-select: none; }
           .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; }
+          .ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
+          .ai-region > [contenteditable="false"] { display: none !important; }
           @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 0px 2px !important; line-height: 1 !important; }
             .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
diff --git a/工程分析/20260419_1822/实现方案.md b/工程分析/20260419_1822/实现方案.md
new file mode 100644
index 0000000..3a37444
--- /dev/null
+++ b/工程分析/20260419_1822/实现方案.md
@@ -0,0 +1,58 @@
+# 实现方案
+
+## 修改文件 1：`src/utils/print.ts`
+
+在 iframe 的 `<style>` 标签中，增加 `.ai-region` 的打印隐藏样式。
+
+**原代码**（line 23-48 的 style 块）：
+```css
+          .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 { 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; line-height: 1 !important; }
+            .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
+          }
+```
+
+**新代码**：
+```css
+          .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
+          .ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
+          .ai-region > [contenteditable="false"] { display: none !important; }
+          @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 0px 2px !important; line-height: 1 !important; }
+            .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
+          }
+```
+
+**变更点**：
+1. 新增 `.ai-region` 样式：去除边框、背景、内边距、外边距
+2. 新增 `.ai-region > [contenteditable="false"]` 样式：隐藏右上角标签
+
+## 修改文件 2：`src/pages/ReportEditor.tsx`
+
+在 diffModal 右侧「AI 提议版本」容器上增加 `style` 属性。
+
+**原代码**（line 2630-2636）：
+```tsx
+                <div
+                  className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
+                  contentEditable
+                  suppressContentEditableWarning
+                  onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
+                  dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
+                ></div>
+```
+
+**新代码**：
+```tsx
+                <div
+                  className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
+                  contentEditable
+                  suppressContentEditableWarning
+                  onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
+                  dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
+                  style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
+                ></div>
+```
+
+**变更点**：增加 `style` 属性，指定宋体 12pt、行高 1.5，与编辑器正文样式一致。
diff --git a/工程分析/20260419_1822/测试方案.md b/工程分析/20260419_1822/测试方案.md
new file mode 100644
index 0000000..1bc5fc4
--- /dev/null
+++ b/工程分析/20260419_1822/测试方案.md
@@ -0,0 +1,41 @@
+# 测试方案
+
+## 测试环境
+- 浏览器访问 `http://localhost:4173/`
+- 进入「图文报告生成」→ 新建报告
+
+## 测试用例 1：打印时 AI 区域蓝框隐藏
+
+**步骤**：
+1. 编辑器中插入 AI 可编辑区域，写入一些内容
+2. 点击「打印」按钮（或导出/下载）
+3. 观察打印预览或生成的 PDF
+
+**预期结果**：
+- AI 可编辑区域的蓝色虚线边框不显示
+- 右上角「XX-AI可编辑区域」标签不显示
+- 灰色背景不显示
+- 文字正常显示，排版整洁
+
+## 测试用例 2：diff 弹窗字体统一
+
+**步骤**：
+1. 编辑器中插入 AI 可编辑区域，写入带宋体 12pt 样式的内容
+2. 勾选「允许修改正文」→ 发送修改指令
+3. 观察 diff 弹窗左右两侧
+
+**预期结果**：
+- 左侧「原始版本」显示宋体 12pt
+- 右侧「AI 提议版本」也应显示宋体 12pt，与左侧视觉一致
+- 行高一致（1.5）
+
+## 测试用例 3：编译与部署
+
+**步骤**：
+1. 执行 `npm run build`
+2. 确认无 TypeScript 编译错误
+3. 预览服务正常启动并返回 200
+
+**预期结果**：
+- `vite build` 成功完成
+- 预览页面可正常访问
diff --git a/工程分析/20260419_1822/需求分析.md b/工程分析/20260419_1822/需求分析.md
new file mode 100644
index 0000000..95206f4
--- /dev/null
+++ b/工程分析/20260419_1822/需求分析.md
@@ -0,0 +1,31 @@
+# 需求分析
+
+## 时间戳
+2026-04-19 18:22
+
+## 需求来源
+用户希望优化两个视觉问题：
+1. 点击下载或打印时，不显示 AI 可编辑区域的蓝色虚线框和标签
+2. AI 修改确认弹窗中，右侧「AI 提议版本」的字体和大小与左侧「原始版本」统一
+
+## 问题 1：打印/下载时 AI 区域蓝框未隐藏
+
+**现象**：打印或下载报告时，AI 可编辑区域的蓝色虚线边框和右上角标签仍然显示。
+
+**根因分析**：
+- `src/utils/print.ts` 使用 iframe 生成打印文档，其 `<style>` 中没有针对 `.ai-region` 的隐藏样式
+- `src/index.css` 中有 `.print-content .ai-region` 的样式，但 `print.ts` 中实际使用的是 `.content` 类，CSS 选择器不匹配
+- `@media print` 在 `index.css` 中只影响浏览器打印预览，不影响 `print.ts` 的 iframe
+
+## 问题 2：diff 弹窗右侧字体不一致
+
+**现象**：左侧「原始版本」显示宋体 12pt，右侧「AI 提议版本」显示默认字体（无衬线体），视觉不一致。
+
+**根因分析**：
+- 左侧原始版本的文本带有内联样式（如 `<span style="font-family: SimSun; font-size: 12pt;">`）
+- 右侧 AI 返回的是纯净的 `<p>` 标签，没有内联样式
+- diff 弹窗右侧容器没有设置默认字体样式，导致浏览器使用默认字体
+
+## 解决方向
+1. 在 `print.ts` 的 iframe `<style>` 中增加 `.ai-region` 的打印隐藏样式
+2. 在 diff 弹窗右侧容器的 `style` 属性中指定与正文一致的字体和字号
diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md
index 5257fd2..88087a4 100644
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -817,3 +817,31 @@ if (aiRegion && targetRegionEl) {
 **D. 后续如何避免问题**
 - `contentEditable` 中的嵌套容器（如 `.ai-content`）在用户输入时极易被浏览器原生编辑行为破坏结构。任何依赖特定 DOM 层级关系的功能，都必须在读取数据前做**结构完整性检查和修复**。
 - 对于 AI 区域这类核心功能，应考虑在编辑器层面增加 `keydown`/`paste` 事件拦截，或改用更可控的编辑方案（如 ProseMirror/Slate）来替代原生 `contentEditable`。
+
+
+---
+
+## 记录 35：打印时隐藏 AI 区域蓝框 + diff 弹窗字体统一
+
+**A. 具体问题**
+1. 点击下载/打印时，AI 可编辑区域的蓝色虚线框和右上角标签仍然显示在输出中。
+2. AI 修改确认弹窗中，右侧「AI 提议版本」的字体与左侧「原始版本」不一致（左侧宋体 12pt，右侧默认无衬线体）。
+
+**B. 产生问题原因**
+1. **打印样式缺失**：`src/utils/print.ts` 使用 iframe 生成打印文档，其 `<style>` 中没有针对 `.ai-region` 的隐藏样式。虽然 `src/index.css` 中有 `.print-content .ai-region` 规则，但 `print.ts` 中实际使用的是 `.content` 类，CSS 选择器不匹配。
+2. **字体继承缺失**：AI 返回的 HTML 是纯净的 `<p>` 标签，没有内联样式。diff 弹窗右侧容器没有设置默认字体，导致浏览器使用默认无衬线字体。
+
+**C. 解决问题方案**
+1. **打印样式**：在 `print.ts` 的 iframe `<style>` 中增加：
+   ```css
+   .ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
+   .ai-region > [contenteditable="false"] { display: none !important; }
+   ```
+2. **diff 弹窗字体**：在右侧容器的 `style` 属性中指定：
+   ```tsx
+   style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
+   ```
+
+**D. 后续如何避免问题**
+- 任何通过 iframe 或独立文档实现的打印/导出功能，都必须在 iframe 的 `<style>` 中独立维护打印样式，不能依赖外部 CSS 文件（因为外部样式不会自动注入 iframe）。
+- 对于 diff 对比类 UI，左右两侧容器应显式设置相同的默认字体样式，避免依赖内容自带的内联样式造成视觉不一致。