mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-11 17:56:37 +08:00
refactor(repo): consolidate openflare-server to root and move subprojects to internal/apps
- Merge all files inside openflare-server to the repository root directory. - Relocate agent, relay, and flared subprojects from internal/ to internal/apps/. - Combine docker-compose files and update build context paths to root. - Update GitHub workflows and Dockerfiles to refer to new directories and package names. - Rewrite Go package imports across all files. - Resolve database renew test race condition and clean up docs.
This commit is contained in:
ryan
@@ -0,0 +1,167 @@
|
||||
"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 {toast} from "sonner"
|
||||
import {z} from "zod"
|
||||
|
||||
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 {Textarea} from "@/components/ui/textarea"
|
||||
import {type OriginItem, type OriginMutationPayload, OriginService} from "@/lib/services/openflare"
|
||||
|
||||
const originSchema = z.object({
|
||||
name: z.string().max(255),
|
||||
address: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, "请输入源站地址")
|
||||
.refine(
|
||||
(value) => !/[/?#]/.test(value) && !value.includes("://"),
|
||||
"源站地址格式不合法",
|
||||
),
|
||||
remark: z.string().max(255),
|
||||
})
|
||||
|
||||
type OriginFormValues = z.infer<typeof originSchema>
|
||||
|
||||
const originsQueryKey = ["openflare", "origins"] as const
|
||||
|
||||
function toFormValues(origin?: OriginItem | null): OriginFormValues {
|
||||
if (!origin) return { name: "", address: "", remark: "" }
|
||||
return {
|
||||
name: origin.name,
|
||||
address: origin.address,
|
||||
remark: origin.remark || "",
|
||||
}
|
||||
}
|
||||
|
||||
function toPayload(values: OriginFormValues): OriginMutationPayload {
|
||||
return {
|
||||
name: values.name.trim(),
|
||||
address: values.address.trim(),
|
||||
remark: values.remark.trim(),
|
||||
}
|
||||
}
|
||||
|
||||
interface OriginEditorDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
origin?: OriginItem | null
|
||||
onSaved?: () => void
|
||||
}
|
||||
|
||||
export function OriginEditorDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
origin,
|
||||
onSaved,
|
||||
}: OriginEditorDialogProps) {
|
||||
const queryClient = useQueryClient()
|
||||
const form = useForm<OriginFormValues>({
|
||||
resolver: zodResolver(originSchema),
|
||||
defaultValues: toFormValues(origin),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (open) form.reset(toFormValues(origin))
|
||||
}, [form, origin, open])
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: OriginFormValues) => {
|
||||
const payload = toPayload(values)
|
||||
return origin
|
||||
? OriginService.update(origin.id, payload)
|
||||
: OriginService.create(payload)
|
||||
},
|
||||
onSuccess: async () => {
|
||||
toast.success(origin ? "源站已更新" : "源站已创建")
|
||||
await queryClient.invalidateQueries({ queryKey: originsQueryKey })
|
||||
if (origin) {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["openflare", "origins", String(origin.id)],
|
||||
})
|
||||
}
|
||||
onSaved?.()
|
||||
onOpenChange(false)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error instanceof Error ? error.message : "保存失败")
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{origin ? "编辑源站" : "新增源站"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
源站作为规则里的可复用地址目录，协议和端口仍由规则决定。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form
|
||||
id="origin-editor-form"
|
||||
className="space-y-4"
|
||||
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="address">源站地址</Label>
|
||||
<Input
|
||||
id="address"
|
||||
placeholder="origin.internal"
|
||||
{...form.register("address")}
|
||||
/>
|
||||
{form.formState.errors.address ? (
|
||||
<p className="text-xs text-destructive">
|
||||
{form.formState.errors.address.message}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="name">源站名</Label>
|
||||
<Input id="name" placeholder="主站源站" {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="remark">备注</Label>
|
||||
<Textarea id="remark" rows={2} {...form.register("remark")} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
form="origin-editor-form"
|
||||
disabled={mutation.isPending}
|
||||
>
|
||||
{mutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin mr-1" />
|
||||
保存中...
|
||||
</>
|
||||
) : origin ? (
|
||||
"保存修改"
|
||||
) : (
|
||||
"新增源站"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -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.getById(parsedId),
|
||||
enabled,
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: () => OriginService.deleteById(parsedId),
|
||||
onSuccess: async () => {
|
||||
toast.success("源站已删除")
|
||||
await queryClient.invalidateQueries({ queryKey: ["openflare", "origins"] })
|
||||
window.location.href = "/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="/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="/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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import {useMemo, useState} from "react"
|
||||
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
|
||||
import {MapPin, Plus, RefreshCw, 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 {type OriginItem, OriginService} from "@/lib/services/openflare"
|
||||
import {formatDateTime} from "@/lib/utils"
|
||||
|
||||
import {OriginEditorDialog} from "./components/origin-editor-dialog"
|
||||
|
||||
const originsQueryKey = ["openflare", "origins"] as const
|
||||
|
||||
export default function OriginsPage() {
|
||||
const queryClient = useQueryClient()
|
||||
const [editorOpen, setEditorOpen] = useState(false)
|
||||
const [editingOrigin, setEditingOrigin] = useState<OriginItem | null>(null)
|
||||
const [deleteTarget, setDeleteTarget] = useState<OriginItem | null>(null)
|
||||
|
||||
const originsQuery = useQuery({
|
||||
queryKey: originsQueryKey,
|
||||
queryFn: () => OriginService.list(),
|
||||
})
|
||||
|
||||
const origins = useMemo(() => originsQuery.data ?? [], [originsQuery.data])
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => OriginService.deleteById(id),
|
||||
onSuccess: async () => {
|
||||
toast.success("源站已删除")
|
||||
setDeleteTarget(null)
|
||||
await queryClient.invalidateQueries({ queryKey: originsQueryKey })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error instanceof Error ? error.message : "删除失败")
|
||||
},
|
||||
})
|
||||
|
||||
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">
|
||||
<MapPin className="size-5 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">源站</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
集中维护规则复用的源站地址，减少批量改地址时的重复操作。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void originsQuery.refetch()}
|
||||
disabled={originsQuery.isFetching}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`size-3.5 mr-1 ${originsQuery.isFetching ? "animate-spin" : ""}`}
|
||||
/>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditingOrigin(null)
|
||||
setEditorOpen(true)
|
||||
}}
|
||||
>
|
||||
<Plus className="size-3.5 mr-1" />
|
||||
新增源站
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{originsQuery.isError ? (
|
||||
<ErrorInline
|
||||
message={
|
||||
originsQuery.error instanceof Error
|
||||
? originsQuery.error.message
|
||||
: "加载失败"
|
||||
}
|
||||
onRetry={() => void originsQuery.refetch()}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="border border-dashed rounded-lg overflow-hidden bg-background">
|
||||
{originsQuery.isLoading ? (
|
||||
<LoadingStateWithBorder />
|
||||
) : origins.length === 0 ? (
|
||||
<EmptyStateWithBorder
|
||||
title="暂无源站"
|
||||
description="点击右上角新增源站，后续规则可直接复用这些地址。"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid gap-0 md:grid-cols-2">
|
||||
{origins.map((origin) => (
|
||||
<article
|
||||
key={origin.id}
|
||||
className="border-b border-dashed p-4 md:[&:nth-child(odd)]:border-r"
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="text-base font-semibold">{origin.name}</h2>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-[10px] ${
|
||||
origin.route_count > 0
|
||||
? "text-emerald-600 border-emerald-500/20"
|
||||
: "text-amber-600 border-amber-500/20"
|
||||
}`}
|
||||
>
|
||||
{origin.route_count} 条规则
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm">{origin.address}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{origin.remark || "暂无备注"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
最后更新：{formatDateTime(origin.updated_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={`/origins/detail?id=${origin.id}`}>
|
||||
详情
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditingOrigin(origin)
|
||||
setEditorOpen(true)
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setDeleteTarget(origin)}
|
||||
>
|
||||
<Trash2 className="size-3.5 mr-1" />
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<OriginEditorDialog
|
||||
open={editorOpen}
|
||||
onOpenChange={setEditorOpen}
|
||||
origin={editingOrigin}
|
||||
/>
|
||||
|
||||
<AlertDialog
|
||||
open={deleteTarget !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setDeleteTarget(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>删除源站</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
确认删除源站 {deleteTarget?.name} 吗？
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
onClick={() => {
|
||||
if (deleteTarget) deleteMutation.mutate(deleteTarget.id)
|
||||
}}
|
||||
>
|
||||
确认删除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user