diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx index 8e649c0..df6969d 100644 --- a/src/pages/UsageRecordsPage.tsx +++ b/src/pages/UsageRecordsPage.tsx @@ -23,7 +23,6 @@ import { Trash2, TriangleAlert, X, - Zap, } from 'lucide-react'; import { getCurrentLocale, useI18n } from '../i18n'; import type { MessageKey } from '../i18n/resources'; @@ -686,8 +685,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) { const { t } = useI18n(); const cards = [ { - icon: Activity, - tone: 'tone-blue', label: t('usage.stat.requests'), value: compactNumber(overview.totalRequests), meta: t('usage.stat.requestMeta', { @@ -697,8 +694,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) { }), }, { - icon: Sparkles, - tone: 'tone-purple', label: t('usage.stat.tokens'), value: compactNumber(overview.totalTokens), meta: t('usage.stat.tokenMeta', { @@ -707,15 +702,11 @@ function OverviewView({ overview }: { overview: UsageOverview }) { }), }, { - icon: ShieldCheck, - tone: 'tone-green', label: t('usage.stat.successRate'), value: `${overview.successRate.toFixed(1)}%`, meta: t('usage.stat.reasoningMeta', { tokens: compactNumber(overview.reasoningTokens) }), }, { - icon: Zap, - tone: 'tone-orange', label: t('usage.stat.tps'), value: `${overview.tps.toFixed(1)} TPS`, meta: t('usage.stat.performanceMeta', { @@ -724,8 +715,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) { }), }, { - icon: Database, - tone: 'tone-teal', label: t('usage.stat.cacheHitRate'), value: `${(overview.cacheHitRate * 100).toFixed(1)}%`, meta: t('usage.stat.cacheHitMeta', { @@ -734,8 +723,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) { }), }, { - icon: CircleDollarSign, - tone: 'tone-amber', label: t('usage.stat.estimatedCost'), value: formatUsd(overview.estimatedCost), meta: t('usage.stat.costMeta', { @@ -748,14 +735,9 @@ function OverviewView({ overview }: { overview: UsageOverview }) { return (
- {cards.map(({ icon: Icon, tone, label, value, meta }) => ( -
-
- {label} -
- -
-
+ {cards.map(({ label, value, meta }) => ( +
+ {label} {value} {meta} diff --git a/src/styles.css b/src/styles.css index ebd74e1..a50ad0c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -6907,58 +6907,12 @@ textarea:focus-visible { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } -.usage-stat-card-top { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; -} - .usage-stat-card-label { color: var(--theme-7a746c); font-size: var(--font-size-caption); font-weight: 600; } -.usage-stat-card-icon { - display: flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border-radius: 6px; -} - -.usage-stat-card.tone-blue .usage-stat-card-icon { - background: rgba(59, 130, 246, 0.12); - color: #2563eb; -} - -.usage-stat-card.tone-purple .usage-stat-card-icon { - background: rgba(139, 92, 246, 0.12); - color: #7c3aed; -} - -.usage-stat-card.tone-green .usage-stat-card-icon { - background: rgba(16, 185, 129, 0.12); - color: #059669; -} - -.usage-stat-card.tone-orange .usage-stat-card-icon { - background: rgba(249, 115, 22, 0.12); - color: #ea580c; -} - -.usage-stat-card.tone-teal .usage-stat-card-icon { - background: rgba(20, 184, 166, 0.12); - color: #0d9488; -} - -.usage-stat-card.tone-amber .usage-stat-card-icon { - background: rgba(245, 158, 11, 0.12); - color: #d97706; -} - .usage-stat-card-value { color: var(--theme-2d2a26); font-size: 22px;