shangzy/new-api-analytics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show output tokens in detail stats

Browse Source
This commit is contained in:
shangzy
2026-04-28 13:55:08 +08:00
parent e8a66cf180
commit 94b87dcc30
3 changed files with 95 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/detail/[...slug]/page.tsx
View File

@@ -10,6 +10,7 @@ import { TimeRangeSelector } from "@/components/TimeRangeSelector";
import { TrendChart } from "@/components/charts/TrendChart";
import { buildQuery, formatNumber, formatTokens, formatUSD } from "@/lib/utils";
import { sortDetailBreakdown, type DetailBreakdownItem, type DetailBreakdownSortKey } from "@/lib/detail-sort";
import { getDetailStats, type DetailStatKey } from "@/lib/detail-stats";
import { useTimeRange } from "@/lib/time-range-context";
import { useI18n } from "@/lib/i18n";
@@ -79,6 +80,16 @@ export default function DetailPage() {
{ key: "quota", label: t("th.cost"), align: "right" },
];
const statIcons: Record<DetailStatKey, typeof Hash> = {
calls: Hash,
total_tokens: Zap,
quota: DollarSign,
prompt_tokens: MessageSquare,
completion_tokens: MessageSquare,
cache_creation_tokens: DatabaseZap,
cache_read_tokens: BookOpen,
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
@@ -98,13 +109,17 @@ export default function DetailPage() {
<div className="flex h-64 items-center justify-center"><div className="h-6 w-6 animate-spin rounded-full spinner" /></div>
) : data ? (
<>
<div className="grid grid-cols-2 gap-4 md:grid-cols-6">
<StatsCard title={t("dash.totalCalls")} value={data.calls} icon={Hash} delay={0} />
<StatsCard title={t("th.totalToken")} value={data.total_tokens} format="tokens" icon={Zap} delay={0.05} />
<StatsCard title={t("th.cost")} value={data.quota / 500000} format="usd" icon={DollarSign} delay={0.1} />
<StatsCard title={t("th.input")} value={data.prompt_tokens} format="tokens" icon={MessageSquare} delay={0.15} />
<StatsCard title={t("th.cacheCreation")} value={data.cache_creation_tokens} format="tokens" icon={DatabaseZap} delay={0.2} />
<StatsCard title={t("th.cacheRead")} value={data.cache_read_tokens} format="tokens" icon={BookOpen} delay={0.25} />
<div className="grid grid-cols-2 gap-4 md:grid-cols-4 xl:grid-cols-7">
{getDetailStats(data).map((stat, i) => (
<StatsCard
key={stat.key}
title={t(stat.labelKey)}
value={stat.value}
format={stat.format}
icon={statIcons[stat.key]}
delay={i * 0.05}
/>
))}
</div>
<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }} className="glass p-5">