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.
This commit is contained in:
erio
2026-04-02 01:40:52 +08:00
parent f3ab3fe5e2
commit 212eaa3a05
3 changed files with 23 additions and 8 deletions

View File

@@ -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()