feat(db): add usage tracking schema and types

Add database tables for proxy request logs and model pricing. Extend Provider and error types to support usage statistics.
2026-06-16 13:34:04 +08:00 · 2025-12-03 00:16:40 +08:00
parent d12347d837
commit c0122d717c
22 changed files with 2815 additions and 2 deletions
@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { useModelStats } from '@/lib/query/usage';
+
+export function ModelStatsTable() {
+  const { t } = useTranslation();
+  const { data: stats, isLoading } = useModelStats();
+
+  if (isLoading) {
+    return <div className="h-[400px] animate-pulse rounded bg-gray-100" />;
+  }
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t('usage.model', '模型')}</TableHead>
+            <TableHead className="text-right">{t('usage.requests', '请求数')}</TableHead>
+            <TableHead className="text-right">{t('usage.tokens', 'Tokens')}</TableHead>
+            <TableHead className="text-right">{t('usage.totalCost', '总成本')}</TableHead>
+            <TableHead className="text-right">{t('usage.avgCost', '平均成本')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {stats?.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} className="text-center text-muted-foreground">
+                {t('usage.noData', '暂无数据')}
+              </TableCell>
+            </TableRow>
+          ) : (
+            stats?.map((stat) => (
+              <TableRow key={stat.model}>
+                <TableCell className="font-mono text-sm">{stat.model}</TableCell>
+                <TableCell className="text-right">{stat.requestCount.toLocaleString()}</TableCell>
+                <TableCell className="text-right">{stat.totalTokens.toLocaleString()}</TableCell>
+                <TableCell className="text-right">${parseFloat(stat.totalCost).toFixed(4)}</TableCell>
+                <TableCell className="text-right">${parseFloat(stat.avgCostPerRequest).toFixed(6)}</TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}