{(() => {
- const durationSec =
- (log.durationMs ?? log.latencyMs) / 1000;
- const durationColor =
- durationSec <= 5
+ const durationMs =
+ typeof log.durationMs === "number"
+ ? log.durationMs
+ : log.latencyMs;
+ const durationSec = durationMs / 1000;
+ const durationColor = Number.isFinite(durationSec)
+ ? durationSec <= 5
? "bg-green-100 text-green-800"
: durationSec <= 120
? "bg-orange-100 text-orange-800"
- : "bg-red-200 text-red-900";
+ : "bg-red-200 text-red-900"
+ : "bg-gray-100 text-gray-700";
return (
- {Math.round(durationSec)}s
+ {Number.isFinite(durationSec)
+ ? `${Math.round(durationSec)}s`
+ : "--"}
);
})()}
@@ -367,17 +465,20 @@ export function RequestLogTable() {
log.firstTokenMs != null &&
(() => {
const firstSec = log.firstTokenMs / 1000;
- const firstColor =
- firstSec <= 5
+ const firstColor = Number.isFinite(firstSec)
+ ? firstSec <= 5
? "bg-green-100 text-green-800"
: firstSec <= 120
? "bg-orange-100 text-orange-800"
- : "bg-red-200 text-red-900";
+ : "bg-red-200 text-red-900"
+ : "bg-gray-100 text-gray-700";
return (
- {firstSec.toFixed(1)}s
+ {Number.isFinite(firstSec)
+ ? `${firstSec.toFixed(1)}s`
+ : "--"}
);
})()}
diff --git a/src/components/usage/UsageDashboard.tsx b/src/components/usage/UsageDashboard.tsx
index 49974ae79..01dd3764d 100644
--- a/src/components/usage/UsageDashboard.tsx
+++ b/src/components/usage/UsageDashboard.tsx
@@ -8,11 +8,28 @@ import { ProviderStatsTable } from "./ProviderStatsTable";
import { ModelStatsTable } from "./ModelStatsTable";
import type { TimeRange } from "@/types/usage";
import { motion } from "framer-motion";
-import { BarChart3, ListFilter, Activity } from "lucide-react";
+import { BarChart3, ListFilter, Activity, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useQueryClient } from "@tanstack/react-query";
+import { usageKeys } from "@/lib/query/usage";
export function UsageDashboard() {
const { t } = useTranslation();
+ const queryClient = useQueryClient();
const [timeRange, setTimeRange] = useState
("1d");
+ const [refreshIntervalMs, setRefreshIntervalMs] = useState(30000);
+
+ const refreshIntervalOptionsMs = [0, 5000, 10000, 30000, 60000] as const;
+ const changeRefreshInterval = () => {
+ const currentIndex = refreshIntervalOptionsMs.indexOf(
+ refreshIntervalMs as (typeof refreshIntervalOptionsMs)[number],
+ );
+ const safeIndex = currentIndex >= 0 ? currentIndex : 3; // default 30s
+ const nextIndex = (safeIndex + 1) % refreshIntervalOptionsMs.length;
+ const next = refreshIntervalOptionsMs[nextIndex];
+ setRefreshIntervalMs(next);
+ queryClient.invalidateQueries({ queryKey: usageKeys.all });
+ };
const days = timeRange === "1d" ? 1 : timeRange === "7d" ? 7 : 30;
@@ -34,32 +51,45 @@ export function UsageDashboard() {
onValueChange={(v) => setTimeRange(v as TimeRange)}
className="w-full sm:w-auto"
>
-
-
+
-
- {t("usage.last7days")}
-
-
- {t("usage.last30days")}
-
-
+
+ {refreshIntervalMs > 0 ? `${refreshIntervalMs / 1000}s` : "--"}
+
+
+
+ {t("usage.today")}
+
+
+ {t("usage.last7days")}
+
+
+ {t("usage.last30days")}
+
+
+
@@ -86,15 +116,15 @@ export function UsageDashboard() {
transition={{ delay: 0.2 }}
>
-
+
-
+
-
+
diff --git a/src/components/usage/UsageSummaryCards.tsx b/src/components/usage/UsageSummaryCards.tsx
index f3a6176ba..a281b2f2c 100644
--- a/src/components/usage/UsageSummaryCards.tsx
+++ b/src/components/usage/UsageSummaryCards.tsx
@@ -4,19 +4,26 @@ import { Card, CardContent } from "@/components/ui/card";
import { useUsageSummary } from "@/lib/query/usage";
import { Activity, DollarSign, Layers, Database, Loader2 } from "lucide-react";
import { motion } from "framer-motion";
+import { fmtUsd, parseFiniteNumber } from "./format";
interface UsageSummaryCardsProps {
days: number;
+ refreshIntervalMs: number;
}
-export function UsageSummaryCards({ days }: UsageSummaryCardsProps) {
+export function UsageSummaryCards({
+ days,
+ refreshIntervalMs,
+}: UsageSummaryCardsProps) {
const { t } = useTranslation();
- const { data: summary, isLoading } = useUsageSummary(days);
+ const { data: summary, isLoading } = useUsageSummary(days, {
+ refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
+ });
const stats = useMemo(() => {
const totalRequests = summary?.totalRequests ?? 0;
- const totalCost = parseFloat(summary?.totalCost || "0");
+ const totalCost = parseFiniteNumber(summary?.totalCost);
const inputTokens = summary?.totalInputTokens ?? 0;
const outputTokens = summary?.totalOutputTokens ?? 0;
@@ -37,7 +44,7 @@ export function UsageSummaryCards({ days }: UsageSummaryCardsProps) {
},
{
title: t("usage.totalCost"),
- value: `$${totalCost.toFixed(4)}`,
+ value: totalCost == null ? "--" : fmtUsd(totalCost, 4),
icon: DollarSign,
color: "text-green-500",
bg: "bg-green-500/10",
diff --git a/src/components/usage/UsageTrendChart.tsx b/src/components/usage/UsageTrendChart.tsx
index 376014e02..ba66a83f4 100644
--- a/src/components/usage/UsageTrendChart.tsx
+++ b/src/components/usage/UsageTrendChart.tsx
@@ -11,14 +11,26 @@ import {
} from "recharts";
import { useUsageTrends } from "@/lib/query/usage";
import { Loader2 } from "lucide-react";
+import {
+ fmtInt,
+ fmtUsd,
+ getLocaleFromLanguage,
+ parseFiniteNumber,
+} from "./format";
interface UsageTrendChartProps {
days: number;
+ refreshIntervalMs: number;
}
-export function UsageTrendChart({ days }: UsageTrendChartProps) {
+export function UsageTrendChart({
+ days,
+ refreshIntervalMs,
+}: UsageTrendChartProps) {
const { t, i18n } = useTranslation();
- const { data: trends, isLoading } = useUsageTrends(days);
+ const { data: trends, isLoading } = useUsageTrends(days, {
+ refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
+ });
if (isLoading) {
return (
@@ -29,15 +41,12 @@ export function UsageTrendChart({ days }: UsageTrendChartProps) {
}
const isToday = days === 1;
- const dateLocale =
- i18n.language === "zh"
- ? "zh-CN"
- : i18n.language === "ja"
- ? "ja-JP"
- : "en-US";
+ const language = i18n.resolvedLanguage || i18n.language || "en";
+ const dateLocale = getLocaleFromLanguage(language);
const chartData =
trends?.map((stat) => {
const pointDate = new Date(stat.date);
+ const cost = parseFiniteNumber(stat.totalCost);
return {
rawDate: stat.date,
label: isToday
@@ -56,7 +65,7 @@ export function UsageTrendChart({ days }: UsageTrendChartProps) {
outputTokens: stat.totalOutputTokens,
cacheCreationTokens: stat.totalCacheCreationTokens,
cacheReadTokens: stat.totalCacheReadTokens,
- cost: parseFloat(stat.totalCost),
+ cost: cost ?? null,
};
}) || [];
@@ -79,9 +88,9 @@ export function UsageTrendChart({ days }: UsageTrendChartProps) {
/>
{entry.name}:
- {entry.name.includes(t("usage.cost", "成本"))
- ? `$${typeof entry.value === "number" ? entry.value.toFixed(6) : entry.value}`
- : entry.value.toLocaleString()}
+ {entry.dataKey === "cost"
+ ? fmtUsd(entry.value, 6)
+ : fmtInt(entry.value, dateLocale)}
))}
diff --git a/src/components/usage/format.ts b/src/components/usage/format.ts
new file mode 100644
index 000000000..e6df42238
--- /dev/null
+++ b/src/components/usage/format.ts
@@ -0,0 +1,39 @@
+export function parseFiniteNumber(value: unknown): number | null {
+ if (typeof value === "number") {
+ return Number.isFinite(value) ? value : null;
+ }
+
+ if (typeof value === "string") {
+ const parsed = Number.parseFloat(value);
+ return Number.isFinite(parsed) ? parsed : null;
+ }
+
+ return null;
+}
+
+export function fmtInt(
+ value: unknown,
+ locale?: string,
+ fallback: string = "--",
+): string {
+ const num = parseFiniteNumber(value);
+ if (num == null) return fallback;
+ return new Intl.NumberFormat(locale).format(Math.trunc(num));
+}
+
+export function fmtUsd(
+ value: unknown,
+ digits: number,
+ fallback: string = "--",
+): string {
+ const num = parseFiniteNumber(value);
+ if (num == null) return fallback;
+ return `$${num.toFixed(digits)}`;
+}
+
+export function getLocaleFromLanguage(language: string): string {
+ if (!language) return "en-US";
+ if (language.startsWith("zh")) return "zh-CN";
+ if (language.startsWith("ja")) return "ja-JP";
+ return "en-US";
+}
diff --git a/src/lib/query/usage.ts b/src/lib/query/usage.ts
index bf220c549..180c264d8 100644
--- a/src/lib/query/usage.ts
+++ b/src/lib/query/usage.ts
@@ -2,6 +2,35 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { usageApi } from "@/lib/api/usage";
import type { LogFilters } from "@/types/usage";
+const DEFAULT_REFETCH_INTERVAL_MS = 30000;
+
+type UsageQueryOptions = {
+ refetchInterval?: number | false;
+ refetchIntervalInBackground?: boolean;
+};
+
+type RequestLogsTimeMode = "rolling" | "fixed";
+
+type RequestLogsQueryArgs = {
+ filters: LogFilters;
+ timeMode: RequestLogsTimeMode;
+ page?: number;
+ pageSize?: number;
+ rollingWindowSeconds?: number;
+ options?: UsageQueryOptions;
+};
+
+type RequestLogsKey = {
+ timeMode: RequestLogsTimeMode;
+ rollingWindowSeconds?: number;
+ appType?: string;
+ providerName?: string;
+ model?: string;
+ statusCode?: number;
+ startDate?: number;
+ endDate?: number;
+};
+
// Query keys
export const usageKeys = {
all: ["usage"] as const,
@@ -9,8 +38,21 @@ export const usageKeys = {
trends: (days: number) => [...usageKeys.all, "trends", days] as const,
providerStats: () => [...usageKeys.all, "provider-stats"] as const,
modelStats: () => [...usageKeys.all, "model-stats"] as const,
- logs: (filters: LogFilters, page: number, pageSize: number) =>
- [...usageKeys.all, "logs", filters, page, pageSize] as const,
+ logs: (key: RequestLogsKey, page: number, pageSize: number) =>
+ [
+ ...usageKeys.all,
+ "logs",
+ key.timeMode,
+ key.rollingWindowSeconds ?? 0,
+ key.appType ?? "",
+ key.providerName ?? "",
+ key.model ?? "",
+ key.statusCode ?? -1,
+ key.startDate ?? 0,
+ key.endDate ?? 0,
+ page,
+ pageSize,
+ ] as const,
detail: (requestId: string) =>
[...usageKeys.all, "detail", requestId] as const,
pricing: () => [...usageKeys.all, "pricing"] as const,
@@ -25,58 +67,85 @@ const getWindow = (days: number) => {
};
// Hooks
-export function useUsageSummary(days: number) {
+export function useUsageSummary(days: number, options?: UsageQueryOptions) {
return useQuery({
queryKey: usageKeys.summary(days),
queryFn: () => {
const { startDate, endDate } = getWindow(days);
return usageApi.getUsageSummary(startDate, endDate);
},
- refetchInterval: 30000, // 每30秒自动刷新
- refetchIntervalInBackground: false, // 后台不刷新
+ refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
+ refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false, // 后台不刷新
});
}
-export function useUsageTrends(days: number) {
+export function useUsageTrends(days: number, options?: UsageQueryOptions) {
return useQuery({
queryKey: usageKeys.trends(days),
queryFn: () => {
const { startDate, endDate } = getWindow(days);
return usageApi.getUsageTrends(startDate, endDate);
},
- refetchInterval: 30000, // 每30秒自动刷新
- refetchIntervalInBackground: false,
+ refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
+ refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
});
}
-export function useProviderStats() {
+export function useProviderStats(options?: UsageQueryOptions) {
return useQuery({
queryKey: usageKeys.providerStats(),
queryFn: usageApi.getProviderStats,
- refetchInterval: 30000, // 每30秒自动刷新
- refetchIntervalInBackground: false,
+ refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
+ refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
});
}
-export function useModelStats() {
+export function useModelStats(options?: UsageQueryOptions) {
return useQuery({
queryKey: usageKeys.modelStats(),
queryFn: usageApi.getModelStats,
- refetchInterval: 30000, // 每30秒自动刷新
- refetchIntervalInBackground: false,
+ refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
+ refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
});
}
-export function useRequestLogs(
- filters: LogFilters,
- page: number = 0,
- pageSize: number = 20,
-) {
+const getRollingRange = (windowSeconds: number) => {
+ const endDate = Math.floor(Date.now() / 1000);
+ const startDate = endDate - windowSeconds;
+ return { startDate, endDate };
+};
+
+export function useRequestLogs({
+ filters,
+ timeMode,
+ page = 0,
+ pageSize = 20,
+ rollingWindowSeconds = 24 * 60 * 60,
+ options,
+}: RequestLogsQueryArgs) {
+ const key: RequestLogsKey = {
+ timeMode,
+ rollingWindowSeconds:
+ timeMode === "rolling" ? rollingWindowSeconds : undefined,
+ appType: filters.appType,
+ providerName: filters.providerName,
+ model: filters.model,
+ statusCode: filters.statusCode,
+ startDate: timeMode === "fixed" ? filters.startDate : undefined,
+ endDate: timeMode === "fixed" ? filters.endDate : undefined,
+ };
+
return useQuery({
- queryKey: usageKeys.logs(filters, page, pageSize),
- queryFn: () => usageApi.getRequestLogs(filters, page, pageSize),
- refetchInterval: 30000, // 每30秒自动刷新
- refetchIntervalInBackground: false,
+ queryKey: usageKeys.logs(key, page, pageSize),
+ queryFn: () => {
+ const effectiveFilters =
+ timeMode === "rolling"
+ ? { ...filters, ...getRollingRange(rollingWindowSeconds) }
+ : filters;
+ return usageApi.getRequestLogs(effectiveFilters, page, pageSize);
+ },
+ refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
+ refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
});
}