fix: Diff modal原始版本大段空白修复(20260420_0009)
- currentHtml提取后添加 replace(/>(\s+)</g, '><') 压缩标签间空白 - cleanHtml处理后同样压缩, 确保diff两侧格式对齐 - 消除模板源码排版换行被diff算法误识别为删除内容的问题
This commit is contained in:
@@ -930,7 +930,7 @@ export default function ReportEditor() {
|
||||
saveDraftToStorage();
|
||||
}
|
||||
}
|
||||
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').trim() : '';
|
||||
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').replace(/>(\s+)</g, '><').trim() : '';
|
||||
const globalContextText = editorRef.current?.innerText || '';
|
||||
let messageContent: any;
|
||||
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(/<\/p>\s*<p>/gi, '</p><p>');
|
||||
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;">');
|
||||
if (targetRegionEl) {
|
||||
setDiffModal({
|
||||
|
||||
19
工程分析/20260420_0009/功能变更实现方案文档.md
Normal file
19
工程分析/20260420_0009/功能变更实现方案文档.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# 功能变更实现方案文档(20260420_0009)
|
||||
|
||||
## 实现方案
|
||||
|
||||
### 变更点 1:currentHtml 提取后压缩空白
|
||||
Line 933:
|
||||
```ts
|
||||
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').trim() : '';
|
||||
```
|
||||
→ 添加 `.replace(/>(\s+)</g, '><')`
|
||||
|
||||
### 变更点 2:cleanHtml 处理后压缩空白
|
||||
Line 1016-1020:
|
||||
在 `cleanHtml.trim()` 之后追加 `.replace(/>(\s+)</g, '><')`
|
||||
|
||||
### 设计理由
|
||||
- `>(\s+)<` 正则匹配任意 HTML 标签之间的空白字符(换行、空格、制表符),替换为 `><` 使 HTML 紧凑
|
||||
- 仅影响 diff 比对前的数据清洗,不影响编辑器实际渲染
|
||||
- 两侧(原始版本和 AI 版本)都做同样处理,确保 diff 只比对有意义的内容差异
|
||||
11
工程分析/20260420_0009/功能变更测试文档.md
Normal file
11
工程分析/20260420_0009/功能变更测试文档.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# 功能变更测试文档(20260420_0009)
|
||||
|
||||
## 测试项:Diff Modal 段落空白修复
|
||||
|
||||
### 测试场景
|
||||
1. 在 AI 可编辑区域(如"手术步骤")发送修改请求
|
||||
2. AI 返回修改内容后,查看 diff 弹窗
|
||||
3. **预期结果**:
|
||||
- 左侧"原始版本"中段落之间没有大段空白
|
||||
- 红色删除线仅标记有实际意义的文字差异
|
||||
- 右侧"AI 提议版本"排版正常
|
||||
23
工程分析/20260420_0009/功能变更需求文档.md
Normal file
23
工程分析/20260420_0009/功能变更需求文档.md
Normal 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`
|
||||
Reference in New Issue
Block a user