fix: Diff modal原始版本大段空白修复(20260420_0009)

- currentHtml提取后添加 replace(/>(\s+)</g, '><') 压缩标签间空白
- cleanHtml处理后同样压缩, 确保diff两侧格式对齐
- 消除模板源码排版换行被diff算法误识别为删除内容的问题
This commit is contained in:
2026-04-20 00:10:31 +08:00
parent e549419a4c
commit 963a7541c9
4 changed files with 55 additions and 1 deletions

View File

@@ -930,7 +930,7 @@ export default function ReportEditor() {
saveDraftToStorage(); saveDraftToStorage();
} }
} }
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/&#8203;/g, '').trim() : ''; const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/&#8203;/g, '').replace(/>(\s+)</g, '><').trim() : '';
const globalContextText = editorRef.current?.innerText || ''; const globalContextText = editorRef.current?.innerText || '';
let messageContent: any; let messageContent: any;
const selectedFrameUrls = aiSelectedFrames.map(id => capturedFrames.find(f => f.id === id)?.dataUrl).filter(Boolean); const selectedFrameUrls = aiSelectedFrames.map(id => capturedFrames.find(f => f.id === id)?.dataUrl).filter(Boolean);
@@ -1017,6 +1017,7 @@ export default function ReportEditor() {
cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, ''); cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>'); cleanHtml = cleanHtml.replace(/<\/p>\s*<p>/gi, '</p><p>');
cleanHtml = cleanHtml.trim(); cleanHtml = cleanHtml.trim();
cleanHtml = cleanHtml.replace(/>(\s+)</g, '><');
cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="padding: 0px; font-family: SimSun; font-size: 12pt; line-height: 1.5;">'); cleanHtml = cleanHtml.replace(/<p>/gi, '<p style="padding: 0px; font-family: SimSun; font-size: 12pt; line-height: 1.5;">');
if (targetRegionEl) { if (targetRegionEl) {
setDiffModal({ setDiffModal({

View File

@@ -0,0 +1,19 @@
# 功能变更实现方案文档20260420_0009
## 实现方案
### 变更点 1currentHtml 提取后压缩空白
Line 933
```ts
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/&#8203;/g, '').trim() : '';
```
→ 添加 `.replace(/>(\s+)</g, '><')`
### 变更点 2cleanHtml 处理后压缩空白
Line 1016-1020
`cleanHtml.trim()` 之后追加 `.replace(/>(\s+)</g, '><')`
### 设计理由
- `>(\s+)<` 正则匹配任意 HTML 标签之间的空白字符(换行、空格、制表符),替换为 `><` 使 HTML 紧凑
- 仅影响 diff 比对前的数据清洗,不影响编辑器实际渲染
- 两侧(原始版本和 AI 版本)都做同样处理,确保 diff 只比对有意义的内容差异

View File

@@ -0,0 +1,11 @@
# 功能变更测试文档20260420_0009
## 测试项Diff Modal 段落空白修复
### 测试场景
1. 在 AI 可编辑区域(如"手术步骤")发送修改请求
2. AI 返回修改内容后,查看 diff 弹窗
3. **预期结果**
- 左侧"原始版本"中段落之间没有大段空白
- 红色删除线仅标记有实际意义的文字差异
- 右侧"AI 提议版本"排版正常

View File

@@ -0,0 +1,23 @@
# 功能变更需求文档20260420_0009
## 需求:修复 AI 修改确认弹窗原始版本的大段空白
### 问题背景
`defaultContent.ts` 模板源码中 `<p>` 标签之间存在大量换行和缩进空白(代码排版需要)。当 `currentHtml``.ai-content``innerHTML` 读取时这些空白被完整保留。AI 返回的 `updatedHtml` 是紧凑的(无多余空白)。`diffChars` 比对时将原始 HTML 中的空白字符标记为 `removed``\n` 被转为 `<br>` 渲染,导致左侧"原始版本"出现大段空白。
### 根因
模板源码:
```html
</p>
<p style="...">
```
读取后的 `currentHtml` 包含 `</p>\n\n <p>`,而 AI 返回的是 `</p><p>`,差异被标记为删除并渲染为多个 `<br>`
### 解决方案
`handleAIGenerate` 中:
1. `currentHtml` 提取后,添加 `.replace(/>(\s+)</g, '><')` 压缩标签间空白
2. `cleanHtml` 处理后,同样添加 `.replace(/>(\s+)</g, '><')` 保持两侧格式对齐
### 影响范围
- `src/pages/ReportEditor.tsx`