TokenBadge Token 标签

用于显示 AI 模型 token 消耗量的小型标签组件。

基础用法

通过 used 和 total 显示 token 使用量，status 控制颜色状态。

Tokens1.2K/ 4.0KTokens3.5K/ 4.0KTokens4.2K/ 4.0K

<script setup>
import TokenBadge from '@/vue/components/TokenBadge.vue'
</script>
<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TokenBadge :used="1200" :total="4000" />
    <TokenBadge :used="3500" :total="4000" status="warning" />
    <TokenBadge :used="4200" :total="4000" status="danger" />
  </div>
</template>

大数字格式化

自动格式化大数字（K/M），可自定义前缀。

Tokens500字符1.5M/ 2.0M

<script setup>
import TokenBadge from '@/vue/components/TokenBadge.vue'
</script>
<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TokenBadge :used="500" />
    <TokenBadge :used="1500000" :total="2000000" prefix="字符" />
  </div>
</template>

React 用法

import { TokenBadge } from '@bobocn/element/react'
import '@bobocn/element/style.css'

function App() {
  return (
    <div>
      <TokenBadge used={1200} total={4000} />
      <TokenBadge used={3500} total={4000} status="warning" />
      <TokenBadge used={4200} total={4000} status="danger" />
    </div>
  )
}

API

属性 (Attributes)

属性名	说明	类型	默认值
used	已用 token 数	number	0
total	总限额	number	—
status	状态颜色	'normal' | 'warning' | 'danger'	'normal'
autoStatus	根据 used / total 自动推导状态	boolean	false
warningThreshold	自动 warning 阈值	number	0.8
dangerThreshold	自动 danger 阈值	number	1
prefix	前缀文案	string	'Tokens'