fix(usage): 显示缓存 Token 明细

This commit is contained in:
SavitarC committed 2026-06-18 14:34:13 +08:00
1 parent 4a5665da5b
commit 51d722906c
5 files changed
+120 -3

No files matched your search

@@ -15,9 +15,46 @@
<div>
<p class="text-xs font-medium text-gray-500">{{ t('usage.totalTokens') }}</p>
<p class="text-xl font-bold">{{ formatTokens(stats?.total_tokens || 0) }}</p>
<p class="text-xs text-gray-500">
{{ t('usage.in') }}: {{ formatTokens(stats?.total_input_tokens || 0) }} /
{{ t('usage.out') }}: {{ formatTokens(stats?.total_output_tokens || 0) }}
<p class="flex flex-wrap items-center gap-x-1 text-xs text-gray-500">
<span>{{ t('usage.in') }}: {{ formatTokens(stats?.total_input_tokens || 0) }}</span>
<span>/</span>
<span>{{ t('usage.out') }}: {{ formatTokens(stats?.total_output_tokens || 0) }}</span>
<span>/</span>
<span class="group relative inline-flex cursor-help items-center gap-0.5" tabindex="0">
<span>{{ cacheLabel() }}: {{ formatTokens(stats?.total_cache_tokens || 0) }}</span>
<svg
class="h-3.5 w-3.5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span
class="pointer-events-none absolute left-1/2 top-full z-30 mt-2 w-56 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-3 text-left text-xs text-gray-700 opacity-0 shadow-lg transition-opacity duration-150 group-hover:opacity-100 group-focus:opacity-100 dark:border-dark-600 dark:bg-dark-800 dark:text-dark-200"
>
<span class="mb-2 block font-medium text-gray-900 dark:text-white">
{{ cacheDetailLabel() }}
</span>
<span class="flex items-center justify-between gap-3">
<span>{{ t('usage.cacheCreationTokensLabel') }}</span>
<span class="tabular-nums">
{{ formatTokens(stats?.total_cache_creation_tokens || 0) }}
</span>
</span>
<span class="mt-1 flex items-center justify-between gap-3">
<span>{{ t('usage.cacheReadTokensLabel') }}</span>
<span class="tabular-nums">
{{ formatTokens(stats?.total_cache_read_tokens || 0) }}
</span>
</span>
</span>
</span>
</p>
</div>
</div>
@@ -64,4 +101,7 @@ const formatTokens = (value: number) => {
if (value >= 1e3) return (value / 1e3).toFixed(2) + 'K'
return value.toLocaleString()
}
const cacheLabel = () => t('usage.cacheTotal')
const cacheDetailLabel = () => t('usage.cacheBreakdown')
</script>