token用量添加计费单位

f/web-kboss/src/views/tokenUsage/index.vue

@@ -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="prompt_tokens" label="输入Token（Token）" min-width="150">
-          <el-table-column prop="completion_tokens" label="输出Token" min-width="140"></el-table-column>
+            <template slot-scope="scope">{{ formatNumber(scope.row.prompt_tokens) }} Token</template>
-          <el-table-column prop="total_tokens" label="总Token" min-width="140"></el-table-column>
+          </el-table-column>
-          <el-table-column prop="amount" label="费用" width="130">
+          <el-table-column prop="completion_tokens" label="输出Token（Token）" min-width="150">
-            <template slot-scope="scope">¥ {{ formatAmount(scope.row.amount) }}</template>
+            <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: '总消耗 Token', value: '0', unit: 'Token', desc: '当前筛选范围', type: 'primary', icon: 'el-icon-coin' },
-        { label: '调用次数', value: '0', desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
+        { label: '调用次数', value: '0', unit: '次', desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
-        { label: '  费用', value: '¥ 0.00', desc: '按当前单价估算', type: 'warning', icon: 'el-icon-wallet' },
+        { label: '预估费用', value: '¥ 0.00', unit: '元', 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 / 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: '总消耗 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), desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
+        { label: '调用次数', value: this.formatNumber(this.summary.request_count), unit: '次', desc: '当前筛选范围', type: 'success', icon: 'el-icon-s-promotion' },
-        { label: '预估费用', value: `¥ ${this.formatAmount(this.summary.amount)}`, desc: '按当前单价估算', type: 'warning', icon: 'el-icon-wallet' },
+        { 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)}`, desc: 'Prompt / Completion', type: 'purple', icon: 'el-icon-pie-chart' }
+        { 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 {