mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 08:44:41 +08:00
feat(usage): refine usage dashboard UI and date range picker (#2002)
* feat(usage): enhance usage stats backend and query hooks * feat(usage): redesign calendar date range picker with auto-switch and simplified layout * refactor(usage): streamline dashboard layout and stats components * refactor(usage): compact request log table with merged cache/multiplier columns and centered layout * feat(i18n): add cache short labels and usage stats translations for zh/en/ja * Align usage dashboard stats with range boundaries The usage dashboard mixed second-precision detail rows with day-level rollups, which caused custom half-day ranges to overcount historical rollup data and left the request log paginator on stale pages after top-level filter changes. This change limits rollups to fully covered local days, aligns multi-day trend buckets with natural local days, and resets request log pagination when the dashboard range or app filter changes. Constraint: usage_daily_rollups stores only daily aggregates after pruning old detail rows Rejected: Include partial boundary rollups proportionally | historical intra-day detail is unavailable after pruning Rejected: Force RequestLogTable remount on range change | would discard local draft filters unnecessarily Confidence: high Scope-risk: moderate Reversibility: clean Directive: Keep summary, trends, provider stats, and model stats on the same rollup-boundary rules Tested: cargo test --manifest-path src-tauri/Cargo.toml usage_stats Tested: pnpm exec vitest run tests/components/RequestLogTable.test.tsx Tested: pnpm typecheck Not-tested: Manual UI validation in the Tauri app * Preserve full-day usage filters at minute precision The latest review surfaced two interaction bugs in the usage dashboard: rollup-backed stats undercounted end days selected via the minute-precision picker, and immediate select changes accidentally applied unsubmitted text drafts from the request log filters. This change treats 23:59 as a fully selected local end day for rollup inclusion and narrows select-side state syncing so app/status updates do not commit provider/model drafts. Constraint: The custom range picker emits minute-precision timestamps, while rollups are stored at day granularity Rejected: Require exact 23:59:59 end timestamps | unreachable from the current picker UI Rejected: Rebuild applied filters from the full draft state on select changes | silently commits unsaved text input Confidence: high Scope-risk: narrow Reversibility: clean Directive: Keep request-log text fields on explicit apply semantics even when select filters remain immediate Tested: cargo test --manifest-path src-tauri/Cargo.toml usage_stats Tested: pnpm exec vitest run tests/components/RequestLogTable.test.tsx Tested: pnpm typecheck Not-tested: Manual Tauri dashboard interaction * refactor(usage): move range presets into date picker, single-row layout - UsageDateRangePicker: add preset shortcuts (今天/1d/7d/14d/30d) inside popover top; clicking a preset applies immediately and closes popover - UsageDashboard: collapse to single row (app filters + refresh + picker); remove standalone preset buttons and summary stats bar - RequestLogTable: replace static Calendar badge with interactive UsageDateRangePicker via onRangeChange prop; single filter row * Keep usage pagination regression coverage aligned with the rendered UI The new regression test was asserting a non-existent pagination label and page summary text, so it failed before it could verify the real page-reset behavior. This commit switches the assertions to the numbered pagination buttons that the component actually renders and validates the reset through the query hook arguments. Constraint: RequestLogTable exposes numbered pagination buttons, not a "Next page" label or "2 / 6" summary text Rejected: Add synthetic pagination labels solely for the test | would couple production markup to a test-only assumption Confidence: high Scope-risk: narrow Reversibility: clean Directive: Prefer pagination assertions that follow the rendered controls or hook inputs instead of invented summary text Tested: pnpm vitest run tests/components/RequestLogTable.test.tsx; pnpm typecheck; pnpm test:unit * refactor(usage): clean up dead code and polish date range picker - Remove unused exports MAX_CUSTOM_USAGE_RANGE_SECONDS, timestampToLocalDatetime, and localDatetimeToTimestamp from usageRange.ts (replaced by the calendar picker) - Deduplicate getPresetLabel from UsageDashboard and UsageDateRangePicker into shared getUsageRangePresetLabel helper - Add aria-label, aria-current and aria-pressed to calendar day buttons so screen readers can disambiguate same-numbered days across adjacent months - Drop unused cacheReadShort and cacheWriteShort i18n keys (zh/en/ja); the request log table renders R/W prefixes inline - Align customRangeHint copy with the removed 30-day limit by dropping "up to 30 days" wording (zh/en/ja) * fix(usage): align rollup cutoff to local midnight to keep days complete `rollup_and_prune` previously used `Utc::now() - retain_days * 86400` as the cutoff. Because rollups are bucketed by *local* date and detail rows below the cutoff are pruned, an unaligned cutoff left the youngest rolled-up day half-rolled-up and half-pruned. Combined with the new `compute_rollup_date_bounds` boundary trimming (which excludes any rollup day not fully covered by the requested range), custom range queries that touch that day silently under-count summary, trend, provider, and model stats. Fix the invariant at the source: snap the cutoff to the next local midnight after `(now - retain_days)`. Every rollup row now reflects a complete local day, so the boundary trimmer's all-or-nothing assumption holds. Includes unit tests for the cutoff math (typical case + already-on- midnight case). DST gap is handled defensively by bumping forward by an hour. Addresses Codex P2 review finding on PR #2002. --------- Co-authored-by: Jason <farion1231@gmail.com>
This commit is contained in:
Dex Miller
@@ -9,18 +9,21 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
import { useModelStats } from "@/lib/query/usage";
|
||||
import { fmtUsd } from "./format";
|
||||
import type { UsageRangeSelection } from "@/types/usage";
|
||||
|
||||
interface ModelStatsTableProps {
|
||||
range: UsageRangeSelection;
|
||||
appType?: string;
|
||||
refreshIntervalMs: number;
|
||||
}
|
||||
|
||||
export function ModelStatsTable({
|
||||
range,
|
||||
appType,
|
||||
refreshIntervalMs,
|
||||
}: ModelStatsTableProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: stats, isLoading } = useModelStats(appType, {
|
||||
const { data: stats, isLoading } = useModelStats(range, appType, {
|
||||
refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
|
||||
});
|
||||
|
||||
|
||||
@@ -9,18 +9,21 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
import { useProviderStats } from "@/lib/query/usage";
|
||||
import { fmtUsd } from "./format";
|
||||
import type { UsageRangeSelection } from "@/types/usage";
|
||||
|
||||
interface ProviderStatsTableProps {
|
||||
range: UsageRangeSelection;
|
||||
appType?: string;
|
||||
refreshIntervalMs: number;
|
||||
}
|
||||
|
||||
export function ProviderStatsTable({
|
||||
range,
|
||||
appType,
|
||||
refreshIntervalMs,
|
||||
}: ProviderStatsTableProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: stats, isLoading } = useProviderStats(appType, {
|
||||
const { data: stats, isLoading } = useProviderStats(range, appType, {
|
||||
refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
|
||||
});
|
||||
|
||||
|
||||
@@ -17,10 +17,10 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useRequestLogs, usageKeys } from "@/lib/query/usage";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { LogFilters } from "@/types/usage";
|
||||
import { ChevronLeft, ChevronRight, RefreshCw, Search, X } from "lucide-react";
|
||||
import { useRequestLogs } from "@/lib/query/usage";
|
||||
import type { LogFilters, UsageRangeSelection } from "@/types/usage";
|
||||
import { ChevronLeft, ChevronRight, Search, X } from "lucide-react";
|
||||
import { UsageDateRangePicker } from "./UsageDateRangePicker";
|
||||
import {
|
||||
fmtInt,
|
||||
fmtUsd,
|
||||
@@ -29,53 +29,28 @@ import {
|
||||
} from "./format";
|
||||
|
||||
interface RequestLogTableProps {
|
||||
range: UsageRangeSelection;
|
||||
rangeLabel: string;
|
||||
appType?: string;
|
||||
refreshIntervalMs: number;
|
||||
timeRange?: "1d" | "7d" | "30d";
|
||||
onRangeChange?: (range: UsageRangeSelection) => void;
|
||||
}
|
||||
|
||||
const ONE_DAY_SECONDS = 24 * 60 * 60;
|
||||
const MAX_FIXED_RANGE_SECONDS = 30 * ONE_DAY_SECONDS;
|
||||
|
||||
const TIME_RANGE_SECONDS: Record<string, number> = {
|
||||
"1d": ONE_DAY_SECONDS,
|
||||
"7d": 7 * ONE_DAY_SECONDS,
|
||||
"30d": 30 * ONE_DAY_SECONDS,
|
||||
};
|
||||
|
||||
type TimeMode = "rolling" | "fixed";
|
||||
|
||||
export function RequestLogTable({
|
||||
range,
|
||||
rangeLabel,
|
||||
appType: dashboardAppType,
|
||||
refreshIntervalMs,
|
||||
timeRange = "1d",
|
||||
onRangeChange,
|
||||
}: RequestLogTableProps) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const rollingWindowSeconds = TIME_RANGE_SECONDS[timeRange] ?? ONE_DAY_SECONDS;
|
||||
|
||||
const getRollingRange = () => {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return { startDate: now - rollingWindowSeconds, endDate: now };
|
||||
};
|
||||
|
||||
const [appliedTimeMode, setAppliedTimeMode] = useState<TimeMode>("rolling");
|
||||
const [draftTimeMode, setDraftTimeMode] = useState<TimeMode>("rolling");
|
||||
|
||||
const [appliedFilters, setAppliedFilters] = useState<LogFilters>({});
|
||||
const [draftFilters, setDraftFilters] = useState<LogFilters>({});
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageInput, setPageInput] = useState("");
|
||||
const pageSize = 20;
|
||||
const [validationError, setValidationError] = useState<string | null>(null);
|
||||
|
||||
// Reset page when the dashboard time range changes
|
||||
useEffect(() => {
|
||||
setPage(0);
|
||||
}, [timeRange]);
|
||||
|
||||
// When dashboard-level app filter is active (not "all"), override the local appType filter
|
||||
const dashboardAppTypeActive = dashboardAppType && dashboardAppType !== "all";
|
||||
const effectiveFilters: LogFilters = dashboardAppTypeActive
|
||||
? { ...appliedFilters, appType: dashboardAppType }
|
||||
@@ -83,8 +58,7 @@ export function RequestLogTable({
|
||||
|
||||
const { data: result, isLoading } = useRequestLogs({
|
||||
filters: effectiveFilters,
|
||||
timeMode: appliedTimeMode,
|
||||
rollingWindowSeconds,
|
||||
range,
|
||||
page,
|
||||
pageSize,
|
||||
options: {
|
||||
@@ -96,56 +70,41 @@ export function RequestLogTable({
|
||||
const total = result?.total ?? 0;
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
useEffect(() => {
|
||||
setPage(0);
|
||||
}, [
|
||||
dashboardAppType,
|
||||
range.customEndDate,
|
||||
range.customStartDate,
|
||||
range.preset,
|
||||
]);
|
||||
|
||||
const handleSearch = () => {
|
||||
setValidationError(null);
|
||||
|
||||
if (draftTimeMode === "fixed") {
|
||||
const start = draftFilters.startDate;
|
||||
const end = draftFilters.endDate;
|
||||
|
||||
if (typeof start !== "number" || typeof end !== "number") {
|
||||
setValidationError(
|
||||
t("usage.invalidTimeRange", "请选择完整的开始/结束时间"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (start > end) {
|
||||
setValidationError(
|
||||
t("usage.invalidTimeRangeOrder", "开始时间不能晚于结束时间"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (end - start > MAX_FIXED_RANGE_SECONDS) {
|
||||
setValidationError(
|
||||
t("usage.timeRangeTooLarge", "时间范围过大，请缩小范围"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setAppliedTimeMode(draftTimeMode);
|
||||
setAppliedFilters((prev) => {
|
||||
const next = { ...prev, ...draftFilters };
|
||||
if (draftTimeMode === "rolling") {
|
||||
delete next.startDate;
|
||||
delete next.endDate;
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setAppliedFilters(draftFilters);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setValidationError(null);
|
||||
setAppliedTimeMode("rolling");
|
||||
setDraftTimeMode("rolling");
|
||||
setDraftFilters({});
|
||||
setAppliedFilters({});
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const applySelectFilter = <K extends keyof LogFilters>(
|
||||
key: K,
|
||||
value: LogFilters[K],
|
||||
) => {
|
||||
setDraftFilters((prev) => ({
|
||||
...prev,
|
||||
[key]: value,
|
||||
}));
|
||||
setAppliedFilters((prev) => ({
|
||||
...prev,
|
||||
[key]: value,
|
||||
}));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleGoToPage = () => {
|
||||
const trimmed = pageInput.trim();
|
||||
if (!/^\d+$/.test(trimmed)) return;
|
||||
@@ -155,58 +114,14 @@ export function RequestLogTable({
|
||||
setPageInput("");
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
const key = {
|
||||
timeMode: appliedTimeMode,
|
||||
rollingWindowSeconds:
|
||||
appliedTimeMode === "rolling" ? ONE_DAY_SECONDS : undefined,
|
||||
appType: appliedFilters.appType,
|
||||
providerName: appliedFilters.providerName,
|
||||
model: appliedFilters.model,
|
||||
statusCode: appliedFilters.statusCode,
|
||||
startDate:
|
||||
appliedTimeMode === "fixed" ? appliedFilters.startDate : undefined,
|
||||
endDate: appliedTimeMode === "fixed" ? appliedFilters.endDate : undefined,
|
||||
};
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: usageKeys.logs(key, page, pageSize),
|
||||
});
|
||||
};
|
||||
|
||||
// 将 Unix 时间戳转换为本地时间的 datetime-local 格式
|
||||
const timestampToLocalDatetime = (timestamp: number): string => {
|
||||
const date = new Date(timestamp * 1000);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
// 将 datetime-local 格式转换为 Unix 时间戳
|
||||
const localDatetimeToTimestamp = (datetime: string): number | undefined => {
|
||||
if (!datetime) return undefined;
|
||||
// 验证格式是否完整 (YYYY-MM-DDTHH:mm)
|
||||
if (datetime.length < 16) return undefined;
|
||||
const timestamp = new Date(datetime).getTime();
|
||||
// 验证是否为有效日期
|
||||
if (isNaN(timestamp)) return undefined;
|
||||
return Math.floor(timestamp / 1000);
|
||||
};
|
||||
|
||||
const language = i18n.resolvedLanguage || i18n.language || "en";
|
||||
const locale = getLocaleFromLanguage(language);
|
||||
|
||||
const rollingRangeForDisplay =
|
||||
draftTimeMode === "rolling" ? getRollingRange() : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 筛选栏 */}
|
||||
<div className="flex flex-col gap-4 rounded-lg border bg-card/50 p-4 backdrop-blur-sm">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="rounded-lg border bg-card/50 p-2 backdrop-blur-sm">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{/* App type */}
|
||||
<Select
|
||||
value={
|
||||
dashboardAppTypeActive
|
||||
@@ -214,14 +129,11 @@ export function RequestLogTable({
|
||||
: draftFilters.appType || "all"
|
||||
}
|
||||
onValueChange={(v) =>
|
||||
setDraftFilters({
|
||||
...draftFilters,
|
||||
appType: v === "all" ? undefined : v,
|
||||
})
|
||||
applySelectFilter("appType", v === "all" ? undefined : v)
|
||||
}
|
||||
disabled={!!dashboardAppTypeActive}
|
||||
>
|
||||
<SelectTrigger className="w-[130px] bg-background">
|
||||
<SelectTrigger className="h-8 w-[110px] bg-background text-xs">
|
||||
<SelectValue placeholder={t("usage.appType")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -232,51 +144,57 @@ export function RequestLogTable({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Status code */}
|
||||
<Select
|
||||
value={draftFilters.statusCode?.toString() || "all"}
|
||||
onValueChange={(v) =>
|
||||
setDraftFilters({
|
||||
...draftFilters,
|
||||
statusCode:
|
||||
v === "all"
|
||||
? undefined
|
||||
: Number.isFinite(Number.parseInt(v, 10))
|
||||
? Number.parseInt(v, 10)
|
||||
: undefined,
|
||||
})
|
||||
applySelectFilter(
|
||||
"statusCode",
|
||||
v === "all"
|
||||
? undefined
|
||||
: Number.isFinite(Number.parseInt(v, 10))
|
||||
? Number.parseInt(v, 10)
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-[130px] bg-background">
|
||||
<SelectTrigger className="h-8 w-[100px] bg-background text-xs">
|
||||
<SelectValue placeholder={t("usage.statusCode")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t("common.all")}</SelectItem>
|
||||
<SelectItem value="200">200 OK</SelectItem>
|
||||
<SelectItem value="400">400 Bad Request</SelectItem>
|
||||
<SelectItem value="401">401 Unauthorized</SelectItem>
|
||||
<SelectItem value="429">429 Rate Limit</SelectItem>
|
||||
<SelectItem value="500">500 Server Error</SelectItem>
|
||||
<SelectItem value="400">400</SelectItem>
|
||||
<SelectItem value="401">401</SelectItem>
|
||||
<SelectItem value="429">429</SelectItem>
|
||||
<SelectItem value="500">500</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<div className="flex items-center gap-2 flex-1 min-w-[300px]">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={t("usage.searchProviderPlaceholder")}
|
||||
className="pl-9 bg-background"
|
||||
value={draftFilters.providerName || ""}
|
||||
onChange={(e) =>
|
||||
setDraftFilters({
|
||||
...draftFilters,
|
||||
providerName: e.target.value || undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{/* Provider search */}
|
||||
<div className="relative min-w-[140px] flex-1">
|
||||
<Search className="absolute left-2 top-2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={t("usage.searchProviderPlaceholder")}
|
||||
className="h-8 bg-background pl-7 text-xs"
|
||||
value={draftFilters.providerName || ""}
|
||||
onChange={(e) =>
|
||||
setDraftFilters({
|
||||
...draftFilters,
|
||||
providerName: e.target.value || undefined,
|
||||
})
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleSearch();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Model search */}
|
||||
<div className="relative min-w-[120px] flex-1">
|
||||
<Input
|
||||
placeholder={t("usage.searchModelPlaceholder")}
|
||||
className="w-[180px] bg-background"
|
||||
className="h-8 bg-background text-xs"
|
||||
value={draftFilters.model || ""}
|
||||
onChange={(e) =>
|
||||
setDraftFilters({
|
||||
@@ -284,89 +202,40 @@ export function RequestLogTable({
|
||||
model: e.target.value || undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span className="whitespace-nowrap">{t("usage.timeRange")}:</span>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
className="h-8 w-[200px] bg-background"
|
||||
value={
|
||||
(rollingRangeForDisplay?.startDate ?? draftFilters.startDate)
|
||||
? timestampToLocalDatetime(
|
||||
(rollingRangeForDisplay?.startDate ??
|
||||
draftFilters.startDate) as number,
|
||||
)
|
||||
: ""
|
||||
}
|
||||
onChange={(e) => {
|
||||
const timestamp = localDatetimeToTimestamp(e.target.value);
|
||||
setDraftTimeMode("fixed");
|
||||
setDraftFilters({
|
||||
...draftFilters,
|
||||
startDate: timestamp,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span>-</span>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
className="h-8 w-[200px] bg-background"
|
||||
value={
|
||||
(rollingRangeForDisplay?.endDate ?? draftFilters.endDate)
|
||||
? timestampToLocalDatetime(
|
||||
(rollingRangeForDisplay?.endDate ??
|
||||
draftFilters.endDate) as number,
|
||||
)
|
||||
: ""
|
||||
}
|
||||
onChange={(e) => {
|
||||
const timestamp = localDatetimeToTimestamp(e.target.value);
|
||||
setDraftTimeMode("fixed");
|
||||
setDraftFilters({
|
||||
...draftFilters,
|
||||
endDate: timestamp,
|
||||
});
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleSearch();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
onClick={handleSearch}
|
||||
className="h-8"
|
||||
>
|
||||
<Search className="mr-2 h-3.5 w-3.5" />
|
||||
{t("common.search")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleReset}
|
||||
className="h-8"
|
||||
>
|
||||
<X className="mr-2 h-3.5 w-3.5" />
|
||||
{t("common.reset")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleRefresh}
|
||||
className="h-8 px-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{onRangeChange && (
|
||||
<UsageDateRangePicker
|
||||
selection={range}
|
||||
triggerLabel={rangeLabel}
|
||||
onApply={onRangeChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
{validationError && (
|
||||
<div className="text-sm text-red-600">{validationError}</div>
|
||||
)}
|
||||
{/* Search & Reset (icon-only) */}
|
||||
<Button
|
||||
size="icon"
|
||||
variant="default"
|
||||
onClick={handleSearch}
|
||||
className="h-8 w-8"
|
||||
title={t("common.search")}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={handleReset}
|
||||
className="h-8 w-8"
|
||||
title={t("common.reset")}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
@@ -377,40 +246,31 @@ export function RequestLogTable({
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.time")}
|
||||
</TableHead>
|
||||
<TableHead className="whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.provider")}
|
||||
</TableHead>
|
||||
<TableHead className="min-w-[200px] whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.billingModel")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.inputTokens")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.outputTokens")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right min-w-[90px] whitespace-nowrap">
|
||||
{t("usage.cacheReadTokens")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right min-w-[90px] whitespace-nowrap">
|
||||
{t("usage.cacheCreationTokens")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right whitespace-nowrap">
|
||||
{t("usage.multiplier")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.totalCost")}
|
||||
</TableHead>
|
||||
<TableHead className="text-center min-w-[140px] whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.timingInfo")}
|
||||
</TableHead>
|
||||
<TableHead className="whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.status")}
|
||||
</TableHead>
|
||||
<TableHead className="whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("usage.source", { defaultValue: "Source" })}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
@@ -419,7 +279,7 @@ export function RequestLogTable({
|
||||
{logs.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={12}
|
||||
colSpan={9}
|
||||
className="text-center text-muted-foreground"
|
||||
>
|
||||
{t("usage.noData")}
|
||||
@@ -428,140 +288,96 @@ export function RequestLogTable({
|
||||
) : (
|
||||
logs.map((log) => (
|
||||
<TableRow key={log.requestId}>
|
||||
<TableCell>
|
||||
{new Date(log.createdAt * 1000).toLocaleString(locale)}
|
||||
<TableCell className="text-center whitespace-nowrap text-xs px-1.5">
|
||||
{new Date(log.createdAt * 1000).toLocaleString(locale, {
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="text-center">
|
||||
{log.providerName || t("usage.unknownProvider")}
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-xs max-w-[200px]">
|
||||
<TableCell className="text-center font-mono text-xs max-w-[200px]">
|
||||
<div
|
||||
className="truncate"
|
||||
title={
|
||||
log.requestModel && log.requestModel !== log.model
|
||||
? `${t("usage.requestModel")}: ${log.requestModel}\n${t("usage.responseModel")}: ${log.model}`
|
||||
? `${log.requestModel} → ${log.model}`
|
||||
: log.model
|
||||
}
|
||||
>
|
||||
{log.model}
|
||||
{log.requestModel &&
|
||||
log.requestModel !== log.model ? (
|
||||
<span>
|
||||
{log.requestModel}
|
||||
<span className="text-muted-foreground">
|
||||
{" → "}
|
||||
{log.model}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
log.model
|
||||
)}
|
||||
</div>
|
||||
{log.requestModel && log.requestModel !== log.model && (
|
||||
<div
|
||||
className="truncate text-muted-foreground text-[10px]"
|
||||
title={log.requestModel}
|
||||
>
|
||||
← {log.requestModel}
|
||||
</TableCell>
|
||||
<TableCell className="text-center px-1.5">
|
||||
<div className="tabular-nums">
|
||||
{fmtInt(log.inputTokens, locale)}
|
||||
</div>
|
||||
{(log.cacheReadTokens > 0 ||
|
||||
log.cacheCreationTokens > 0) && (
|
||||
<div className="text-[10px] text-muted-foreground whitespace-nowrap">
|
||||
{[
|
||||
log.cacheReadTokens > 0 &&
|
||||
`R${fmtInt(log.cacheReadTokens, locale)}`,
|
||||
log.cacheCreationTokens > 0 &&
|
||||
`W${fmtInt(log.cacheCreationTokens, locale)}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join("·")}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{fmtInt(log.inputTokens, locale)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="text-center">
|
||||
{fmtInt(log.outputTokens, locale)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{fmtInt(log.cacheReadTokens, locale)}
|
||||
<TableCell className="text-center px-1.5">
|
||||
<div className="font-medium tabular-nums">
|
||||
{fmtUsd(log.totalCostUsd, 4)}
|
||||
</div>
|
||||
{parseFiniteNumber(log.costMultiplier) != null &&
|
||||
parseFiniteNumber(log.costMultiplier) !== 1 && (
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
×
|
||||
{parseFiniteNumber(log.costMultiplier)?.toFixed(
|
||||
2,
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{fmtInt(log.cacheCreationTokens, locale)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-mono text-xs">
|
||||
{(parseFiniteNumber(log.costMultiplier) ?? 1) !== 1 ? (
|
||||
<span className="text-orange-600">
|
||||
×{log.costMultiplier}
|
||||
<TableCell className="text-center whitespace-nowrap text-xs tabular-nums">
|
||||
{(log.latencyMs / 1000).toFixed(1)}s
|
||||
{log.firstTokenMs != null && (
|
||||
<span className="text-muted-foreground">
|
||||
/{(log.firstTokenMs / 1000).toFixed(1)}s
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">×1</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{fmtUsd(log.totalCostUsd, 6)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
{(() => {
|
||||
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-gray-100 text-gray-700";
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${durationColor}`}
|
||||
>
|
||||
{Number.isFinite(durationSec)
|
||||
? `${Math.round(durationSec)}s`
|
||||
: "--"}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
{log.isStreaming &&
|
||||
log.firstTokenMs != null &&
|
||||
(() => {
|
||||
const firstSec = log.firstTokenMs / 1000;
|
||||
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-gray-100 text-gray-700";
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${firstColor}`}
|
||||
>
|
||||
{Number.isFinite(firstSec)
|
||||
? `${firstSec.toFixed(1)}s`
|
||||
: "--"}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
<span
|
||||
className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${
|
||||
log.isStreaming
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-purple-100 text-purple-800"
|
||||
}`}
|
||||
>
|
||||
{log.isStreaming
|
||||
? t("usage.stream")
|
||||
: t("usage.nonStream")}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span
|
||||
className={`inline-flex rounded-full px-2 py-1 text-xs ${
|
||||
className={
|
||||
log.statusCode >= 200 && log.statusCode < 300
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
? "text-green-600"
|
||||
: "text-red-600"
|
||||
}
|
||||
>
|
||||
{log.statusCode}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{log.dataSource && log.dataSource !== "proxy" ? (
|
||||
<span className="inline-flex rounded-full px-2 py-0.5 text-[10px] bg-indigo-100 text-indigo-800">
|
||||
{t(`usage.dataSource.${log.dataSource}`, {
|
||||
defaultValue: log.dataSource,
|
||||
})}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex rounded-full px-2 py-0.5 text-[10px] bg-gray-100 text-gray-600">
|
||||
{t("usage.dataSource.proxy", {
|
||||
defaultValue: "Proxy",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
<TableCell className="text-center text-xs text-muted-foreground">
|
||||
{log.dataSource || "proxy"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -570,89 +386,83 @@ export function RequestLogTable({
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 分页控件 */}
|
||||
{total > 0 && (
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("usage.totalRecords", { total })}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage(Math.max(0, page - 1))}
|
||||
disabled={page === 0}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
{(() => {
|
||||
const pages: (number | string)[] = [];
|
||||
// 3 head + 3 tail + 3 neighborhood = 9 max distinct pages
|
||||
if (totalPages <= 9) {
|
||||
for (let i = 0; i < totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
const pageSet = new Set<number>();
|
||||
for (let i = 0; i < 3; i++) pageSet.add(i);
|
||||
for (let i = totalPages - 3; i < totalPages; i++)
|
||||
pageSet.add(i);
|
||||
for (
|
||||
let i = Math.max(0, page - 1);
|
||||
i <= Math.min(totalPages - 1, page + 1);
|
||||
i++
|
||||
)
|
||||
pageSet.add(i);
|
||||
const sorted = Array.from(pageSet).sort((a, b) => a - b);
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
|
||||
pages.push(`ellipsis-${i}`);
|
||||
}
|
||||
pages.push(sorted[i]);
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>{t("usage.totalRecords", { total })}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={page === 0}
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
{(() => {
|
||||
const pages: (number | string)[] = [];
|
||||
if (totalPages <= 9) {
|
||||
for (let i = 0; i < totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
const pageSet = new Set<number>();
|
||||
for (let i = 0; i < 3; i++) pageSet.add(i);
|
||||
for (let i = totalPages - 3; i < totalPages; i++)
|
||||
pageSet.add(i);
|
||||
for (
|
||||
let i = Math.max(0, page - 1);
|
||||
i <= Math.min(totalPages - 1, page + 1);
|
||||
i++
|
||||
)
|
||||
pageSet.add(i);
|
||||
const sorted = Array.from(pageSet).sort((a, b) => a - b);
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
|
||||
pages.push(`ellipsis-${i}`);
|
||||
}
|
||||
pages.push(sorted[i]);
|
||||
}
|
||||
return pages.map((p) =>
|
||||
typeof p === "string" ? (
|
||||
<span key={p} className="px-2 text-muted-foreground">
|
||||
...
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
key={p}
|
||||
variant={p === page ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={() => setPage(p)}
|
||||
>
|
||||
{p + 1}
|
||||
</Button>
|
||||
),
|
||||
);
|
||||
})()}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage(page + 1)}
|
||||
disabled={page >= totalPages - 1}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
}
|
||||
return pages.map((p) =>
|
||||
typeof p === "string" ? (
|
||||
<span key={p} className="px-2 text-muted-foreground">
|
||||
...
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
key={p}
|
||||
variant={p === page ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={() => setPage(p)}
|
||||
>
|
||||
{p + 1}
|
||||
</Button>
|
||||
),
|
||||
);
|
||||
})()}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={page >= totalPages - 1}
|
||||
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-1 ml-2">
|
||||
<Input
|
||||
type="text"
|
||||
value={pageInput}
|
||||
onChange={(e) => setPageInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleGoToPage();
|
||||
}}
|
||||
placeholder={t("usage.pageInputPlaceholder")}
|
||||
className="h-8 w-16 text-center text-xs"
|
||||
/>
|
||||
<Button variant="outline" size="sm" onClick={handleGoToPage}>
|
||||
{t("usage.goToPage")}
|
||||
</Button>
|
||||
<div className="flex items-center gap-1 ml-2">
|
||||
<Input
|
||||
type="text"
|
||||
value={pageInput}
|
||||
onChange={(e) => setPageInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleGoToPage();
|
||||
}}
|
||||
placeholder={t("usage.pageInputPlaceholder")}
|
||||
className="h-8 w-16 text-center text-xs"
|
||||
/>
|
||||
<Button variant="outline" size="sm" onClick={handleGoToPage}>
|
||||
{t("usage.goToPage")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { UsageSummaryCards } from "./UsageSummaryCards";
|
||||
import { UsageTrendChart } from "./UsageTrendChart";
|
||||
import { RequestLogTable } from "./RequestLogTable";
|
||||
import { ProviderStatsTable } from "./ProviderStatsTable";
|
||||
import { ModelStatsTable } from "./ModelStatsTable";
|
||||
import type { AppTypeFilter, TimeRange } from "@/types/usage";
|
||||
import type { AppTypeFilter, UsageRangeSelection } from "@/types/usage";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
BarChart3,
|
||||
@@ -26,6 +25,10 @@ import {
|
||||
} from "@/components/ui/accordion";
|
||||
import { PricingConfigPanel } from "@/components/usage/PricingConfigPanel";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getLocaleFromLanguage } from "./format";
|
||||
import { getUsageRangePresetLabel, resolveUsageRange } from "@/lib/usageRange";
|
||||
import { UsageDateRangePicker } from "./UsageDateRangePicker";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const APP_FILTER_OPTIONS: AppTypeFilter[] = [
|
||||
"all",
|
||||
@@ -35,9 +38,9 @@ const APP_FILTER_OPTIONS: AppTypeFilter[] = [
|
||||
];
|
||||
|
||||
export function UsageDashboard() {
|
||||
const { t } = useTranslation();
|
||||
const { t, i18n } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [timeRange, setTimeRange] = useState<TimeRange>("1d");
|
||||
const [range, setRange] = useState<UsageRangeSelection>({ preset: "today" });
|
||||
const [appType, setAppType] = useState<AppTypeFilter>("all");
|
||||
const [refreshIntervalMs, setRefreshIntervalMs] = useState(30000);
|
||||
|
||||
@@ -46,14 +49,25 @@ export function UsageDashboard() {
|
||||
const currentIndex = refreshIntervalOptionsMs.indexOf(
|
||||
refreshIntervalMs as (typeof refreshIntervalOptionsMs)[number],
|
||||
);
|
||||
const safeIndex = currentIndex >= 0 ? currentIndex : 3; // default 30s
|
||||
const safeIndex = currentIndex >= 0 ? currentIndex : 3;
|
||||
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;
|
||||
const language = i18n.resolvedLanguage || i18n.language || "en";
|
||||
const locale = getLocaleFromLanguage(language);
|
||||
const resolvedRange = useMemo(() => resolveUsageRange(range), [range]);
|
||||
const rangeLabel = useMemo(() => {
|
||||
if (range.preset !== "custom") {
|
||||
return getUsageRangePresetLabel(range.preset, t);
|
||||
}
|
||||
|
||||
return `${new Date(resolvedRange.startDate * 1000).toLocaleString(locale)} - ${new Date(
|
||||
resolvedRange.endDate * 1000,
|
||||
).toLocaleString(locale)}`;
|
||||
}, [locale, range, resolvedRange.endDate, resolvedRange.startDate, t]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -62,82 +76,66 @@ export function UsageDashboard() {
|
||||
transition={{ duration: 0.4 }}
|
||||
className="space-y-8 pb-8"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h2 className="text-2xl font-bold">{t("usage.title")}</h2>
|
||||
<p className="text-sm text-muted-foreground">{t("usage.subtitle")}</p>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h2 className="text-2xl font-bold">{t("usage.title")}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("usage.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
value={timeRange}
|
||||
onValueChange={(v) => setTimeRange(v as TimeRange)}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<div className="flex w-full sm:w-auto items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-10 px-2 text-xs text-muted-foreground"
|
||||
title={t("common.refresh", "刷新")}
|
||||
onClick={changeRefreshInterval}
|
||||
>
|
||||
<RefreshCw className="mr-1 h-3.5 w-3.5" />
|
||||
{refreshIntervalMs > 0 ? `${refreshIntervalMs / 1000}s` : "--"}
|
||||
</Button>
|
||||
<TabsList className="flex w-full sm:w-auto bg-card/60 border border-border/50 backdrop-blur-sm shadow-sm h-10 p-1">
|
||||
<TabsTrigger
|
||||
value="1d"
|
||||
className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
|
||||
<div className="rounded-xl border border-border/50 bg-card/40 backdrop-blur-sm p-4">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{APP_FILTER_OPTIONS.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => setAppType(type)}
|
||||
className={cn(
|
||||
"px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
|
||||
appType === type
|
||||
? "bg-primary/10 text-primary shadow-sm border border-primary/20"
|
||||
: "text-muted-foreground hover:text-primary hover:bg-muted/50 border border-transparent",
|
||||
)}
|
||||
>
|
||||
{t("usage.today")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="7d"
|
||||
className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
|
||||
>
|
||||
{t("usage.last7days")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="30d"
|
||||
className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
|
||||
>
|
||||
{t("usage.last30days")}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
{t(`usage.appFilter.${type}`)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* App type filter bar (replaces DataSourceBar) */}
|
||||
<div className="rounded-xl border border-border/50 bg-card/40 backdrop-blur-sm p-4 space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{APP_FILTER_OPTIONS.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => setAppType(type)}
|
||||
className={cn(
|
||||
"px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
|
||||
appType === type
|
||||
? "bg-primary/10 text-primary shadow-sm border border-primary/20"
|
||||
: "text-muted-foreground hover:text-primary hover:bg-muted/50 border border-transparent",
|
||||
)}
|
||||
>
|
||||
{t(`usage.appFilter.${type}`)}
|
||||
</button>
|
||||
))}
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 px-2 text-xs text-muted-foreground"
|
||||
title={t("common.refresh", "刷新")}
|
||||
onClick={changeRefreshInterval}
|
||||
>
|
||||
<RefreshCw className="mr-1 h-3.5 w-3.5" />
|
||||
{refreshIntervalMs > 0 ? `${refreshIntervalMs / 1000}s` : "--"}
|
||||
</Button>
|
||||
|
||||
<UsageDateRangePicker
|
||||
selection={range}
|
||||
triggerLabel={rangeLabel}
|
||||
onApply={(nextRange) => setRange(nextRange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UsageSummaryCards
|
||||
days={days}
|
||||
range={range}
|
||||
appType={appType}
|
||||
refreshIntervalMs={refreshIntervalMs}
|
||||
/>
|
||||
|
||||
<UsageTrendChart
|
||||
days={days}
|
||||
range={range}
|
||||
rangeLabel={rangeLabel}
|
||||
appType={appType}
|
||||
refreshIntervalMs={refreshIntervalMs}
|
||||
/>
|
||||
@@ -168,14 +166,17 @@ export function UsageDashboard() {
|
||||
>
|
||||
<TabsContent value="logs" className="mt-0">
|
||||
<RequestLogTable
|
||||
range={range}
|
||||
rangeLabel={rangeLabel}
|
||||
appType={appType}
|
||||
refreshIntervalMs={refreshIntervalMs}
|
||||
timeRange={timeRange}
|
||||
onRangeChange={setRange}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="providers" className="mt-0">
|
||||
<ProviderStatsTable
|
||||
range={range}
|
||||
appType={appType}
|
||||
refreshIntervalMs={refreshIntervalMs}
|
||||
/>
|
||||
@@ -183,6 +184,7 @@ export function UsageDashboard() {
|
||||
|
||||
<TabsContent value="models" className="mt-0">
|
||||
<ModelStatsTable
|
||||
range={range}
|
||||
appType={appType}
|
||||
refreshIntervalMs={refreshIntervalMs}
|
||||
/>
|
||||
@@ -191,7 +193,6 @@ export function UsageDashboard() {
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Pricing Configuration */}
|
||||
<Accordion type="multiple" defaultValue={[]} className="w-full space-y-4">
|
||||
<AccordionItem
|
||||
value="pricing"
|
||||
|
||||
@@ -0,0 +1,439 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getUsageRangePresetLabel, resolveUsageRange } from "@/lib/usageRange";
|
||||
import { getLocaleFromLanguage } from "./format";
|
||||
import type { UsageRangePreset, UsageRangeSelection } from "@/types/usage";
|
||||
|
||||
type DraftField = "start" | "end";
|
||||
|
||||
const PRESETS: UsageRangePreset[] = ["today", "1d", "7d", "14d", "30d"];
|
||||
|
||||
interface UsageDateRangePickerProps {
|
||||
selection: UsageRangeSelection;
|
||||
onApply: (selection: UsageRangeSelection) => void;
|
||||
triggerLabel: string;
|
||||
}
|
||||
|
||||
/* ── helpers ── */
|
||||
|
||||
function startOfDay(d: Date): Date {
|
||||
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
||||
}
|
||||
|
||||
function isSameDay(a: Date, b: Date): boolean {
|
||||
return (
|
||||
a.getFullYear() === b.getFullYear() &&
|
||||
a.getMonth() === b.getMonth() &&
|
||||
a.getDate() === b.getDate()
|
||||
);
|
||||
}
|
||||
|
||||
function toTs(d: Date): number {
|
||||
return Math.floor(d.getTime() / 1000);
|
||||
}
|
||||
|
||||
function fromTs(ts: number): Date {
|
||||
return new Date(ts * 1000);
|
||||
}
|
||||
|
||||
function fmtDate(ts: number): string {
|
||||
const d = fromTs(ts);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function fmtTime(ts: number): string {
|
||||
const d = fromTs(ts);
|
||||
return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function parseDateInput(ts: number, value: string): number {
|
||||
const [y, m, d] = value.split("-").map(Number);
|
||||
if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d))
|
||||
return ts;
|
||||
const base = fromTs(ts);
|
||||
return toTs(new Date(y, m - 1, d, base.getHours(), base.getMinutes()));
|
||||
}
|
||||
|
||||
function parseTimeInput(ts: number, value: string): number {
|
||||
const [h, min] = value.split(":").map(Number);
|
||||
if (!Number.isFinite(h) || !Number.isFinite(min)) return ts;
|
||||
const base = fromTs(ts);
|
||||
return toTs(
|
||||
new Date(base.getFullYear(), base.getMonth(), base.getDate(), h, min),
|
||||
);
|
||||
}
|
||||
|
||||
function setDateKeepTime(ts: number, day: Date): number {
|
||||
const base = fromTs(ts);
|
||||
return toTs(
|
||||
new Date(
|
||||
day.getFullYear(),
|
||||
day.getMonth(),
|
||||
day.getDate(),
|
||||
base.getHours(),
|
||||
base.getMinutes(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
function getCalendarDays(month: Date): Date[] {
|
||||
const first = new Date(month.getFullYear(), month.getMonth(), 1);
|
||||
const gridStart = new Date(first);
|
||||
gridStart.setDate(first.getDate() - first.getDay());
|
||||
return Array.from({ length: 42 }, (_, i) => {
|
||||
const d = new Date(gridStart);
|
||||
d.setDate(gridStart.getDate() + i);
|
||||
return d;
|
||||
});
|
||||
}
|
||||
|
||||
/* ── component ── */
|
||||
|
||||
export function UsageDateRangePicker({
|
||||
selection,
|
||||
onApply,
|
||||
triggerLabel,
|
||||
}: UsageDateRangePickerProps) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeField, setActiveField] = useState<DraftField>("start");
|
||||
const resolvedRange = useMemo(
|
||||
() => resolveUsageRange(selection),
|
||||
[selection],
|
||||
);
|
||||
const [draftStart, setDraftStart] = useState(resolvedRange.startDate);
|
||||
const [draftEnd, setDraftEnd] = useState(resolvedRange.endDate);
|
||||
const [displayMonth, setDisplayMonth] = useState(
|
||||
() =>
|
||||
new Date(
|
||||
fromTs(resolvedRange.startDate).getFullYear(),
|
||||
fromTs(resolvedRange.startDate).getMonth(),
|
||||
1,
|
||||
),
|
||||
);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const language = i18n.resolvedLanguage || i18n.language || "en";
|
||||
const locale = getLocaleFromLanguage(language);
|
||||
|
||||
// Reset draft when popover opens
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const r = resolveUsageRange(selection);
|
||||
setDraftStart(r.startDate);
|
||||
setDraftEnd(r.endDate);
|
||||
setDisplayMonth(
|
||||
new Date(
|
||||
fromTs(r.startDate).getFullYear(),
|
||||
fromTs(r.startDate).getMonth(),
|
||||
1,
|
||||
),
|
||||
);
|
||||
setActiveField("start");
|
||||
setError(null);
|
||||
}, [open, selection]);
|
||||
|
||||
const calendarDays = useMemo(
|
||||
() => getCalendarDays(displayMonth),
|
||||
[displayMonth],
|
||||
);
|
||||
|
||||
const weekdayLabels = useMemo(
|
||||
() =>
|
||||
Array.from({ length: 7 }, (_, i) =>
|
||||
new Intl.DateTimeFormat(locale, { weekday: "narrow" }).format(
|
||||
new Date(2024, 0, 7 + i),
|
||||
),
|
||||
),
|
||||
[locale],
|
||||
);
|
||||
|
||||
const startDay = fromTs(draftStart);
|
||||
const endDay = fromTs(draftEnd);
|
||||
const today = new Date();
|
||||
|
||||
/* Pick a date from the calendar */
|
||||
const handleDatePick = (day: Date) => {
|
||||
setError(null);
|
||||
const nextTs = setDateKeepTime(
|
||||
activeField === "start" ? draftStart : draftEnd,
|
||||
day,
|
||||
);
|
||||
|
||||
if (activeField === "start") {
|
||||
setDraftStart(nextTs);
|
||||
// Auto-swap if start > end
|
||||
if (nextTs > draftEnd) {
|
||||
setDraftEnd(nextTs);
|
||||
}
|
||||
// Auto-advance to end field
|
||||
setActiveField("end");
|
||||
} else {
|
||||
// If picked end < start, treat as new start and auto-advance
|
||||
if (nextTs < draftStart) {
|
||||
setDraftStart(nextTs);
|
||||
setActiveField("end");
|
||||
} else {
|
||||
setDraftEnd(nextTs);
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate calendar if the day is outside the displayed month
|
||||
if (
|
||||
day.getMonth() !== displayMonth.getMonth() ||
|
||||
day.getFullYear() !== displayMonth.getFullYear()
|
||||
) {
|
||||
setDisplayMonth(new Date(day.getFullYear(), day.getMonth(), 1));
|
||||
}
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
setError(null);
|
||||
if (draftStart > draftEnd) {
|
||||
setError(t("usage.invalidTimeRangeOrder", "开始时间不能晚于结束时间"));
|
||||
return;
|
||||
}
|
||||
onApply({
|
||||
preset: "custom",
|
||||
customStartDate: draftStart,
|
||||
customEndDate: draftEnd,
|
||||
});
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const goToToday = () => {
|
||||
setDisplayMonth(new Date(today.getFullYear(), today.getMonth(), 1));
|
||||
};
|
||||
|
||||
/* ── Field card (start / end) ── */
|
||||
const renderField = (field: DraftField) => {
|
||||
const isActive = activeField === field;
|
||||
const ts = field === "start" ? draftStart : draftEnd;
|
||||
const setTs = field === "start" ? setDraftStart : setDraftEnd;
|
||||
const label =
|
||||
field === "start"
|
||||
? t("usage.startTime", "开始时间")
|
||||
: t("usage.endTime", "结束时间");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border px-3 py-2 cursor-pointer transition-all",
|
||||
isActive
|
||||
? "border-primary ring-1 ring-primary/30 bg-primary/5"
|
||||
: "border-border/50 hover:border-border",
|
||||
)}
|
||||
onClick={() => setActiveField(field)}
|
||||
>
|
||||
<div className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Input
|
||||
type="date"
|
||||
className="h-7 flex-1 border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
|
||||
value={fmtDate(ts)}
|
||||
onChange={(e) => {
|
||||
const next = parseDateInput(ts, e.target.value);
|
||||
setTs(next);
|
||||
const d = fromTs(next);
|
||||
setDisplayMonth(new Date(d.getFullYear(), d.getMonth(), 1));
|
||||
setError(null);
|
||||
}}
|
||||
onFocus={() => setActiveField(field)}
|
||||
/>
|
||||
<Input
|
||||
type="time"
|
||||
step={60}
|
||||
className="h-7 w-[90px] flex-none border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
|
||||
value={fmtTime(ts)}
|
||||
onChange={(e) => {
|
||||
setTs(parseTimeInput(ts, e.target.value));
|
||||
setError(null);
|
||||
}}
|
||||
onFocus={() => setActiveField(field)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={selection.preset === "custom" ? "default" : "outline"}
|
||||
className="justify-start gap-2"
|
||||
>
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
<span className="truncate">{triggerLabel}</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[340px] max-w-[calc(100vw-2rem)] p-3 sm:w-[620px]"
|
||||
align="end"
|
||||
>
|
||||
{/* Preset shortcuts */}
|
||||
<div className="flex flex-wrap gap-1.5 pb-2 border-b border-border/40">
|
||||
{PRESETS.map((preset) => (
|
||||
<Button
|
||||
key={preset}
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={selection.preset === preset ? "default" : "outline"}
|
||||
className="h-7 px-2.5 text-xs"
|
||||
onClick={() => {
|
||||
onApply({ preset });
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{getUsageRangePresetLabel(preset, t)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
{/* Left: date fields */}
|
||||
<div className="space-y-2 sm:w-[250px] sm:flex-none">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("usage.customRangeHint", "支持日期与时间，最长 30 天")}
|
||||
</p>
|
||||
{renderField("start")}
|
||||
{renderField("end")}
|
||||
|
||||
{error && <p className="text-xs text-destructive">{error}</p>}
|
||||
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={handleApply}
|
||||
>
|
||||
{t("common.confirm")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: calendar */}
|
||||
<div className="rounded-lg border border-border/50 bg-muted/30 p-2.5 sm:min-w-0 sm:flex-1">
|
||||
{/* Month navigation */}
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7"
|
||||
onClick={() =>
|
||||
setDisplayMonth(
|
||||
new Date(
|
||||
displayMonth.getFullYear(),
|
||||
displayMonth.getMonth() - 1,
|
||||
1,
|
||||
),
|
||||
)
|
||||
}
|
||||
>
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-medium hover:text-primary transition-colors"
|
||||
onClick={goToToday}
|
||||
title={t("usage.presetToday", { defaultValue: "当天" })}
|
||||
>
|
||||
{displayMonth.toLocaleDateString(locale, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
})}
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7"
|
||||
onClick={() =>
|
||||
setDisplayMonth(
|
||||
new Date(
|
||||
displayMonth.getFullYear(),
|
||||
displayMonth.getMonth() + 1,
|
||||
1,
|
||||
),
|
||||
)
|
||||
}
|
||||
>
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Weekday headers */}
|
||||
<div className="grid grid-cols-7 text-center text-[11px] text-muted-foreground mb-0.5">
|
||||
{weekdayLabels.map((label, i) => (
|
||||
<div key={i} className="py-0.5">
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Day grid */}
|
||||
<div className="grid grid-cols-7 gap-px">
|
||||
{calendarDays.map((day) => {
|
||||
const isCurrentMonth =
|
||||
day.getMonth() === displayMonth.getMonth();
|
||||
const isToday = isSameDay(day, today);
|
||||
const isStart = isSameDay(day, startDay);
|
||||
const isEnd = isSameDay(day, endDay);
|
||||
const dayStart = startOfDay(day);
|
||||
const inRange =
|
||||
dayStart >= startOfDay(startDay) &&
|
||||
dayStart <= startOfDay(endDay);
|
||||
const isEndpoint = isStart || isEnd;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={day.toISOString()}
|
||||
type="button"
|
||||
aria-label={day.toLocaleDateString(locale)}
|
||||
aria-current={isToday ? "date" : undefined}
|
||||
aria-pressed={isEndpoint}
|
||||
className={cn(
|
||||
"relative h-7 rounded text-xs transition-colors",
|
||||
!isCurrentMonth && "text-muted-foreground/30",
|
||||
isCurrentMonth && !inRange && "hover:bg-muted",
|
||||
inRange && !isEndpoint && "bg-primary/10 text-primary",
|
||||
isEndpoint &&
|
||||
"bg-primary text-primary-foreground font-medium",
|
||||
isToday && !isEndpoint && "ring-1 ring-primary/40",
|
||||
)}
|
||||
onClick={() => handleDatePick(day)}
|
||||
>
|
||||
{day.getDate()}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -5,21 +5,22 @@ 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";
|
||||
import type { UsageRangeSelection } from "@/types/usage";
|
||||
|
||||
interface UsageSummaryCardsProps {
|
||||
days: number;
|
||||
range: UsageRangeSelection;
|
||||
appType?: string;
|
||||
refreshIntervalMs: number;
|
||||
}
|
||||
|
||||
export function UsageSummaryCards({
|
||||
days,
|
||||
range,
|
||||
appType,
|
||||
refreshIntervalMs,
|
||||
}: UsageSummaryCardsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data: summary, isLoading } = useUsageSummary(days, appType, {
|
||||
const { data: summary, isLoading } = useUsageSummary(range, appType, {
|
||||
refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
|
||||
});
|
||||
|
||||
|
||||
@@ -17,20 +17,25 @@ import {
|
||||
getLocaleFromLanguage,
|
||||
parseFiniteNumber,
|
||||
} from "./format";
|
||||
import { resolveUsageRange } from "@/lib/usageRange";
|
||||
import type { UsageRangeSelection } from "@/types/usage";
|
||||
|
||||
interface UsageTrendChartProps {
|
||||
days: number;
|
||||
range: UsageRangeSelection;
|
||||
rangeLabel: string;
|
||||
appType?: string;
|
||||
refreshIntervalMs: number;
|
||||
}
|
||||
|
||||
export function UsageTrendChart({
|
||||
days,
|
||||
range,
|
||||
rangeLabel,
|
||||
appType,
|
||||
refreshIntervalMs,
|
||||
}: UsageTrendChartProps) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { data: trends, isLoading } = useUsageTrends(days, appType, {
|
||||
const { startDate, endDate } = resolveUsageRange(range);
|
||||
const { data: trends, isLoading } = useUsageTrends(range, appType, {
|
||||
refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
|
||||
});
|
||||
|
||||
@@ -42,7 +47,8 @@ export function UsageTrendChart({
|
||||
);
|
||||
}
|
||||
|
||||
const isToday = days === 1;
|
||||
const durationSeconds = Math.max(endDate - startDate, 0);
|
||||
const isHourly = durationSeconds <= 24 * 60 * 60;
|
||||
const language = i18n.resolvedLanguage || i18n.language || "en";
|
||||
const dateLocale = getLocaleFromLanguage(language);
|
||||
const chartData =
|
||||
@@ -51,7 +57,7 @@ export function UsageTrendChart({
|
||||
const cost = parseFiniteNumber(stat.totalCost);
|
||||
return {
|
||||
rawDate: stat.date,
|
||||
label: isToday
|
||||
label: isHourly
|
||||
? pointDate.toLocaleString(dateLocale, {
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
@@ -108,13 +114,7 @@ export function UsageTrendChart({
|
||||
<h3 className="text-lg font-semibold">
|
||||
{t("usage.trends", "使用趋势")}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{isToday
|
||||
? t("usage.rangeToday", "今天 (按小时)")
|
||||
: days === 7
|
||||
? t("usage.rangeLast7Days", "过去 7 天")
|
||||
: t("usage.rangeLast30Days", "过去 30 天")}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{rangeLabel}</p>
|
||||
</div>
|
||||
|
||||
<div className="h-[350px] w-full">
|
||||
|
||||
Reference in New Issue
Block a user