migrate frontend

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

@@ -0,0 +1,177 @@
+"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 {Button} from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  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"
+
+import {deploymentsQueryKey, formatBytes, projectQueryKey, projectsQueryKey} from "./pages-utils"
+
+interface DeploymentUploadDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  projectId: number
+}
+
+export function DeploymentUploadDialog({
+  open,
+  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 resetForm = () => {
+    setFile(null)
+    setIsDragActive(false)
+    setUploadProgress(null)
+    if (fileInputRef.current) fileInputRef.current.value = ""
+  }
+
+  const handleClose = (nextOpen: boolean) => {
+    if (!nextOpen) resetForm()
+    onOpenChange(nextOpen)
+  }
+
+  const uploadMutation = useMutation({
+    mutationFn: () => {
+      if (!file) throw new Error("请选择 zip 部署包")
+      return PagesService.uploadDeployment(projectId, {
+        file,
+        onProgress: setUploadProgress,
+      })
+    },
+    onSuccess: async () => {
+      toast.success("部署包上传成功")
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(projectId) }),
+        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+      ])
+      handleClose(false)
+    },
+    onError: (error) => {
+      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
+    }
+    setFile(selected)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>上传部署包</DialogTitle>
+          <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",
+          )}
+          onDragEnter={(e) => {
+            e.preventDefault()
+            setIsDragActive(true)
+          }}
+          onDragOver={(e) => e.preventDefault()}
+          onDragLeave={(e) => {
+            e.preventDefault()
+            setIsDragActive(false)
+          }}
+          onDrop={(e) => {
+            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>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="mt-3"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            选择文件
+          </Button>
+          <input
+            ref={fileInputRef}
+            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>
+        ) : null}
+
+        {uploadProgress !== null ? (
+          <div className="space-y-1.5">
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>上传进度</span>
+              <span>{uploadProgress}%</span>
+            </div>
+            <Progress value={uploadProgress} />
+          </div>
+        ) : null}
+
+        <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>
+          <Button
+            onClick={() => uploadMutation.mutate()}
+            disabled={!file || uploadMutation.isPending}
+          >
+            {uploadMutation.isPending ? (
+              <>
+                <Loader2 className="size-4 animate-spin mr-1" />
+                上传中...
+              </>
+            ) : (
+              "上传并创建部署"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,22 @@
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+
+export const projectsQueryKey = ['openflare', 'pages', 'projects'] as const;
+
+export function projectQueryKey(projectId: string | number) {
+  return ['openflare', 'pages', 'project', String(projectId)] as const;
+}
+
+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;
+}

Wavelet/frontend/app/(main)/openflare/pages/components/project-editor-dialog.tsx

@@ -0,0 +1,278 @@
+"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 {Button} from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  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"
+
+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("")),
+    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),
+  })
+  .superRefine((data, ctx) => {
+    if (data.spa_fallback_enabled && !data.spa_fallback_path.startsWith("/")) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["spa_fallback_path"],
+        message: "回退路径必须以 / 开头",
+      })
+    }
+    if (data.api_proxy_enabled) {
+      if (!data.api_proxy_path.startsWith("/")) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          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:// 开头",
+        })
+      }
+    }
+  })
+
+type PagesProjectFormValues = z.infer<typeof pagesProjectSchema>
+
+function toFormValues(project?: PagesProject | null): PagesProjectFormValues {
+  if (!project) {
+    return {
+      name: "",
+      slug: "",
+      description: "",
+      spa_fallback_enabled: false,
+      spa_fallback_path: "/index.html",
+      api_proxy_enabled: false,
+      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 || "",
+    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",
+  }
+}
+
+interface ProjectEditorDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  project?: PagesProject | null
+}
+
+export function ProjectEditorDialog({
+  open,
+  onOpenChange,
+  project,
+}: ProjectEditorDialogProps) {
+  const queryClient = useQueryClient()
+  const form = useForm<PagesProjectFormValues>({
+    resolver: zodResolver(pagesProjectSchema),
+    defaultValues: toFormValues(project),
+  })
+
+  useEffect(() => {
+    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() || "",
+        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",
+        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_rewrite: values.api_proxy_enabled
+          ? values.api_proxy_rewrite.trim()
+          : "",
+        root_dir: values.root_dir?.trim() || "",
+        entry_file: values.entry_file.trim(),
+      }
+      return project
+        ? PagesService.updateProject(project.id, payload)
+        : PagesService.createProject(payload)
+    },
+    onSuccess: async () => {
+      toast.success(project ? "项目已更新" : "项目已创建")
+      await queryClient.invalidateQueries({ queryKey: projectsQueryKey })
+      if (project) {
+        await queryClient.invalidateQueries({
+          queryKey: projectQueryKey(project.id),
+        })
+      }
+      onOpenChange(false)
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "保存失败")
+    },
+  })
+
+  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">
+        <DialogHeader>
+          <DialogTitle>{project ? "编辑 Pages 项目" : "新建 Pages 项目"}</DialogTitle>
+          <DialogDescription>
+            配置静态站点托管参数，上传部署包后在代理规则中选择 Pages 上游。
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          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")} />
+              {form.formState.errors.name ? (
+                <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>
+          </div>
+
+          <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>
+            <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>
+              <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)
+              }
+            />
+          </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>
+          ) : null}
+
+          <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>
+            </div>
+            <Switch
+              checked={apiEnabled}
+              onCheckedChange={(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>
+              <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>
+            </div>
+          ) : null}
+        </form>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button type="submit" form="pages-project-form" disabled={mutation.isPending}>
+            {mutation.isPending ? (
+              <>
+                <Loader2 className="size-4 animate-spin mr-1" />
+                保存中...
+              </>
+            ) : project ? (
+              "保存修改"
+            ) : (
+              "创建项目"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,61 @@
+"use client"
+
+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"
+
+interface ProjectListItemProps {
+  project: PagesProject
+}
+
+export function ProjectListItem({ project }: ProjectListItemProps) {
+  return (
+    <Link
+      href={`/openflare/pages/detail?id=${project.id}`}
+      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 ? "已启用" : "已停用"}
+            </Badge>
+            <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>
+          {project.description ? (
+            <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">
+            {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">
+        <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">
+          查看详情
+          <ChevronRight className="size-3.5 ml-0.5" />
+        </span>
+      </div>
+    </Link>
+  )
+}

Wavelet/frontend/app/(main)/openflare/pages/detail/page-client.tsx

@@ -0,0 +1,453 @@
+"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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  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"
+
+import {DeploymentUploadDialog} from "../components/deployment-upload-dialog"
+import {ProjectEditorDialog} from "../components/project-editor-dialog"
+import {
+  deploymentFilesQueryKey,
+  deploymentsQueryKey,
+  formatBytes,
+  projectQueryKey,
+  projectsQueryKey,
+} from "../components/pages-utils"
+
+function DeploymentFilesPanel({
+  projectId,
+  deployment,
+}: {
+  projectId: number
+  deployment: PagesDeployment
+}) {
+  const filesQuery = useQuery({
+    queryKey: deploymentFilesQueryKey(projectId, deployment.id),
+    queryFn: () => PagesService.listDeploymentFiles(projectId, deployment.id),
+  })
+
+  if (filesQuery.isLoading) {
+    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>
+    )
+  }
+
+  const files = filesQuery.data ?? []
+  if (files.length === 0) {
+    return <p className="px-4 py-3 text-xs text-muted-foreground">暂无文件记录</p>
+  }
+
+  return (
+    <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>
+        </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">
+                {formatBytes(file.size)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export function PagesDetailPageClient() {
+  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 [pendingDeploymentAction, setPendingDeploymentAction] = useState<{
+    type: "activate" | "delete"
+    deployment: PagesDeployment
+  } | null>(null)
+
+  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("部署已激活")
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(parsedProjectId) }),
+        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+      ])
+      setPendingDeploymentAction(null)
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "激活失败")
+    },
+  })
+
+  const deleteDeploymentMutation = useMutation({
+    mutationFn: (deploymentId: number) =>
+      PagesService.deleteDeployment(parsedProjectId, deploymentId),
+    onSuccess: async () => {
+      toast.success("部署已删除")
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(parsedProjectId) }),
+        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+      ])
+      setPendingDeploymentAction(null)
+    },
+    onError: (error) => {
+      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 = "/openflare/pages"
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "删除失败")
+    },
+  })
+
+  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>
+    )
+  }
+
+  if (projectQuery.isLoading) {
+    return (
+      <div className="py-6 px-1">
+        <LoadingStateWithBorder icon={FileText} description="加载项目详情..." />
+      </div>
+    )
+  }
+
+  if (projectQuery.isError) {
+    return (
+      <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="/openflare/pages">
+            <ArrowLeft className="size-4 mr-1" />
+            返回列表
+          </Link>
+        </Button>
+        <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="/openflare/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>
+          <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)}>
+            编辑项目
+          </Button>
+          <Button size="sm" onClick={() => setUploadOpen(true)}>
+            <Upload className="size-3.5 mr-1" />
+            上传部署包
+          </Button>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => setDeleteProjectOpen(true)}
+          >
+            <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 ? "已启用" : "已停用"}
+          </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">
+            {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>
+      </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">
+            部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。
+          </p>
+        </div>
+
+        {deploymentsQuery.isLoading ? (
+          <LoadingStateWithBorder />
+        ) : deployments.length === 0 ? (
+          <EmptyStateWithBorder
+            title="暂无部署"
+            description="上传 zip 部署包后，可以在这里激活某个部署版本。"
+          />
+        ) : (
+          <div className="divide-y divide-dashed">
+            {deployments.map((deployment) => {
+              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">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-7 shrink-0"
+                        onClick={() =>
+                          setExpandedDeploymentId(expanded ? null : deployment.id)
+                        }
+                      >
+                        {expanded ? (
+                          <ChevronDown className="size-4" />
+                        ) : (
+                          <ChevronRight className="size-4" />
+                        )}
+                      </Button>
+                      <div>
+                        <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]">
+                              已激活
+                            </Badge>
+                          ) : null}
+                        </div>
+                        <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">
+                          创建于 {formatDateTime(deployment.created_at)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2 md:ml-9">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        disabled={
+                          deployment.status === "active" || activateMutation.isPending
+                        }
+                        onClick={() =>
+                          setPendingDeploymentAction({
+                            type: "activate",
+                            deployment,
+                          })
+                        }
+                      >
+                        激活
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={
+                          deployment.status === "active" ||
+                          deleteDeploymentMutation.isPending
+                        }
+                        onClick={() =>
+                          setPendingDeploymentAction({
+                            type: "delete",
+                            deployment,
+                          })
+                        }
+                      >
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                  {expanded ? (
+                    <DeploymentFilesPanel
+                      projectId={parsedProjectId}
+                      deployment={deployment}
+                    />
+                  ) : null}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      <ProjectEditorDialog
+        open={editorOpen}
+        onOpenChange={setEditorOpen}
+        project={project}
+      />
+      <DeploymentUploadDialog
+        open={uploadOpen}
+        onOpenChange={setUploadOpen}
+        projectId={parsedProjectId}
+      />
+
+      <AlertDialog open={deleteProjectOpen} onOpenChange={setDeleteProjectOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除 Pages 项目</AlertDialogTitle>
+            <AlertDialogDescription>
+              确认删除项目 {project.name} 吗？此操作不可恢复。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => deleteProjectMutation.mutate()}
+            >
+              {deleteProjectMutation.isPending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                "确认删除"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={pendingDeploymentAction !== null}
+        onOpenChange={(open) => {
+          if (!open) setPendingDeploymentAction(null)
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {pendingDeploymentAction?.type === "activate" ? "激活部署" : "删除部署"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {pendingDeploymentAction?.type === "activate"
+                ? `确认激活部署 #${pendingDeploymentAction.deployment.deployment_number} 吗？`
+                : `确认删除部署 #${pendingDeploymentAction?.deployment.deployment_number} 吗？`}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              className={
+                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)
+                } else {
+                  deleteDeploymentMutation.mutate(pendingDeploymentAction.deployment.id)
+                }
+              }}
+            >
+              确认
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

Wavelet/frontend/app/(main)/openflare/pages/detail/page.tsx

@@ -0,0 +1,23 @@
+import {Suspense} from 'react';
+
+import {Skeleton} from '@/components/ui/skeleton';
+
+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>
+  );
+}
+
+export default function PagesDetailPage() {
+  return (
+    <Suspense fallback={<PagesDetailPageFallback />}>
+      <PagesDetailPageClient />
+    </Suspense>
+  );
+}

Wavelet/frontend/app/(main)/openflare/pages/page.tsx

@@ -1,7 +1,85 @@
-import {FileText} from 'lucide-react';
+"use client"
 
-import {PlaceholderPage} from '../components/placeholder-page';
+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 {ProjectEditorDialog} from "./components/project-editor-dialog"
+import {ProjectListItem} from "./components/project-list-item"
+import {projectsQueryKey} from "./components/pages-utils"
 
 export default function PagesPage() {
-  return <PlaceholderPage title="Pages" icon={FileText} />;
+  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>
+            <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">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void projectsQuery.refetch()}
+            disabled={projectsQuery.isFetching}
+          >
+            <RefreshCw
+              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>
+        </div>
+      </div>
+
+      {projectsQuery.isError ? (
+        <ErrorInline
+          message={
+            projectsQuery.error instanceof Error
+              ? projectsQuery.error.message
+              : "加载失败"
+          }
+          onRetry={() => void projectsQuery.refetch()}
+        />
+      ) : null}
+
+      <div className="space-y-3">
+        {projectsQuery.isLoading ? (
+          <LoadingStateWithBorder />
+        ) : (projectsQuery.data ?? []).length === 0 ? (
+          <EmptyStateWithBorder
+            title="还没有 Pages 项目"
+            description="先创建一个项目，再上传静态资源部署包。"
+          />
+        ) : (
+          (projectsQuery.data ?? []).map((project) => (
+            <ProjectListItem key={project.id} project={project} />
+          ))
+        )}
+      </div>
+
+      <ProjectEditorDialog open={editorOpen} onOpenChange={setEditorOpen} />
+    </div>
+  )
 }