prettier

frontend/app/(main)/origins/components/origin-editor-dialog.tsx

@@ -1,14 +1,14 @@
-"use client"
+'use client';
 
-import {useEffect} from "react"
-import {useMutation, useQueryClient} from "@tanstack/react-query"
-import {zodResolver} from "@hookform/resolvers/zod"
-import {useForm} from "react-hook-form"
-import {Loader2} from "lucide-react"
-import {toast} from "sonner"
-import {z} from "zod"
+import { useEffect } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { z } from 'zod';
 
-import {Button} from "@/components/ui/button"
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -16,36 +16,40 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Textarea} from "@/components/ui/textarea"
-import {type OriginItem, type OriginMutationPayload, OriginService} from "@/lib/services/openflare"
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  type OriginItem,
+  type OriginMutationPayload,
+  OriginService,
+} from '@/lib/services/openflare';
 
 const originSchema = z.object({
   name: z.string().max(255),
   address: z
     .string()
     .trim()
-    .min(1, "请输入源站地址")
+    .min(1, '请输入源站地址')
     .refine(
-      (value) => !/[/?#]/.test(value) && !value.includes("://"),
-      "源站地址格式不合法",
+      (value) => !/[/?#]/.test(value) && !value.includes('://'),
+      '源站地址格式不合法',
     ),
   remark: z.string().max(255),
-})
+});
 
-type OriginFormValues = z.infer<typeof originSchema>
+type OriginFormValues = z.infer<typeof originSchema>;
 
-const originsQueryKey = ["openflare", "origins"] as const
+const originsQueryKey = ['openflare', 'origins'] as const;
 
 function toFormValues(origin?: OriginItem | null): OriginFormValues {
-  if (!origin) return { name: "", address: "", remark: "" }
+  if (!origin) return { name: '', address: '', remark: '' };
   return {
     name: origin.name,
     address: origin.address,
-    remark: origin.remark || "",
-  }
+    remark: origin.remark || '',
+  };
 }
 
 function toPayload(values: OriginFormValues): OriginMutationPayload {
@@ -53,14 +57,14 @@ function toPayload(values: OriginFormValues): OriginMutationPayload {
     name: values.name.trim(),
     address: values.address.trim(),
     remark: values.remark.trim(),
-  }
+  };
 }
 
 interface OriginEditorDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  origin?: OriginItem | null
-  onSaved?: () => void
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  origin?: OriginItem | null;
+  onSaved?: () => void;
 }
 
 export function OriginEditorDialog({
@@ -69,99 +73,103 @@ export function OriginEditorDialog({
   origin,
   onSaved,
 }: OriginEditorDialogProps) {
-  const queryClient = useQueryClient()
+  const queryClient = useQueryClient();
   const form = useForm<OriginFormValues>({
     resolver: zodResolver(originSchema),
     defaultValues: toFormValues(origin),
-  })
+  });
 
   useEffect(() => {
-    if (open) form.reset(toFormValues(origin))
-  }, [form, origin, open])
+    if (open) form.reset(toFormValues(origin));
+  }, [form, origin, open]);
 
   const mutation = useMutation({
     mutationFn: async (values: OriginFormValues) => {
-      const payload = toPayload(values)
+      const payload = toPayload(values);
       return origin
         ? OriginService.update(origin.id, payload)
-        : OriginService.create(payload)
+        : OriginService.create(payload);
     },
     onSuccess: async () => {
-      toast.success(origin ? "源站已更新" : "源站已创建")
-      await queryClient.invalidateQueries({ queryKey: originsQueryKey })
+      toast.success(origin ? '源站已更新' : '源站已创建');
+      await queryClient.invalidateQueries({ queryKey: originsQueryKey });
       if (origin) {
         await queryClient.invalidateQueries({
-          queryKey: ["openflare", "origins", String(origin.id)],
-        })
+          queryKey: ['openflare', 'origins', String(origin.id)],
+        });
       }
-      onSaved?.()
-      onOpenChange(false)
+      onSaved?.();
+      onOpenChange(false);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "保存失败")
+      toast.error(error instanceof Error ? error.message : '保存失败');
     },
-  })
+  });
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{origin ? "编辑源站" : "新增源站"}</DialogTitle>
+          <DialogTitle>{origin ? '编辑源站' : '新增源站'}</DialogTitle>
           <DialogDescription>
             源站作为规则里的可复用地址目录，协议和端口仍由规则决定。
           </DialogDescription>
         </DialogHeader>
 
         <form
-          id="origin-editor-form"
-          className="space-y-4"
+          id='origin-editor-form'
+          className='space-y-4'
           onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
         >
-          <div className="space-y-1.5">
-            <Label htmlFor="address">源站地址</Label>
+          <div className='space-y-1.5'>
+            <Label htmlFor='address'>源站地址</Label>
             <Input
-              id="address"
-              placeholder="origin.internal"
-              {...form.register("address")}
+              id='address'
+              placeholder='origin.internal'
+              {...form.register('address')}
             />
             {form.formState.errors.address ? (
-              <p className="text-xs text-destructive">
+              <p className='text-xs text-destructive'>
                 {form.formState.errors.address.message}
               </p>
             ) : null}
           </div>
-          <div className="space-y-1.5">
-            <Label htmlFor="name">源站名</Label>
-            <Input id="name" placeholder="主站源站" {...form.register("name")} />
+          <div className='space-y-1.5'>
+            <Label htmlFor='name'>源站名</Label>
+            <Input
+              id='name'
+              placeholder='主站源站'
+              {...form.register('name')}
+            />
           </div>
-          <div className="space-y-1.5">
-            <Label htmlFor="remark">备注</Label>
-            <Textarea id="remark" rows={2} {...form.register("remark")} />
+          <div className='space-y-1.5'>
+            <Label htmlFor='remark'>备注</Label>
+            <Textarea id='remark' rows={2} {...form.register('remark')} />
           </div>
         </form>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant='outline' onClick={() => onOpenChange(false)}>
             取消
           </Button>
           <Button
-            type="submit"
-            form="origin-editor-form"
+            type='submit'
+            form='origin-editor-form'
             disabled={mutation.isPending}
           >
             {mutation.isPending ? (
               <>
-                <Loader2 className="size-4 animate-spin mr-1" />
+                <Loader2 className='size-4 animate-spin mr-1' />
                 保存中...
               </>
             ) : origin ? (
-              "保存修改"
+              '保存修改'
             ) : (
-              "新增源站"
+              '新增源站'
             )}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }

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>
-  )
+  );
 }

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

@@ -1,15 +1,15 @@
-import {Suspense} from 'react';
+import { Suspense } from 'react';
 
-import {Skeleton} from '@/components/ui/skeleton';
+import { Skeleton } from '@/components/ui/skeleton';
 
-import {OriginDetailPageClient} from './page-client';
+import { OriginDetailPageClient } from './page-client';
 
 function OriginDetailPageFallback() {
   return (
-    <div className="py-6 px-1 space-y-6">
-      <Skeleton className="h-8 w-48" />
-      <Skeleton className="h-10 w-full max-w-xl" />
-      <Skeleton className="h-64 w-full" />
+    <div className='py-6 px-1 space-y-6'>
+      <Skeleton className='h-8 w-48' />
+      <Skeleton className='h-10 w-full max-w-xl' />
+      <Skeleton className='h-64 w-full' />
     </div>
   );
 }
@@ -20,4 +20,4 @@ export default function OriginDetailPage() {
       <OriginDetailPageClient />
     </Suspense>
   );
-}
+}

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>
-  )
+  );
 }