prettier

frontend/app/(main)/config-versions/components/cleanup-dialog.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client';
 
-import {useEffect} from "react"
-import {zodResolver} from "@hookform/resolvers/zod"
-import {Loader2} from "lucide-react"
-import {useForm} from "react-hook-form"
-import {z} from "zod"
+import {useEffect} from 'react';
+import {zodResolver} from '@hookform/resolvers/zod';
+import {Loader2} from 'lucide-react';
+import {useForm} from 'react-hook-form';
+import {z} from 'zod';
 
 import {
   AlertDialog,
@@ -14,22 +14,22 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
+} from '@/components/ui/alert-dialog';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
 
 const cleanupSchema = z.object({
-  keepCount: z.number().int().min(3, "最少保留 3 个历史快照"),
-})
+  keepCount: z.number().int().min(3, '最少保留 3 个历史快照'),
+});
 
-type CleanupFormValues = z.infer<typeof cleanupSchema>
+type CleanupFormValues = z.infer<typeof cleanupSchema>;
 
 interface CleanupDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onConfirm: (keepCount: number) => void
-  loading: boolean
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (keepCount: number) => void;
+  loading: boolean;
 }
 
 export function CleanupDialog({
@@ -41,17 +41,17 @@ export function CleanupDialog({
   const form = useForm<CleanupFormValues>({
     resolver: zodResolver(cleanupSchema),
     defaultValues: { keepCount: 10 },
-  })
+  });
 
   useEffect(() => {
     if (open) {
-      form.reset({ keepCount: 10 })
+      form.reset({ keepCount: 10 });
     }
-  }, [form, open])
+  }, [form, open]);
 
   const handleConfirm = form.handleSubmit((values) => {
-    onConfirm(values.keepCount)
-  })
+    onConfirm(values.keepCount);
+  });
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
@@ -63,35 +63,43 @@ export function CleanupDialog({
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <div className="space-y-2">
-          <Label htmlFor="keepCount">保留最近快照个数</Label>
+        <div className='space-y-2'>
+          <Label htmlFor='keepCount'>保留最近快照个数</Label>
           <Input
-            id="keepCount"
-            type="number"
+            id='keepCount'
+            type='number'
             min={3}
             disabled={loading}
-            {...form.register("keepCount", { valueAsNumber: true })}
+            {...form.register('keepCount', { valueAsNumber: true })}
           />
-          <p className="text-xs text-muted-foreground">默认为 10 个，最少需保留 3 个。</p>
+          <p className='text-xs text-muted-foreground'>
+            默认为 10 个，最少需保留 3 个。
+          </p>
           {form.formState.errors.keepCount ? (
-            <p className="text-xs text-destructive">{form.formState.errors.keepCount.message}</p>
+            <p className='text-xs text-destructive'>
+              {form.formState.errors.keepCount.message}
+            </p>
           ) : null}
         </div>
 
         <AlertDialogFooter>
           <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
-          <Button variant="destructive" onClick={() => void handleConfirm()} disabled={loading}>
+          <Button
+            variant='destructive'
+            onClick={() => void handleConfirm()}
+            disabled={loading}
+          >
             {loading ? (
               <>
-                <Loader2 className="size-4 animate-spin mr-1" />
+                <Loader2 className='size-4 animate-spin mr-1' />
                 清理中...
               </>
             ) : (
-              "确认清理"
+              '确认清理'
             )}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  )
-}
+  );
+}

frontend/app/(main)/config-versions/components/diff-dialog.tsx

@@ -1,46 +1,50 @@
-"use client"
+'use client';
 
-import {Loader2} from "lucide-react"
+import {Loader2} from 'lucide-react';
 
-import {Badge} from "@/components/ui/badge"
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from "@/components/ui/dialog"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
-import type {ConfigDiffResult} from "@/lib/services/openflare"
+import {Badge} from '@/components/ui/badge';
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import type {ConfigDiffResult} from '@/lib/services/openflare';
 
 interface DiffDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  diff: ConfigDiffResult | null
-  loading: boolean
-  error: string | null
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  diff: ConfigDiffResult | null;
+  loading: boolean;
+  error: string | null;
 }
 
 function DiffChipList({ title, items }: { title: string; items: string[] }) {
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between gap-2">
-        <p className="text-xs font-semibold">{title}</p>
-        <Badge variant="outline" className="text-[10px] rounded-full">
+    <div className='space-y-2'>
+      <div className='flex items-center justify-between gap-2'>
+        <p className='text-xs font-semibold'>{title}</p>
+        <Badge variant='outline' className='text-[10px] rounded-full'>
           {items.length} 项
         </Badge>
       </div>
       {items.length > 0 ? (
-        <div className="flex flex-wrap gap-1.5">
+        <div className='flex flex-wrap gap-1.5'>
           {items.map((item) => (
-            <Badge key={item} variant="secondary" className="text-[10px] font-normal">
+            <Badge
+              key={item}
+              variant='secondary'
+              className='text-[10px] font-normal'
+            >
               {item}
             </Badge>
           ))}
         </div>
       ) : (
-        <p className="text-xs text-muted-foreground">无变更</p>
+        <p className='text-xs text-muted-foreground'>无变更</p>
       )}
     </div>
-  )
+  );
 }
 
 function renderOptionValue(value: string) {
-  return value === "" ? "空" : value
+  return value === '' ? '空' : value;
 }
 
 export function DiffDialog({
@@ -52,7 +56,7 @@ export function DiffDialog({
 }: DiffDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
+      <DialogContent className='sm:max-w-3xl max-h-[85vh] overflow-y-auto'>
         <DialogHeader>
           <DialogTitle>配置差异</DialogTitle>
           <DialogDescription>
@@ -61,69 +65,98 @@ export function DiffDialog({
         </DialogHeader>
 
         {loading ? (
-          <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
-            <Loader2 className="size-4 animate-spin" />
+          <div className='flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground'>
+            <Loader2 className='size-4 animate-spin' />
             正在加载差异数据...
           </div>
         ) : error ? (
-          <p className="text-sm text-destructive">{error}</p>
+          <p className='text-sm text-destructive'>{error}</p>
         ) : diff ? (
-          <div className="space-y-5">
-            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-lg border border-dashed p-3">
-                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">激活版本</p>
-                <p className="mt-1 text-sm font-medium">{diff.active_version || "无"}</p>
+          <div className='space-y-5'>
+            <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-4'>
+              <div className='rounded-lg border border-dashed p-3'>
+                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+                  激活版本
+                </p>
+                <p className='mt-1 text-sm font-medium'>
+                  {diff.active_version || '无'}
+                </p>
               </div>
-              <div className="rounded-lg border border-dashed p-3">
-                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">新增域名</p>
-                <p className="mt-1 text-lg font-semibold text-emerald-600">{diff.added_domains.length}</p>
+              <div className='rounded-lg border border-dashed p-3'>
+                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+                  新增域名
+                </p>
+                <p className='mt-1 text-lg font-semibold text-emerald-600'>
+                  {diff.added_domains.length}
+                </p>
               </div>
-              <div className="rounded-lg border border-dashed p-3">
-                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">删除域名</p>
-                <p className="mt-1 text-lg font-semibold text-amber-600">{diff.removed_domains.length}</p>
+              <div className='rounded-lg border border-dashed p-3'>
+                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+                  删除域名
+                </p>
+                <p className='mt-1 text-lg font-semibold text-amber-600'>
+                  {diff.removed_domains.length}
+                </p>
               </div>
-              <div className="rounded-lg border border-dashed p-3">
-                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">修改域名</p>
-                <p className="mt-1 text-lg font-semibold text-blue-600">{diff.modified_domains.length}</p>
+              <div className='rounded-lg border border-dashed p-3'>
+                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
+                  修改域名
+                </p>
+                <p className='mt-1 text-lg font-semibold text-blue-600'>
+                  {diff.modified_domains.length}
+                </p>
               </div>
             </div>
 
-            <div className="grid gap-4 md:grid-cols-3">
-              <DiffChipList title="新增域名" items={diff.added_domains} />
-              <DiffChipList title="删除域名" items={diff.removed_domains} />
-              <DiffChipList title="修改域名" items={diff.modified_domains} />
+            <div className='grid gap-4 md:grid-cols-3'>
+              <DiffChipList title='新增域名' items={diff.added_domains} />
+              <DiffChipList title='删除域名' items={diff.removed_domains} />
+              <DiffChipList title='修改域名' items={diff.modified_domains} />
             </div>
 
-            <div className="flex flex-wrap gap-2">
-              <Badge variant={diff.main_config_changed ? "destructive" : "outline"}>
-                主配置 {diff.main_config_changed ? "已变化" : "无变化"}
+            <div className='flex flex-wrap gap-2'>
+              <Badge
+                variant={diff.main_config_changed ? 'destructive' : 'outline'}
+              >
+                主配置 {diff.main_config_changed ? '已变化' : '无变化'}
               </Badge>
-              <Badge variant={diff.waf_config_changed ? "destructive" : "outline"}>
-                WAF {diff.waf_config_changed ? "已变化" : "无变化"}
+              <Badge
+                variant={diff.waf_config_changed ? 'destructive' : 'outline'}
+              >
+                WAF {diff.waf_config_changed ? '已变化' : '无变化'}
               </Badge>
-              <Badge variant="outline">
-                网站数 {diff.active_website_count} → {diff.current_website_count}
+              <Badge variant='outline'>
+                网站数 {diff.active_website_count} →{' '}
+                {diff.current_website_count}
               </Badge>
             </div>
 
             {diff.changed_option_details.length > 0 ? (
-              <div className="border border-dashed rounded-lg overflow-hidden">
+              <div className='border border-dashed rounded-lg overflow-hidden'>
                 <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>
+                  <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>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {diff.changed_option_details.map((item) => (
-                      <TableRow key={item.key} className="border-dashed">
-                        <TableCell className="text-xs font-medium">{item.key}</TableCell>
-                        <TableCell className="text-xs font-mono text-muted-foreground">
+                      <TableRow key={item.key} className='border-dashed'>
+                        <TableCell className='text-xs font-medium'>
+                          {item.key}
+                        </TableCell>
+                        <TableCell className='text-xs font-mono text-muted-foreground'>
                           {renderOptionValue(item.previous_value)}
                         </TableCell>
-                        <TableCell className="text-xs font-mono text-muted-foreground">
+                        <TableCell className='text-xs font-mono text-muted-foreground'>
                           {renderOptionValue(item.current_value)}
                         </TableCell>
                       </TableRow>
@@ -132,11 +165,13 @@ export function DiffDialog({
                 </Table>
               </div>
             ) : (
-              <p className="text-xs text-muted-foreground">当前无 OpenResty 参数变化。</p>
+              <p className='text-xs text-muted-foreground'>
+                当前无 OpenResty 参数变化。
+              </p>
             )}
           </div>
         ) : null}
       </DialogContent>
     </Dialog>
-  )
+  );
 }

frontend/app/(main)/config-versions/components/preview-sheet.tsx

@@ -1,22 +1,29 @@
-"use client"
+'use client';
 
-import {Loader2} from "lucide-react"
+import { Loader2 } from 'lucide-react';
 
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {CodeBlock} from "@/components/ui/code-block"
-import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
-import type {ConfigPreviewResult} from "@/lib/services/openflare"
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { CodeBlock } from '@/components/ui/code-block';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import type { ConfigPreviewResult } from '@/lib/services/openflare';
 
 interface PreviewSheetProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  preview: ConfigPreviewResult | null
-  loading: boolean
-  error: string | null
-  publishing: boolean
-  canPublish: boolean
-  onPublish: () => void
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  preview: ConfigPreviewResult | null;
+  loading: boolean;
+  error: string | null;
+  publishing: boolean;
+  canPublish: boolean;
+  onPublish: () => void;
 }
 
 export function PreviewSheet({
@@ -31,65 +38,86 @@ export function PreviewSheet({
 }: PreviewSheetProps) {
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0">
-        <SheetHeader className="px-5 py-4 border-b">
+      <SheetContent className='sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0'>
+        <SheetHeader className='px-5 py-4 border-b'>
           <SheetTitle>发布预览</SheetTitle>
           <SheetDescription>
             查看待发布配置的渲染结果与支持文件。
           </SheetDescription>
         </SheetHeader>
 
-        <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4">
+        <div className='flex-1 min-h-0 overflow-y-auto px-5 py-4'>
           {loading ? (
-            <div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
-              <Loader2 className="size-4 animate-spin" />
+            <div className='flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground'>
+              <Loader2 className='size-4 animate-spin' />
               正在加载预览...
             </div>
           ) : error ? (
-            <p className="text-sm text-destructive">{error}</p>
+            <p className='text-sm text-destructive'>{error}</p>
           ) : preview ? (
-            <div className="space-y-5 pb-4">
-              <div className="flex flex-wrap gap-2">
-                <Badge variant="outline" className="rounded-full text-[10px]">
+            <div className='space-y-5 pb-4'>
+              <div className='flex flex-wrap gap-2'>
+                <Badge variant='outline' className='rounded-full text-[10px]'>
                   规则 {preview.route_count} 条
                 </Badge>
-                <Badge variant="outline" className="rounded-full text-[10px]">
+                <Badge variant='outline' className='rounded-full text-[10px]'>
                   网站 {preview.website_count} 个
                 </Badge>
-                <Badge variant="outline" className="rounded-full text-[10px] font-mono">
+                <Badge
+                  variant='outline'
+                  className='rounded-full text-[10px] font-mono'
+                >
                   {preview.checksum.slice(0, 16)}...
                 </Badge>
               </div>
 
-              <div className="space-y-2">
-                <p className="text-xs font-semibold">主配置</p>
-                <CodeBlock code={preview.main_config} language="nginx" className="my-0 text-xs" />
+              <div className='space-y-2'>
+                <p className='text-xs font-semibold'>主配置</p>
+                <CodeBlock
+                  code={preview.main_config}
+                  language='nginx'
+                  className='my-0 text-xs'
+                />
               </div>
 
-              <div className="space-y-2">
-                <p className="text-xs font-semibold">路由配置</p>
-                <CodeBlock code={preview.rendered_config} language="nginx" className="my-0 text-xs" />
+              <div className='space-y-2'>
+                <p className='text-xs font-semibold'>路由配置</p>
+                <CodeBlock
+                  code={preview.rendered_config}
+                  language='nginx'
+                  className='my-0 text-xs'
+                />
               </div>
 
               {preview.support_files.length > 0 ? (
-                <div className="space-y-2">
-                  <p className="text-xs font-semibold">支持文件 ({preview.support_files.length})</p>
+                <div className='space-y-2'>
+                  <p className='text-xs font-semibold'>
+                    支持文件 ({preview.support_files.length})
+                  </p>
                   {preview.support_files.map((file) => (
                     <details
                       key={file.path}
-                      className="rounded-lg border border-dashed px-3 py-2"
+                      className='rounded-lg border border-dashed px-3 py-2'
                     >
-                      <summary className="cursor-pointer text-xs font-medium">{file.path}</summary>
-                      <CodeBlock code={file.content} language="text" className="my-2 text-xs" />
+                      <summary className='cursor-pointer text-xs font-medium'>
+                        {file.path}
+                      </summary>
+                      <CodeBlock
+                        code={file.content}
+                        language='text'
+                        className='my-2 text-xs'
+                      />
                     </details>
                   ))}
                 </div>
               ) : (
-                <p className="text-xs text-muted-foreground">当前发布不需要额外支持文件。</p>
+                <p className='text-xs text-muted-foreground'>
+                  当前发布不需要额外支持文件。
+                </p>
               )}
 
               {!canPublish ? (
-                <p className="text-xs text-muted-foreground">
+                <p className='text-xs text-muted-foreground'>
                   当前规则与已激活版本一致，无法重复发布。
                 </p>
               ) : null}
@@ -97,22 +125,29 @@ export function PreviewSheet({
           ) : null}
         </div>
 
-        <SheetFooter className="px-5 py-4 border-t">
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={publishing}>
+        <SheetFooter className='px-5 py-4 border-t'>
+          <Button
+            variant='outline'
+            onClick={() => onOpenChange(false)}
+            disabled={publishing}
+          >
             关闭
           </Button>
-          <Button onClick={onPublish} disabled={!canPublish || publishing || loading}>
+          <Button
+            onClick={onPublish}
+            disabled={!canPublish || publishing || loading}
+          >
             {publishing ? (
               <>
-                <Loader2 className="size-4 animate-spin mr-1" />
+                <Loader2 className='size-4 animate-spin mr-1' />
                 发布中...
               </>
             ) : (
-              "确认发布"
+              '确认发布'
             )}
           </Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
-  )
+  );
 }

frontend/app/(main)/config-versions/components/version-snapshot-sheet.tsx

@@ -1,20 +1,31 @@
-"use client"
+'use client';
 
-import {useEffect, useState} from "react"
-import {Loader2} from "lucide-react"
-import {toast} from "sonner"
+import { useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {CodeBlock} from "@/components/ui/code-block"
-import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
-import {type ConfigVersionDetail, ConfigVersionService, type ConfigVersionSummary,} from "@/lib/services/openflare"
-import {formatDateTime} from "@/lib/utils"
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { CodeBlock } from '@/components/ui/code-block';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  type ConfigVersionDetail,
+  ConfigVersionService,
+  type ConfigVersionSummary,
+} from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
 interface VersionSnapshotSheetProps {
-  version: ConfigVersionSummary | null
-  open: boolean
-  onOpenChange: (open: boolean) => void
+  version: ConfigVersionSummary | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 }
 
 export function VersionSnapshotSheet({
@@ -22,97 +33,112 @@ export function VersionSnapshotSheet({
   open,
   onOpenChange,
 }: VersionSnapshotSheetProps) {
-  const [detail, setDetail] = useState<ConfigVersionDetail | null>(null)
-  const [loading, setLoading] = useState(false)
+  const [detail, setDetail] = useState<ConfigVersionDetail | null>(null);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (!open || !version) {
-      setDetail(null)
-      return
+      setDetail(null);
+      return;
     }
 
-    let cancelled = false
-    setLoading(true)
+    let cancelled = false;
+    setLoading(true);
 
     ConfigVersionService.getById(version.id)
       .then((data) => {
-        if (!cancelled) setDetail(data)
+        if (!cancelled) setDetail(data);
       })
       .catch((err) => {
         if (!cancelled) {
-          toast.error("加载版本快照失败", {
-            description: err instanceof Error ? err.message : "未知错误",
-          })
+          toast.error('加载版本快照失败', {
+            description: err instanceof Error ? err.message : '未知错误',
+          });
         }
       })
       .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
+        if (!cancelled) setLoading(false);
+      });
 
     return () => {
-      cancelled = true
-    }
-  }, [open, version])
+      cancelled = true;
+    };
+  }, [open, version]);
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0">
-        <SheetHeader className="px-5 py-4 border-b">
+      <SheetContent className='sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0'>
+        <SheetHeader className='px-5 py-4 border-b'>
           <SheetTitle>
-            {version ? `版本 ${version.version}` : "版本快照"}
+            {version ? `版本 ${version.version}` : '版本快照'}
           </SheetTitle>
           <SheetDescription>查看历史配置版本的完整快照内容。</SheetDescription>
         </SheetHeader>
 
-        <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4">
+        <div className='flex-1 min-h-0 overflow-y-auto px-5 py-4'>
           {loading ? (
-            <div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
-              <Loader2 className="size-4 animate-spin" />
+            <div className='flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground'>
+              <Loader2 className='size-4 animate-spin' />
               正在加载快照...
             </div>
           ) : detail ? (
-            <div className="space-y-5 pb-4">
-              <div className="flex flex-wrap gap-2">
+            <div className='space-y-5 pb-4'>
+              <div className='flex flex-wrap gap-2'>
                 {detail.is_active ? (
-                  <Badge className="rounded-full text-[10px]">当前激活</Badge>
+                  <Badge className='rounded-full text-[10px]'>当前激活</Badge>
                 ) : (
-                  <Badge variant="outline" className="rounded-full text-[10px]">历史版本</Badge>
+                  <Badge variant='outline' className='rounded-full text-[10px]'>
+                    历史版本
+                  </Badge>
                 )}
-                <Badge variant="outline" className="rounded-full text-[10px] font-mono">
+                <Badge
+                  variant='outline'
+                  className='rounded-full text-[10px] font-mono'
+                >
                   {detail.checksum}
                 </Badge>
               </div>
 
-              <div className="grid gap-3 sm:grid-cols-2 text-xs">
+              <div className='grid gap-3 sm:grid-cols-2 text-xs'>
                 <div>
-                  <p className="text-muted-foreground">创建人</p>
-                  <p className="font-medium">{detail.created_by || "系统"}</p>
+                  <p className='text-muted-foreground'>创建人</p>
+                  <p className='font-medium'>{detail.created_by || '系统'}</p>
                 </div>
                 <div>
-                  <p className="text-muted-foreground">创建时间</p>
-                  <p className="font-medium">{formatDateTime(detail.created_at)}</p>
+                  <p className='text-muted-foreground'>创建时间</p>
+                  <p className='font-medium'>
+                    {formatDateTime(detail.created_at)}
+                  </p>
                 </div>
               </div>
 
-              <div className="space-y-2">
-                <p className="text-xs font-semibold">主配置</p>
-                <CodeBlock code={detail.main_config} language="nginx" className="my-0 text-xs" />
+              <div className='space-y-2'>
+                <p className='text-xs font-semibold'>主配置</p>
+                <CodeBlock
+                  code={detail.main_config}
+                  language='nginx'
+                  className='my-0 text-xs'
+                />
               </div>
 
-              <div className="space-y-2">
-                <p className="text-xs font-semibold">路由配置</p>
-                <CodeBlock code={detail.rendered_config} language="nginx" className="my-0 text-xs" />
+              <div className='space-y-2'>
+                <p className='text-xs font-semibold'>路由配置</p>
+                <CodeBlock
+                  code={detail.rendered_config}
+                  language='nginx'
+                  className='my-0 text-xs'
+                />
               </div>
             </div>
           ) : null}
         </div>
 
-        <SheetFooter className="px-5 py-4 border-t">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+        <SheetFooter className='px-5 py-4 border-t'>
+          <Button variant='outline' onClick={() => onOpenChange(false)}>
             关闭
           </Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
-  )
+  );
 }