← 全部模板

Token 价格表 <TokenPriceGrid />

行是 token 类型（缓存命中、未命中、输出），列是档位或模型；每格一个价格和一条按对数刻度的条，相差百倍也看得清。重点列着色。

在示例演示里查看 →

分组: AI · 按 token 计价
组件: TokenPriceGrid · #token-price-grid
交互: 每按一次 → 出现一行价格

适合

API 价格：输入 / 输出、缓存、高峰闲时
价格之间相差一到两个数量级

不适合

只有一两个价格：用 BigStat 或 PricingTiers
要按线性比例比较：用 BarChart（这里的条是对数刻度）

内容上限

1	columns 2–4 列，每列 ≤ 10 个字符
2	rows 2–4 行：label ≤ 10 字，note ≤ 10 字
3	价格 ≤ 6 个字符（含小数点）
4	unit ≤ 16 个字符

字段

字段	类型
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`columns` · 必填	`string[]`	档位或模型
`focus`	`number`	重点列序号
`rows` · 必填	`{ label, note?, values: number[] }[]`	每行一种 token，每行一个 build 步骤
`currency`	`string`	货币符号，默认 $
`unit` · 必填	`string`	计价单位

示例代码

<TokenPriceGrid kicker="价格" title="单价" columns={['闲时', '高峰']} focus={0} unit="美元 / 百万 tokens" rows={[{ label: '输出', values: [0.6, 1.2] }]} />