Mdeical_Sur_Report/工程分析/20260419_2159/实现方案.md

# 实现方案

## 修改文件
- `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);
      // ... 后续动画和保存逻辑不变
```