mirror of
https://github.com/Gmaker689/ai-diff-preview.git
synced 2026-09-26 23:11:51 +08:00
refactor: 架构变更:Webview → VSCode 内置 Diff + 浮动标签
This commit is contained in:
@@ -1,74 +1,70 @@
|
||||
# AI Code Diff Preview
|
||||
|
||||
类 Cursor 的 AI 代码差异预览 VSCode 插件,支持 Accept/Reject 操作。
|
||||
类 Cursor 的 AI 代码差异预览 VSCode 插件,使用 **VSCode 内置 Diff 编辑器** + **浮动 Accept/Reject 标签**。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✅ **临时变更隔离** - AI 生成的代码不直接覆盖文件
|
||||
- ✅ **实时 Diff 预览** - 红绿高亮显示删除/新增内容
|
||||
- ✅ **逐行 Accept/Reject** - 支持单块、整块操作
|
||||
- ✅ **冲突检测** - 自动检测用户手动修改导致的冲突
|
||||
- ✅ **Claude Hooks 集成** - 自动触发 Diff 预览
|
||||
- ✅ **状态栏显示** - 实时显示变更状态
|
||||
- ✅ **VSCode 原生 Diff 编辑器** — 使用内置 `vscode.diff`,不自定义 Webview
|
||||
- ✅ **EditRecord 独立追踪** — 每次 Edit/Write 独立记录,不合并
|
||||
- ✅ **逐次编辑 Accept/Reject** — 细粒度控制每次 AI 修改
|
||||
- ✅ **QuickPick 文件列表** — 对话结束后弹出原生文件选择器
|
||||
- ✅ **快捷键导航** — `Alt+↑/↓` 跳转变更文件
|
||||
- ✅ **Bug 修复** — Accept 后再编辑不再丢失追踪
|
||||
- ✅ **冲突检测** — 自动检测用户手动修改导致的冲突
|
||||
|
||||
## 工作流程
|
||||
|
||||
```
|
||||
Claude Edit/Write → 收集到 ChangeSet (EditRecord 粒度)
|
||||
├── autoShowDiffPerEdit=true → 立即弹出 VSCode 内置 Diff
|
||||
└── autoShowDiffPerEdit=false → 静默收集,更新状态栏
|
||||
|
||||
Claude Stop → 变更集就绪
|
||||
├── showAllDiffsOnStop=true → QuickPick 文件列表 → 点击打开内置 Diff
|
||||
└── showAllDiffsOnStop=false → 仅通知,用户手动 Ctrl+Shift+D 查看
|
||||
```
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/your-username/ai-diff-preview.git
|
||||
|
||||
# 安装依赖
|
||||
cd ai-diff-preview
|
||||
npm install
|
||||
|
||||
# 编译
|
||||
npm run build
|
||||
|
||||
# 打包
|
||||
npm run package
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 配置 Claude Hooks
|
||||
### 快捷键
|
||||
|
||||
在 Claude 配置文件中添加 Hook:
|
||||
| 快捷键 | 条件 | 功能 |
|
||||
|--------|------|------|
|
||||
| `Alt+↓` | `aiDiffPreview.isActive` | 下一个变更文件 |
|
||||
| `Alt+↑` | `aiDiffPreview.isActive` | 上一个变更文件 |
|
||||
| `Tab` | `aiDiffPreview.isActive` | 接受当前编辑 |
|
||||
| `Esc` | `aiDiffPreview.isActive` | 拒绝所有变更 |
|
||||
| `Ctrl+Shift+A` | `aiDiffPreview.isActive` | Accept All |
|
||||
| `Ctrl+Shift+R` | `aiDiffPreview.isActive` | Reject All |
|
||||
| `Ctrl+Shift+D` | `aiDiffPreview.isActive` | 显示文件列表 |
|
||||
| `Ctrl+Shift+F` | `aiDiffPreview.isActive` | 查看当前文件 Diff |
|
||||
|
||||
```json
|
||||
{
|
||||
"hooks": {
|
||||
"after_code_edit": {
|
||||
"command": "code",
|
||||
"args": ["--command", "aiDiffPreview.handleHook"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
### 配置项
|
||||
|
||||
### 2. 快捷键
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
|--------|------|
|
||||
| `Tab` / `Enter` | 接受当前块 |
|
||||
| `Esc` | 拒绝所有变更 |
|
||||
| `Ctrl+Shift+A` | Accept All |
|
||||
| `Ctrl+Shift+R` | Reject All |
|
||||
|
||||
### 3. CodeLens 按钮
|
||||
|
||||
在代码上方会出现 Accept/Reject 按钮,点击即可操作。
|
||||
| 配置项 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| `aiDiffPreview.enableAutoTrigger` | boolean | true | 启用自动触发 |
|
||||
| `aiDiffPreview.autoShowDiffPerEdit` | boolean | false | 每次编辑自动弹 Diff |
|
||||
| `aiDiffPreview.showAllDiffsOnStop` | boolean | true | Stop 后弹文件列表 |
|
||||
| `aiDiffPreview.floatingLabelMode` | string | "statusBar" | 浮动标签位置 |
|
||||
| `aiDiffPreview.maxFileSize` | number | 100000 | 最大文件大小 |
|
||||
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# 监听模式
|
||||
npm run watch
|
||||
|
||||
# 运行测试
|
||||
npm run test
|
||||
|
||||
# 代码检查
|
||||
npm run lint
|
||||
npm run watch # 监听模式
|
||||
npm run test # 运行测试 (13 tests)
|
||||
npm run lint # 代码检查
|
||||
npm run package # 打包 vsix
|
||||
```
|
||||
|
||||
## 项目结构
|
||||
@@ -77,12 +73,14 @@ npm run lint
|
||||
src/
|
||||
├── extension.ts # 插件入口
|
||||
├── trigger/
|
||||
│ └── hookHandler.ts # Claude Hook 处理器
|
||||
│ └── hookHandler.ts # Hook 处理器 + QuickPick 文件列表
|
||||
├── snapshot/
|
||||
│ └── snapshotManager.ts # 快照管理器
|
||||
│ └── snapshotManager.ts # 变更集管理器 (ChangeSetManager)
|
||||
├── diff/
|
||||
│ └── diffEngine.ts # Diff 计算引擎
|
||||
├── render/
|
||||
│ ├── diffViewer.ts # ★ VSCode 内置 Diff 查看器
|
||||
│ ├── reviewPanel.ts # Webview 面板 (次要)
|
||||
│ ├── inlineDecorator.ts # 内联装饰器
|
||||
│ ├── codeLensProvider.ts # CodeLens 提供器
|
||||
│ └── statusBar.ts # 状态栏
|
||||
@@ -94,15 +92,6 @@ src/
|
||||
└── constants.ts # 常量定义
|
||||
```
|
||||
|
||||
## 配置项
|
||||
|
||||
| 配置项 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| `aiDiffPreview.enableAutoTrigger` | boolean | true | 启用自动触发 |
|
||||
| `aiDiffPreview.showInlineButtons` | boolean | true | 显示内联按钮 |
|
||||
| `aiDiffPreview.autoLint` | boolean | true | 自动运行 Lint |
|
||||
| `aiDiffPreview.maxFileSize` | number | 100000 | 最大文件大小 |
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user