dsh-diff-view: DeepSeek Harness 通用 Diff 查看器插件

前言

在 DeepSeek Harness (DSH) 插件生态中,客户端插件往往需要展示文本差异。手写 Diff 算法、处理行对齐和单词高亮不仅开发成本高,还容易引入错误。dsh-diff-view 提供了一个通用的 Diff 查看器组件,复用了 DSH 原生 Review 的样式和算法逻辑,供插件开发者直接调用。

这是什么

这是一个由 joao-paulo-santos 维护的 DSH 客户端插件。它不包含独立的访问 UI,而是作为一个服务注入到 DSH 客户端中,提供 Diff 视图渲染能力。

核心功能

该插件的核心能力集中在文本差异的计算与展示上:

  • Diff 组件复用:提供 diffFileComponent,支持从两个完整文本生成文件差异视图。
  • 算法支持:基于 LCS (Longest Common Subsequence) 算法进行行级比对。
  • 单词高亮:支持单词级别的差异标记。
  • 视图模式:支持 Split(左右分栏)和 Unified(统一视图)两种模式切换。
  • 行号处理:提供真实的行号,且在折叠上下文时保持行号准确性。
  • 语法高亮:复用平台的 useCodeHighlighter 和 languageForPath 原语,使 Diff 视图的配色与原生 Review 保持一致。
  • 样式独立:插件自带 ddv-* 样式表,用户无需手动管理 Diff 行的 CSS。

安装与启用

安装该插件需要你拥有一个 DSH 的 Checkout 代码仓库和一个激活的 Profile(例如 web)。

  1. 克隆插件仓库:
    mkdir -p ~/dsh-plugins && cd ~/dsh-plugins
    git clone https://github.com/joao-paulo-santos/dsh-diff-view.git
  1. 将插件添加到 DSH Profile:
    # 假设你的 harness checkout 在当前目录
    pnpm dsh plugin --profile web add ~/dsh-plugins/dsh-diff-view
  1. 验证配置是否生效:
    pnpm dsh --profile web --dump-config

安装完成后重启 Harness。插件会自动注入 diffView 服务。

典型用法

注入 diffView 服务后,可以通过以下方式使用:

1. 渲染文件差异组件

从两个完整的文本生成 Diff 组件。组件内部包含 Split/Unified 切换按钮。

// consumer client half, inject: ['diffView', …]

const Diff = ctx.diffView.diffFileComponent({
  path: 'src/a.ts',        // 可选,用于选择语法高亮规则
  before: oldText,         // 修改前的文本
  after: newText,          // 修改后的文本
  initialMode: 'split',    // 默认模式: 'split' (默认) | 'unified'
  showToggle: true,        // 显示 Split/Unified 切换胶囊
  wrap: false,             // true 表示长行换行,false 表示滚动
  wordHighlights: true,    // 启用单词级高亮
})

return React.createElement(Diff, {})

2. 使用 Hunks 数据

如果你需要更细粒度的控制,可以使用 hunksOf 方法获取差异块。

const hunks = ctx.diffView.hunksOf(oldText, newText)
// 返回格式: [{ oldStart, oldLines, newStart, newLines, lines: [' ctx', '-old', '+new'] }]

3. 使用底层渲染引擎

对于自定义布局,可以使用底层的行对齐和单词跨度计算引擎。

// 1. 获取对齐的编辑行
const rows = ctx.diffView.engine.alignedEditRowsOf(beforeLines, afterLines)
// rows: [{ kind: 'same'|'replace'|'delete'|'insert', removedLine?, addedLine? }]

// 2. 获取单词级别的差异标记
const spans = ctx.diffView.engine.wordSpansOfLinePair(beforeLine, afterLine)
// spans: { removedSpans, addedSpans }: arrays of { text, changed }

适用场景与注意

  • 无 UI 访问:该插件不提供独立页面,必须由宿主插件通过注入服务的方式调用。
  • 行号真实性:行号源自 Diff 计算结果,在上下文折叠之前,因此行号在不同视图模式下是准确的。
  • 语法高亮依赖:如果未提供 path 或平台未实现 languageForPath 原语,Diff 行将仅以纯文本渲染。
  • 样式管理:Diff 行的 CSS 由插件的 ddv-* 类名管理,宿主无需编写 Diff 相关的 CSS。
  • 无持久化:该插件不处理数据持久化,也不与 Approval 流程强耦合。

结尾

dsh-diff-view 是一个轻量级、无依赖的 DSH 插件,专注于提供核心的 Diff 视图能力。无论是构建 Approval 工具、Scratchpad 还是代码审查插件,都可以直接复用其组件和引擎。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜