feat(ai): diff弹窗文档对比高亮 + 二次修改未弹窗修复

- 引入diff库，实现字符级差异比对 - diffModal左右两侧增加diff高亮：左侧删除内容标红，右侧新增内容标绿 - systemPrompt增加绝对强制条款：无论指令多小都必须返回updatedHtml - 前端校验兜底：修改模式下未返回updatedHtml时在聊天面板给出提示 - confirmAiInjection注入前清理diff高亮span，避免污染编辑器
2026-04-19 22:08:05 +08:00
parent 7275906f3c
commit 1ec25065ad
7 changed files with 312 additions and 20 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@google/genai": "^1.29.0",
        "@tailwindcss/vite": "^4.1.14",
        "@vitejs/plugin-react": "^5.0.4",
+        "diff": "^9.0.0",
        "dotenv": "^17.2.3",
        "express": "^4.21.2",
        "lucide-react": "^0.546.0",
@@ -1957,6 +1958,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/diff": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-9.0.0.tgz",
+      "integrity": "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
    "node_modules/dotenv": {
      "version": "17.4.2",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "@google/genai": "^1.29.0",
    "@tailwindcss/vite": "^4.1.14",
    "@vitejs/plugin-react": "^5.0.4",
+    "diff": "^9.0.0",
    "dotenv": "^17.2.3",
    "express": "^4.21.2",
    "lucide-react": "^0.546.0",
--- a/src/pages/ReportEditor.tsx
+++ b/src/pages/ReportEditor.tsx
@@ -12,6 +12,7 @@ import { User, Report, Template, CapturedFrame, SystemSettings, FormField, DEFAU
 import { defaultReportContent } from '../utils/defaultContent';
 import { printDocument } from '../utils/print';
 import { storage } from '../utils/storage';
+import { diffChars } from 'diff';

 export default function ReportEditor() {
  const navigate = useNavigate();
@@ -823,6 +824,28 @@ export default function ReportEditor() {
    }).filter(r => r.id);
  };

+  const stripHtml = (html: string): string => {
+    const tmp = document.createElement('div');
+    tmp.innerHTML = html.replace(/<\/p>/gi, '</p>\n').replace(/<br\s*\/?>/gi, '\n');
+    return (tmp.innerText || tmp.textContent || '').trim();
+  };
+
+  const computeDiffHtml = (oldText: string, newText: string, side: 'left' | 'right'): string => {
+    const diffs = diffChars(oldText, newText);
+    let html = '';
+    for (const part of diffs) {
+      let value = part.value.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
+      if (side === 'left' && part.removed) {
+        html += `<span class="diff-removed" style="background-color:#fee2e2;color:#dc2626;text-decoration:line-through;">${value}</span>`;
+      } else if (side === 'right' && part.added) {
+        html += `<span class="diff-added" style="background-color:#dcfce7;color:#16a34a;font-weight:500;">${value}</span>`;
+      } else if (!part.added && !part.removed) {
+        html += value;
+      }
+    }
+    return html;
+  };
+
  const toggleListening = () => {
    if (isListening) {
      setIsListening(false);
@@ -952,6 +975,9 @@ export default function ReportEditor() {
      if (responseJson.reply) {
        setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: responseJson.reply }]);
      }
+      if (aiModifyEnabled && !responseJson.updatedHtml) {
+        setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: '【系统提示】AI 未能生成修改内容，请尝试重新描述您的需求。' }]);
+      }
      if (responseJson.updatedHtml && aiModifyEnabled) {
        let cleanHtml = responseJson.updatedHtml;
        cleanHtml = cleanHtml.replace(/<br\s*\/?>/gi, '');
@@ -981,6 +1007,7 @@ export default function ReportEditor() {

  const confirmAiInjection = (newHtml: string, regionId: string) => {
    if (!editorRef.current) return;
+    const cleanHtml = newHtml.replace(/<span class="diff-(added|removed)"[^>]*>(.*?)<\/span>/gi, '$2');
    const targetContent = editorRef.current.querySelector(`.ai-region[data-ai-id="${regionId}"] .ai-content`) as HTMLElement;
    if (targetContent) {
      targetContent.focus();
@@ -2623,11 +2650,17 @@ export default function ReportEditor() {
              </div>
              <button onClick={() => setDiffModal(null)} className="text-slate-400 hover:text-slate-600"><X size={20}/></button>
            </div>
+            {(() => {
+              const oldText = stripHtml(diffModal.originalHtml);
+              const newText = stripHtml(diffModal.newHtml);
+              const leftDiffHtml = computeDiffHtml(oldText, newText, 'left');
+              const rightDiffHtml = computeDiffHtml(oldText, newText, 'right');
+              return (
                <div className="flex-1 overflow-hidden flex gap-4 p-6 bg-slate-100">
                  <div className="flex-1 flex flex-col bg-white border border-red-200 rounded-xl overflow-hidden shadow-sm">
                    <div className="bg-red-50 px-3 py-2 text-xs font-bold text-red-600 border-b border-red-100 uppercase tracking-wider">原始版本</div>
                    <div className="p-4 flex-1 overflow-y-auto opacity-70 cursor-not-allowed custom-scrollbar"
-                  dangerouslySetInnerHTML={{ __html: diffModal.originalHtml }}></div>
+                      dangerouslySetInnerHTML={{ __html: leftDiffHtml }}></div>
                  </div>
                  <div className="flex-1 flex flex-col bg-white border border-green-400 rounded-xl overflow-hidden shadow-md relative">
                    <div className="bg-green-50 px-3 py-2 text-xs font-bold text-green-700 border-b border-green-200 uppercase tracking-wider flex justify-between">
@@ -2639,11 +2672,13 @@ export default function ReportEditor() {
                      contentEditable
                      suppressContentEditableWarning
                      onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
-                  dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
+                      dangerouslySetInnerHTML={{ __html: rightDiffHtml }}
                      style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
                    ></div>
                  </div>
                </div>
+              );
+            })()}
            <div className="px-6 py-4 border-t border-slate-100 flex justify-end gap-3 bg-white">
              <button onClick={() => setDiffModal(null)} className="px-6 py-2 rounded-lg text-slate-600 font-medium hover:bg-slate-100">放弃修改</button>
              <button onClick={() => confirmAiInjection(diffModal.newHtml, diffModal.targetId)} className="px-6 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 shadow-sm flex items-center gap-2">
--- a/工程分析/20260419_2159/实现方案.md
+++ b/工程分析/20260419_2159/实现方案.md
@@ -0,0 +1,128 @@
+# 实现方案
+
+## 修改文件
+- `src/pages/ReportEditor.tsx`
+- `package.json` / `package-lock.json`（已安装 `diff` 库）
+
+## 依赖安装
+```bash
+npm install diff --save
+```
+已完成。
+
+## 修改 1：导入 diff 库 + 增加辅助函数
+
+在 `ReportEditor.tsx` 顶部 imports 区域增加：
+```tsx
+import { diffChars } from 'diff';
+```
+
+在组件内部增加辅助函数（建议放在 `checkAiRegions` 之后）：
+```tsx
+const stripHtml = (html: string): string => {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html.replace(/<\/p>/gi, '</p>\n').replace(/<br\s*\/?>/gi, '\n');
+  return (tmp.innerText || tmp.textContent || '').trim();
+};
+
+const computeDiffHtml = (oldText: string, newText: string, side: 'left' | 'right'): string => {
+  const diffs = diffChars(oldText, newText);
+  let html = '';
+  for (const part of diffs) {
+    let value = part.value.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
+    if (side === 'left' && part.removed) {
+      html += `<span class="diff-removed" style="background-color:#fee2e2;color:#dc2626;text-decoration:line-through;">${value}</span>`;
+    } else if (side === 'right' && part.added) {
+      html += `<span class="diff-added" style="background-color:#dcfce7;color:#16a34a;font-weight:500;">${value}</span>`;
+    } else if (!part.added && !part.removed) {
+      html += value;
+    }
+  }
+  return html;
+};
+```
+
+## 修改 2：强化 systemPrompt（约 line 922）
+
+在修改模式的 systemPrompt 中增加第 7 条：
+```
+7. ⚠️ 绝对强制：无论用户的修改指令多么微小，你都必须返回 updatedHtml。绝对不允许只返回 reply 而不返回 updatedHtml！
+```
+
+## 修改 3：前端校验兜底（约 line 955）
+
+在 `if (responseJson.updatedHtml && aiModifyEnabled)` 分支之前，增加兜底提示：
+```tsx
+      if (aiModifyEnabled && !responseJson.updatedHtml) {
+        setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: '【系统提示】AI 未能生成修改内容，请尝试重新描述您的需求。' }]);
+      }
+```
+
+## 修改 4：diffModal 渲染逻辑（约 line 2612-2653）
+
+**原代码**：
+左侧直接渲染 `diffModal.originalHtml`，右侧直接渲染 `diffModal.newHtml`。
+
+**新代码**：
+在 `diffModal` 渲染区域内部，计算 diff 高亮 HTML：
+```tsx
+      {diffModal && diffModal.isOpen && (
+        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
+          {/* ... 弹窗头部 ... */}
+          {(() => {
+            const oldText = stripHtml(diffModal.originalHtml);
+            const newText = stripHtml(diffModal.newHtml);
+            const leftDiffHtml = computeDiffHtml(oldText, newText, 'left');
+            const rightDiffHtml = computeDiffHtml(oldText, newText, 'right');
+            return (
+              <div className="flex-1 overflow-hidden flex gap-4 p-6 bg-slate-100">
+                {/* 左侧：原始版本 + 删除高亮 */}
+                <div className="flex-1 flex flex-col bg-white border border-red-200 rounded-xl overflow-hidden shadow-sm">
+                  <div className="bg-red-50 px-3 py-2 text-xs font-bold text-red-600 border-b border-red-100 uppercase tracking-wider">原始版本</div>
+                  <div className="p-4 flex-1 overflow-y-auto opacity-70 cursor-not-allowed custom-scrollbar"
+                    dangerouslySetInnerHTML={{ __html: leftDiffHtml }}></div>
+                </div>
+                {/* 右侧：AI 版本 + 新增高亮 */}
+                <div className="flex-1 flex flex-col bg-white border border-green-400 rounded-xl overflow-hidden shadow-md relative">
+                  <div className="bg-green-50 px-3 py-2 text-xs font-bold text-green-700 border-b border-green-200 uppercase tracking-wider flex justify-between">
+                    <span>AI 提议版本 (可直接编辑)</span>
+                    <span className="text-[10px] bg-green-200 px-1.5 py-0.5 rounded text-green-800">编辑态</span>
+                  </div>
+                  <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: rightDiffHtml }}
+                    style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
+                  ></div>
+                </div>
+              </div>
+            );
+          })()}
+          {/* ... 底部按钮 ... */}
+        </div>
+      )}
+```
+
+**注意**：使用 IIFE（立即执行函数）在 JSX 中计算 diff，避免在渲染外额外处理。
+
+## 修改 5：confirmAiInjection 清理 diff 高亮（约 line 981）
+
+在注入前去掉 diff 高亮 span：
+```tsx
+  const confirmAiInjection = (newHtml: string, regionId: string) => {
+    if (!editorRef.current) return;
+    // 去掉 diff 高亮 span，避免污染编辑器
+    const cleanHtml = newHtml.replace(/<span class="diff-(added|removed)"[^>]*>(.*?)<\/span>/gi, '$2');
+    const targetContent = editorRef.current.querySelector(`.ai-region[data-ai-id="${regionId}"] .ai-content`) as HTMLElement;
+    if (targetContent) {
+      targetContent.focus();
+      const sel = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(targetContent);
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+      document.execCommand('insertHTML', false, cleanHtml);
+      // ... 后续动画和保存逻辑不变
+```
--- a/工程分析/20260419_2159/测试方案.md
+++ b/工程分析/20260419_2159/测试方案.md
@@ -0,0 +1,49 @@
+# 测试方案
+
+## 测试环境
+- 浏览器访问 `http://localhost:4173/`
+- 进入「图文报告生成」→ 新建报告
+
+## 测试用例 1：微小指令也能弹窗
+
+**步骤**：
+1. 第一次发送修改指令，确认 diff 弹窗正常弹出
+2. 点击「确认并写入报告」
+3. 第二次发送非常简短的微调指令，如"把 5x3x2 改成 5x3x10"
+
+**预期结果**：
+- 第二次也应弹出 diff 弹窗
+- 如果未弹窗，聊天面板应显示【系统提示】AI 未能生成修改内容
+
+## 测试用例 2：diff 高亮显示
+
+**步骤**：
+1. 编辑器中 AI 可编辑区域写入一段内容
+2. 发送修改指令，让 AI 修改其中几个字词
+3. 观察 diff 弹窗
+
+**预期结果**：
+- 左侧「原始版本」中，被 AI 删除的字词显示红色背景 + 删除线
+- 右侧「AI 提议版本」中，AI 新增的字词显示绿色背景
+- 未变更的内容正常显示，无高亮
+
+## 测试用例 3：确认注入后无高亮残留
+
+**步骤**：
+1. 在 diff 弹窗中点击「确认并写入报告」
+2. 观察编辑器中 AI 区域的内容
+
+**预期结果**：
+- 编辑器中不应有红色/绿色的 diff 高亮 span
+- 文字格式正常（宋体 12pt）
+
+## 测试用例 4：编译与部署
+
+**步骤**：
+1. 执行 `npm run build`
+2. 确认无 TypeScript 编译错误
+3. 预览服务正常启动并返回 200
+
+**预期结果**：
+- `vite build` 成功完成
+- 预览页面可正常访问
--- a/工程分析/20260419_2159/需求分析.md
+++ b/工程分析/20260419_2159/需求分析.md
@@ -0,0 +1,35 @@
+# 需求分析
+
+## 时间戳
+2026-04-19 21:59
+
+## 需求来源
+用户反馈两个体验问题：
+1. 第二次输入需求时，没有弹出 AI 修改确认框
+2. AI 修改确认框的左侧和右侧希望增加文档对比（Diff）功能，高亮显示新增/删除的内容
+
+## 问题 1：第二次输入未弹框
+
+**现象**：第一次 AI 修改正常弹出 diff 弹窗，第二次输入微调指令（如"把 5x3x2 变成 5x3x10"）后没有弹窗。
+
+**根因分析**：
+1. 大模型在微小修改指令时可能"偷懒"，只返回 `reply` 而不返回 `updatedHtml`
+2. 当前逻辑 `if (responseJson.updatedHtml && aiModifyEnabled)` 会跳过弹窗
+3. 用户不知道发生了什么，没有反馈
+
+## 问题 2：缺少文档对比（Diff）
+
+**现象**：diff 弹窗左侧和右侧只是简单渲染两段 HTML，无法直观看到 AI 具体修改了哪些字词。
+
+**根因分析**：
+- 当前实现使用 `dangerouslySetInnerHTML` 直接渲染原始 HTML 和 AI HTML
+- 没有使用差异比对算法来标记变更
+
+## 解决方向
+1. **强化 systemPrompt**：明确要求"无论指令多小都必须返回 updatedHtml"
+2. **前端校验兜底**：如果修改模式下未返回 updatedHtml，在聊天面板给出明确提示
+3. **引入 diff 库**：使用 `diff` 库进行文本差异比对
+4. **左右两侧 diff 高亮**：
+   - 左侧（原始版本）：删除的内容标红（红色背景 + 删除线）
+   - 右侧（AI 版本）：新增的内容标绿（绿色背景）
+5. **注入前清理**：`confirmAiInjection` 注入前去掉 diff 高亮 span，避免污染编辑器
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -880,3 +880,37 @@ if (aiRegion && targetRegionEl) {
 **D. 后续如何避免问题**
 - 在 `contentEditable` 环境中修改内容时，**优先使用 `Range.selectNodeContents` + `execCommand('insertHTML')` 而非直接 `innerHTML` 赋值**，前者能让浏览器原生撤销/重做栈正常工作。
 - 当大模型返回的 HTML 缺少必要的内联样式时，应在**前端后处理阶段**统一注入样式，而不是依赖大模型生成完整的样式代码（大模型对样式生成的稳定性较差）。
+
+
+---
+
+## 记录 37：AI 二次修改未弹窗 + diff 弹窗增加文档对比高亮
+
+**A. 具体问题**
+1. 第一次 AI 修改正常弹出 diff 弹窗，第二次输入微调指令（如"把 5x3x2 变成 5x3x10"）后没有弹窗。
+2. diff 弹窗左侧和右侧只是简单渲染两段 HTML，无法直观看到 AI 具体修改了哪些字词。
+
+**B. 产生问题原因**
+1. **未弹窗**：大模型在微小修改指令时可能"偷懒"，只返回 `reply` 而不返回 `updatedHtml`。当前逻辑 `if (responseJson.updatedHtml && aiModifyEnabled)` 会跳过弹窗，用户没有任何反馈。
+2. **无对比**：没有使用差异比对算法来标记变更，用户只能通过肉眼对比左右两侧发现差异。
+
+**C. 解决问题方案**
+1. **强化 systemPrompt**：增加第 8 条：「⚠️ 绝对强制：无论用户的修改指令多么微小，你都必须返回 updatedHtml。绝对不允许只返回 reply 而不返回 updatedHtml！」
+2. **前端校验兜底**：在 `updatedHtml` 处理分支前增加：
+   ```ts
+   if (aiModifyEnabled && !responseJson.updatedHtml) {
+     setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: '【系统提示】AI 未能生成修改内容，请尝试重新描述您的需求。' }]);
+   }
+   ```
+3. **引入 diff 库**：`npm install diff`，使用 `diffChars` 进行字符级差异比对。
+4. **左右两侧 diff 高亮**：
+   - 左侧（原始版本）：删除的内容标红（`background-color:#fee2e2; color:#dc2626; text-decoration:line-through;`）
+   - 右侧（AI 版本）：新增的内容标绿（`background-color:#dcfce7; color:#16a34a;`）
+5. **注入前清理**：`confirmAiInjection` 中去掉 diff 高亮 span：
+   ```ts
+   const cleanHtml = newHtml.replace(/<span class="diff-(added|removed)"[^>]*>(.*?)<\/span>/gi, '$2');
+   ```
+
+**D. 后续如何避免问题**
+- 大模型对「必须返回某字段」的遵循度与 prompt 中该字段的强调程度正相关。对于关键输出字段，应在 systemPrompt 中使用「绝对强制」「绝对不允许」等最强措辞，并在前端增加缺失校验兜底。
+- 在 diff 对比场景中，**纯文本层面的差异比对**比 HTML 层面的比对更可靠。应先将 HTML strip 为纯文本，再做 diff，最后把结果渲染为 HTML。