prettier

frontend/app/(main)/origins/page.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client';
 
-import Link from "next/link"
-import {useMemo, useState} from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {MapPin, Plus, RefreshCw, Trash2} from "lucide-react"
-import {toast} from "sonner"
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { MapPin, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
 import {
   AlertDialog,
@@ -15,76 +15,76 @@ 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 {type OriginItem, 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 { type OriginItem, OriginService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {OriginEditorDialog} from "./components/origin-editor-dialog"
+import { OriginEditorDialog } from './components/origin-editor-dialog';
 
-const originsQueryKey = ["openflare", "origins"] as const
+const originsQueryKey = ['openflare', 'origins'] as const;
 
 export default function OriginsPage() {
-  const queryClient = useQueryClient()
-  const [editorOpen, setEditorOpen] = useState(false)
-  const [editingOrigin, setEditingOrigin] = useState<OriginItem | null>(null)
-  const [deleteTarget, setDeleteTarget] = useState<OriginItem | null>(null)
+  const queryClient = useQueryClient();
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingOrigin, setEditingOrigin] = useState<OriginItem | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<OriginItem | null>(null);
 
   const originsQuery = useQuery({
     queryKey: originsQueryKey,
     queryFn: () => OriginService.list(),
-  })
+  });
 
-  const origins = useMemo(() => originsQuery.data ?? [], [originsQuery.data])
+  const origins = useMemo(() => originsQuery.data ?? [], [originsQuery.data]);
 
   const deleteMutation = useMutation({
     mutationFn: (id: number) => OriginService.deleteById(id),
     onSuccess: async () => {
-      toast.success("源站已删除")
-      setDeleteTarget(null)
-      await queryClient.invalidateQueries({ queryKey: originsQueryKey })
+      toast.success('源站已删除');
+      setDeleteTarget(null);
+      await queryClient.invalidateQueries({ queryKey: originsQueryKey });
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "删除失败")
+      toast.error(error instanceof Error ? error.message : '删除失败');
     },
-  })
+  });
 
   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">
-          <MapPin 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'>
+          <MapPin 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'>
               集中维护规则复用的源站地址，减少批量改地址时的重复操作。
             </p>
           </div>
         </div>
-        <div className="flex gap-2">
+        <div className='flex gap-2'>
           <Button
-            variant="outline"
-            size="sm"
+            variant='outline'
+            size='sm'
             onClick={() => void originsQuery.refetch()}
             disabled={originsQuery.isFetching}
           >
             <RefreshCw
-              className={`size-3.5 mr-1 ${originsQuery.isFetching ? "animate-spin" : ""}`}
+              className={`size-3.5 mr-1 ${originsQuery.isFetching ? 'animate-spin' : ''}`}
             />
             刷新
           </Button>
           <Button
-            size="sm"
+            size='sm'
             onClick={() => {
-              setEditingOrigin(null)
-              setEditorOpen(true)
+              setEditingOrigin(null);
+              setEditorOpen(true);
             }}
           >
-            <Plus className="size-3.5 mr-1" />
+            <Plus className='size-3.5 mr-1' />
             新增源站
           </Button>
         </div>
@@ -95,72 +95,70 @@ export default function OriginsPage() {
           message={
             originsQuery.error instanceof Error
               ? originsQuery.error.message
-              : "加载失败"
+              : '加载失败'
           }
           onRetry={() => void originsQuery.refetch()}
         />
       ) : null}
 
-      <div className="border border-dashed rounded-lg overflow-hidden bg-background">
+      <div className='border border-dashed rounded-lg overflow-hidden bg-background'>
         {originsQuery.isLoading ? (
           <LoadingStateWithBorder />
         ) : origins.length === 0 ? (
           <EmptyStateWithBorder
-            title="暂无源站"
-            description="点击右上角新增源站，后续规则可直接复用这些地址。"
+            title='暂无源站'
+            description='点击右上角新增源站，后续规则可直接复用这些地址。'
           />
         ) : (
-          <div className="grid gap-0 md:grid-cols-2">
+          <div className='grid gap-0 md:grid-cols-2'>
             {origins.map((origin) => (
               <article
                 key={origin.id}
-                className="border-b border-dashed p-4 md:[&:nth-child(odd)]:border-r"
+                className='border-b border-dashed p-4 md:[&:nth-child(odd)]:border-r'
               >
-                <div className="flex flex-col gap-4">
-                  <div className="space-y-2">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <h2 className="text-base font-semibold">{origin.name}</h2>
+                <div className='flex flex-col gap-4'>
+                  <div className='space-y-2'>
+                    <div className='flex flex-wrap items-center gap-2'>
+                      <h2 className='text-base font-semibold'>{origin.name}</h2>
                       <Badge
-                        variant="outline"
+                        variant='outline'
                         className={`text-[10px] ${
                           origin.route_count > 0
-                            ? "text-emerald-600 border-emerald-500/20"
-                            : "text-amber-600 border-amber-500/20"
+                            ? 'text-emerald-600 border-emerald-500/20'
+                            : 'text-amber-600 border-amber-500/20'
                         }`}
                       >
                         {origin.route_count} 条规则
                       </Badge>
                     </div>
-                    <p className="text-sm">{origin.address}</p>
-                    <p className="text-sm text-muted-foreground">
-                      {origin.remark || "暂无备注"}
+                    <p className='text-sm'>{origin.address}</p>
+                    <p className='text-sm text-muted-foreground'>
+                      {origin.remark || '暂无备注'}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className='text-xs text-muted-foreground'>
                       最后更新：{formatDateTime(origin.updated_at)}
                     </p>
                   </div>
-                  <div className="flex flex-wrap gap-2">
-                    <Button variant="outline" size="sm" asChild>
-                      <Link href={`/origins/detail?id=${origin.id}`}>
-                        详情
-                      </Link>
+                  <div className='flex flex-wrap gap-2'>
+                    <Button variant='outline' size='sm' asChild>
+                      <Link href={`/origins/detail?id=${origin.id}`}>详情</Link>
                     </Button>
                     <Button
-                      variant="outline"
-                      size="sm"
+                      variant='outline'
+                      size='sm'
                       onClick={() => {
-                        setEditingOrigin(origin)
-                        setEditorOpen(true)
+                        setEditingOrigin(origin);
+                        setEditorOpen(true);
                       }}
                     >
                       编辑
                     </Button>
                     <Button
-                      variant="destructive"
-                      size="sm"
+                      variant='destructive'
+                      size='sm'
                       onClick={() => setDeleteTarget(origin)}
                     >
-                      <Trash2 className="size-3.5 mr-1" />
+                      <Trash2 className='size-3.5 mr-1' />
                       删除
                     </Button>
                   </div>
@@ -180,7 +178,7 @@ export default function OriginsPage() {
       <AlertDialog
         open={deleteTarget !== null}
         onOpenChange={(open) => {
-          if (!open) setDeleteTarget(null)
+          if (!open) setDeleteTarget(null);
         }}
       >
         <AlertDialogContent>
@@ -193,9 +191,9 @@ export default function OriginsPage() {
           <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={() => {
-                if (deleteTarget) deleteMutation.mutate(deleteTarget.id)
+                if (deleteTarget) deleteMutation.mutate(deleteTarget.id);
               }}
             >
               确认删除
@@ -204,5 +202,5 @@ export default function OriginsPage() {
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }