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 @@
-
-
-
-
- ¥ {{ formatAmount(scope.row.amount) }}
+
+ {{ formatNumber(scope.row.prompt_tokens) }} Token
+
+
+ {{ formatNumber(scope.row.completion_tokens) }} Token
+
+
+ {{ formatNumber(scope.row.total_tokens) }} Token
+
+
+ ¥ {{ formatAmount(scope.row.amount) }} 元
@@ -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 {