155 lines
8.3 KiB
TypeScript
155 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback, startTransition } from "react";
|
|
import Link from "next/link";
|
|
import { motion } from "motion/react";
|
|
import { Trophy, Users, Cpu, Radio, ArrowUpDown, ArrowDown, ArrowUp } from "lucide-react";
|
|
import { TimeRangeSelector } from "@/components/TimeRangeSelector";
|
|
import { buildQuery, formatNumber, formatTokens, formatUSD } from "@/lib/utils";
|
|
import { useTimeRange } from "@/lib/time-range-context";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
type Tab = "user" | "model" | "channel";
|
|
type SortKey = "calls" | "prompt_tokens" | "completion_tokens" | "cache_creation_tokens" | "cache_read_tokens" | "total_tokens" | "quota_usd";
|
|
|
|
interface RankItem {
|
|
rank: number; name: string; username?: string; id?: number; calls: number;
|
|
prompt_tokens: number; completion_tokens: number; cache_creation_tokens: number; cache_read_tokens: number; total_tokens: number;
|
|
quota: number; quota_usd: number;
|
|
}
|
|
|
|
export default function RankingsPage() {
|
|
const { t } = useI18n();
|
|
const { getEffectiveRange } = useTimeRange();
|
|
const [tab, setTab] = useState<Tab>("user");
|
|
const [data, setData] = useState<RankItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [sortKey, setSortKey] = useState<SortKey>("total_tokens");
|
|
const [sortAsc, setSortAsc] = useState(false);
|
|
|
|
const tabConfig: Record<Tab, { label: string; icon: typeof Users }> = {
|
|
user: { label: t("rank.user"), icon: Users },
|
|
model: { label: t("rank.model"), icon: Cpu },
|
|
channel: { label: t("rank.channel"), icon: Radio },
|
|
};
|
|
|
|
const fetchData = useCallback(async () => {
|
|
startTransition(() => setLoading(true));
|
|
const { start, end } = getEffectiveRange();
|
|
const res = await fetch(buildQuery("/api/rankings", { start, end, type: tab, limit: 100 }));
|
|
const json = await res.json();
|
|
startTransition(() => { setData(json); setLoading(false); });
|
|
}, [tab, getEffectiveRange]);
|
|
|
|
useEffect(() => { fetchData(); }, [fetchData]);
|
|
|
|
function detailHref(item: RankItem): string {
|
|
if (tab === "channel") return `/detail/channel/${item.id}`;
|
|
if (tab === "model") return `/detail/model/${encodeURIComponent(item.name)}`;
|
|
return `/detail/user/${encodeURIComponent(item.username || item.name)}`;
|
|
}
|
|
|
|
function handleSort(key: SortKey) {
|
|
if (sortKey === key) setSortAsc(!sortAsc);
|
|
else { setSortKey(key); setSortAsc(false); }
|
|
}
|
|
|
|
const sorted = [...data].sort((a, b) => {
|
|
const diff = (a[sortKey] as number) - (b[sortKey] as number);
|
|
return sortAsc ? diff : -diff;
|
|
});
|
|
|
|
const renderSortIcon = (col: SortKey) => {
|
|
if (sortKey !== col) return <ArrowUpDown className="h-3 w-3" style={{ color: "var(--text-muted)", opacity: 0.4 }} />;
|
|
return sortAsc
|
|
? <ArrowUp className="h-3 w-3" style={{ color: "var(--accent)" }} />
|
|
: <ArrowDown className="h-3 w-3" style={{ color: "var(--accent)" }} />;
|
|
};
|
|
|
|
const columns: { key: SortKey | null; label: string; align: "left" | "right" }[] = [
|
|
{ key: null, label: t("th.rank"), align: "left" },
|
|
{ key: null, label: t("th.name"), align: "left" },
|
|
{ key: "calls", label: t("th.calls"), align: "right" },
|
|
{ key: "prompt_tokens", label: t("th.input"), align: "right" },
|
|
{ key: "cache_creation_tokens", label: t("th.cacheCreation"), align: "right" },
|
|
{ key: "cache_read_tokens", label: t("th.cacheRead"), align: "right" },
|
|
{ key: "completion_tokens", label: t("th.output"), align: "right" },
|
|
{ key: "total_tokens", label: t("th.totalToken"), align: "right" },
|
|
{ key: "quota_usd", label: t("th.cost"), align: "right" },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="flex items-center gap-3">
|
|
<Trophy className="h-5 w-5" style={{ color: "var(--accent)", opacity: 0.6 }} />
|
|
<h1 className="text-2xl font-bold gradient-text">{t("rank.title")}</h1>
|
|
</motion.div>
|
|
<TimeRangeSelector />
|
|
</div>
|
|
|
|
<div className="flex gap-1 rounded-lg p-1 w-fit" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
|
|
{(Object.keys(tabConfig) as Tab[]).map((key) => {
|
|
const Icon = tabConfig[key].icon;
|
|
return (
|
|
<button key={key} onClick={() => setTab(key)}
|
|
className="relative flex items-center gap-2 px-4 py-2 text-xs font-medium rounded-md transition-colors"
|
|
style={{ color: tab === key ? "var(--text-accent)" : "var(--text-muted)" }}
|
|
>
|
|
{tab === key && (
|
|
<motion.div layoutId="tab-bg" className="absolute inset-0 rounded-md"
|
|
style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 30 }} />
|
|
)}
|
|
<Icon className="relative z-10 h-3.5 w-3.5" />
|
|
<span className="relative z-10">{tabConfig[key].label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} className="glass overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr style={{ borderBottom: "1px solid var(--surface-border)" }}>
|
|
{columns.map((col) => (
|
|
<th key={col.label}
|
|
className={`px-4 py-3 text-xs font-medium uppercase tracking-wider ${col.align === "right" ? "text-right" : "text-left"} ${col.key ? "cursor-pointer select-none transition-colors hover:opacity-80" : ""}`}
|
|
style={{ color: col.key && sortKey === col.key ? "var(--text-accent)" : "var(--text-muted)" }}
|
|
onClick={col.key ? () => handleSort(col.key!) : undefined}
|
|
>
|
|
{col.key ? (
|
|
<span className={`inline-flex items-center gap-1 ${col.align === "right" ? "justify-end" : ""}`}>
|
|
{col.label} {renderSortIcon(col.key)}
|
|
</span>
|
|
) : col.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr><td colSpan={9} className="px-4 py-16 text-center"><div className="inline-block h-5 w-5 animate-spin rounded-full spinner" /></td></tr>
|
|
) : sorted.map((item, i) => (
|
|
<motion.tr key={item.name} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: i * 0.02 }}
|
|
className="row-glow transition-colors" style={{ borderBottom: "1px solid var(--surface-border)" }}>
|
|
<td className="px-4 py-3 font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-muted)" }}>{i + 1}</td>
|
|
<td className="px-4 py-3">
|
|
<Link href={detailHref(item)} className="transition-colors" style={{ color: "var(--text-accent)" }}>{item.name}</Link>
|
|
</td>
|
|
<td className="px-4 py-3 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>{formatNumber(item.calls)}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-muted)" }}>{formatTokens(item.prompt_tokens)}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-muted)" }}>{formatTokens(item.cache_creation_tokens)}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-muted)" }}>{formatTokens(item.cache_read_tokens)}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-muted)" }}>{formatTokens(item.completion_tokens)}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums font-medium font-[family-name:var(--font-geist-mono)]" style={{ color: "var(--text-primary)" }}>{formatTokens(item.total_tokens)}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-secondary)" }}>{formatUSD(item.quota_usd)}</td>
|
|
</motion.tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|