From 822b2fad4c33680ab877c246c8be4133acd532f6 Mon Sep 17 00:00:00 2001 From: Jeff Gu Date: Sat, 11 Apr 2026 21:27:37 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=BB=9F=E4=B8=80=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=9C=86=E8=A7=92=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E6=A0=87=E9=A2=98=E5=92=8C=E6=8C=89=E9=92=AE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 2 +- .../analytics/BreakdownChartCard.tsx | 12 +++---- .../components/analytics/TrendBarChart.tsx | 36 +++++++++++-------- frontend/src/components/layout/Sidebar.tsx | 10 +++--- frontend/src/components/ui/alert.tsx | 2 +- frontend/src/components/ui/autocomplete.tsx | 2 +- frontend/src/components/ui/button.tsx | 6 ++-- frontend/src/components/ui/card.tsx | 2 +- frontend/src/components/ui/dialog.tsx | 4 +-- frontend/src/components/ui/input.tsx | 2 +- frontend/src/components/ui/select.tsx | 4 +-- frontend/src/components/ui/textarea.tsx | 2 +- frontend/src/index.css | 2 +- frontend/src/pages/Analytics.tsx | 34 ++++++++---------- frontend/src/pages/Dashboard.tsx | 2 +- wrangler.jsonc | 2 +- 16 files changed, 63 insertions(+), 61 deletions(-) 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 && (