diff --git a/f/web-kboss/src/views/tokenUsage/index.vue b/f/web-kboss/src/views/tokenUsage/index.vue index cf8efa7..ba9bc44 100644 --- a/f/web-kboss/src/views/tokenUsage/index.vue +++ b/f/web-kboss/src/views/tokenUsage/index.vue @@ -24,7 +24,10 @@ {{ item.label }} - {{ item.value }} + + {{ item.value }} + {{ item.unit }} + {{ item.desc }} @@ -35,7 +38,10 @@

Token 使用概览

{{ rangeLabel }} -
{{ formatNumber(summary.total_tokens) }}
+
+ {{ formatNumber(summary.total_tokens) }} + Token +

总 Token 消耗

@@ -85,11 +91,17 @@ - - - - - + + + + + + + + + + + @@ -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 {