prettier

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