DiffStat
diff-stat改动统计条 · +N −M 绿红格子条按比例填充(纯函数 splitBlocks 可测) + A/M/D/R 状态徽标 · 代码审查/PR 列表刚需·零依赖·RSC
用法
基础用法
+N −M 数字 + 按增删比例填充的绿红格子条，PR 列表/代码审查刚需。
+24−6
tsx
<DiffStat additions={24} deletions={6} />状态徽标
status 渲染 新增/修改/删除/重命名 徽标（renamed 借 primary 蓝区别 modified）。
新增+142−0修改+24−6删除+0−88重命名+3−3
tsx
<>
<DiffStat additions={142} deletions={0} status="added" />
<DiffStat additions={24} deletions={6} status="modified" />
<DiffStat additions={0} deletions={88} status="deleted" />
<DiffStat additions={3} deletions={3} status="renamed" />
</>仅格子条
showCounts={false} 隐藏数字，只留紧凑的绿红格子条。
tsx
<DiffStat additions={7} deletions={2} showCounts={false} />尺寸
size="sm" 缩小格子，行内随文跟随。
+10−4+10−4
tsx
<>
<DiffStat additions={10} deletions={4} size="sm" />
<DiffStat additions={10} deletions={4} size="md" />
</>何时用
PR/提交列表里展示单文件改动量：+N −M 数字 + 绿红比例格子条 + 改动状态徽标。本组件是 git diff 统计的微件（零依赖、可 RSC）；要趋势折线用 Sparkline，要文件改动状态角标的层级树用 FileTree。
导入
ts
import { DiffStat, splitBlocks } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| additions* | number | — | 新增行数 |
| deletions* | number | — | 删除行数 |
| status | "added" | "modified" | "deleted" | "renamed" | — | 文件状态徽标（可选） |
| blocks | number | 5 | 绿红格子条总格数 |
| showCounts | boolean | true | 是否显示 +N −M 数字 |
| size | "sm" | "md" | "md" | 尺寸 |
| className | string | — | 自定义类 |
禁忌 / 坑
暂无已知坑。格子条按 additions:deletions 比例填充 blocks 格（纯函数 splitBlocks），二者全 0 时为空条。
相关
Sparkline · ImageViewer · LiveProductCard · ScoreRing · Badge · Dot
Playground
修改+24−6
<DiffStat additions={24} deletions={6} status="modified" blocks={5} />