feat:代码变更diff可视化功能实现
This commit is contained in:
45
docs/code-changes-feature.md
Normal file
45
docs/code-changes-feature.md
Normal file
@ -0,0 +1,45 @@
|
||||
# 代码变更审查功能
|
||||
|
||||
## 功能概述
|
||||
|
||||
AI 修改文件后,会在输入框上方显示"代码变更"面板,用户可以查看所有修改并选择采纳或拒绝。
|
||||
|
||||
## 核心文件
|
||||
|
||||
### 1. 数据结构
|
||||
- `src/types/fileChanges.ts` - 变更数据类型定义
|
||||
|
||||
### 2. 服务层
|
||||
- `src/services/changeTracker.ts` - 变更追踪服务(单例)
|
||||
- `trackChange()` - 记录文件变更
|
||||
- `acceptChange()` - 采纳变更(保存文件)
|
||||
- `rejectChange()` - 拒绝变更(恢复旧内容)
|
||||
|
||||
### 3. UI 组件
|
||||
- `src/views/changePanel.ts` - 变更面板 UI
|
||||
- `src/utils/diffRenderer.ts` - Diff 可视化渲染
|
||||
|
||||
### 4. 集成点
|
||||
- `src/utils/messageHandler.ts` - 消息处理
|
||||
- `trackFileChange()` - 记录变更
|
||||
- `handleAcceptChange()` - 处理采纳
|
||||
- `handleRejectChange()` - 处理拒绝
|
||||
- `sendChangesToWebview()` - 发送变更到前端
|
||||
|
||||
- `src/services/toolExecutor.ts` - 工具执行器
|
||||
- 在 `executeFileWrite()` 中记录变更
|
||||
|
||||
## 使用流程
|
||||
|
||||
1. **开始对话** - 调用 `startChangeSession(sessionId)`
|
||||
2. **修改文件** - 自动调用 `trackFileChange()`
|
||||
3. **对话结束** - 调用 `sendChangesToWebview()` 显示变更面板
|
||||
4. **用户操作** - 点击采纳/拒绝按钮
|
||||
5. **处理结果** - 保存或恢复文件内容
|
||||
|
||||
## 待完成工作
|
||||
|
||||
1. 在 ICHelperPanel 中集成消息处理(监听 acceptChange/rejectChange 命令)
|
||||
2. 在对话结束时调用 `sendChangesToWebview()`
|
||||
3. 在 Webview 中实现变更列表的动态渲染
|
||||
4. 处理前端的采纳/拒绝响应
|
||||
50
docs/integration-guide.md
Normal file
50
docs/integration-guide.md
Normal file
@ -0,0 +1,50 @@
|
||||
# 代码变更审查功能 - 使用说明
|
||||
|
||||
## 功能说明
|
||||
|
||||
AI 修改文件后,会在输入框上方显示"代码变更"面板,用户可以:
|
||||
- 查看所有修改的文件列表
|
||||
- 点击文件查看 diff 对比
|
||||
- 采纳变更(保存文件)
|
||||
- 拒绝变更(恢复旧内容)
|
||||
|
||||
## 已完成的集成
|
||||
|
||||
### 1. 后端集成
|
||||
- ✅ 在 `ICHelperPanel.ts` 中添加了消息监听(acceptChange/rejectChange)
|
||||
- ✅ 在发送消息时启动变更追踪会话
|
||||
- ✅ 在文件操作时自动记录变更(messageHandler.ts、toolExecutor.ts)
|
||||
|
||||
### 2. 前端集成
|
||||
- ✅ 在 `webviewContent.ts` 中添加了消息处理(showChanges/changeAccepted/changeRejected)
|
||||
- ✅ 在 `changePanel.ts` 中实现了完整的 UI 交互逻辑
|
||||
|
||||
### 3. 核心功能
|
||||
- ✅ 变更追踪服务(changeTracker.ts)
|
||||
- ✅ Diff 可视化渲染(diffRenderer.ts)
|
||||
- ✅ 采纳/拒绝变更逻辑
|
||||
|
||||
## 待完成工作
|
||||
|
||||
需要在对话结束时调用 `sendChangesToWebview(panel)` 来显示变更面板。
|
||||
|
||||
建议在以下位置添加:
|
||||
1. 在 `handleUserMessage` 函数中,对话流结束时
|
||||
2. 或在 `dialogManager` 的对话完成回调中
|
||||
|
||||
示例代码:
|
||||
```typescript
|
||||
// 对话结束时
|
||||
import { sendChangesToWebview } from '../utils/messageHandler';
|
||||
|
||||
// 在对话完成的地方调用
|
||||
sendChangesToWebview(panel);
|
||||
```
|
||||
|
||||
## 测试步骤
|
||||
|
||||
1. 启动插件(F5)
|
||||
2. 发送消息让 AI 修改文件
|
||||
3. 对话结束后,输入框上方应显示"代码变更"面板
|
||||
4. 点击文件查看 diff
|
||||
5. 点击"采纳"或"拒绝"按钮测试功能
|
||||
Reference in New Issue
Block a user