From 212eaa3a053577721542983e92b2c86aac68b1f0 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Thu, 2 Apr 2026 01:40:52 +0800
Subject: [PATCH] fix(ui): show token breakdown when image model uses token
 billing

Only display image count format when billing_mode is "image".
When channel has token pricing, show input/output/cache token details.
---
 .../src/components/admin/usage/UsageTable.vue    | 16 ++++++++++++----
 frontend/src/views/admin/UsageView.vue           |  2 +-
 frontend/src/views/user/UsageView.vue            | 13 ++++++++++---
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index 3a9f829b..a21d2a5c 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -84,8 +84,8 @@
         </template>
 
         <template #cell-tokens="{ row }">
-          <!-- 图片生成请求 -->
-          <div v-if="row.image_count > 0" class="flex items-center gap-1.5">
+          <!-- 图片生成请求（仅按次计费时显示图片格式） -->
+          <div v-if="row.image_count > 0 && row.billing_mode === 'image'" class="flex items-center gap-1.5">
             <svg class="h-4 w-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
@@ -295,11 +295,11 @@
           </div>
           <div class="flex items-center justify-between gap-6">
             <span class="text-gray-400">{{ t('usage.rate') }}</span>
-            <span class="font-semibold text-blue-400">{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span>
+            <span class="font-semibold text-blue-400">{{ formatMultiplier(tooltipData?.rate_multiplier || 1) }}x</span>
           </div>
           <div class="flex items-center justify-between gap-6">
             <span class="text-gray-400">{{ t('usage.accountMultiplier') }}</span>
-            <span class="font-semibold text-blue-400">{{ (tooltipData?.account_rate_multiplier ?? 1).toFixed(2) }}x</span>
+            <span class="font-semibold text-blue-400">{{ formatMultiplier(tooltipData?.account_rate_multiplier ?? 1) }}x</span>
           </div>
           <div class="flex items-center justify-between gap-6">
             <span class="text-gray-400">{{ t('usage.original') }}</span>
@@ -382,6 +382,14 @@ const formatCacheTokens = (tokens: number): string => {
   return tokens.toString()
 }
 
+// 自适应精度：保留足够位数显示有效数字（如 0.001 → "0.001"，1.5 → "1.50"）
+const formatMultiplier = (val: number): string => {
+  if (val >= 0.01) return val.toFixed(2)
+  if (val >= 0.001) return val.toFixed(3)
+  if (val >= 0.0001) return val.toFixed(4)
+  return val.toPrecision(2)
+}
+
 const formatUserAgent = (ua: string): string => {
   return ua
 }
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index 567769d9..50de8feb 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -454,7 +454,7 @@ const exportToExcel = async () => {
         log.input_tokens, log.output_tokens, log.cache_read_tokens, log.cache_creation_tokens,
         log.input_cost?.toFixed(6) || '0.000000', log.output_cost?.toFixed(6) || '0.000000',
         log.cache_read_cost?.toFixed(6) || '0.000000', log.cache_creation_cost?.toFixed(6) || '0.000000',
-        log.rate_multiplier?.toFixed(2) || '1.00', (log.account_rate_multiplier ?? 1).toFixed(2),
+        log.rate_multiplier?.toPrecision(4) || '1.00', (log.account_rate_multiplier ?? 1).toPrecision(4),
         log.total_cost?.toFixed(6) || '0.000000', log.actual_cost?.toFixed(6) || '0.000000',
         (log.total_cost * (log.account_rate_multiplier ?? 1)).toFixed(6), log.first_token_ms ?? '', log.duration_ms,
         log.request_id || '', log.user_agent || '', log.ip_address || ''
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index bbf5163b..eea468a4 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -189,8 +189,8 @@
           </template>
 
           <template #cell-tokens="{ row }">
-            <!-- 图片生成请求 -->
-            <div v-if="row.image_count > 0" class="flex items-center gap-1.5">
+            <!-- 图片生成请求（仅按次计费时显示图片格式） -->
+            <div v-if="row.image_count > 0 && row.billing_mode === 'image'" class="flex items-center gap-1.5">
               <svg
                 class="h-4 w-4 text-indigo-500"
                 fill="none"
@@ -464,7 +464,7 @@
           <div class="flex items-center justify-between gap-6">
             <span class="text-gray-400">{{ t('usage.rate') }}</span>
             <span class="font-semibold text-blue-400"
-              >{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span
+              >{{ formatMultiplier(tooltipData?.rate_multiplier || 1) }}x</span
             >
           </div>
           <div class="flex items-center justify-between gap-6">
@@ -669,6 +669,13 @@ const formatCacheTokens = (value: number): string => {
   return value.toLocaleString()
 }
 
+const formatMultiplier = (val: number): string => {
+  if (val >= 0.01) return val.toFixed(2)
+  if (val >= 0.001) return val.toFixed(3)
+  if (val >= 0.0001) return val.toFixed(4)
+  return val.toPrecision(2)
+}
+
 const loadUsageLogs = async () => {
   if (abortController) {
     abortController.abort()