fix(usage): 移动端缓存 token 拆分为读/写两列展示

cache_read 与 cache_creation 原本被合并为单值，现分别显示并补充测试

frontend/src/features/usage/__tests__/token-normalization.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { getCacheCreationTokens, getEffectiveInputTokens } from '../token-normalization'
+import { getCacheCreationTokens, getCacheReadTokens, getEffectiveInputTokens } from '../token-normalization'
 
 describe('usage token normalization', () => {
   it('prefers explicit cache creation totals when present', () => {
@@ -19,6 +19,20 @@ describe('usage token normalization', () => {
     })).toBe(20)
   })
 
+  it('keeps cache read and cache creation as separate display values', () => {
+    const usage = {
+      input_tokens: 1,
+      cache_creation_input_tokens: 1530,
+      cache_read_input_tokens: 104026,
+      output_tokens: 591,
+      api_format: 'claude:chat',
+    }
+
+    expect(getEffectiveInputTokens(usage)).toBe(1)
+    expect(getCacheReadTokens(usage)).toBe(104026)
+    expect(getCacheCreationTokens(usage)).toBe(1530)
+  })
+
   it('keeps effective input token normalization unchanged', () => {
     expect(getEffectiveInputTokens({
       input_tokens: 100,

frontend/src/features/usage/components/UsageRecordsTable.vue

@@ -569,9 +569,9 @@
                 <span>{{ formatTokens(record.output_tokens || 0) }}</span>
               </div>
               <div class="flex items-center gap-1 text-muted-foreground">
-                <span :class="hasPositiveTokens(getRecordCacheTokens(record)) ? 'text-foreground/70' : ''">{{ formatOptionalTokens(getRecordCacheTokens(record)) }}</span>
+                <span :class="hasPositiveTokens(getRecordCacheReadTokens(record)) ? 'text-foreground/70' : ''">{{ formatOptionalTokens(getRecordCacheReadTokens(record)) }}</span>
                 <span>/</span>
-                <span>-</span>
+                <span :class="hasPositiveTokens(getRecordCacheCreationTokens(record)) ? 'text-foreground/70' : ''">{{ formatOptionalTokens(getRecordCacheCreationTokens(record)) }}</span>
               </div>
             </div>
           </TableCell>
@@ -689,7 +689,7 @@ import {
 import { RefreshCcw, Search } from 'lucide-vue-next'
 import { formatTokens, formatCurrency } from '@/utils/format'
 import { formatDateTime } from '../composables'
-import { getCacheCreationTokens, getEffectiveInputTokens } from '../token-normalization'
+import { getCacheCreationTokens, getCacheReadTokens, getEffectiveInputTokens } from '../token-normalization'
 import {
   formatUsageStreamLabel,
   isUsageRecordFailed,
@@ -825,8 +825,12 @@ function getRecordEffectiveInputTokens(record: UsageRecord): number {
   return getEffectiveInputTokens(record)
 }
 
-function getRecordCacheTokens(record: UsageRecord): number {
-  return getCacheCreationTokens(record) + (record.cache_read_input_tokens || 0)
+function getRecordCacheReadTokens(record: UsageRecord): number {
+  return getCacheReadTokens(record)
+}
+
+function getRecordCacheCreationTokens(record: UsageRecord): number {
+  return getCacheCreationTokens(record)
 }
 
 function hasPositiveTokens(value: number | null | undefined): boolean {

frontend/src/features/usage/token-normalization.ts

@@ -30,6 +30,10 @@ export function getCacheCreationTokens(usage: UsageTokenLike): number {
   return explicit
 }
 
+export function getCacheReadTokens(usage: UsageTokenLike): number {
+  return toNonNegativeNumber(usage.cache_read_input_tokens)
+}
+
 export function getEffectiveInputTokens(usage: UsageTokenLike): number {
   const explicit = toNonNegativeNumber(usage.effective_input_tokens)
   if (explicit > 0) {