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

frontend/app/(main)/pages/components/pages-utils.ts

@@ -17,6 +17,15 @@ export function deploymentsQueryKey(projectId: number) {
   return ['openflare', 'pages', 'deployments', projectId] as const;
 }
 
-export function deploymentFilesQueryKey(projectId: number, deploymentId: number) {
-  return ['openflare', 'pages', 'deployment-files', projectId, deploymentId] as const;
-}
+export function deploymentFilesQueryKey(
+  projectId: number,
+  deploymentId: number,
+) {
+  return [
+    'openflare',
+    'pages',
+    'deployment-files',
+    projectId,
+    deploymentId,
+  ] as const;
+}

frontend/app/(main)/pages/components/project-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 {z} from "zod"
-import {toast} from "sonner"
+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 { z } from 'zod';
+import { toast } from 'sonner';
 
-import {Button} from "@/components/ui/button"
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -16,92 +16,92 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Switch} from "@/components/ui/switch"
-import {Textarea} from "@/components/ui/textarea"
-import {type PagesProject, PagesService} from "@/lib/services/openflare"
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { type PagesProject, PagesService } from '@/lib/services/openflare';
 
-import {projectQueryKey, projectsQueryKey} from "./pages-utils"
+import { projectQueryKey, projectsQueryKey } from './pages-utils';
 
 const pagesProjectSchema = z
   .object({
-    name: z.string().trim().min(1, "请输入项目名称").max(255),
-    slug: z.string().trim().max(255).optional().or(z.literal("")),
-    description: z.string().trim().max(1000).optional().or(z.literal("")),
+    name: z.string().trim().min(1, '请输入项目名称').max(255),
+    slug: z.string().trim().max(255).optional().or(z.literal('')),
+    description: z.string().trim().max(1000).optional().or(z.literal('')),
     spa_fallback_enabled: z.boolean(),
     spa_fallback_path: z.string().trim(),
     api_proxy_enabled: z.boolean(),
     api_proxy_path: z.string().trim(),
     api_proxy_pass: z.string().trim(),
     api_proxy_rewrite: z.string().trim(),
-    root_dir: z.string().trim().max(512).optional().or(z.literal("")),
-    entry_file: z.string().trim().min(1, "请输入入口文件").max(512),
+    root_dir: z.string().trim().max(512).optional().or(z.literal('')),
+    entry_file: z.string().trim().min(1, '请输入入口文件').max(512),
   })
   .superRefine((data, ctx) => {
-    if (data.spa_fallback_enabled && !data.spa_fallback_path.startsWith("/")) {
+    if (data.spa_fallback_enabled && !data.spa_fallback_path.startsWith('/')) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        path: ["spa_fallback_path"],
-        message: "回退路径必须以 / 开头",
-      })
+        path: ['spa_fallback_path'],
+        message: '回退路径必须以 / 开头',
+      });
     }
     if (data.api_proxy_enabled) {
-      if (!data.api_proxy_path.startsWith("/")) {
+      if (!data.api_proxy_path.startsWith('/')) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
-          path: ["api_proxy_path"],
-          message: "匹配路径必须以 / 开头",
-        })
+          path: ['api_proxy_path'],
+          message: '匹配路径必须以 / 开头',
+        });
       }
       if (!/^https?:\/\//i.test(data.api_proxy_pass)) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
-          path: ["api_proxy_pass"],
-          message: "后端地址必须以 http:// 或 https:// 开头",
-        })
+          path: ['api_proxy_pass'],
+          message: '后端地址必须以 http:// 或 https:// 开头',
+        });
       }
     }
-  })
+  });
 
-type PagesProjectFormValues = z.infer<typeof pagesProjectSchema>
+type PagesProjectFormValues = z.infer<typeof pagesProjectSchema>;
 
 function toFormValues(project?: PagesProject | null): PagesProjectFormValues {
   if (!project) {
     return {
-      name: "",
-      slug: "",
-      description: "",
+      name: '',
+      slug: '',
+      description: '',
       spa_fallback_enabled: false,
-      spa_fallback_path: "/index.html",
+      spa_fallback_path: '/index.html',
       api_proxy_enabled: false,
-      api_proxy_path: "",
-      api_proxy_pass: "",
-      api_proxy_rewrite: "",
-      root_dir: "",
-      entry_file: "index.html",
-    }
+      api_proxy_path: '',
+      api_proxy_pass: '',
+      api_proxy_rewrite: '',
+      root_dir: '',
+      entry_file: 'index.html',
+    };
   }
   return {
     name: project.name,
     slug: project.slug,
-    description: project.description || "",
+    description: project.description || '',
     spa_fallback_enabled: project.spa_fallback_enabled,
     spa_fallback_path: project.spa_fallback_path,
     api_proxy_enabled: project.api_proxy_enabled || false,
-    api_proxy_path: project.api_proxy_path || "",
-    api_proxy_pass: project.api_proxy_pass || "",
-    api_proxy_rewrite: project.api_proxy_rewrite || "",
-    root_dir: project.root_dir || "",
-    entry_file: project.entry_file || "index.html",
-  }
+    api_proxy_path: project.api_proxy_path || '',
+    api_proxy_pass: project.api_proxy_pass || '',
+    api_proxy_rewrite: project.api_proxy_rewrite || '',
+    root_dir: project.root_dir || '',
+    entry_file: project.entry_file || 'index.html',
+  };
 }
 
 interface ProjectEditorDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  project?: PagesProject | null
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project?: PagesProject | null;
 }
 
 export function ProjectEditorDialog({
@@ -109,170 +109,210 @@ export function ProjectEditorDialog({
   onOpenChange,
   project,
 }: ProjectEditorDialogProps) {
-  const queryClient = useQueryClient()
+  const queryClient = useQueryClient();
   const form = useForm<PagesProjectFormValues>({
     resolver: zodResolver(pagesProjectSchema),
     defaultValues: toFormValues(project),
-  })
+  });
 
   useEffect(() => {
-    if (open) form.reset(toFormValues(project))
-  }, [form, project, open])
+    if (open) form.reset(toFormValues(project));
+  }, [form, project, open]);
 
   const mutation = useMutation({
     mutationFn: async (values: PagesProjectFormValues) => {
       const payload = {
         name: values.name.trim(),
-        slug: values.slug?.trim() || "",
-        description: values.description?.trim() || "",
+        slug: values.slug?.trim() || '',
+        description: values.description?.trim() || '',
         enabled: project ? project.enabled : true,
         spa_fallback_enabled: values.spa_fallback_enabled,
         spa_fallback_path: values.spa_fallback_enabled
           ? values.spa_fallback_path.trim()
-          : project?.spa_fallback_path || "/index.html",
+          : project?.spa_fallback_path || '/index.html',
         api_proxy_enabled: values.api_proxy_enabled,
-        api_proxy_path: values.api_proxy_enabled ? values.api_proxy_path.trim() : "",
-        api_proxy_pass: values.api_proxy_enabled ? values.api_proxy_pass.trim() : "",
+        api_proxy_path: values.api_proxy_enabled
+          ? values.api_proxy_path.trim()
+          : '',
+        api_proxy_pass: values.api_proxy_enabled
+          ? values.api_proxy_pass.trim()
+          : '',
         api_proxy_rewrite: values.api_proxy_enabled
           ? values.api_proxy_rewrite.trim()
-          : "",
-        root_dir: values.root_dir?.trim() || "",
+          : '',
+        root_dir: values.root_dir?.trim() || '',
         entry_file: values.entry_file.trim(),
-      }
+      };
       return project
         ? PagesService.updateProject(project.id, payload)
-        : PagesService.createProject(payload)
+        : PagesService.createProject(payload);
     },
     onSuccess: async () => {
-      toast.success(project ? "项目已更新" : "项目已创建")
-      await queryClient.invalidateQueries({ queryKey: projectsQueryKey })
+      toast.success(project ? '项目已更新' : '项目已创建');
+      await queryClient.invalidateQueries({ queryKey: projectsQueryKey });
       if (project) {
         await queryClient.invalidateQueries({
           queryKey: projectQueryKey(project.id),
-        })
+        });
       }
-      onOpenChange(false)
+      onOpenChange(false);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "保存失败")
+      toast.error(error instanceof Error ? error.message : '保存失败');
     },
-  })
+  });
 
-  const spaEnabled = form.watch("spa_fallback_enabled")
-  const apiEnabled = form.watch("api_proxy_enabled")
+  const spaEnabled = form.watch('spa_fallback_enabled');
+  const apiEnabled = form.watch('api_proxy_enabled');
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className='max-w-2xl max-h-[90vh] overflow-y-auto'>
         <DialogHeader>
-          <DialogTitle>{project ? "编辑 Pages 项目" : "新建 Pages 项目"}</DialogTitle>
+          <DialogTitle>
+            {project ? '编辑 Pages 项目' : '新建 Pages 项目'}
+          </DialogTitle>
           <DialogDescription>
             配置静态站点托管参数，上传部署包后在代理规则中选择 Pages 上游。
           </DialogDescription>
         </DialogHeader>
 
         <form
-          id="pages-project-form"
-          className="space-y-4"
+          id='pages-project-form'
+          className='space-y-4'
           onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
         >
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-1.5">
-              <Label htmlFor="name">项目名称</Label>
-              <Input id="name" {...form.register("name")} />
+          <div className='grid gap-4 md:grid-cols-2'>
+            <div className='space-y-1.5'>
+              <Label htmlFor='name'>项目名称</Label>
+              <Input id='name' {...form.register('name')} />
               {form.formState.errors.name ? (
-                <p className="text-xs text-destructive">{form.formState.errors.name.message}</p>
+                <p className='text-xs text-destructive'>
+                  {form.formState.errors.name.message}
+                </p>
               ) : null}
             </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="slug">项目标识</Label>
-              <Input id="slug" placeholder="留空自动生成" {...form.register("slug")} />
+            <div className='space-y-1.5'>
+              <Label htmlFor='slug'>项目标识</Label>
+              <Input
+                id='slug'
+                placeholder='留空自动生成'
+                {...form.register('slug')}
+              />
             </div>
           </div>
 
-          <div className="space-y-1.5">
-            <Label htmlFor="description">描述</Label>
-            <Textarea id="description" rows={2} {...form.register("description")} />
+          <div className='space-y-1.5'>
+            <Label htmlFor='description'>描述</Label>
+            <Textarea
+              id='description'
+              rows={2}
+              {...form.register('description')}
+            />
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-1.5">
-              <Label htmlFor="entry_file">入口文件</Label>
-              <Input id="entry_file" {...form.register("entry_file")} />
+          <div className='grid gap-4 md:grid-cols-2'>
+            <div className='space-y-1.5'>
+              <Label htmlFor='entry_file'>入口文件</Label>
+              <Input id='entry_file' {...form.register('entry_file')} />
             </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="root_dir">根目录</Label>
-              <Input id="root_dir" placeholder="可选" {...form.register("root_dir")} />
+            <div className='space-y-1.5'>
+              <Label htmlFor='root_dir'>根目录</Label>
+              <Input
+                id='root_dir'
+                placeholder='可选'
+                {...form.register('root_dir')}
+              />
             </div>
           </div>
 
-          <div className="flex items-center justify-between rounded-lg border border-dashed px-4 py-3">
+          <div className='flex items-center justify-between rounded-lg border border-dashed px-4 py-3'>
             <div>
-              <p className="text-sm font-medium">SPA fallback</p>
-              <p className="text-xs text-muted-foreground">未命中静态文件时回退到指定路径</p>
+              <p className='text-sm font-medium'>SPA fallback</p>
+              <p className='text-xs text-muted-foreground'>
+                未命中静态文件时回退到指定路径
+              </p>
             </div>
             <Switch
               checked={spaEnabled}
               onCheckedChange={(checked) =>
-                form.setValue("spa_fallback_enabled", checked)
+                form.setValue('spa_fallback_enabled', checked)
               }
             />
           </div>
           {spaEnabled ? (
-            <div className="space-y-1.5">
-              <Label htmlFor="spa_fallback_path">回退路径</Label>
-              <Input id="spa_fallback_path" {...form.register("spa_fallback_path")} />
+            <div className='space-y-1.5'>
+              <Label htmlFor='spa_fallback_path'>回退路径</Label>
+              <Input
+                id='spa_fallback_path'
+                {...form.register('spa_fallback_path')}
+              />
             </div>
           ) : null}
 
-          <div className="flex items-center justify-between rounded-lg border border-dashed px-4 py-3">
+          <div className='flex items-center justify-between rounded-lg border border-dashed px-4 py-3'>
             <div>
-              <p className="text-sm font-medium">API 反向代理</p>
-              <p className="text-xs text-muted-foreground">为静态站点附加 API 反代规则</p>
+              <p className='text-sm font-medium'>API 反向代理</p>
+              <p className='text-xs text-muted-foreground'>
+                为静态站点附加 API 反代规则
+              </p>
             </div>
             <Switch
               checked={apiEnabled}
               onCheckedChange={(checked) =>
-                form.setValue("api_proxy_enabled", checked)
+                form.setValue('api_proxy_enabled', checked)
               }
             />
           </div>
           {apiEnabled ? (
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-1.5">
-                <Label htmlFor="api_proxy_path">匹配路径</Label>
-                <Input id="api_proxy_path" {...form.register("api_proxy_path")} />
+            <div className='grid gap-4 md:grid-cols-2'>
+              <div className='space-y-1.5'>
+                <Label htmlFor='api_proxy_path'>匹配路径</Label>
+                <Input
+                  id='api_proxy_path'
+                  {...form.register('api_proxy_path')}
+                />
               </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="api_proxy_pass">后端地址</Label>
-                <Input id="api_proxy_pass" {...form.register("api_proxy_pass")} />
+              <div className='space-y-1.5'>
+                <Label htmlFor='api_proxy_pass'>后端地址</Label>
+                <Input
+                  id='api_proxy_pass'
+                  {...form.register('api_proxy_pass')}
+                />
               </div>
-              <div className="space-y-1.5 md:col-span-2">
-                <Label htmlFor="api_proxy_rewrite">重写规则</Label>
-                <Input id="api_proxy_rewrite" {...form.register("api_proxy_rewrite")} />
+              <div className='space-y-1.5 md:col-span-2'>
+                <Label htmlFor='api_proxy_rewrite'>重写规则</Label>
+                <Input
+                  id='api_proxy_rewrite'
+                  {...form.register('api_proxy_rewrite')}
+                />
               </div>
             </div>
           ) : null}
         </form>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant='outline' onClick={() => onOpenChange(false)}>
             取消
           </Button>
-          <Button type="submit" form="pages-project-form" disabled={mutation.isPending}>
+          <Button
+            type='submit'
+            form='pages-project-form'
+            disabled={mutation.isPending}
+          >
             {mutation.isPending ? (
               <>
-                <Loader2 className="size-4 animate-spin mr-1" />
+                <Loader2 className='size-4 animate-spin mr-1' />
                 保存中...
               </>
             ) : project ? (
-              "保存修改"
+              '保存修改'
             ) : (
-              "创建项目"
+              '创建项目'
             )}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }

frontend/app/(main)/pages/components/project-list-item.tsx

@@ -1,61 +1,63 @@
-"use client"
+'use client';
 
-import Link from "next/link"
-import {ChevronRight} from "lucide-react"
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
 
-import {Badge} from "@/components/ui/badge"
-import type {PagesProject} from "@/lib/services/openflare"
-import {formatDateTime} from "@/lib/utils"
+import { Badge } from '@/components/ui/badge';
+import type { PagesProject } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
 interface ProjectListItemProps {
-  project: PagesProject
+  project: PagesProject;
 }
 
 export function ProjectListItem({ project }: ProjectListItemProps) {
   return (
     <Link
       href={`/pages/detail?id=${project.id}`}
-      className="group block rounded-lg border border-dashed bg-background p-4 transition hover:bg-muted/20"
+      className='group block rounded-lg border border-dashed bg-background p-4 transition hover:bg-muted/20'
     >
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="min-w-0 space-y-2">
-          <div className="flex flex-wrap items-center gap-2">
-            <h2 className="text-base font-semibold">{project.name}</h2>
-            <Badge variant="outline" className="text-[10px]">
-              {project.enabled ? "已启用" : "已停用"}
+      <div className='flex flex-col gap-4 md:flex-row md:items-center md:justify-between'>
+        <div className='min-w-0 space-y-2'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <h2 className='text-base font-semibold'>{project.name}</h2>
+            <Badge variant='outline' className='text-[10px]'>
+              {project.enabled ? '已启用' : '已停用'}
             </Badge>
-            <Badge variant="outline" className="text-[10px]">
-              {project.spa_fallback_enabled ? "SPA fallback" : "严格 404"}
+            <Badge variant='outline' className='text-[10px]'>
+              {project.spa_fallback_enabled ? 'SPA fallback' : '严格 404'}
             </Badge>
           </div>
-          <p className="text-sm text-muted-foreground">{project.slug}</p>
+          <p className='text-sm text-muted-foreground'>{project.slug}</p>
           {project.description ? (
-            <p className="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>
+            <p className='line-clamp-2 text-sm text-muted-foreground'>
+              {project.description}
+            </p>
           ) : null}
         </div>
 
-        <div className="rounded-lg border border-dashed px-4 py-3 text-sm md:min-w-36">
-          <p className="text-xs text-muted-foreground">当前激活</p>
-          <p className="mt-1 font-semibold">
+        <div className='rounded-lg border border-dashed px-4 py-3 text-sm md:min-w-36'>
+          <p className='text-xs text-muted-foreground'>当前激活</p>
+          <p className='mt-1 font-semibold'>
             {project.active_deployment
               ? `#${project.active_deployment.deployment_number}`
-              : "暂无"}
+              : '暂无'}
           </p>
         </div>
       </div>
 
-      <div className="mt-4 flex items-center justify-between border-t border-dashed pt-3 text-xs text-muted-foreground">
+      <div className='mt-4 flex items-center justify-between border-t border-dashed pt-3 text-xs text-muted-foreground'>
         <span>
           激活时间：
           {project.active_deployment?.activated_at
             ? formatDateTime(project.active_deployment.activated_at)
-            : "未激活"}
+            : '未激活'}
         </span>
-        <span className="inline-flex items-center text-primary group-hover:translate-x-0.5 transition-transform">
+        <span className='inline-flex items-center text-primary group-hover:translate-x-0.5 transition-transform'>
           查看详情
-          <ChevronRight className="size-3.5 ml-0.5" />
+          <ChevronRight className='size-3.5 ml-0.5' />
         </span>
       </div>
     </Link>
-  )
-}
+  );
+}