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] }]} />