prettier

frontend/app/(main)/origins/detail/page-client.tsx

@@ -1,11 +1,11 @@
-"use client"
+'use client';
 
-import Link from "next/link"
-import {useState} from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {useSearchParams} from "next/navigation"
-import {ArrowLeft, MapPin, Trash2} from "lucide-react"
-import {toast} from "sonner"
+import Link from 'next/link';
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSearchParams } from 'next/navigation';
+import { ArrowLeft, MapPin, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
 import {
   AlertDialog,
@@ -16,176 +16,211 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-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 {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
-import {OriginService} from "@/lib/services/openflare"
-import {formatDateTime} from "@/lib/utils"
+} from '@/components/ui/alert-dialog';
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { OriginService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {OriginEditorDialog} from "../components/origin-editor-dialog"
+import { OriginEditorDialog } from '../components/origin-editor-dialog';
 
 export function OriginDetailPageClient() {
-  const searchParams = useSearchParams()
-  const queryClient = useQueryClient()
-  const originId = searchParams.get("id")?.trim() ?? ""
-  const parsedId = Number(originId)
-  const enabled = originId !== "" && Number.isFinite(parsedId)
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const originId = searchParams.get('id')?.trim() ?? '';
+  const parsedId = Number(originId);
+  const enabled = originId !== '' && Number.isFinite(parsedId);
 
-  const [editorOpen, setEditorOpen] = useState(false)
-  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
 
   const originQuery = useQuery({
-    queryKey: ["openflare", "origins", originId],
+    queryKey: ['openflare', 'origins', originId],
     queryFn: () => OriginService.getById(parsedId),
     enabled,
-  })
+  });
 
   const deleteMutation = useMutation({
     mutationFn: () => OriginService.deleteById(parsedId),
     onSuccess: async () => {
-      toast.success("源站已删除")
-      await queryClient.invalidateQueries({ queryKey: ["openflare", "origins"] })
-      window.location.href = "/origins"
+      toast.success('源站已删除');
+      await queryClient.invalidateQueries({
+        queryKey: ['openflare', 'origins'],
+      });
+      window.location.href = '/origins';
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "删除失败")
+      toast.error(error instanceof Error ? error.message : '删除失败');
     },
-  })
+  });
 
-  const origin = originQuery.data
+  const origin = originQuery.data;
 
   if (!enabled) {
     return (
-      <div className="py-6 px-1">
-        <EmptyStateWithBorder description="缺少有效的源站 ID。" />
+      <div className='py-6 px-1'>
+        <EmptyStateWithBorder description='缺少有效的源站 ID。' />
       </div>
-    )
+    );
   }
 
   if (originQuery.isLoading) {
     return (
-      <div className="py-6 px-1">
-        <LoadingStateWithBorder icon={MapPin} description="加载源站详情..." />
+      <div className='py-6 px-1'>
+        <LoadingStateWithBorder icon={MapPin} description='加载源站详情...' />
       </div>
-    )
+    );
   }
 
   if (originQuery.isError) {
     return (
-      <div className="py-6 px-1">
+      <div className='py-6 px-1'>
         <ErrorInline
           message={
             originQuery.error instanceof Error
               ? originQuery.error.message
-              : "加载失败"
+              : '加载失败'
           }
           onRetry={() => void originQuery.refetch()}
         />
       </div>
-    )
+    );
   }
 
   if (!origin) {
     return (
-      <div className="py-6 px-1 space-y-4">
-        <Button variant="ghost" size="sm" asChild>
-          <Link href="/origins">
-            <ArrowLeft className="size-4 mr-1" />
+      <div className='py-6 px-1 space-y-4'>
+        <Button variant='ghost' size='sm' asChild>
+          <Link href='/origins'>
+            <ArrowLeft className='size-4 mr-1' />
             返回列表
           </Link>
         </Button>
-        <EmptyStateWithBorder description="源站不存在或已被删除。" />
+        <EmptyStateWithBorder description='源站不存在或已被删除。' />
       </div>
-    )
+    );
   }
 
   return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-        <div className="space-y-2">
-          <Button variant="ghost" size="sm" className="h-8 px-2 -ml-2" asChild>
-            <Link href="/origins">
-              <ArrowLeft className="size-4 mr-1" />
+    <div className='py-6 px-1 space-y-6'>
+      <div className='flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between'>
+        <div className='space-y-2'>
+          <Button variant='ghost' size='sm' className='h-8 px-2 -ml-2' asChild>
+            <Link href='/origins'>
+              <ArrowLeft className='size-4 mr-1' />
               返回列表
             </Link>
           </Button>
-          <div className="flex items-center gap-2">
-            <MapPin className="size-5 text-primary" />
-            <h1 className="text-2xl font-semibold tracking-tight">{origin.name}</h1>
+          <div className='flex items-center gap-2'>
+            <MapPin className='size-5 text-primary' />
+            <h1 className='text-2xl font-semibold tracking-tight'>
+              {origin.name}
+            </h1>
           </div>
-          <p className="text-sm text-muted-foreground">{origin.address}</p>
+          <p className='text-sm text-muted-foreground'>{origin.address}</p>
         </div>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={() => setEditorOpen(true)}>
+        <div className='flex gap-2'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => setEditorOpen(true)}
+          >
             编辑源站
           </Button>
-          <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
-            <Trash2 className="size-3.5 mr-1" />
+          <Button
+            variant='destructive'
+            size='sm'
+            onClick={() => setDeleteOpen(true)}
+          >
+            <Trash2 className='size-3.5 mr-1' />
             删除源站
           </Button>
         </div>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-lg border border-dashed px-4 py-3">
-          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">绑定规则</p>
-          <Badge variant="outline" className="mt-2 text-[10px]">
+      <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-4'>
+        <div className='rounded-lg border border-dashed px-4 py-3'>
+          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+            绑定规则
+          </p>
+          <Badge variant='outline' className='mt-2 text-[10px]'>
             {origin.route_count} 条规则
           </Badge>
         </div>
-        <div className="rounded-lg border border-dashed px-4 py-3">
-          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">创建时间</p>
-          <p className="mt-2 text-sm">{formatDateTime(origin.created_at)}</p>
+        <div className='rounded-lg border border-dashed px-4 py-3'>
+          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+            创建时间
+          </p>
+          <p className='mt-2 text-sm'>{formatDateTime(origin.created_at)}</p>
         </div>
-        <div className="rounded-lg border border-dashed px-4 py-3">
-          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">更新时间</p>
-          <p className="mt-2 text-sm">{formatDateTime(origin.updated_at)}</p>
+        <div className='rounded-lg border border-dashed px-4 py-3'>
+          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+            更新时间
+          </p>
+          <p className='mt-2 text-sm'>{formatDateTime(origin.updated_at)}</p>
         </div>
-        <div className="rounded-lg border border-dashed px-4 py-3 sm:col-span-2 xl:col-span-1">
-          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">备注</p>
-          <p className="mt-2 text-sm text-muted-foreground">{origin.remark || "暂无备注"}</p>
+        <div className='rounded-lg border border-dashed px-4 py-3 sm:col-span-2 xl:col-span-1'>
+          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+            备注
+          </p>
+          <p className='mt-2 text-sm text-muted-foreground'>
+            {origin.remark || '暂无备注'}
+          </p>
         </div>
       </div>
 
-      <div className="border border-dashed rounded-lg overflow-hidden bg-background">
-        <div className="px-4 py-3 border-b border-dashed">
-          <h2 className="text-sm font-semibold">关联规则</h2>
-          <p className="text-xs text-muted-foreground mt-1">
+      <div className='border border-dashed rounded-lg overflow-hidden bg-background'>
+        <div className='px-4 py-3 border-b border-dashed'>
+          <h2 className='text-sm font-semibold'>关联规则</h2>
+          <p className='text-xs text-muted-foreground mt-1'>
             展示当前源站作为主源站绑定的规则。
           </p>
         </div>
         {origin.routes.length === 0 ? (
           <EmptyStateWithBorder
-            title="暂无关联规则"
-            description="当前源站还没有被任何规则引用。"
+            title='暂无关联规则'
+            description='当前源站还没有被任何规则引用。'
           />
         ) : (
           <Table>
-            <TableHeader className="bg-muted/40">
-              <TableRow className="border-dashed hover:bg-transparent">
-                <TableHead className="text-xs font-semibold">域名</TableHead>
-                <TableHead className="text-xs font-semibold">源站地址</TableHead>
-                <TableHead className="text-xs font-semibold">状态</TableHead>
-                <TableHead className="text-xs font-semibold">更新时间</TableHead>
+            <TableHeader className='bg-muted/40'>
+              <TableRow className='border-dashed hover:bg-transparent'>
+                <TableHead className='text-xs font-semibold'>域名</TableHead>
+                <TableHead className='text-xs font-semibold'>
+                  源站地址
+                </TableHead>
+                <TableHead className='text-xs font-semibold'>状态</TableHead>
+                <TableHead className='text-xs font-semibold'>
+                  更新时间
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {origin.routes.map((route) => (
-                <TableRow key={route.id} className="border-dashed">
-                  <TableCell className="text-xs font-medium">{route.domain}</TableCell>
-                  <TableCell className="text-xs text-muted-foreground">
+                <TableRow key={route.id} className='border-dashed'>
+                  <TableCell className='text-xs font-medium'>
+                    {route.domain}
+                  </TableCell>
+                  <TableCell className='text-xs text-muted-foreground'>
                     {route.origin_url}
                   </TableCell>
                   <TableCell>
-                    <Badge variant="outline" className="text-[10px]">
-                      {route.enabled ? "启用" : "停用"}
+                    <Badge variant='outline' className='text-[10px]'>
+                      {route.enabled ? '启用' : '停用'}
                     </Badge>
                   </TableCell>
-                  <TableCell className="text-xs text-muted-foreground">
+                  <TableCell className='text-xs text-muted-foreground'>
                     {formatDateTime(route.updated_at)}
                   </TableCell>
                 </TableRow>
@@ -213,7 +248,7 @@ export function OriginDetailPageClient() {
           <AlertDialogFooter>
             <AlertDialogCancel>取消</AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
               onClick={() => deleteMutation.mutate()}
             >
               确认删除
@@ -222,5 +257,5 @@ export function OriginDetailPageClient() {
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }