chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-19 03:00:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(usage): use adaptive token format instead of fixed millions

Browse Source
This commit is contained in:
Supra4E8C
2026-02-13 13:35:33 +08:00
parent c4ca9be7b5
commit d027d04f64
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/usage/ApiDetailsCard.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Card } from '@/components/ui/Card'; 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'; import styles from '@/pages/UsagePage.module.scss';
export interface ApiDetailsCardProps { export interface ApiDetailsCardProps {
@@ -100,7 +100,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
</span> </span>
</span> </span>
<span className={styles.apiBadge}> <span className={styles.apiBadge}>
{t('usage_stats.tokens_count')}: {formatTokensInMillions(api.totalTokens)} {t('usage_stats.tokens_count')}: {formatCompactNumber(api.totalTokens)}
</span> </span>
{hasPrices && api.totalCost > 0 && ( {hasPrices && api.totalCost > 0 && (
<span className={styles.apiBadge}> <span className={styles.apiBadge}>
@@ -127,7 +127,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
</span> </span>
</span> </span>
</span> </span>
<span className={styles.modelStat}>{formatTokensInMillions(stats.tokens)}</span> <span className={styles.modelStat}>{formatCompactNumber(stats.tokens)}</span>
</div> </div>
))} ))}
</div> </div>

4
src/components/usage/ModelStatsCard.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Card } from '@/components/ui/Card'; 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'; import styles from '@/pages/UsagePage.module.scss';
export interface ModelStat { export interface ModelStat {
@@ -97,7 +97,7 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
</span> </span>
</span> </span>
</td> </td>
<td>{formatTokensInMillions(stat.tokens)}</td> <td>{formatCompactNumber(stat.tokens)}</td>
<td> <td>
<span <span
className={ className={

12
src/components/usage/StatCards.tsx
View File

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { Line } from 'react-chartjs-2'; import { Line } from 'react-chartjs-2';
import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons'; import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
import { import {
formatTokensInMillions, formatCompactNumber,
formatPerMinuteValue, formatPerMinuteValue,
formatUsd, formatUsd,
calculateTokenBreakdown, calculateTokenBreakdown,
@@ -81,14 +81,14 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
accent: '#8b5cf6', accent: '#8b5cf6',
accentSoft: 'rgba(139, 92, 246, 0.18)', accentSoft: 'rgba(139, 92, 246, 0.18)',
accentBorder: 'rgba(139, 92, 246, 0.35)', accentBorder: 'rgba(139, 92, 246, 0.35)',
value: loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0), value: loading ? '-' : formatCompactNumber(usage?.total_tokens ?? 0),
meta: ( meta: (
<> <>
<span className={styles.statMetaItem}> <span className={styles.statMetaItem}>
{t('usage_stats.cached_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.cachedTokens)} {t('usage_stats.cached_tokens')}: {loading ? '-' : formatCompactNumber(tokenBreakdown.cachedTokens)}
</span> </span>
<span className={styles.statMetaItem}> <span className={styles.statMetaItem}>
{t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.reasoningTokens)} {t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatCompactNumber(tokenBreakdown.reasoningTokens)}
</span> </span>
</> </>
), ),
@@ -119,7 +119,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
value: loading ? '-' : formatPerMinuteValue(rateStats.tpm), value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
meta: ( meta: (
<span className={styles.statMetaItem}> <span className={styles.statMetaItem}>
{t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(rateStats.tokenCount)} {t('usage_stats.total_tokens')}: {loading ? '-' : formatCompactNumber(rateStats.tokenCount)}
</span> </span>
), ),
trend: sparklines.tpm trend: sparklines.tpm
@@ -135,7 +135,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
meta: ( meta: (
<> <>
<span className={styles.statMetaItem}> <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> </span>
{!hasPrices && ( {!hasPrices && (
<span className={`${styles.statMetaItem} ${styles.statSubtle}`}> <span className={`${styles.statMetaItem} ${styles.statSubtle}`}>