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

- 引入diff库,实现字符级差异比对
- diffModal左右两侧增加diff高亮:左侧删除内容标红,右侧新增内容标绿
- systemPrompt增加绝对强制条款:无论指令多小都必须返回updatedHtml
- 前端校验兜底:修改模式下未返回updatedHtml时在聊天面板给出提示
- confirmAiInjection注入前清理diff高亮span,避免污染编辑器
This commit is contained in:
2026-04-19 22:08:05 +08:00
parent 7275906f3c
commit 1ec25065ad
7 changed files with 312 additions and 20 deletions

View File

@@ -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避免污染编辑器