prettier

2026-10-13 18:36:37 +08:00 · 2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
@@ -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>
-  )
-}
+  );
+}
@@ -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;
+}
@@ -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>
-  )
+  );
 }
@@ -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>
-  )
-}
+  );
+}
@@ -1,11 +1,19 @@
-"use client"
+'use client';

-import Link from "next/link"
-import {useMemo, useState} from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {useSearchParams} from "next/navigation"
-import {ArrowLeft, ChevronDown, ChevronRight, FileText, Loader2, Trash2, Upload,} 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 { useSearchParams } from 'next/navigation';
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+  Loader2,
+  Trash2,
+  Upload,
+} from 'lucide-react';
+import { toast } from 'sonner';

 import {
  AlertDialog,
@@ -16,69 +24,82 @@ 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 {type PagesDeployment, PagesService} 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 { type PagesDeployment, PagesService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';

-import {DeploymentUploadDialog} from "../components/deployment-upload-dialog"
-import {ProjectEditorDialog} from "../components/project-editor-dialog"
+import { DeploymentUploadDialog } from '../components/deployment-upload-dialog';
+import { ProjectEditorDialog } from '../components/project-editor-dialog';
 import {
  deploymentFilesQueryKey,
  deploymentsQueryKey,
  formatBytes,
  projectQueryKey,
  projectsQueryKey,
-} from "../components/pages-utils"
+} from '../components/pages-utils';

 function DeploymentFilesPanel({
  projectId,
  deployment,
 }: {
-  projectId: number
-  deployment: PagesDeployment
+  projectId: number;
+  deployment: PagesDeployment;
 }) {
  const filesQuery = useQuery({
    queryKey: deploymentFilesQueryKey(projectId, deployment.id),
    queryFn: () => PagesService.listDeploymentFiles(deployment.id),
-  })
+  });

  if (filesQuery.isLoading) {
-    return <p className="px-4 py-3 text-xs text-muted-foreground">加载文件清单...</p>
+    return (
+      <p className='px-4 py-3 text-xs text-muted-foreground'>加载文件清单...</p>
+    );
  }

  if (filesQuery.isError) {
    return (
-      <p className="px-4 py-3 text-xs text-destructive">
-        {filesQuery.error instanceof Error ? filesQuery.error.message : "加载失败"}
+      <p className='px-4 py-3 text-xs text-destructive'>
+        {filesQuery.error instanceof Error
+          ? filesQuery.error.message
+          : '加载失败'}
      </p>
-    )
+    );
  }

-  const files = filesQuery.data ?? []
+  const files = filesQuery.data ?? [];
  if (files.length === 0) {
-    return <p className="px-4 py-3 text-xs text-muted-foreground">暂无文件记录</p>
+    return (
+      <p className='px-4 py-3 text-xs text-muted-foreground'>暂无文件记录</p>
+    );
  }

  return (
-    <div className="border-t border-dashed bg-muted/10">
+    <div className='border-t border-dashed bg-muted/10'>
      <Table>
        <TableHeader>
-          <TableRow className="border-dashed hover:bg-transparent">
-            <TableHead className="text-xs">路径</TableHead>
-            <TableHead className="text-xs text-right">大小</TableHead>
+          <TableRow className='border-dashed hover:bg-transparent'>
+            <TableHead className='text-xs'>路径</TableHead>
+            <TableHead className='text-xs text-right'>大小</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {files.map((file) => (
-            <TableRow key={file.id} className="border-dashed">
-              <TableCell className="text-xs font-mono">{file.path}</TableCell>
-              <TableCell className="text-xs text-right text-muted-foreground">
+            <TableRow key={file.id} className='border-dashed'>
+              <TableCell className='text-xs font-mono'>{file.path}</TableCell>
+              <TableCell className='text-xs text-right text-muted-foreground'>
                {formatBytes(file.size)}
              </TableCell>
            </TableRow>
@@ -86,194 +107,215 @@ function DeploymentFilesPanel({
        </TableBody>
      </Table>
    </div>
-  )
+  );
 }

 export function PagesDetailPageClient() {
-  const searchParams = useSearchParams()
-  const queryClient = useQueryClient()
-  const projectId = searchParams.get("id")?.trim() ?? ""
-  const parsedProjectId = Number(projectId)
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const projectId = searchParams.get('id')?.trim() ?? '';
+  const parsedProjectId = Number(projectId);

-  const [editorOpen, setEditorOpen] = useState(false)
-  const [uploadOpen, setUploadOpen] = useState(false)
-  const [expandedDeploymentId, setExpandedDeploymentId] = useState<number | null>(null)
-  const [deleteProjectOpen, setDeleteProjectOpen] = useState(false)
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [expandedDeploymentId, setExpandedDeploymentId] = useState<
+    number | null
+  >(null);
+  const [deleteProjectOpen, setDeleteProjectOpen] = useState(false);
  const [pendingDeploymentAction, setPendingDeploymentAction] = useState<{
-    type: "activate" | "delete"
-    deployment: PagesDeployment
-  } | null>(null)
+    type: 'activate' | 'delete';
+    deployment: PagesDeployment;
+  } | null>(null);

-  const enabled = projectId !== "" && Number.isFinite(parsedProjectId)
+  const enabled = projectId !== '' && Number.isFinite(parsedProjectId);

  const projectQuery = useQuery({
    queryKey: projectQueryKey(projectId),
    queryFn: () => PagesService.getProject(parsedProjectId),
    enabled,
-  })
+  });

  const deploymentsQuery = useQuery({
    queryKey: deploymentsQueryKey(parsedProjectId),
    queryFn: () => PagesService.listDeployments(parsedProjectId),
    enabled,
-  })
+  });

  const activateMutation = useMutation({
    mutationFn: (deploymentId: number) =>
      PagesService.activateDeployment(parsedProjectId, deploymentId),
    onSuccess: async () => {
-      toast.success("部署已激活")
+      toast.success('部署已激活');
      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(parsedProjectId) }),
+        queryClient.invalidateQueries({
+          queryKey: deploymentsQueryKey(parsedProjectId),
+        }),
        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
-      ])
-      setPendingDeploymentAction(null)
+      ]);
+      setPendingDeploymentAction(null);
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "激活失败")
+      toast.error(error instanceof Error ? error.message : '激活失败');
    },
-  })
+  });

  const deleteDeploymentMutation = useMutation({
    mutationFn: (deploymentId: number) =>
      PagesService.deleteDeployment(parsedProjectId, deploymentId),
    onSuccess: async () => {
-      toast.success("部署已删除")
+      toast.success('部署已删除');
      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(parsedProjectId) }),
+        queryClient.invalidateQueries({
+          queryKey: deploymentsQueryKey(parsedProjectId),
+        }),
        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
-      ])
-      setPendingDeploymentAction(null)
+      ]);
+      setPendingDeploymentAction(null);
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "删除失败")
+      toast.error(error instanceof Error ? error.message : '删除失败');
    },
-  })
+  });

  const deleteProjectMutation = useMutation({
    mutationFn: () => PagesService.deleteProject(parsedProjectId),
    onSuccess: async () => {
-      toast.success("项目已删除")
-      await queryClient.invalidateQueries({ queryKey: projectsQueryKey })
-      window.location.href = "/pages"
+      toast.success('项目已删除');
+      await queryClient.invalidateQueries({ queryKey: projectsQueryKey });
+      window.location.href = '/pages';
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "删除失败")
+      toast.error(error instanceof Error ? error.message : '删除失败');
    },
-  })
+  });

-  const project = projectQuery.data
-  const deployments = useMemo(() => deploymentsQuery.data ?? [], [deploymentsQuery.data])
+  const project = projectQuery.data;
+  const deployments = useMemo(
+    () => deploymentsQuery.data ?? [],
+    [deploymentsQuery.data],
+  );

  if (!enabled) {
    return (
-      <div className="py-6 px-1">
-        <EmptyStateWithBorder description="缺少有效的 Pages 项目 ID。" />
+      <div className='py-6 px-1'>
+        <EmptyStateWithBorder description='缺少有效的 Pages 项目 ID。' />
      </div>
-    )
+    );
  }

  if (projectQuery.isLoading) {
    return (
-      <div className="py-6 px-1">
-        <LoadingStateWithBorder icon={FileText} description="加载项目详情..." />
+      <div className='py-6 px-1'>
+        <LoadingStateWithBorder icon={FileText} description='加载项目详情...' />
      </div>
-    )
+    );
  }

  if (projectQuery.isError) {
    return (
-      <div className="py-6 px-1">
+      <div className='py-6 px-1'>
        <ErrorInline
          message={
            projectQuery.error instanceof Error
              ? projectQuery.error.message
-              : "加载失败"
+              : '加载失败'
          }
          onRetry={() => void projectQuery.refetch()}
        />
      </div>
-    )
+    );
  }

  if (!project) {
    return (
-      <div className="py-6 px-1 space-y-4">
-        <Button variant="ghost" size="sm" asChild>
-          <Link href="/pages">
-            <ArrowLeft className="size-4 mr-1" />
+      <div className='py-6 px-1 space-y-4'>
+        <Button variant='ghost' size='sm' asChild>
+          <Link href='/pages'>
+            <ArrowLeft className='size-4 mr-1' />
            返回列表
          </Link>
        </Button>
-        <EmptyStateWithBorder description="Pages 项目不存在或已被删除。" />
+        <EmptyStateWithBorder description='Pages 项目不存在或已被删除。' />
      </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="/pages">
-              <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='/pages'>
+              <ArrowLeft className='size-4 mr-1' />
              返回列表
            </Link>
          </Button>
-          <div className="flex items-center gap-2">
-            <FileText className="size-5 text-primary" />
-            <h1 className="text-2xl font-semibold tracking-tight">{project.name}</h1>
+          <div className='flex items-center gap-2'>
+            <FileText className='size-5 text-primary' />
+            <h1 className='text-2xl font-semibold tracking-tight'>
+              {project.name}
+            </h1>
          </div>
-          <p className="text-sm text-muted-foreground">
+          <p className='text-sm text-muted-foreground'>
            {project.slug} · {project.deployment_count} 个部署
          </p>
        </div>
-        <div className="flex flex-wrap gap-2">
-          <Button variant="outline" size="sm" onClick={() => setEditorOpen(true)}>
+        <div className='flex flex-wrap gap-2'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => setEditorOpen(true)}
+          >
            编辑项目
          </Button>
-          <Button size="sm" onClick={() => setUploadOpen(true)}>
-            <Upload className="size-3.5 mr-1" />
+          <Button size='sm' onClick={() => setUploadOpen(true)}>
+            <Upload className='size-3.5 mr-1' />
            上传部署包
          </Button>
          <Button
-            variant="destructive"
-            size="sm"
+            variant='destructive'
+            size='sm'
            onClick={() => setDeleteProjectOpen(true)}
          >
-            <Trash2 className="size-3.5 mr-1" />
+            <Trash2 className='size-3.5 mr-1' />
            删除项目
          </Button>
        </div>
      </div>

-      <div className="grid gap-3 sm:grid-cols-3">
-        <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]">
-            {project.enabled ? "已启用" : "已停用"}
+      <div className='grid gap-3 sm:grid-cols-3'>
+        <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]'>
+            {project.enabled ? '已启用' : '已停用'}
          </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 font-semibold">
+        <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 font-semibold'>
            {project.active_deployment
              ? `#${project.active_deployment.deployment_number}`
-              : "暂无"}
+              : '暂无'}
          </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(project.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(project.updated_at)}</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'>
            部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。
          </p>
        </div>
@@ -282,61 +324,65 @@ export function PagesDetailPageClient() {
          <LoadingStateWithBorder />
        ) : deployments.length === 0 ? (
          <EmptyStateWithBorder
-            title="暂无部署"
-            description="上传 zip 部署包后，可以在这里激活某个部署版本。"
+            title='暂无部署'
+            description='上传 zip 部署包后，可以在这里激活某个部署版本。'
          />
        ) : (
-          <div className="divide-y divide-dashed">
+          <div className='divide-y divide-dashed'>
            {deployments.map((deployment) => {
-              const expanded = expandedDeploymentId === deployment.id
+              const expanded = expandedDeploymentId === deployment.id;
              return (
                <div key={deployment.id}>
-                  <div className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between">
-                    <div className="flex items-start gap-2">
+                  <div className='flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between'>
+                    <div className='flex items-start gap-2'>
                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-7 shrink-0"
+                        variant='ghost'
+                        size='icon'
+                        className='size-7 shrink-0'
                        onClick={() =>
-                          setExpandedDeploymentId(expanded ? null : deployment.id)
+                          setExpandedDeploymentId(
+                            expanded ? null : deployment.id,
+                          )
                        }
                      >
                        {expanded ? (
-                          <ChevronDown className="size-4" />
+                          <ChevronDown className='size-4' />
                        ) : (
-                          <ChevronRight className="size-4" />
+                          <ChevronRight className='size-4' />
                        )}
                      </Button>
                      <div>
-                        <div className="flex items-center gap-2">
-                          <p className="text-sm font-medium">
+                        <div className='flex items-center gap-2'>
+                          <p className='text-sm font-medium'>
                            #{deployment.deployment_number}
                          </p>
-                          {deployment.status === "active" ? (
-                            <Badge variant="outline" className="text-[10px]">
+                          {deployment.status === 'active' ? (
+                            <Badge variant='outline' className='text-[10px]'>
                              已激活
                            </Badge>
                          ) : null}
                        </div>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {deployment.checksum.slice(0, 16)} · {deployment.file_count} files ·{" "}
+                        <p className='mt-1 text-xs text-muted-foreground'>
+                          {deployment.checksum.slice(0, 16)} ·{' '}
+                          {deployment.file_count} files ·{' '}
                          {formatBytes(deployment.total_size)}
                        </p>
-                        <p className="mt-1 text-xs text-muted-foreground">
+                        <p className='mt-1 text-xs text-muted-foreground'>
                          创建于 {formatDateTime(deployment.created_at)}
                        </p>
                      </div>
                    </div>
-                    <div className="flex gap-2 md:ml-9">
+                    <div className='flex gap-2 md:ml-9'>
                      <Button
-                        variant="outline"
-                        size="sm"
+                        variant='outline'
+                        size='sm'
                        disabled={
-                          deployment.status === "active" || activateMutation.isPending
+                          deployment.status === 'active' ||
+                          activateMutation.isPending
                        }
                        onClick={() =>
                          setPendingDeploymentAction({
-                            type: "activate",
+                            type: 'activate',
                            deployment,
                          })
                        }
@@ -344,15 +390,15 @@ export function PagesDetailPageClient() {
                        激活
                      </Button>
                      <Button
-                        variant="destructive"
-                        size="sm"
+                        variant='destructive'
+                        size='sm'
                        disabled={
-                          deployment.status === "active" ||
+                          deployment.status === 'active' ||
                          deleteDeploymentMutation.isPending
                        }
                        onClick={() =>
                          setPendingDeploymentAction({
-                            type: "delete",
+                            type: 'delete',
                            deployment,
                          })
                        }
@@ -368,7 +414,7 @@ export function PagesDetailPageClient() {
                    />
                  ) : null}
                </div>
-              )
+              );
            })}
          </div>
        )}
@@ -396,13 +442,13 @@ export function PagesDetailPageClient() {
          <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={() => deleteProjectMutation.mutate()}
            >
              {deleteProjectMutation.isPending ? (
-                <Loader2 className="size-4 animate-spin" />
+                <Loader2 className='size-4 animate-spin' />
              ) : (
-                "确认删除"
+                '确认删除'
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
@@ -412,16 +458,18 @@ export function PagesDetailPageClient() {
      <AlertDialog
        open={pendingDeploymentAction !== null}
        onOpenChange={(open) => {
-          if (!open) setPendingDeploymentAction(null)
+          if (!open) setPendingDeploymentAction(null);
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
-              {pendingDeploymentAction?.type === "activate" ? "激活部署" : "删除部署"}
+              {pendingDeploymentAction?.type === 'activate'
+                ? '激活部署'
+                : '删除部署'}
            </AlertDialogTitle>
            <AlertDialogDescription>
-              {pendingDeploymentAction?.type === "activate"
+              {pendingDeploymentAction?.type === 'activate'
                ? `确认激活部署 #${pendingDeploymentAction.deployment.deployment_number} 吗？`
                : `确认删除部署 #${pendingDeploymentAction?.deployment.deployment_number} 吗？`}
            </AlertDialogDescription>
@@ -430,16 +478,20 @@ export function PagesDetailPageClient() {
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              className={
-                pendingDeploymentAction?.type === "delete"
-                  ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                pendingDeploymentAction?.type === 'delete'
+                  ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
                  : undefined
              }
              onClick={() => {
-                if (!pendingDeploymentAction) return
-                if (pendingDeploymentAction.type === "activate") {
-                  activateMutation.mutate(pendingDeploymentAction.deployment.id)
+                if (!pendingDeploymentAction) return;
+                if (pendingDeploymentAction.type === 'activate') {
+                  activateMutation.mutate(
+                    pendingDeploymentAction.deployment.id,
+                  );
                } else {
-                  deleteDeploymentMutation.mutate(pendingDeploymentAction.deployment.id)
+                  deleteDeploymentMutation.mutate(
+                    pendingDeploymentAction.deployment.id,
+                  );
                }
              }}
            >
@@ -449,5 +501,5 @@ export function PagesDetailPageClient() {
        </AlertDialogContent>
      </AlertDialog>
    </div>
-  )
+  );
 }
@@ -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 {PagesDetailPageClient} from './page-client';
+import { PagesDetailPageClient } from './page-client';

 function PagesDetailPageFallback() {
  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 PagesDetailPage() {
      <PagesDetailPageClient />
    </Suspense>
  );
-}
+}
@@ -1,53 +1,53 @@
-"use client"
+'use client';

-import {useState} from "react"
-import {useQuery} from "@tanstack/react-query"
-import {FileText, Plus, RefreshCw} from "lucide-react"
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { FileText, Plus, RefreshCw } from 'lucide-react';

-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {Button} from "@/components/ui/button"
-import {PagesService} from "@/lib/services/openflare"
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Button } from '@/components/ui/button';
+import { PagesService } from '@/lib/services/openflare';

-import {ProjectEditorDialog} from "./components/project-editor-dialog"
-import {ProjectListItem} from "./components/project-list-item"
-import {projectsQueryKey} from "./components/pages-utils"
+import { ProjectEditorDialog } from './components/project-editor-dialog';
+import { ProjectListItem } from './components/project-list-item';
+import { projectsQueryKey } from './components/pages-utils';

 export default function PagesPage() {
-  const [editorOpen, setEditorOpen] = useState(false)
+  const [editorOpen, setEditorOpen] = useState(false);

  const projectsQuery = useQuery({
    queryKey: projectsQueryKey,
    queryFn: () => PagesService.listProjects(),
-  })
+  });

  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">
-          <FileText 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'>
+          <FileText className='size-5 text-primary' />
          <div>
-            <h1 className="text-2xl font-semibold tracking-tight">Pages</h1>
-            <p className="text-sm text-muted-foreground">
+            <h1 className='text-2xl font-semibold tracking-tight'>Pages</h1>
+            <p className='text-sm text-muted-foreground'>
              边缘静态站点托管，上传 zip 部署包并在代理规则中选择 Pages 上游。
            </p>
          </div>
        </div>
-        <div className="flex gap-2">
+        <div className='flex gap-2'>
          <Button
-            variant="outline"
-            size="sm"
+            variant='outline'
+            size='sm'
            onClick={() => void projectsQuery.refetch()}
            disabled={projectsQuery.isFetching}
          >
            <RefreshCw
-              className={`size-3.5 mr-1 ${projectsQuery.isFetching ? "animate-spin" : ""}`}
+              className={`size-3.5 mr-1 ${projectsQuery.isFetching ? 'animate-spin' : ''}`}
            />
            刷新
          </Button>
-          <Button size="sm" onClick={() => setEditorOpen(true)}>
-            <Plus className="size-3.5 mr-1" />
+          <Button size='sm' onClick={() => setEditorOpen(true)}>
+            <Plus className='size-3.5 mr-1' />
            新建项目
          </Button>
        </div>
@@ -58,19 +58,19 @@ export default function PagesPage() {
          message={
            projectsQuery.error instanceof Error
              ? projectsQuery.error.message
-              : "加载失败"
+              : '加载失败'
          }
          onRetry={() => void projectsQuery.refetch()}
        />
      ) : null}

-      <div className="space-y-3">
+      <div className='space-y-3'>
        {projectsQuery.isLoading ? (
          <LoadingStateWithBorder />
        ) : (projectsQuery.data ?? []).length === 0 ? (
          <EmptyStateWithBorder
-            title="还没有 Pages 项目"
-            description="先创建一个项目，再上传静态资源部署包。"
+            title='还没有 Pages 项目'
+            description='先创建一个项目，再上传静态资源部署包。'
          />
        ) : (
          (projectsQuery.data ?? []).map((project) => (
@@ -81,5 +81,5 @@ export default function PagesPage() {

      <ProjectEditorDialog open={editorOpen} onOpenChange={setEditorOpen} />
    </div>
-  )
-}
+  );
+}