migrate frontend

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

@@ -0,0 +1,226 @@
+"use client"
+
+import Link from "next/link"
+import {useState} from "react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {useSearchParams} from "next/navigation"
+import {ArrowLeft, MapPin, Trash2} 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 {OriginService} from "@/lib/services/openflare"
+import {formatDateTime} from "@/lib/utils"
+
+import {OriginEditorDialog} from "../components/origin-editor-dialog"
+
+export function OriginDetailPageClient() {
+  const searchParams = useSearchParams()
+  const queryClient = useQueryClient()
+  const originId = searchParams.get("id")?.trim() ?? ""
+  const parsedId = Number(originId)
+  const enabled = originId !== "" && Number.isFinite(parsedId)
+
+  const [editorOpen, setEditorOpen] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const originQuery = useQuery({
+    queryKey: ["openflare", "origins", originId],
+    queryFn: () => OriginService.get(parsedId),
+    enabled,
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: () => OriginService.delete(parsedId),
+    onSuccess: async () => {
+      toast.success("源站已删除")
+      await queryClient.invalidateQueries({ queryKey: ["openflare", "origins"] })
+      window.location.href = "/openflare/origins"
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "删除失败")
+    },
+  })
+
+  const origin = originQuery.data
+
+  if (!enabled) {
+    return (
+      <div className="py-6 px-1">
+        <EmptyStateWithBorder description="缺少有效的源站 ID。" />
+      </div>
+    )
+  }
+
+  if (originQuery.isLoading) {
+    return (
+      <div className="py-6 px-1">
+        <LoadingStateWithBorder icon={MapPin} description="加载源站详情..." />
+      </div>
+    )
+  }
+
+  if (originQuery.isError) {
+    return (
+      <div className="py-6 px-1">
+        <ErrorInline
+          message={
+            originQuery.error instanceof Error
+              ? originQuery.error.message
+              : "加载失败"
+          }
+          onRetry={() => void originQuery.refetch()}
+        />
+      </div>
+    )
+  }
+
+  if (!origin) {
+    return (
+      <div className="py-6 px-1 space-y-4">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/openflare/origins">
+            <ArrowLeft className="size-4 mr-1" />
+            返回列表
+          </Link>
+        </Button>
+        <EmptyStateWithBorder description="源站不存在或已被删除。" />
+      </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/origins">
+              <ArrowLeft className="size-4 mr-1" />
+              返回列表
+            </Link>
+          </Button>
+          <div className="flex items-center gap-2">
+            <MapPin className="size-5 text-primary" />
+            <h1 className="text-2xl font-semibold tracking-tight">{origin.name}</h1>
+          </div>
+          <p className="text-sm text-muted-foreground">{origin.address}</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => setEditorOpen(true)}>
+            编辑源站
+          </Button>
+          <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
+            <Trash2 className="size-3.5 mr-1" />
+            删除源站
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        <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]">
+            {origin.route_count} 条规则
+          </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">{formatDateTime(origin.created_at)}</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(origin.updated_at)}</p>
+        </div>
+        <div className="rounded-lg border border-dashed px-4 py-3 sm:col-span-2 xl:col-span-1">
+          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">备注</p>
+          <p className="mt-2 text-sm text-muted-foreground">{origin.remark || "暂无备注"}</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">
+            展示当前源站作为主源站绑定的规则。
+          </p>
+        </div>
+        {origin.routes.length === 0 ? (
+          <EmptyStateWithBorder
+            title="暂无关联规则"
+            description="当前源站还没有被任何规则引用。"
+          />
+        ) : (
+          <Table>
+            <TableHeader className="bg-muted/40">
+              <TableRow className="border-dashed hover:bg-transparent">
+                <TableHead className="text-xs font-semibold">域名</TableHead>
+                <TableHead className="text-xs font-semibold">源站地址</TableHead>
+                <TableHead className="text-xs font-semibold">状态</TableHead>
+                <TableHead className="text-xs font-semibold">更新时间</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {origin.routes.map((route) => (
+                <TableRow key={route.id} className="border-dashed">
+                  <TableCell className="text-xs font-medium">{route.domain}</TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {route.origin_url}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="text-[10px]">
+                      {route.enabled ? "启用" : "停用"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {formatDateTime(route.updated_at)}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+
+      <OriginEditorDialog
+        open={editorOpen}
+        onOpenChange={setEditorOpen}
+        origin={origin}
+        onSaved={() => void originQuery.refetch()}
+      />
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除源站</AlertDialogTitle>
+            <AlertDialogDescription>
+              确认删除源站 {origin.name} 吗？
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => deleteMutation.mutate()}
+            >
+              确认删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

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

@@ -0,0 +1,23 @@
+import {Suspense} from 'react';
+
+import {Skeleton} from '@/components/ui/skeleton';
+
+import {OriginDetailPageClient} from './page-client';
+
+function OriginDetailPageFallback() {
+  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 OriginDetailPage() {
+  return (
+    <Suspense fallback={<OriginDetailPageFallback />}>
+      <OriginDetailPageClient />
+    </Suspense>
+  );
+}