fix(access-logs): 修复状态码自定义

frontend/app/(main)/page.tsx

@@ -1,112 +1,112 @@
 'use client';
 
-import {useQuery} from '@tanstack/react-query';
-import {LayoutDashboard, RefreshCw} from 'lucide-react';
+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 { 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 {
-    SourceDistributionChart,
-    StatusCodeDistributionChart,
-    TopDomainChart,
+  SourceDistributionChart,
+  StatusCodeDistributionChart,
+  TopDomainChart,
 } from './components/dashboard/distribution-rank-charts';
-import {NodeHealthTable} from './components/dashboard/node-health-table';
-import {TrafficCapacityTrendChart} from './components/dashboard/traffic-capacity-trend-chart';
-import {TrafficTrendChart} from './components/dashboard/traffic-trend-chart';
-import {WorldStage} from './components/dashboard/world-stage';
-import {getErrorMessage} from './nodes/components/node-utils';
+import { NodeHealthTable } from './components/dashboard/node-health-table';
+import { TrafficCapacityTrendChart } from './components/dashboard/traffic-capacity-trend-chart';
+import { TrafficTrendChart } from './components/dashboard/traffic-trend-chart';
+import { WorldStage } from './components/dashboard/world-stage';
+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: 60_000,
-    });
+  const overviewQuery = useQuery({
+    queryKey: dashboardQueryKey,
+    queryFn: () => DashboardService.getOverview(),
+    refetchInterval: 60_000,
+  });
 
-    const overview = overviewQuery.data;
+  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='系统已经启动，但还没有可展示的总览聚合结果。'
-                />
-            ) : (
-                <>
-                    <WorldStage
-                        summary={overview.summary}
-                        traffic={overview.traffic}
-                        capacity={overview.capacity}
-                        nodes={overview.nodes}
-                        sourceCountries={overview.distributions.source_countries}
-                    />
-
-                    <div className='grid gap-6'>
-                        <TrafficTrendChart points={overview.trends.traffic_24h}/>
-                    </div>
-
-                    <div className='grid gap-6 xl:grid-cols-3'>
-                        <SourceDistributionChart
-                            items={overview.distributions.source_countries}
-                        />
-                        <StatusCodeDistributionChart
-                            items={overview.distributions.status_codes}
-                        />
-                        <TopDomainChart items={overview.distributions.top_domains}/>
-                    </div>
-
-                    <div className='grid gap-6'>
-                        <TrafficCapacityTrendChart
-                            networkPoints={overview.trends.network_24h}
-                            capacityPoints={overview.trends.capacity_24h}
-                        />
-                    </div>
-
-                    <NodeHealthTable nodes={overview.nodes}/>
-                </>
-            )}
+  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='系统已经启动，但还没有可展示的总览聚合结果。'
+        />
+      ) : (
+        <>
+          <WorldStage
+            summary={overview.summary}
+            traffic={overview.traffic}
+            capacity={overview.capacity}
+            nodes={overview.nodes}
+            sourceCountries={overview.distributions.source_countries}
+          />
+
+          <div className='grid gap-6'>
+            <TrafficTrendChart points={overview.trends.traffic_24h} />
+          </div>
+
+          <div className='grid gap-6 xl:grid-cols-3'>
+            <SourceDistributionChart
+              items={overview.distributions.source_countries}
+            />
+            <StatusCodeDistributionChart
+              items={overview.distributions.status_codes}
+            />
+            <TopDomainChart items={overview.distributions.top_domains} />
+          </div>
+
+          <div className='grid gap-6'>
+            <TrafficCapacityTrendChart
+              networkPoints={overview.trends.network_24h}
+              capacityPoints={overview.trends.capacity_24h}
+            />
+          </div>
+
+          <NodeHealthTable nodes={overview.nodes} />
+        </>
+      )}
+    </div>
+  );
 }