CodeDiff
code-diff代码对比 · 零依赖行级 LCS diff(纯函数 diffLines 可测) + unified 单栏/split 双栏 + 增绿删红行底色 + 双行号槽 + filename 头条与 +/− 摘要 · agent 改动/PR 评审
用法
基础用法（unified 单栏）
传入 oldText / newText，自动逐行 diff，新增绿 / 删除红。
greet.ts+3−3
1-export function greet(name) {
2- const msg = "hi " + name;
3- console.log(msg);
1+export function greet(name, lang = "en") {
2+ const prefix = lang === "zh" ? "你好 " : "hi ";
3+ const msg = prefix + name;
44 return msg;
55 }
tsx
<CodeDiff filename="greet.ts" oldText={oldText} newText={newText} />双栏对照（split）
mode="split" 左旧右新并排展示，便于大段改动对照。
greet.ts+3−3
1-export function greet(name) {
2- const msg = "hi " + name;
3- console.log(msg);
1+export function greet(name, lang = "en") {
2+ const prefix = lang === "zh" ? "你好 " : "hi ";
3+ const msg = prefix + name;
4 return msg;
4 return msg;
5 }
5 }
tsx
<CodeDiff mode="split" filename="greet.ts" oldText={oldText} newText={newText} />纯新增（新建文件）
oldText 为空串时，每行都判为新增。
hello.txt+3−0
1+line 1
2+line 2
3+line 3
tsx
<CodeDiff filename="hello.txt" oldText="" newText={"line 1\nline 2\nline 3"} />隐藏行号
showLineNumbers={false} 去掉两侧行号槽，节省横向空间。
greet.ts+3−3
-export function greet(name) {
- const msg = "hi " + name;
- console.log(msg);
+export function greet(name, lang = "en") {
+ const prefix = lang === "zh" ? "你好 " : "hi ";
+ const msg = prefix + name;
return msg;
}
tsx
<CodeDiff filename="greet.ts" oldText={oldText} newText={newText} showLineNumbers={false} />何时用
展示两段文本的行级差异（PR 评审、agent 改动回放、配置变更对比），增绿删红、双行号、可挂行级批注。只展示静态代码用 CodeBlock；单行命令用 Snippet。diffLines/diffStat 是纯函数，可单独用于自定义渲染或统计。
导入
ts
import { CodeDiff, diffLines, diffStat } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| oldText* | string | — | 旧文本 |
| newText* | string | — | 新文本 |
| mode | "unified" ｜ "split" | "unified" | unified 单栏 / split 双栏对照 |
| filename | string | — | 头部文件名条；省略则不渲染头部 |
| showLineNumbers | boolean | true | 显示行号槽 |
| annotations | CodeDiffAnnotation[] | — | 行锚定批注：在匹配行渲染 gutter 标记 + 行下方插入整宽 content 槽（仅 unified 模式插 content） |
| className | string | — | 容器类名 |
CodeDiffAnnotation：{ side?: "old"｜"new"（默认 "new"）; line: number（1-based）; gutter?: ReactNode; content?: ReactNode }。
禁忌 / 坑
annotations的content槽仅在 unified 模式插入；split 模式只渲染 gutter 标记。需要在差异行下方挂 CodeReviewThread 等内容时用mode="unified"。annotations[].line是 1-based 行号，按side对应旧文件或新文件，别和数组下标混淆。
相关
Playground
greet.ts+3−3
1-export function greet(name) {
2- const msg = "hi " + name;
3- console.log(msg);
1+export function greet(name, lang = "en") {
2+ const prefix = lang === "zh" ? "你好 " : "hi ";
3+ const msg = prefix + name;
44 return msg;
55 }
<CodeDiff filename="greet.ts" oldText={old} newText={next} />