Stats

React 物品属性对比组件：显示每项属性的数值及其与当前装备的差值，更优为强调色，更差为红色。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/stats

示例

拾取的装备与当前装备对比

Epic

Night rig

Compared with your Courier rig

Capacity: 8; 2 more than now, better
Speed: 14 km/h; same as now
Shield: 3; 1 less than now, worse
Weight: 5 kg; 2 kg less than now, better
Noise: 22 dB; 4 dB more than now, worse

stats-compare.tsx

import { Badge } from "@/components/zero/badge";import { Stat, Stats } from "@/components/zero/stats";export default function StatsCompare() {  return (    <div className="grid w-full max-w-sm gap-4 border-(length:--zero-stroke) border-zero-ink bg-zero-surface p-5">      <div className="grid gap-1.5">        <Badge rarity="epic" className="w-fit">          Epic        </Badge>        <p className="font-black font-zero text-zero-lg italic">Night rig</p>        <p className="font-medium font-zero-text text-zero-sm text-zero-text-3">          Compared with your Courier rig        </p>      </div>      <Stats>        <Stat label="Capacity" value={8} compare={6} />        <Stat label="Speed" value={14} compare={14} unit=" km/h" />        <Stat label="Shield" value={3} compare={4} />        <Stat label="Weight" value={5} compare={7} better="lower" unit=" kg" />        <Stat label="Noise" value={22} compare={18} better="lower" unit=" dB" />      </Stats>    </div>  );}

行为

每项属性一行：左侧为斜体的属性名，其后是数值；设置 compare 时再显示差值，更优时为强调色并带向上箭头，更差时为红色并带向下箭头。哪个方向更优由 better 决定：例如容量越大越好，重量越轻越好。

组件是一个描述列表；差值也会以文字读出（「2 kg less than now, better」）。置于 Hover card中，即可在悬停时对比战利品。

属性

Stat

属性	类型	默认值	说明
label	string	—	属性名。
value	number	—	该物品的数值。
compare	number	—	当前装备的数值；设置后显示差值。
better	"higher" \| "lower"	"higher"	哪个方向更优。
unit	string	""	附在每个数字后的单位。
format	(n: number) => string	en-US	数字格式。
labels	Partial<StatLabels>	statLabels	换成其他语言的差值说明：same，以及 diff(amount, more, better)。