prettier

2026-10-14 02:46:37 +08:00 · 2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
@@ -1,45 +1,45 @@
 'use client';

-import {useMemo, useState} from 'react';
-import {useQuery} from '@tanstack/react-query';
-import {Activity, HardDrive, Users} from 'lucide-react';
-import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from 'recharts';
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Activity, HardDrive, Users } from 'lucide-react';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';

-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
 } from '@/components/ui/chart';
-import {Skeleton} from '@/components/ui/skeleton';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
  ZoneService,
  zoneQueryKey,
  type ZoneOverview,
  type ZoneStatsRange,
 } from '@/lib/services/openflare';
-import {formatDateTime} from '@/lib/utils';
-import {formatBytes, formatCompactNumber} from '@/lib/utils/metrics';
-import {cn} from '@/lib/utils';
+import { formatDateTime } from '@/lib/utils';
+import { formatBytes, formatCompactNumber } from '@/lib/utils/metrics';
+import { cn } from '@/lib/utils';

-const rangeOptions: Array<{value: ZoneStatsRange; label: string}> = [
-  {value: '24h', label: '24 小时'},
-  {value: '7d', label: '7 天'},
-  {value: '30d', label: '30 天'},
+const rangeOptions: Array<{ value: ZoneStatsRange; label: string }> = [
+  { value: '24h', label: '24 小时' },
+  { value: '7d', label: '7 天' },
+  { value: '30d', label: '30 天' },
 ];

 const visitorsChartConfig = {
-  value: {label: '唯一访问者', color: 'hsl(217 91% 60%)'},
+  value: { label: '唯一访问者', color: 'hsl(217 91% 60%)' },
 } satisfies ChartConfig;

 const requestsChartConfig = {
-  value: {label: '请求总数', color: 'hsl(217 91% 60%)'},
+  value: { label: '请求总数', color: 'hsl(217 91% 60%)' },
 } satisfies ChartConfig;

 const bytesChartConfig = {
-  value: {label: '已提供数据', color: 'hsl(217 91% 60%)'},
+  value: { label: '已提供数据', color: 'hsl(217 91% 60%)' },
 } satisfies ChartConfig;

 function formatAxisLabel(iso: string, range: ZoneStatsRange) {
@@ -71,7 +71,7 @@ function formatWindowLabel(startedAt?: string, endedAt?: string) {
  }
  const fmt = (value: Date) =>
    value
-      .toLocaleDateString('en-GB', {day: 'numeric', month: 'long'})
+      .toLocaleDateString('en-GB', { day: 'numeric', month: 'long' })
      .toUpperCase();
  return `${fmt(start)} — ${fmt(end)}`;
 }
@@ -105,16 +105,16 @@ export function ZoneOverviewPanel({
  );

  return (
-    <div className="space-y-6">
-      <div className="space-y-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="inline-flex rounded-lg border bg-muted/40 p-0.5">
+    <div className='space-y-6'>
+      <div className='space-y-4'>
+        <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+          <div className='inline-flex rounded-lg border bg-muted/40 p-0.5'>
            {rangeOptions.map((option) => (
              <Button
                key={option.value}
-                type="button"
-                size="sm"
-                variant="ghost"
+                type='button'
+                size='sm'
+                variant='ghost'
                className={cn(
                  'h-7 rounded-md px-3 text-xs font-medium shadow-none',
                  range === option.value
@@ -127,25 +127,28 @@ export function ZoneOverviewPanel({
              </Button>
            ))}
          </div>
-          <p className="text-xs font-medium tracking-wide text-muted-foreground">
-            {formatWindowLabel(stats?.window_started_at, stats?.window_ended_at)}
+          <p className='text-xs font-medium tracking-wide text-muted-foreground'>
+            {formatWindowLabel(
+              stats?.window_started_at,
+              stats?.window_ended_at,
+            )}
          </p>
        </div>

        {statsQuery.isLoading ? (
-          <div className="space-y-3">
-            {Array.from({length: 3}).map((_, index) => (
-              <Skeleton key={index} className="h-36 w-full rounded-xl" />
+          <div className='space-y-3'>
+            {Array.from({ length: 3 }).map((_, index) => (
+              <Skeleton key={index} className='h-36 w-full rounded-xl' />
            ))}
          </div>
        ) : statsQuery.isError ? (
-          <div className="rounded-xl border border-dashed p-6 text-center text-sm text-muted-foreground">
+          <div className='rounded-xl border border-dashed p-6 text-center text-sm text-muted-foreground'>
            加载流量统计失败
-            <div className="mt-3">
+            <div className='mt-3'>
              <Button
-                size="sm"
-                variant="outline"
-                className="h-7 text-xs"
+                size='sm'
+                variant='outline'
+                className='h-7 text-xs'
                onClick={() => void statsQuery.refetch()}
              >
                重试
@@ -153,58 +156,60 @@ export function ZoneOverviewPanel({
            </div>
          </div>
        ) : (
-          <div className="space-y-3">
+          <div className='space-y-3'>
            {!stats?.available ? (
-              <p className="text-xs text-muted-foreground">
+              <p className='text-xs text-muted-foreground'>
                分析存储暂不可用，图表可能为空。请确认 ClickHouse 已启用。
              </p>
            ) : null}

            <MetricTrendCard
              icon={Users}
-              label="唯一访问者"
+              label='唯一访问者'
              value={formatCompactNumber(stats?.unique_visitors ?? 0)}
              data={chartData}
-              dataKey="visitors"
+              dataKey='visitors'
              config={visitorsChartConfig}
-              gradientId="zone-visitors"
+              gradientId='zone-visitors'
            />
            <MetricTrendCard
              icon={Activity}
-              label="请求总数"
+              label='请求总数'
              value={formatCompactNumber(stats?.request_count ?? 0)}
              data={chartData}
-              dataKey="requests"
+              dataKey='requests'
              config={requestsChartConfig}
-              gradientId="zone-requests"
+              gradientId='zone-requests'
            />
            <MetricTrendCard
              icon={HardDrive}
-              label="已提供的数据总计"
-              value={formatBytes(stats?.bytes_sent ?? 0, {zeroText: '0 B'})}
+              label='已提供的数据总计'
+              value={formatBytes(stats?.bytes_sent ?? 0, { zeroText: '0 B' })}
              data={chartData}
-              dataKey="bytes"
+              dataKey='bytes'
              config={bytesChartConfig}
-              gradientId="zone-bytes"
-              valueFormatter={(value) => formatBytes(value, {zeroText: '0 B'})}
+              gradientId='zone-bytes'
+              valueFormatter={(value) =>
+                formatBytes(value, { zeroText: '0 B' })
+              }
            />
          </div>
        )}
      </div>

-      <div className="grid gap-4 md:grid-cols-3">
-        <Card className="border-dashed shadow-none md:col-span-3">
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm">Zone 信息</CardTitle>
+      <div className='grid gap-4 md:grid-cols-3'>
+        <Card className='border-dashed shadow-none md:col-span-3'>
+          <CardHeader className='pb-2'>
+            <CardTitle className='text-sm'>Zone 信息</CardTitle>
          </CardHeader>
-          <CardContent className="grid gap-3 text-sm sm:grid-cols-2">
+          <CardContent className='grid gap-3 text-sm sm:grid-cols-2'>
            <div>
-              <p className="text-xs text-muted-foreground">根域</p>
-              <p className="mt-1 font-medium">{overview.zone.domain}</p>
+              <p className='text-xs text-muted-foreground'>根域</p>
+              <p className='mt-1 font-medium'>{overview.zone.domain}</p>
            </div>
            <div>
-              <p className="text-xs text-muted-foreground">创建时间</p>
-              <p className="mt-1">{formatDateTime(overview.zone.created_at)}</p>
+              <p className='text-xs text-muted-foreground'>创建时间</p>
+              <p className='mt-1'>{formatDateTime(overview.zone.created_at)}</p>
            </div>
          </CardContent>
        </Card>
@@ -233,44 +238,58 @@ function MetricTrendCard({
  valueFormatter?: (value: number) => string;
 }) {
  return (
-    <Card className="overflow-hidden border shadow-none">
-      <CardContent className="p-0">
-        <div className="grid gap-0 md:grid-cols-[minmax(140px,200px)_1fr]">
-          <div className="flex flex-col justify-between gap-3 border-b p-4 md:border-b-0 md:border-r">
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Icon className="size-3.5 text-primary" />
+    <Card className='overflow-hidden border shadow-none'>
+      <CardContent className='p-0'>
+        <div className='grid gap-0 md:grid-cols-[minmax(140px,200px)_1fr]'>
+          <div className='flex flex-col justify-between gap-3 border-b p-4 md:border-b-0 md:border-r'>
+            <div className='flex items-center gap-1.5 text-xs text-muted-foreground'>
+              <Icon className='size-3.5 text-primary' />
              <span>{label}</span>
            </div>
-            <p className="text-3xl font-semibold tracking-tight">{value}</p>
+            <p className='text-3xl font-semibold tracking-tight'>{value}</p>
          </div>
-          <div className="h-36 min-h-[9rem] w-full px-2 py-3 md:h-40">
-            <ChartContainer config={config} className="h-full w-full aspect-auto">
-              <AreaChart data={data} margin={{top: 8, right: 12, left: 0, bottom: 0}}>
+          <div className='h-36 min-h-[9rem] w-full px-2 py-3 md:h-40'>
+            <ChartContainer
+              config={config}
+              className='h-full w-full aspect-auto'
+            >
+              <AreaChart
+                data={data}
+                margin={{ top: 8, right: 12, left: 0, bottom: 0 }}
+              >
                <defs>
-                  <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="var(--color-value)" stopOpacity={0.28} />
-                    <stop offset="95%" stopColor="var(--color-value)" stopOpacity={0.02} />
+                  <linearGradient id={gradientId} x1='0' y1='0' x2='0' y2='1'>
+                    <stop
+                      offset='5%'
+                      stopColor='var(--color-value)'
+                      stopOpacity={0.28}
+                    />
+                    <stop
+                      offset='95%'
+                      stopColor='var(--color-value)'
+                      stopOpacity={0.02}
+                    />
                  </linearGradient>
                </defs>
                <CartesianGrid
-                  strokeDasharray="3 3"
+                  strokeDasharray='3 3'
                  vertical={false}
-                  className="stroke-border/60"
+                  className='stroke-border/60'
                />
                <XAxis
-                  dataKey="label"
+                  dataKey='label'
                  tickLine={false}
                  axisLine={false}
                  minTickGap={28}
                  tickMargin={8}
-                  className="text-[10px]"
+                  className='text-[10px]'
                />
                <YAxis
                  tickLine={false}
                  axisLine={false}
                  width={36}
                  tickMargin={4}
-                  className="text-[10px]"
+                  className='text-[10px]'
                  allowDecimals={false}
                  tickFormatter={(tick) =>
                    valueFormatter
@@ -291,10 +310,10 @@ function MetricTrendCard({
                  }
                />
                <Area
-                  type="monotone"
+                  type='monotone'
                  dataKey={dataKey}
-                  name="value"
-                  stroke="var(--color-value)"
+                  name='value'
+                  stroke='var(--color-value)'
                  strokeWidth={2}
                  fill={`url(#${gradientId})`}
                  isAnimationActive={false}