mcpField
D
diff-viewer

diff-viewer

github.com/chann开发044 次安装4 周前更新
代码仓库

关于 diff-viewer

diff-viewer 将当前 Git 工作树差异生成 HTML 报告，供开发者查看更改并添加评审评论。它只展示差异，不执行代码评审或生成发现项。

主要功能

  1. 01根据 git diff HEAD 生成 HTML 报告
  2. 02统一和分栏差异视图
  3. 03单词级更改高亮
  4. 04为行范围添加评审评论
  5. 05将评论导出为 Markdown

适用场景

  1. 01在浏览器中检查暂存和未暂存更改
  2. 02针对一段更改行添加评论
  3. 03将评审讨论导出为 Markdown

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/chann/skills --skill diff-viewer

安装后在 Claude Code 中输入/diff-viewer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
diff-template.html
evals/
evals.json
scripts/
generate_diff_report.py

详细介绍

Diff Viewer

概述

将当前工作树差异渲染为 HTML 报告。此工具仅用于查看：不会执行代码审查，也不会生成审查发现。

工作流

  1. 使用随附脚本捕获当前差异：

    python3 <skill-path>/scripts/generate_diff_report.py

  2. 除非提供 -o，否则脚本会写入 .diffs/<YYYY-MM-DD>_<working|clean|short-sha>.html。

  3. 在浏览器中打开生成的 HTML 文件。

  4. 报告文件数量、新增／删除行数和输出路径。

  5. 如果脚本打印 Suggestion: add .diffs/ to .gitignore，请转达该建议。不要自动编辑 .gitignore。

选项

python3 <skill-path>/scripts/generate_diff_report.py \
  --view unified \
  --theme auto \
  --language auto \
  --code-scheme github \
  -o .diffs/my-diff.html

有效的 --view 值为 unified 和 split。有效的 --theme 值为 auto、light 和 dark。有效的 --language 值为 auto、en 和 ko；auto 会遵循浏览器设置。有效的 --code-scheme 值为 github、atom-one、monokai、dracula、nord、tokyo-night、solarized、gruvbox——每种配色方案都提供浅色和深色变体，并会自动遵循页面主题，同时控制语法标记颜色和代码区域背景。之后可通过浏览器控件更改这些设置，选择会保存在 localStorage 中。

浏览器功能

  • 右上角控件中的 韩语／英语切换会切换所有标签、文件状态、摘要说明、评论控件和导出的 Markdown 标题。差异内容是代码，不会翻译。选择会保存在 localStorage 中。
  • 行内词语差异高亮会在统一视图和拆分视图中标记修改行内变更的词语。
  • 拖动行号可选择一段范围，然后添加一条涵盖这些行的审查评论。
  • 审查评论仅适用于生成的 HTML 报告，因此为同一代码库生成新报告时，不应重新显示旧报告中的评论。
  • 右上角控件中的 清除评论会删除当前报告的评论；侧边栏的评论列表可跳转回各条评论，以便单独编辑或删除。
  • 侧边栏可通过 < 按钮折叠，通过悬浮菜单图标展开，也可拖动右边缘调整大小。拖动到低于阈值时会自动折叠。宽度和状态会保存在 localStorage 中。
  • 侧边栏底部的 复制 Markdown会将当前审查讨论串复制为 Markdown 报告。

范围限制

  • 使用 git diff HEAD，因此会同时显示已暂存和未暂存的更改。
  • 仅生成 HTML，不生成 Markdown 报告，也不进行分析。
  • 如需实际的代码审查发现，请使用 code-review 或 code-review-md。

评论

支持 Markdown