prettier

frontend/app/(main)/pages/components/deployment-upload-dialog.tsx

@@ -1,11 +1,11 @@
-"use client"
+'use client';
 
-import {useRef, useState} from "react"
-import {useMutation, useQueryClient} from "@tanstack/react-query"
-import {Loader2, UploadCloud} from "lucide-react"
-import {toast} from "sonner"
+import {useRef, useState} from 'react';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {Loader2, UploadCloud} from 'lucide-react';
+import {toast} from 'sonner';
 
-import {Button} from "@/components/ui/button"
+import {Button} from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -13,19 +13,19 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Progress} from "@/components/ui/progress"
-import {PagesService} from "@/lib/services/openflare"
-import {cn} from "@/lib/utils"
+} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Progress} from '@/components/ui/progress';
+import {PagesService} from '@/lib/services/openflare';
+import {cn} from '@/lib/utils';
 
-import {deploymentsQueryKey, formatBytes, projectQueryKey, projectsQueryKey} from "./pages-utils"
+import {deploymentsQueryKey, formatBytes, projectQueryKey, projectsQueryKey,} from './pages-utils';
 
 interface DeploymentUploadDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  projectId: number
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: number;
 }
 
 export function DeploymentUploadDialog({
@@ -33,128 +33,136 @@ export function DeploymentUploadDialog({
   onOpenChange,
   projectId,
 }: DeploymentUploadDialogProps) {
-  const queryClient = useQueryClient()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [file, setFile] = useState<File | null>(null)
-  const [isDragActive, setIsDragActive] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState<number | null>(null)
+  const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
 
   const resetForm = () => {
-    setFile(null)
-    setIsDragActive(false)
-    setUploadProgress(null)
-    if (fileInputRef.current) fileInputRef.current.value = ""
-  }
+    setFile(null);
+    setIsDragActive(false);
+    setUploadProgress(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
 
   const handleClose = (nextOpen: boolean) => {
-    if (!nextOpen) resetForm()
-    onOpenChange(nextOpen)
-  }
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  };
 
   const uploadMutation = useMutation({
     mutationFn: () => {
-      if (!file) throw new Error("请选择 zip 部署包")
+      if (!file) throw new Error('请选择 zip 部署包');
       return PagesService.uploadDeployment(projectId, {
         file,
         onProgress: setUploadProgress,
-      })
+      });
     },
     onSuccess: async () => {
-      toast.success("部署包上传成功")
+      toast.success('部署包上传成功');
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(projectId) }),
+        queryClient.invalidateQueries({
+          queryKey: deploymentsQueryKey(projectId),
+        }),
         queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
         queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
-      ])
-      handleClose(false)
+      ]);
+      handleClose(false);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "上传失败")
-      setUploadProgress(null)
+      toast.error(error instanceof Error ? error.message : '上传失败');
+      setUploadProgress(null);
     },
-  })
+  });
 
   const handleFileSelect = (selected: File | null) => {
-    if (!selected) return
-    if (!selected.name.toLowerCase().endsWith(".zip")) {
-      toast.error("仅支持 zip 格式的文件")
-      return
+    if (!selected) return;
+    if (!selected.name.toLowerCase().endsWith('.zip')) {
+      toast.error('仅支持 zip 格式的文件');
+      return;
     }
-    setFile(selected)
-  }
+    setFile(selected);
+  };
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>上传部署包</DialogTitle>
-          <DialogDescription>上传已构建的 zip 静态资源包，部署后可在列表中激活。</DialogDescription>
+          <DialogDescription>
+            上传已构建的 zip 静态资源包，部署后可在列表中激活。
+          </DialogDescription>
         </DialogHeader>
 
         <div
           className={cn(
-            "rounded-lg border border-dashed p-8 text-center transition",
-            isDragActive ? "border-primary bg-primary/5" : "bg-muted/20",
+            'rounded-lg border border-dashed p-8 text-center transition',
+            isDragActive ? 'border-primary bg-primary/5' : 'bg-muted/20',
           )}
           onDragEnter={(e) => {
-            e.preventDefault()
-            setIsDragActive(true)
+            e.preventDefault();
+            setIsDragActive(true);
           }}
           onDragOver={(e) => e.preventDefault()}
           onDragLeave={(e) => {
-            e.preventDefault()
-            setIsDragActive(false)
+            e.preventDefault();
+            setIsDragActive(false);
           }}
           onDrop={(e) => {
-            e.preventDefault()
-            setIsDragActive(false)
-            handleFileSelect(e.dataTransfer.files[0] ?? null)
+            e.preventDefault();
+            setIsDragActive(false);
+            handleFileSelect(e.dataTransfer.files[0] ?? null);
           }}
         >
-          <UploadCloud className="size-8 mx-auto text-muted-foreground" />
-          <p className="mt-3 text-sm">拖拽 zip 文件到此处，或点击选择文件</p>
+          <UploadCloud className='size-8 mx-auto text-muted-foreground' />
+          <p className='mt-3 text-sm'>拖拽 zip 文件到此处，或点击选择文件</p>
           <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="mt-3"
+            type='button'
+            variant='outline'
+            size='sm'
+            className='mt-3'
             onClick={() => fileInputRef.current?.click()}
           >
             选择文件
           </Button>
           <input
             ref={fileInputRef}
-            type="file"
-            accept=".zip"
-            className="hidden"
+            type='file'
+            accept='.zip'
+            className='hidden'
             onChange={(e) => handleFileSelect(e.target.files?.[0] ?? null)}
           />
         </div>
 
         {file ? (
-          <div className="rounded-lg border border-dashed px-4 py-3 text-sm">
-            <p className="font-medium">{file.name}</p>
-            <p className="text-xs text-muted-foreground mt-1">{formatBytes(file.size)}</p>
+          <div className='rounded-lg border border-dashed px-4 py-3 text-sm'>
+            <p className='font-medium'>{file.name}</p>
+            <p className='text-xs text-muted-foreground mt-1'>
+              {formatBytes(file.size)}
+            </p>
           </div>
         ) : null}
 
         {uploadProgress !== null ? (
-          <div className="space-y-1.5">
-            <div className="flex justify-between text-xs text-muted-foreground">
-              <span>{uploadProgress >= 100 ? "服务端处理中" : "上传进度"}</span>
-              <span>{uploadProgress >= 100 ? "请稍候" : `${uploadProgress}%`}</span>
+          <div className='space-y-1.5'>
+            <div className='flex justify-between text-xs text-muted-foreground'>
+              <span>{uploadProgress >= 100 ? '服务端处理中' : '上传进度'}</span>
+              <span>
+                {uploadProgress >= 100 ? '请稍候' : `${uploadProgress}%`}
+              </span>
             </div>
             <Progress value={uploadProgress >= 100 ? 100 : uploadProgress} />
           </div>
         ) : null}
 
-        <div className="space-y-1.5">
-          <Label htmlFor="entryFile">入口文件</Label>
-          <Input id="entryFile" defaultValue="index.html" disabled />
+        <div className='space-y-1.5'>
+          <Label htmlFor='entryFile'>入口文件</Label>
+          <Input id='entryFile' defaultValue='index.html' disabled />
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => handleClose(false)}>
+          <Button variant='outline' onClick={() => handleClose(false)}>
             取消
           </Button>
           <Button
@@ -163,15 +171,15 @@ export function DeploymentUploadDialog({
           >
             {uploadMutation.isPending ? (
               <>
-                <Loader2 className="size-4 animate-spin mr-1" />
+                <Loader2 className='size-4 animate-spin mr-1' />
                 上传中...
               </>
             ) : (
-              "上传并创建部署"
+              '上传并创建部署'
             )}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+}