代码差异对比

DriFox 内置的可视化代码差异对比工具，让 AI 助手的每次修改都清晰可见、可追溯、可控制。

功能定位

模式	单栏模式	双栏模式（v0.3.4+）
视图布局	统一视图，上下文连续展示	Split View，左旧右新对照阅读
适用场景	快速浏览全局变更	精确审查逐行修改
高亮粒度	行级增减标记	单词级精确高亮（新增特性）
语法着色	基础高亮	完整语法高亮 + 行号

核心特性

文件树导航 — 侧边栏显示所有已修改文件及其增减行数统计
差异高亮 — 新增内容绿色（+）标识，删除内容红色（-）标识
双栏对照 — 左栏原始版本，右栏修改版本，逐行对应
单词级高亮 — 双栏模式下精确标记单词级别的变更
语法高亮 — 代码着色与 IDE 保持一致
多文件对比 — 支持同时查看多个文件的修改
统计摘要 — 显示总体代码行数增减统计

架构设计

DiffViewer 是 DriFox UI 层的核心组件，负责将 Git diff 格式转换为可视化 HTML。

┌─────────────────────────────────────────────────────────────────┐
│                    Diff 生成链路架构                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   AI 响应                                                         │
│      │                                                            │
│      ▼                                                            │
│   ┌──────────────────┐                                          │
│   │ ToolExecutor     │  ── 执行文件修改工具                      │
│   └────────┬─────────┘                                          │
│            │                                                     │
│            ▼                                                     │
│   ┌──────────────────┐                                          │
│   │ diff_viewer      │  ── Git 风格差异生成器                    │
│   │ (渲染层)         │     单栏/双栏模式切换                     │
│   └────────┬─────────┘     单词级高亮计算                        │
│            │                                                     │
│            ▼                                                     │
│   ┌──────────────────┐                                          │
│   │ DiffViewer       │  ── UI 层组件                            │
│   │ (UI 层)          │     文件列表 + 差异视图                  │
│   └────────┬─────────┘     语法高亮渲染                         │
│            │                                                     │
│            ▼                                                     │
│   ┌──────────────────┐                                          │
│   │ HTML/CSS        │  ── 最终呈现                              │
│   └──────────────────┘     浏览器渲染                          │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

渲染层组件

diff_viewer 模块负责将原始 diff 数据转换为 HTML：

单栏模式 — 统一视图，上下文连续展示，增减行混合显示
双栏模式 — Split View，左右对照，左旧右新，逐行对齐
单词级高亮 — 基于字符级别 diff 算法，精确标记变更单词
语法着色 — 调用 Pygments 或 QScintilla 进行代码高亮

端到端流程

AI 改代码

用户请求 AI 修改代码，AI 调用文件编辑工具：

# AI 生成的工具调用
edit_file(
    path="src/utils.py",
    original="def calculate(x, y):",
    replacement="def calculate(x, y, mode='default'):"
)

Diff 生成

ToolExecutor 执行修改后，diff_viewer 模块自动生成差异数据：

--- a/src/utils.py
+++ b/src/utils.py
@@ -1,3 +1,3 @@
-def calculate(x, y):
+def calculate(x, y, mode='default'):
     return x + y
+    if mode == 'fast':
+        return x * y
+    return x + y

可视化渲染

DiffViewer 将差异数据渲染为 HTML：
- 单栏模式：连续展示变更上下文
- 双栏模式：左侧旧版本，右侧新版本，单词级高亮标记
审查与交互
- 用户逐文件查看变更
- 增减行数统计
- 可选择接受部分修改
应用变更

确认无误后，点击应用将修改写入磁盘

使用方式

DriFox 会话中，AI 执行文件修改后自动弹出差异对比窗口。

快捷操作：

侧边栏点击文件快速跳转
双栏模式下滚动同步
单词级高亮直观定位修改点

设计哲学

透明可控 — AI 的每次修改都必须可见，用户始终掌握最终决策权
渐进式复杂度 — 从单栏快速浏览到双栏精确审查，满足不同场景需求
一致性体验 — diff 风格与 Git/GitHub 保持一致，降低学习成本
精确高亮 — 单词级高亮让变更粒度细化到字符，减少遗漏关键修改的可能

Git Worktree 并行开发

上下文压缩