上下文窗口 <ContextWindow />

一条很长的容量条加刻度，几段长度从左边起逐步填进来（例如训练长度、最大输出、窗口上限），下方每段一个大数字和说明。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: AI · 容量与长度标记
Component: ContextWindow · #context-window
Interaction: 每按一次 → 填入一段长度

Good for

介绍上下文长度、最大输出、训练长度这些“从 0 起算”的长度
比较几种长度相差多少倍

Avoid when

长度之间是并列而不是包含关系：用 BarChart
超过 4 段

Content limits

1	spans 1–4 段，label ≤ 8 个字符，note ≤ 20 字
2	ticks 3–6 个，label ≤ 6 个字符
3	totalLabel ≤ 8 个字符

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`total` · required	`number`	窗口容量（与 spans 同单位）
`totalLabel` · required	`string`	容量的大字标注
`ticks` · required	`{ value, label }[]`	刻度
`spans` · required	`{ value, label, note }[]`	从 0 起的长度段，每段一个 build 步骤

Example

<ContextWindow kicker="上下文" title="1M 窗口" total={1000} totalLabel="1M tokens" ticks={[{ value: 0, label: '0' }, { value: 1000, label: '1M' }]} spans={[{ value: 384, label: '384K', note: '单次最大输出' }]} />