Context Indicator
以环形进度显示对话上下文用量的紧凑指示器。
Context Indicator
基础用法
Context Indicator
示例加载中...
交互契约
- 占比为
usedTokens / maxTokens，并被夹在0~1之间：超发不会画出超过整圈的弧。 maxTokens小于等于0时占比按0处理，不会抛错也不会出现除零。- 配色分三档，由占比决定，写在
data-level上：ok（≤ 80%）、warning（> 80%）、danger（> 95%）。可据此在外部做样式覆盖。 - 默认文案用紧凑记数：≥ 100 万显示
1.2M，≥ 1000 显示12.3K，否则取整。传入formatter可完全接管这段文字。 title恒为「文字 (百分比)」，即使自定义了formatter，悬停仍能看到百分比。- 语义为
role="meter"，并同步aria-valuemin/aria-valuemax/aria-valuenow；SVG 标记aria-hidden，可访问名称由label提供。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
usedTokens | number | — | 已使用的 token 数。必填。 |
maxTokens | number | — | 上下文窗口上限。必填；≤ 0 时占比按 0 处理。 |
label | string | 'Context usage' | 可访问名称，写入 aria-label。 |
formatter | (used: number, max: number) => string | — | 自定义环旁文字；未设时回退到内置紧凑记数。 |
Events
TxContextIndicator 不派发组件事件。
Slots
| 插槽名 | 作用域参数 | 说明 |
|---|---|---|
detail | { ratio: number, used: number, max: number } | 追加在文字之后，用于放百分比、剩余量或「清空上下文」入口。 |
最佳实践
maxTokens用模型的真实窗口值，不要写死常量——换模型时指示器才不会说谎。- 需要本地化数字格式时用
formatter，不要在外部再套一层文字，否则title里的百分比会与显示值脱节。 - 只在接近上限时才提示用户（
warning档起），常态下这是一个背景信息，不该抢注意力。 - 若把它放进按钮或可点击区域，请在外层补充可访问名称：
role="meter"不会传达可点击语义。