yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

token用量添加计费单位

Browse Source
This commit is contained in:
hrx 2026-06-22 13:49:01 +08:00
parent 6427605400
commit 80c131445f
1 changed files with 51 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
f/web-kboss/src/views/tokenUsage/index.vue
View File

@ -24,7 +24,10 @@
<span>{{ item.label }}</span>
<i :class="item.icon"></i>
</div>
<strong>{{ item.value }}</strong>
<strong>
{{ item.value }}
<span v-if="item.unit" class="stat-unit">{{ item.unit }}</span>
</strong>
<em>{{ item.desc }}</em>
</div>
</div>
@ -35,7 +38,10 @@
<h3>Token 使用概览</h3>
<span>{{ rangeLabel }}</span>
</div>
<div class="token-total">{{ formatNumber(summary.total_tokens) }}</div>
<div class="token-total">
{{ formatNumber(summary.total_tokens) }}
<span>Token</span>
</div>
<p>总 Token 消耗</p>
<div ref="tokenRatioChart" class="chart-box token-ratio-chart"></div>
</div>
@ -85,11 +91,17 @@
<el-table v-loading="loading" :data="usageList" class="usage-table" style="width: 100%">
<el-table-column prop="model" label="模型名称" min-width="180" show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="request_count" label="调用次数" width="120"></el-table-column> -->
<el-table-column prop="prompt_tokens" label="输入Token" min-width="140"></el-table-column>
<el-table-column prop="completion_tokens" label="输出Token" min-width="140"></el-table-column>
<el-table-column prop="total_tokens" label="总Token" min-width="140"></el-table-column>
<el-table-column prop="amount" label="费用" width="130">
<template slot-scope="scope">¥ {{ formatAmount(scope.row.amount) }}</template>
<el-table-column prop="prompt_tokens" label="输入Token（Token）" min-width="150">
<template slot-scope="scope">{{ formatNumber(scope.row.prompt_tokens) }} Token</template>
</el-table-column>
<el-table-column prop="completion_tokens" label="输出Token（Token）" min-width="150">
<template slot-scope="scope">{{ formatNumber(scope.row.completion_tokens) }} Token</template>
</el-table-column>
<el-table-column prop="total_tokens" label="总Token（Token）" min-width="150">
<template slot-scope="scope">{{ formatNumber(scope.row.total_tokens) }} Token</template>
</el-table-column>
<el-table-column prop="amount" label="费用（元）" width="140">
<template slot-scope="scope">¥ {{ formatAmount(scope.row.amount) }} 元</template>
</el-table-column>
<el-table-column prop="usage_time" label="使用时间" min-width="170" show-overflow-tooltip></el-table-column>
</el-table>
@ -129,10 +141,10 @@ export default {
amount: 0
},
statCards: [
{ label: '总消耗 Token', value: '0', desc: '当前筛选范围', type: 'primary', icon: 'el-icon-coin' },
{ label: '调用次数', value: '0', desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
{ label: ' 费用', value: '¥ 0.00', desc: '按当前单价估算', type: 'warning', icon: 'el-icon-wallet' },
{ label: '输入/输出 Token', value: '0 / 0', desc: 'Prompt / Completion', type: 'purple', icon: 'el-icon-pie-chart' }
{ label: '总消耗 Token', value: '0', unit: 'Token', desc: '当前筛选范围', type: 'primary', icon: 'el-icon-coin' },
{ label: '调用次数', value: '0', unit: '次', desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
{ label: '预估费用', value: '¥ 0.00', unit: '元', desc: '按当前单价估算', type: 'warning', icon: 'el-icon-wallet' },
{ label: '输入/输出 Token', value: '0 / 0', unit: 'Token', desc: 'Prompt / Completion', type: 'purple', icon: 'el-icon-pie-chart' }
],
usageList: [],
total: 0,
@ -259,10 +271,10 @@ export default {
},
updateStatCards() {
this.statCards = [
{ label: '总消耗 Token', value: this.formatNumber(this.summary.total_tokens), desc: '当前筛选范围', type: 'primary', icon: 'el-icon-coin' },
{ label: '调用次数', value: this.formatNumber(this.summary.request_count), desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
{ label: '预估费用', value: `¥ ${this.formatAmount(this.summary.amount)}`, desc: '按当前单价估算', type: 'warning', icon: 'el-icon-wallet' },
{ label: '输入/输出 Token', value: `${this.formatNumber(this.summary.prompt_tokens)} / ${this.formatNumber(this.summary.completion_tokens)}`, desc: 'Prompt / Completion', type: 'purple', icon: 'el-icon-pie-chart' }
{ label: '总消耗 Token', value: this.formatNumber(this.summary.total_tokens), unit: 'Token', desc: '当前筛选范围', type: 'primary', icon: 'el-icon-coin' },
{ label: '调用次数', value: this.formatNumber(this.summary.request_count), unit: '次', desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
{ label: '预估费用', value: `¥ ${this.formatAmount(this.summary.amount)}`, unit: '元', desc: '按当前单价估算', type: 'warning', icon: 'el-icon-wallet' },
{ label: '输入/输出 Token', value: `${this.formatNumber(this.summary.prompt_tokens)} / ${this.formatNumber(this.summary.completion_tokens)}`, unit: 'Token', desc: 'Prompt / Completion', type: 'purple', icon: 'el-icon-pie-chart' }
]
},
formatNumber(value) {
@ -368,8 +380,16 @@ export default {
},
xAxis: {
type: 'value',
name: 'Token',
nameTextStyle: {
color: '#909399',
padding: [0, 0, 0, 8]
},
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
formatter: value => this.formatNumber(value)
},
splitLine: {
lineStyle: {
color: '#edf1f7'
@ -406,7 +426,7 @@ export default {
position: 'right',
color: '#344054',
fontSize: 11,
formatter: params => this.formatNumber(params.value)
formatter: params => `${this.formatNumber(params.value)} Token`
}
}
]
@ -573,6 +593,14 @@ export default {
font-size: 26px;
}
.stat-unit {
display: inline;
margin-left: 6px;
color: #667085;
font-size: 13px;
font-weight: 500;
}
&:before {
position: absolute;
top: 0;
@ -659,6 +687,13 @@ export default {
font-size: 34px;
font-weight: 700;
line-height: 1.2;
span {
margin-left: 8px;
color: #667085;
font-size: 14px;
font-weight: 500;
}
}
.token-ratio-card {