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();
|
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 || '';
|
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({
|
||||||
|
|||||||
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