diff --git a/frontend/index.html b/frontend/index.html index c63e583..05c21f9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - One API on Workers - 管理控制台 + One API on Workers
diff --git a/frontend/src/components/analytics/BreakdownChartCard.tsx b/frontend/src/components/analytics/BreakdownChartCard.tsx index dd04c8a..80df34d 100644 --- a/frontend/src/components/analytics/BreakdownChartCard.tsx +++ b/frontend/src/components/analytics/BreakdownChartCard.tsx @@ -44,17 +44,17 @@ export function BreakdownChartCard({ {isLoading ? ( Array.from({ length: 4 }, (_, index) => ( -
-
+
+
)) ) : isError ? ( -
+
排行数据加载失败
) : visibleItems.length === 0 ? ( -
+
当前时间范围暂无维度排行数据
) : ( @@ -94,9 +94,9 @@ export function BreakdownChartCard({
-
+
diff --git a/frontend/src/components/analytics/TrendBarChart.tsx b/frontend/src/components/analytics/TrendBarChart.tsx index 5f1f6ab..1e3eecf 100644 --- a/frontend/src/components/analytics/TrendBarChart.tsx +++ b/frontend/src/components/analytics/TrendBarChart.tsx @@ -1,5 +1,6 @@ import { AnalyticsRange, AnalyticsTrendPoint } from "@/types"; import { formatCurrency } from "@/lib/utils"; +import { Card } from "../ui/card"; const formatAxisLabel = (value: string, range: AnalyticsRange): string => { const date = new Date(value); @@ -10,7 +11,6 @@ const formatAxisLabel = (value: string, range: AnalyticsRange): string => { if (range === "24h") { return date.toLocaleTimeString("zh-CN", { hour: "2-digit", - minute: "2-digit", }); } @@ -28,9 +28,6 @@ const formatCompactNumber = (value: number): string => { }; export function TrendBarChart({ points, range }: { points: AnalyticsTrendPoint[]; range: AnalyticsRange }) { - const totalRequests = points.reduce((sum, point) => sum + point.requests, 0); - const totalFailures = points.reduce((sum, point) => sum + point.failures, 0); - const totalCost = points.reduce((sum, point) => sum + point.totalCost, 0); const peakRequests = Math.max(...points.map((point) => point.requests), 1); const minColumnWidth = range === "90d" ? 28 : range === "30d" ? 34 : range === "24h" ? 42 : 56; const chartMinWidth = Math.max(points.length * minColumnWidth, 720); @@ -45,7 +42,7 @@ export function TrendBarChart({ points, range }: { points: AnalyticsTrendPoint[] return (
-
+
@@ -55,7 +52,7 @@ export function TrendBarChart({ points, range }: { points: AnalyticsTrendPoint[] className="absolute inset-x-0 flex items-center" style={{ top: tick.top }} > - + {formatCompactNumber(Math.round(tick.value))} {/*
*/} @@ -64,7 +61,7 @@ export function TrendBarChart({ points, range }: { points: AnalyticsTrendPoint[]
{points.map((point) => { @@ -73,24 +70,33 @@ export function TrendBarChart({ points, range }: { points: AnalyticsTrendPoint[] return (
-
+
+
+
Requests
+
+ {formatCompactNumber(point.requests)} +
+
Total Cost
+
{formatCurrency(point.totalCost)}
+
+
-
{label}
-
{formatCompactNumber(point.requests)}
-
- {formatCurrency(point.totalCost)} -
+
{label}
); })}
-
+
); } diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index 5c09a8d..2f8a983 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -91,7 +91,7 @@ export function Sidebar({ onClick={() => onNavigate?.()} title={collapsed ? item.title : undefined} className={cn( - "group relative flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium transition-all duration-150", + "group relative flex items-center gap-3 px-3 py-2 rounded-md text-[13px] font-medium transition-all duration-150", collapsed && "justify-center px-0 w-10 h-10 mx-auto", isActive ? "bg-primary text-primary-foreground shadow-sm shadow-primary/20" @@ -128,7 +128,7 @@ export function Sidebar({ ) : ( <>
- One API on Workers + One API on Workers
{onClose && (