prettier

frontend/app/(main)/access-logs/page.tsx

@@ -1,24 +1,42 @@
-"use client"
+'use client';
 
-import {useCallback, useEffect, useMemo, useState} from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts"
-import {RefreshCw, ScrollText, Trash2} from "lucide-react"
-import {toast} from "sonner"
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { RefreshCw, ScrollText, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {AccessLogService} 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 { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { AccessLogService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {AccessLogFilters} from "./components/access-log-filters"
+import { AccessLogFilters } from './components/access-log-filters';
 import {
   type AccessLogTab,
   DETAIL_SORT_OPTIONS,
@@ -27,19 +45,19 @@ import {
   IP_SORT_OPTIONS,
   parseSortValue,
   type SearchDraft,
-} from "./components/access-log-utils"
-import {CleanupDialog} from "./components/cleanup-dialog"
+} from './components/access-log-utils';
+import { CleanupDialog } from './components/cleanup-dialog';
 
 const trendChartConfig = {
-  requests: { label: "请求数", color: "hsl(var(--primary))" },
-} satisfies ChartConfig
+  requests: { label: '请求数', color: 'hsl(var(--primary))' },
+} satisfies ChartConfig;
 
 const emptyDraft: SearchDraft = {
-  nodeId: "",
-  remoteAddr: "",
-  host: "",
-  path: "",
-}
+  nodeId: '',
+  remoteAddr: '',
+  host: '',
+  path: '',
+};
 
 function PaginationBar({
   page,
@@ -48,48 +66,66 @@ function PaginationBar({
   onPrev,
   onNext,
 }: {
-  page: number
-  hasMore: boolean
-  loading: boolean
-  onPrev: () => void
-  onNext: () => void
+  page: number;
+  hasMore: boolean;
+  loading: boolean;
+  onPrev: () => void;
+  onNext: () => void;
 }) {
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-t border-dashed">
-      <p className="text-xs text-muted-foreground">当前第 {page + 1} 页</p>
-      <div className="flex gap-2">
-        <Button variant="outline" size="sm" disabled={loading || page <= 0} onClick={onPrev}>
+    <div className='flex items-center justify-between px-4 py-3 border-t border-dashed'>
+      <p className='text-xs text-muted-foreground'>当前第 {page + 1} 页</p>
+      <div className='flex gap-2'>
+        <Button
+          variant='outline'
+          size='sm'
+          disabled={loading || page <= 0}
+          onClick={onPrev}
+        >
           上一页
         </Button>
-        <Button variant="outline" size="sm" disabled={loading || !hasMore} onClick={onNext}>
+        <Button
+          variant='outline'
+          size='sm'
+          disabled={loading || !hasMore}
+          onClick={onNext}
+        >
           下一页
         </Button>
       </div>
     </div>
-  )
+  );
 }
 
 export default function AccessLogsPage() {
-  const queryClient = useQueryClient()
-  const [tab, setTab] = useState<AccessLogTab>("list")
-  const [draft, setDraft] = useState<SearchDraft>(emptyDraft)
-  const [filters, setFilters] = useState<SearchDraft>(emptyDraft)
-  const [pageSize, setPageSize] = useState(20)
-  const [page, setPage] = useState(0)
-  const [detailSort, setDetailSort] = useState("logged_at:desc")
-  const [foldSort, setFoldSort] = useState("bucket_started_at:desc")
-  const [ipSort, setIpSort] = useState("total_requests:desc")
-  const [foldMinutes, setFoldMinutes] = useState<3 | 5>(3)
-  const [trendIp, setTrendIp] = useState("")
-  const [appliedTrendIp, setAppliedTrendIp] = useState("")
-  const [cleanupOpen, setCleanupOpen] = useState(false)
+  const queryClient = useQueryClient();
+  const [tab, setTab] = useState<AccessLogTab>('list');
+  const [draft, setDraft] = useState<SearchDraft>(emptyDraft);
+  const [filters, setFilters] = useState<SearchDraft>(emptyDraft);
+  const [pageSize, setPageSize] = useState(20);
+  const [page, setPage] = useState(0);
+  const [detailSort, setDetailSort] = useState('logged_at:desc');
+  const [foldSort, setFoldSort] = useState('bucket_started_at:desc');
+  const [ipSort, setIpSort] = useState('total_requests:desc');
+  const [foldMinutes, setFoldMinutes] = useState<3 | 5>(3);
+  const [trendIp, setTrendIp] = useState('');
+  const [appliedTrendIp, setAppliedTrendIp] = useState('');
+  const [cleanupOpen, setCleanupOpen] = useState(false);
 
-  const detailSortState = parseSortValue(detailSort)
-  const foldSortState = parseSortValue(foldSort)
-  const ipSortState = parseSortValue(ipSort)
+  const detailSortState = parseSortValue(detailSort);
+  const foldSortState = parseSortValue(foldSort);
+  const ipSortState = parseSortValue(ipSort);
 
   const listQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "list", filters, page, pageSize, detailSort],
+    queryKey: [
+      'openflare',
+      'access-logs',
+      'list',
+      filters,
+      page,
+      pageSize,
+      detailSort,
+    ],
     queryFn: () =>
       AccessLogService.list({
         node_id: filters.nodeId || undefined,
@@ -101,11 +137,20 @@ export default function AccessLogsPage() {
         sort_by: detailSortState.sortBy,
         sort_order: detailSortState.sortOrder,
       }),
-    enabled: tab === "list",
-  })
+    enabled: tab === 'list',
+  });
 
   const foldsQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "folds", filters, page, pageSize, foldSort, foldMinutes],
+    queryKey: [
+      'openflare',
+      'access-logs',
+      'folds',
+      filters,
+      page,
+      pageSize,
+      foldSort,
+      foldMinutes,
+    ],
     queryFn: () =>
       AccessLogService.listFolds({
         node_id: filters.nodeId || undefined,
@@ -118,11 +163,19 @@ export default function AccessLogsPage() {
         sort_order: foldSortState.sortOrder,
         fold_minutes: foldMinutes,
       }),
-    enabled: tab === "folds",
-  })
+    enabled: tab === 'folds',
+  });
 
   const ipSummaryQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "ip-summary", filters, page, pageSize, ipSort],
+    queryKey: [
+      'openflare',
+      'access-logs',
+      'ip-summary',
+      filters,
+      page,
+      pageSize,
+      ipSort,
+    ],
     queryFn: () =>
       AccessLogService.listIPSummaries({
         node_id: filters.nodeId || undefined,
@@ -133,11 +186,11 @@ export default function AccessLogsPage() {
         sort_by: ipSortState.sortBy,
         sort_order: ipSortState.sortOrder,
       }),
-    enabled: tab === "ip-summary",
-  })
+    enabled: tab === 'ip-summary',
+  });
 
   const ipTrendQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "ip-trend", filters, appliedTrendIp],
+    queryKey: ['openflare', 'access-logs', 'ip-trend', filters, appliedTrendIp],
     queryFn: () =>
       AccessLogService.getIPTrend({
         node_id: filters.nodeId || undefined,
@@ -146,50 +199,52 @@ export default function AccessLogsPage() {
         hours: 24,
         bucket_minutes: 30,
       }),
-    enabled: tab === "ip-trend" && appliedTrendIp !== "",
-  })
+    enabled: tab === 'ip-trend' && appliedTrendIp !== '',
+  });
 
   const cleanupMutation = useMutation({
     mutationFn: (retentionDays: number) =>
       AccessLogService.cleanup({ retention_days: retentionDays }),
     onSuccess: async (result) => {
-      toast.success(`已清理 ${result.deleted_count} 条日志`)
-      setCleanupOpen(false)
-      await queryClient.invalidateQueries({ queryKey: ["openflare", "access-logs"] })
+      toast.success(`已清理 ${result.deleted_count} 条日志`);
+      setCleanupOpen(false);
+      await queryClient.invalidateQueries({
+        queryKey: ['openflare', 'access-logs'],
+      });
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "清理失败")
+      toast.error(error instanceof Error ? error.message : '清理失败');
     },
-  })
+  });
 
   const activeSummary = useMemo(() => {
-    if (tab === "list" && listQuery.data) {
+    if (tab === 'list' && listQuery.data) {
       return {
         totalRecord: listQuery.data.total_record,
         totalIp: listQuery.data.total_ip,
-      }
+      };
     }
-    if (tab === "folds" && foldsQuery.data) {
+    if (tab === 'folds' && foldsQuery.data) {
       return {
         totalRecord: foldsQuery.data.total_record,
         totalIp: foldsQuery.data.total_ip,
-      }
+      };
     }
-    if (tab === "ip-summary" && ipSummaryQuery.data) {
+    if (tab === 'ip-summary' && ipSummaryQuery.data) {
       return {
         totalRecord: 0,
         totalIp: ipSummaryQuery.data.total_ip,
-      }
+      };
     }
-    return { totalRecord: 0, totalIp: 0 }
-  }, [tab, listQuery.data, foldsQuery.data, ipSummaryQuery.data])
+    return { totalRecord: 0, totalIp: 0 };
+  }, [tab, listQuery.data, foldsQuery.data, ipSummaryQuery.data]);
 
   const trendChartData = useMemo(() => {
     return (ipTrendQuery.data?.points ?? []).map((point) => ({
       label: formatDateTime(point.bucket_started_at).slice(5),
       requests: point.request_count,
-    }))
-  }, [ipTrendQuery.data?.points])
+    }));
+  }, [ipTrendQuery.data?.points]);
 
   const handleSearch = useCallback(() => {
     setFilters({
@@ -197,93 +252,116 @@ export default function AccessLogsPage() {
       remoteAddr: draft.remoteAddr.trim(),
       host: draft.host.trim(),
       path: draft.path.trim(),
-    })
-    setPage(0)
-  }, [draft])
+    });
+    setPage(0);
+  }, [draft]);
 
   const handleReset = () => {
-    setDraft(emptyDraft)
-    setFilters(emptyDraft)
-    setPage(0)
-    setTrendIp("")
-    setAppliedTrendIp("")
-  }
+    setDraft(emptyDraft);
+    setFilters(emptyDraft);
+    setPage(0);
+    setTrendIp('');
+    setAppliedTrendIp('');
+  };
 
   useEffect(() => {
-    setPage(0)
-  }, [tab, pageSize])
+    setPage(0);
+  }, [tab, pageSize]);
 
   const refreshActive = () => {
-    if (tab === "list") void listQuery.refetch()
-    if (tab === "folds") void foldsQuery.refetch()
-    if (tab === "ip-summary") void ipSummaryQuery.refetch()
-    if (tab === "ip-trend") void ipTrendQuery.refetch()
-  }
+    if (tab === 'list') void listQuery.refetch();
+    if (tab === 'folds') void foldsQuery.refetch();
+    if (tab === 'ip-summary') void ipSummaryQuery.refetch();
+    if (tab === 'ip-trend') void ipTrendQuery.refetch();
+  };
 
   const isFetching =
     listQuery.isFetching ||
     foldsQuery.isFetching ||
     ipSummaryQuery.isFetching ||
-    ipTrendQuery.isFetching
+    ipTrendQuery.isFetching;
 
   return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center gap-2">
-          <ScrollText className="size-5 text-primary" />
+    <div className='py-6 px-1 space-y-6'>
+      <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-2'>
+          <ScrollText className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">访问日志</h1>
-            <p className="text-sm text-muted-foreground">
+            <h1 className='text-2xl font-semibold tracking-tight'>访问日志</h1>
+            <p className='text-sm text-muted-foreground'>
               按节点、IP、域名与路径检索，支持时间折叠、IP 汇总与趋势分析。
             </p>
           </div>
         </div>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={refreshActive} disabled={isFetching}>
-            <RefreshCw className={`size-3.5 mr-1 ${isFetching ? "animate-spin" : ""}`} />
+        <div className='flex gap-2'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={refreshActive}
+            disabled={isFetching}
+          >
+            <RefreshCw
+              className={`size-3.5 mr-1 ${isFetching ? 'animate-spin' : ''}`}
+            />
             刷新
           </Button>
-          <Button variant="destructive" size="sm" onClick={() => setCleanupOpen(true)}>
-            <Trash2 className="size-3.5 mr-1" />
+          <Button
+            variant='destructive'
+            size='sm'
+            onClick={() => setCleanupOpen(true)}
+          >
+            <Trash2 className='size-3.5 mr-1' />
             清理日志
           </Button>
         </div>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-3">
+      <div className='grid gap-3 sm:grid-cols-3'>
         {[
-          { label: "访问记录", value: formatCompactNumber(activeSummary.totalRecord) },
-          { label: "来源 IP", value: formatCompactNumber(activeSummary.totalIp) },
           {
-            label: "当前视图",
+            label: '访问记录',
+            value: formatCompactNumber(activeSummary.totalRecord),
+          },
+          {
+            label: '来源 IP',
+            value: formatCompactNumber(activeSummary.totalIp),
+          },
+          {
+            label: '当前视图',
             value:
-              tab === "list"
-                ? "明细日志"
-                : tab === "folds"
-                  ? "时间折叠"
-                  : tab === "ip-summary"
-                    ? "IP 汇总"
-                    : "IP 趋势",
+              tab === 'list'
+                ? '明细日志'
+                : tab === 'folds'
+                  ? '时间折叠'
+                  : tab === 'ip-summary'
+                    ? 'IP 汇总'
+                    : 'IP 趋势',
           },
         ].map((item) => (
-          <div key={item.label} className="rounded-lg border border-dashed px-4 py-3">
-            <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+          <div
+            key={item.label}
+            className='rounded-lg border border-dashed px-4 py-3'
+          >
+            <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
               {item.label}
             </p>
-            <p className="mt-1 text-lg font-semibold">{item.value}</p>
+            <p className='mt-1 text-lg font-semibold'>{item.value}</p>
           </div>
         ))}
       </div>
 
-      <Tabs value={tab} onValueChange={(value) => setTab(value as AccessLogTab)}>
-        <TabsList className="grid w-full grid-cols-2 lg:grid-cols-4">
-          <TabsTrigger value="list">明细列表</TabsTrigger>
-          <TabsTrigger value="folds">时间折叠</TabsTrigger>
-          <TabsTrigger value="ip-summary">IP 汇总</TabsTrigger>
-          <TabsTrigger value="ip-trend">IP 趋势</TabsTrigger>
+      <Tabs
+        value={tab}
+        onValueChange={(value) => setTab(value as AccessLogTab)}
+      >
+        <TabsList className='grid w-full grid-cols-2 lg:grid-cols-4'>
+          <TabsTrigger value='list'>明细列表</TabsTrigger>
+          <TabsTrigger value='folds'>时间折叠</TabsTrigger>
+          <TabsTrigger value='ip-summary'>IP 汇总</TabsTrigger>
+          <TabsTrigger value='ip-trend'>IP 趋势</TabsTrigger>
         </TabsList>
 
-        <div className="mt-4 rounded-lg border border-dashed bg-background p-4">
+        <div className='mt-4 rounded-lg border border-dashed bg-background p-4'>
           <AccessLogFilters
             tab={tab}
             draft={draft}
@@ -295,12 +373,12 @@ export default function AccessLogsPage() {
           />
         </div>
 
-        <TabsContent value="list" className="mt-4">
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-dashed">
-              <p className="text-sm font-medium">明细日志</p>
+        <TabsContent value='list' className='mt-4'>
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background'>
+            <div className='flex items-center justify-between px-4 py-3 border-b border-dashed'>
+              <p className='text-sm font-medium'>明细日志</p>
               <Select value={detailSort} onValueChange={setDetailSort}>
-                <SelectTrigger className="h-8 w-44 text-xs">
+                <SelectTrigger className='h-8 w-44 text-xs'>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -313,38 +391,50 @@ export default function AccessLogsPage() {
               </Select>
             </div>
             {listQuery.isError ? (
-              <div className="p-4">
+              <div className='p-4'>
                 <ErrorInline
-                  message={listQuery.error instanceof Error ? listQuery.error.message : "加载失败"}
+                  message={
+                    listQuery.error instanceof Error
+                      ? listQuery.error.message
+                      : '加载失败'
+                  }
                   onRetry={() => void listQuery.refetch()}
                 />
               </div>
             ) : listQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : (listQuery.data?.items ?? []).length === 0 ? (
-              <EmptyStateWithBorder title="暂无访问日志" />
+              <EmptyStateWithBorder title='暂无访问日志' />
             ) : (
               <Table>
-                <TableHeader className="bg-muted/40">
-                  <TableRow className="border-dashed hover:bg-transparent">
-                    <TableHead className="text-xs">时间</TableHead>
-                    <TableHead className="text-xs">节点</TableHead>
-                    <TableHead className="text-xs">IP</TableHead>
-                    <TableHead className="text-xs">域名</TableHead>
-                    <TableHead className="text-xs">路径</TableHead>
-                    <TableHead className="text-xs">状态码</TableHead>
+                <TableHeader className='bg-muted/40'>
+                  <TableRow className='border-dashed hover:bg-transparent'>
+                    <TableHead className='text-xs'>时间</TableHead>
+                    <TableHead className='text-xs'>节点</TableHead>
+                    <TableHead className='text-xs'>IP</TableHead>
+                    <TableHead className='text-xs'>域名</TableHead>
+                    <TableHead className='text-xs'>路径</TableHead>
+                    <TableHead className='text-xs'>状态码</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {(listQuery.data?.items ?? []).map((item) => (
-                    <TableRow key={item.id} className="border-dashed">
-                      <TableCell className="text-xs">{formatDateTime(item.logged_at)}</TableCell>
-                      <TableCell className="text-xs">{item.node_name || item.node_id}</TableCell>
-                      <TableCell className="text-xs font-mono">{item.remote_addr}</TableCell>
-                      <TableCell className="text-xs">{item.host}</TableCell>
-                      <TableCell className="text-xs max-w-48 truncate">{item.path}</TableCell>
+                    <TableRow key={item.id} className='border-dashed'>
+                      <TableCell className='text-xs'>
+                        {formatDateTime(item.logged_at)}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.node_name || item.node_id}
+                      </TableCell>
+                      <TableCell className='text-xs font-mono'>
+                        {item.remote_addr}
+                      </TableCell>
+                      <TableCell className='text-xs'>{item.host}</TableCell>
+                      <TableCell className='text-xs max-w-48 truncate'>
+                        {item.path}
+                      </TableCell>
                       <TableCell>
-                        <Badge variant="outline" className="text-[10px]">
+                        <Badge variant='outline' className='text-[10px]'>
                           {item.status_code}
                         </Badge>
                       </TableCell>
@@ -363,26 +453,28 @@ export default function AccessLogsPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="folds" className="mt-4">
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background">
-            <div className="flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-b border-dashed">
-              <div className="flex items-center gap-2">
-                <p className="text-sm font-medium">时间折叠</p>
+        <TabsContent value='folds' className='mt-4'>
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background'>
+            <div className='flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-b border-dashed'>
+              <div className='flex items-center gap-2'>
+                <p className='text-sm font-medium'>时间折叠</p>
                 <Select
                   value={String(foldMinutes)}
-                  onValueChange={(value) => setFoldMinutes(Number(value) as 3 | 5)}
+                  onValueChange={(value) =>
+                    setFoldMinutes(Number(value) as 3 | 5)
+                  }
                 >
-                  <SelectTrigger className="h-8 w-36 text-xs">
+                  <SelectTrigger className='h-8 w-36 text-xs'>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="3">3 分钟桶</SelectItem>
-                    <SelectItem value="5">5 分钟桶</SelectItem>
+                    <SelectItem value='3'>3 分钟桶</SelectItem>
+                    <SelectItem value='5'>5 分钟桶</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
               <Select value={foldSort} onValueChange={setFoldSort}>
-                <SelectTrigger className="h-8 w-44 text-xs">
+                <SelectTrigger className='h-8 w-44 text-xs'>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -395,12 +487,12 @@ export default function AccessLogsPage() {
               </Select>
             </div>
             {foldsQuery.isError ? (
-              <div className="p-4">
+              <div className='p-4'>
                 <ErrorInline
                   message={
                     foldsQuery.error instanceof Error
                       ? foldsQuery.error.message
-                      : "加载失败"
+                      : '加载失败'
                   }
                   onRetry={() => void foldsQuery.refetch()}
                 />
@@ -408,32 +500,47 @@ export default function AccessLogsPage() {
             ) : foldsQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : (foldsQuery.data?.items ?? []).length === 0 ? (
-              <EmptyStateWithBorder title="暂无折叠数据" />
+              <EmptyStateWithBorder title='暂无折叠数据' />
             ) : (
               <Table>
-                <TableHeader className="bg-muted/40">
-                  <TableRow className="border-dashed hover:bg-transparent">
-                    <TableHead className="text-xs">时间桶</TableHead>
-                    <TableHead className="text-xs">请求数</TableHead>
-                    <TableHead className="text-xs">独立 IP</TableHead>
-                    <TableHead className="text-xs">独立域名</TableHead>
-                    <TableHead className="text-xs">2xx</TableHead>
-                    <TableHead className="text-xs">4xx</TableHead>
-                    <TableHead className="text-xs">5xx</TableHead>
+                <TableHeader className='bg-muted/40'>
+                  <TableRow className='border-dashed hover:bg-transparent'>
+                    <TableHead className='text-xs'>时间桶</TableHead>
+                    <TableHead className='text-xs'>请求数</TableHead>
+                    <TableHead className='text-xs'>独立 IP</TableHead>
+                    <TableHead className='text-xs'>独立域名</TableHead>
+                    <TableHead className='text-xs'>2xx</TableHead>
+                    <TableHead className='text-xs'>4xx</TableHead>
+                    <TableHead className='text-xs'>5xx</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {(foldsQuery.data?.items ?? []).map((item) => (
-                    <TableRow key={item.bucket_started_at} className="border-dashed">
-                      <TableCell className="text-xs">
+                    <TableRow
+                      key={item.bucket_started_at}
+                      className='border-dashed'
+                    >
+                      <TableCell className='text-xs'>
                         {formatDateTime(item.bucket_started_at)}
                       </TableCell>
-                      <TableCell className="text-xs">{item.request_count}</TableCell>
-                      <TableCell className="text-xs">{item.unique_ip_count}</TableCell>
-                      <TableCell className="text-xs">{item.unique_host_count}</TableCell>
-                      <TableCell className="text-xs">{item.success_count}</TableCell>
-                      <TableCell className="text-xs">{item.client_error_count}</TableCell>
-                      <TableCell className="text-xs">{item.server_error_count}</TableCell>
+                      <TableCell className='text-xs'>
+                        {item.request_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.unique_ip_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.unique_host_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.success_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.client_error_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.server_error_count}
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
@@ -449,12 +556,12 @@ export default function AccessLogsPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="ip-summary" className="mt-4">
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-dashed">
-              <p className="text-sm font-medium">IP 汇总</p>
+        <TabsContent value='ip-summary' className='mt-4'>
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background'>
+            <div className='flex items-center justify-between px-4 py-3 border-b border-dashed'>
+              <p className='text-sm font-medium'>IP 汇总</p>
               <Select value={ipSort} onValueChange={setIpSort}>
-                <SelectTrigger className="h-8 w-52 text-xs">
+                <SelectTrigger className='h-8 w-52 text-xs'>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -467,12 +574,12 @@ export default function AccessLogsPage() {
               </Select>
             </div>
             {ipSummaryQuery.isError ? (
-              <div className="p-4">
+              <div className='p-4'>
                 <ErrorInline
                   message={
                     ipSummaryQuery.error instanceof Error
                       ? ipSummaryQuery.error.message
-                      : "加载失败"
+                      : '加载失败'
                   }
                   onRetry={() => void ipSummaryQuery.refetch()}
                 />
@@ -480,24 +587,30 @@ export default function AccessLogsPage() {
             ) : ipSummaryQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : (ipSummaryQuery.data?.items ?? []).length === 0 ? (
-              <EmptyStateWithBorder title="暂无 IP 汇总数据" />
+              <EmptyStateWithBorder title='暂无 IP 汇总数据' />
             ) : (
               <Table>
-                <TableHeader className="bg-muted/40">
-                  <TableRow className="border-dashed hover:bg-transparent">
-                    <TableHead className="text-xs">IP</TableHead>
-                    <TableHead className="text-xs">总请求数</TableHead>
-                    <TableHead className="text-xs">近 3 小时</TableHead>
-                    <TableHead className="text-xs">最后访问</TableHead>
+                <TableHeader className='bg-muted/40'>
+                  <TableRow className='border-dashed hover:bg-transparent'>
+                    <TableHead className='text-xs'>IP</TableHead>
+                    <TableHead className='text-xs'>总请求数</TableHead>
+                    <TableHead className='text-xs'>近 3 小时</TableHead>
+                    <TableHead className='text-xs'>最后访问</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {(ipSummaryQuery.data?.items ?? []).map((item) => (
-                    <TableRow key={item.remote_addr} className="border-dashed">
-                      <TableCell className="text-xs font-mono">{item.remote_addr}</TableCell>
-                      <TableCell className="text-xs">{item.total_requests}</TableCell>
-                      <TableCell className="text-xs">{item.recent_requests}</TableCell>
-                      <TableCell className="text-xs">
+                    <TableRow key={item.remote_addr} className='border-dashed'>
+                      <TableCell className='text-xs font-mono'>
+                        {item.remote_addr}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.total_requests}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.recent_requests}
+                      </TableCell>
+                      <TableCell className='text-xs'>
                         {formatDateTime(item.last_seen_at)}
                       </TableCell>
                     </TableRow>
@@ -515,19 +628,21 @@ export default function AccessLogsPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="ip-trend" className="mt-4 space-y-4">
-          <div className="rounded-lg border border-dashed bg-background p-4 flex flex-col gap-3 sm:flex-row sm:items-end">
-            <div className="space-y-1.5 flex-1">
-              <p className="text-xs font-medium text-muted-foreground">趋势 IP</p>
+        <TabsContent value='ip-trend' className='mt-4 space-y-4'>
+          <div className='rounded-lg border border-dashed bg-background p-4 flex flex-col gap-3 sm:flex-row sm:items-end'>
+            <div className='space-y-1.5 flex-1'>
+              <p className='text-xs font-medium text-muted-foreground'>
+                趋势 IP
+              </p>
               <input
-                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-xs"
+                className='flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-xs'
                 value={trendIp}
                 onChange={(e) => setTrendIp(e.target.value)}
-                placeholder="输入要分析趋势的 IP 地址"
+                placeholder='输入要分析趋势的 IP 地址'
               />
             </div>
             <Button
-              size="sm"
+              size='sm'
               onClick={() => setAppliedTrendIp(trendIp.trim())}
               disabled={!trendIp.trim()}
             >
@@ -535,9 +650,9 @@ export default function AccessLogsPage() {
             </Button>
           </div>
 
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background p-4">
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background p-4'>
             {!appliedTrendIp ? (
-              <EmptyStateWithBorder description="请输入 IP 地址后查看 24 小时访问趋势。" />
+              <EmptyStateWithBorder description='请输入 IP 地址后查看 24 小时访问趋势。' />
             ) : ipTrendQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : ipTrendQuery.isError ? (
@@ -545,28 +660,41 @@ export default function AccessLogsPage() {
                 message={
                   ipTrendQuery.error instanceof Error
                     ? ipTrendQuery.error.message
-                    : "加载失败"
+                    : '加载失败'
                 }
                 onRetry={() => void ipTrendQuery.refetch()}
               />
             ) : trendChartData.length === 0 ? (
-              <EmptyStateWithBorder description="该 IP 在选定时间范围内没有访问记录。" />
+              <EmptyStateWithBorder description='该 IP 在选定时间范围内没有访问记录。' />
             ) : (
-              <div className="space-y-3">
-                <p className="text-sm font-medium">
+              <div className='space-y-3'>
+                <p className='text-sm font-medium'>
                   {appliedTrendIp} · 近 {ipTrendQuery.data?.hours ?? 24} 小时
                 </p>
-                <ChartContainer config={trendChartConfig} className="h-64 w-full">
+                <ChartContainer
+                  config={trendChartConfig}
+                  className='h-64 w-full'
+                >
                   <AreaChart data={trendChartData}>
                     <CartesianGrid vertical={false} />
-                    <XAxis dataKey="label" tickLine={false} axisLine={false} fontSize={10} />
-                    <YAxis tickLine={false} axisLine={false} fontSize={10} width={40} />
+                    <XAxis
+                      dataKey='label'
+                      tickLine={false}
+                      axisLine={false}
+                      fontSize={10}
+                    />
+                    <YAxis
+                      tickLine={false}
+                      axisLine={false}
+                      fontSize={10}
+                      width={40}
+                    />
                     <ChartTooltip content={<ChartTooltipContent />} />
                     <Area
-                      type="monotone"
-                      dataKey="requests"
-                      stroke="var(--color-requests)"
-                      fill="var(--color-requests)"
+                      type='monotone'
+                      dataKey='requests'
+                      stroke='var(--color-requests)'
+                      fill='var(--color-requests)'
                       fillOpacity={0.2}
                     />
                   </AreaChart>
@@ -584,5 +712,5 @@ export default function AccessLogsPage() {
         loading={cleanupMutation.isPending}
       />
     </div>
-  )
+  );
 }