migrate frontend

2026-10-13 18:36:37 +08:00 · 2026-06-18 18:34:20 +08:00
parent 75140fc3bb
commit 48421c12de
113 changed files with 116 additions and 152 deletions
@@ -0,0 +1,93 @@
+'use client';
+
+import {useQuery} from '@tanstack/react-query';
+import {LayoutDashboard, RefreshCw} from 'lucide-react';
+
+import {EmptyStateWithBorder} from '@/components/layout/empty';
+import {ErrorInline} from '@/components/layout/error';
+import {LoadingStateWithBorder} from '@/components/layout/loading';
+import {Button} from '@/components/ui/button';
+import {DashboardService} from '@/lib/services/openflare';
+import {formatDateTime} from '@/lib/utils';
+
+import {CapacityTrendChart} from './components/dashboard/capacity-trend-chart';
+import {GeoDistributionList} from './components/dashboard/geo-distribution-list';
+import {NodeHealthTable} from './components/dashboard/node-health-table';
+import {DashboardStatCards} from './components/dashboard/stat-cards';
+import {TrafficTrendChart} from './components/dashboard/traffic-trend-chart';
+import {getErrorMessage} from './nodes/components/node-utils';
+
+const dashboardQueryKey = ['openflare', 'dashboard', 'overview'];
+
+export default function OpenFlareDashboardPage() {
+  const overviewQuery = useQuery({
+    queryKey: dashboardQueryKey,
+    queryFn: () => DashboardService.getOverview(),
+    refetchInterval: 30_000,
+  });
+
+  const overview = overviewQuery.data;
+
+  return (
+    <div className="py-6 px-1 space-y-6">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <LayoutDashboard className="size-5 text-primary" />
+          <h1 className="text-2xl font-semibold tracking-tight">总览</h1>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {overview?.generated_at ? (
+            <span>数据生成于 {formatDateTime(overview.generated_at)}</span>
+          ) : null}
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8"
+            onClick={() => overviewQuery.refetch()}
+            disabled={overviewQuery.isFetching}
+          >
+            <RefreshCw
+              className={`size-3.5 mr-1.5 ${overviewQuery.isFetching ? 'animate-spin' : ''}`}
+            />
+            刷新
+          </Button>
+        </div>
+      </div>
+
+      {overviewQuery.isLoading ? (
+        <LoadingStateWithBorder
+          title="加载总览数据"
+          description="正在聚合节点健康、流量与容量指标..."
+        />
+      ) : overviewQuery.isError ? (
+        <ErrorInline
+          message={`总览看板加载失败：${getErrorMessage(overviewQuery.error)}`}
+          onRetry={() => overviewQuery.refetch()}
+        />
+      ) : !overview ? (
+        <EmptyStateWithBorder
+          title="暂无总览数据"
+          description="系统已经启动，但还没有可展示的总览聚合结果。"
+        />
+      ) : (
+        <>
+          <DashboardStatCards
+            summary={overview.summary}
+            traffic={overview.traffic}
+            capacity={overview.capacity}
+          />
+
+          <div className="grid gap-6 xl:grid-cols-2">
+            <TrafficTrendChart points={overview.trends.traffic_24h} />
+            <CapacityTrendChart points={overview.trends.capacity_24h} />
+          </div>
+
+          <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+            <NodeHealthTable nodes={overview.nodes} />
+            <GeoDistributionList items={overview.distributions.source_countries} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}