From d027d04f64c03d6f1902ac4b62abe94796d7e1ba Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Fri, 13 Feb 2026 13:35:33 +0800
Subject: [PATCH] feat(usage): use adaptive token format instead of fixed
 millions

---
 src/components/usage/ApiDetailsCard.tsx |  6 +++---
 src/components/usage/ModelStatsCard.tsx |  4 ++--
 src/components/usage/StatCards.tsx      | 12 ++++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/usage/ApiDetailsCard.tsx b/src/components/usage/ApiDetailsCard.tsx
index c5a3747..1a41f9a 100644
--- a/src/components/usage/ApiDetailsCard.tsx
+++ b/src/components/usage/ApiDetailsCard.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
-import { formatTokensInMillions, formatUsd, type ApiStats } from '@/utils/usage';
+import { formatCompactNumber, formatUsd, type ApiStats } from '@/utils/usage';
 import styles from '@/pages/UsagePage.module.scss';
 
 export interface ApiDetailsCardProps {
@@ -100,7 +100,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
                         </span>
                       </span>
                       <span className={styles.apiBadge}>
-                        {t('usage_stats.tokens_count')}: {formatTokensInMillions(api.totalTokens)}
+                        {t('usage_stats.tokens_count')}: {formatCompactNumber(api.totalTokens)}
                       </span>
                       {hasPrices && api.totalCost > 0 && (
                         <span className={styles.apiBadge}>
@@ -127,7 +127,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
                             </span>
                           </span>
                         </span>
-                        <span className={styles.modelStat}>{formatTokensInMillions(stats.tokens)}</span>
+                        <span className={styles.modelStat}>{formatCompactNumber(stats.tokens)}</span>
                       </div>
                     ))}
                   </div>
diff --git a/src/components/usage/ModelStatsCard.tsx b/src/components/usage/ModelStatsCard.tsx
index 40b5cb0..d40c74e 100644
--- a/src/components/usage/ModelStatsCard.tsx
+++ b/src/components/usage/ModelStatsCard.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
-import { formatTokensInMillions, formatUsd } from '@/utils/usage';
+import { formatCompactNumber, formatUsd } from '@/utils/usage';
 import styles from '@/pages/UsagePage.module.scss';
 
 export interface ModelStat {
@@ -97,7 +97,7 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
                       </span>
                     </span>
                   </td>
-                  <td>{formatTokensInMillions(stat.tokens)}</td>
+                  <td>{formatCompactNumber(stat.tokens)}</td>
                   <td>
                     <span
                       className={
diff --git a/src/components/usage/StatCards.tsx b/src/components/usage/StatCards.tsx
index d914d4c..09c6831 100644
--- a/src/components/usage/StatCards.tsx
+++ b/src/components/usage/StatCards.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Line } from 'react-chartjs-2';
 import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
 import {
-  formatTokensInMillions,
+  formatCompactNumber,
   formatPerMinuteValue,
   formatUsd,
   calculateTokenBreakdown,
@@ -81,14 +81,14 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
       accent: '#8b5cf6',
       accentSoft: 'rgba(139, 92, 246, 0.18)',
       accentBorder: 'rgba(139, 92, 246, 0.35)',
-      value: loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0),
+      value: loading ? '-' : formatCompactNumber(usage?.total_tokens ?? 0),
       meta: (
         <>
           <span className={styles.statMetaItem}>
-            {t('usage_stats.cached_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.cachedTokens)}
+            {t('usage_stats.cached_tokens')}: {loading ? '-' : formatCompactNumber(tokenBreakdown.cachedTokens)}
           </span>
           <span className={styles.statMetaItem}>
-            {t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.reasoningTokens)}
+            {t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatCompactNumber(tokenBreakdown.reasoningTokens)}
           </span>
         </>
       ),
@@ -119,7 +119,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
       value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
       meta: (
         <span className={styles.statMetaItem}>
-          {t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(rateStats.tokenCount)}
+          {t('usage_stats.total_tokens')}: {loading ? '-' : formatCompactNumber(rateStats.tokenCount)}
         </span>
       ),
       trend: sparklines.tpm
@@ -135,7 +135,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
       meta: (
         <>
           <span className={styles.statMetaItem}>
-            {t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0)}
+            {t('usage_stats.total_tokens')}: {loading ? '-' : formatCompactNumber(usage?.total_tokens ?? 0)}
           </span>
           {!hasPrices && (
             <span className={`${styles.statMetaItem} ${styles.statSubtle}`}>