mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-12 10:16: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,97 @@
|
||||
"use client"
|
||||
|
||||
import {useEffect} from "react"
|
||||
import {zodResolver} from "@hookform/resolvers/zod"
|
||||
import {Loader2} from "lucide-react"
|
||||
import {useForm} from "react-hook-form"
|
||||
import {z} from "zod"
|
||||
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {Input} from "@/components/ui/input"
|
||||
import {Label} from "@/components/ui/label"
|
||||
|
||||
const cleanupSchema = z.object({
|
||||
keepCount: z.number().int().min(3, "最少保留 3 个历史快照"),
|
||||
})
|
||||
|
||||
type CleanupFormValues = z.infer<typeof cleanupSchema>
|
||||
|
||||
interface CleanupDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onConfirm: (keepCount: number) => void
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export function CleanupDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onConfirm,
|
||||
loading,
|
||||
}: CleanupDialogProps) {
|
||||
const form = useForm<CleanupFormValues>({
|
||||
resolver: zodResolver(cleanupSchema),
|
||||
defaultValues: { keepCount: 10 },
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
form.reset({ keepCount: 10 })
|
||||
}
|
||||
}, [form, open])
|
||||
|
||||
const handleConfirm = form.handleSubmit((values) => {
|
||||
onConfirm(values.keepCount)
|
||||
})
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>清理历史快照</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
删除旧的历史快照配置，系统将始终保护当前已激活的版本不被删除。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="keepCount">保留最近快照个数</Label>
|
||||
<Input
|
||||
id="keepCount"
|
||||
type="number"
|
||||
min={3}
|
||||
disabled={loading}
|
||||
{...form.register("keepCount", { valueAsNumber: true })}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">默认为 10 个，最少需保留 3 个。</p>
|
||||
{form.formState.errors.keepCount ? (
|
||||
<p className="text-xs text-destructive">{form.formState.errors.keepCount.message}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
|
||||
<Button variant="destructive" onClick={() => void handleConfirm()} disabled={loading}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin mr-1" />
|
||||
清理中...
|
||||
</>
|
||||
) : (
|
||||
"确认清理"
|
||||
)}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
"use client"
|
||||
|
||||
import {Loader2} from "lucide-react"
|
||||
|
||||
import {Badge} from "@/components/ui/badge"
|
||||
import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from "@/components/ui/dialog"
|
||||
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
|
||||
import type {ConfigDiffResult} from "@/lib/services/openflare"
|
||||
|
||||
interface DiffDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
diff: ConfigDiffResult | null
|
||||
loading: boolean
|
||||
error: string | null
|
||||
}
|
||||
|
||||
function DiffChipList({ title, items }: { title: string; items: string[] }) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-xs font-semibold">{title}</p>
|
||||
<Badge variant="outline" className="text-[10px] rounded-full">
|
||||
{items.length} 项
|
||||
</Badge>
|
||||
</div>
|
||||
{items.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{items.map((item) => (
|
||||
<Badge key={item} variant="secondary" className="text-[10px] font-normal">
|
||||
{item}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">无变更</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderOptionValue(value: string) {
|
||||
return value === "" ? "空" : value
|
||||
}
|
||||
|
||||
export function DiffDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
diff,
|
||||
loading,
|
||||
error,
|
||||
}: DiffDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>配置差异</DialogTitle>
|
||||
<DialogDescription>
|
||||
对比当前待发布配置与已激活版本之间的差异。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
正在加载差异数据...
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
) : diff ? (
|
||||
<div className="space-y-5">
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="rounded-lg border border-dashed p-3">
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground">激活版本</p>
|
||||
<p className="mt-1 text-sm font-medium">{diff.active_version || "无"}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-dashed p-3">
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground">新增域名</p>
|
||||
<p className="mt-1 text-lg font-semibold text-emerald-600">{diff.added_domains.length}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-dashed p-3">
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground">删除域名</p>
|
||||
<p className="mt-1 text-lg font-semibold text-amber-600">{diff.removed_domains.length}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-dashed p-3">
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground">修改域名</p>
|
||||
<p className="mt-1 text-lg font-semibold text-blue-600">{diff.modified_domains.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<DiffChipList title="新增域名" items={diff.added_domains} />
|
||||
<DiffChipList title="删除域名" items={diff.removed_domains} />
|
||||
<DiffChipList title="修改域名" items={diff.modified_domains} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant={diff.main_config_changed ? "destructive" : "outline"}>
|
||||
主配置 {diff.main_config_changed ? "已变化" : "无变化"}
|
||||
</Badge>
|
||||
<Badge variant={diff.waf_config_changed ? "destructive" : "outline"}>
|
||||
WAF {diff.waf_config_changed ? "已变化" : "无变化"}
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
网站数 {diff.active_website_count} → {diff.current_website_count}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{diff.changed_option_details.length > 0 ? (
|
||||
<div className="border border-dashed rounded-lg overflow-hidden">
|
||||
<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>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{diff.changed_option_details.map((item) => (
|
||||
<TableRow key={item.key} className="border-dashed">
|
||||
<TableCell className="text-xs font-medium">{item.key}</TableCell>
|
||||
<TableCell className="text-xs font-mono text-muted-foreground">
|
||||
{renderOptionValue(item.previous_value)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs font-mono text-muted-foreground">
|
||||
{renderOptionValue(item.current_value)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">当前无 OpenResty 参数变化。</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
"use client"
|
||||
|
||||
import {Loader2} from "lucide-react"
|
||||
|
||||
import {Badge} from "@/components/ui/badge"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {CodeBlock} from "@/components/ui/code-block"
|
||||
import {ScrollArea} from "@/components/ui/scroll-area"
|
||||
import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
|
||||
import type {ConfigPreviewResult} from "@/lib/services/openflare"
|
||||
|
||||
interface PreviewSheetProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
preview: ConfigPreviewResult | null
|
||||
loading: boolean
|
||||
error: string | null
|
||||
publishing: boolean
|
||||
canPublish: boolean
|
||||
onPublish: () => void
|
||||
}
|
||||
|
||||
export function PreviewSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
preview,
|
||||
loading,
|
||||
error,
|
||||
publishing,
|
||||
canPublish,
|
||||
onPublish,
|
||||
}: PreviewSheetProps) {
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="sm:max-w-2xl w-full p-0 flex flex-col gap-0">
|
||||
<SheetHeader className="px-5 py-4 border-b">
|
||||
<SheetTitle>发布预览</SheetTitle>
|
||||
<SheetDescription>
|
||||
查看待发布配置的渲染结果与支持文件。
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<ScrollArea className="flex-1 px-5 py-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
正在加载预览...
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
) : preview ? (
|
||||
<div className="space-y-5 pb-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="rounded-full text-[10px]">
|
||||
规则 {preview.route_count} 条
|
||||
</Badge>
|
||||
<Badge variant="outline" className="rounded-full text-[10px]">
|
||||
网站 {preview.website_count} 个
|
||||
</Badge>
|
||||
<Badge variant="outline" className="rounded-full text-[10px] font-mono">
|
||||
{preview.checksum.slice(0, 16)}...
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold">主配置</p>
|
||||
<CodeBlock code={preview.main_config} language="nginx" className="my-0 text-xs" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold">路由配置</p>
|
||||
<CodeBlock code={preview.rendered_config} language="nginx" className="my-0 text-xs" />
|
||||
</div>
|
||||
|
||||
{preview.support_files.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold">支持文件 ({preview.support_files.length})</p>
|
||||
{preview.support_files.map((file) => (
|
||||
<details
|
||||
key={file.path}
|
||||
className="rounded-lg border border-dashed px-3 py-2"
|
||||
>
|
||||
<summary className="cursor-pointer text-xs font-medium">{file.path}</summary>
|
||||
<CodeBlock code={file.content} language="text" className="my-2 text-xs" />
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">当前发布不需要额外支持文件。</p>
|
||||
)}
|
||||
|
||||
{!canPublish ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
当前规则与已激活版本一致，无法重复发布。
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</ScrollArea>
|
||||
|
||||
<SheetFooter className="px-5 py-4 border-t">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={publishing}>
|
||||
关闭
|
||||
</Button>
|
||||
<Button onClick={onPublish} disabled={!canPublish || publishing || loading}>
|
||||
{publishing ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin mr-1" />
|
||||
发布中...
|
||||
</>
|
||||
) : (
|
||||
"确认发布"
|
||||
)}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
"use client"
|
||||
|
||||
import {useEffect, useState} from "react"
|
||||
import {Loader2} from "lucide-react"
|
||||
import {toast} from "sonner"
|
||||
|
||||
import {Badge} from "@/components/ui/badge"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {CodeBlock} from "@/components/ui/code-block"
|
||||
import {ScrollArea} from "@/components/ui/scroll-area"
|
||||
import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
|
||||
import {type ConfigVersionDetail, ConfigVersionService, type ConfigVersionSummary,} from "@/lib/services/openflare"
|
||||
import {formatDateTime} from "@/lib/utils"
|
||||
|
||||
interface VersionSnapshotSheetProps {
|
||||
version: ConfigVersionSummary | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function VersionSnapshotSheet({
|
||||
version,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: VersionSnapshotSheetProps) {
|
||||
const [detail, setDetail] = useState<ConfigVersionDetail | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !version) {
|
||||
setDetail(null)
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
setLoading(true)
|
||||
|
||||
ConfigVersionService.getById(version.id)
|
||||
.then((data) => {
|
||||
if (!cancelled) setDetail(data)
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!cancelled) {
|
||||
toast.error("加载版本快照失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false)
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [open, version])
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="sm:max-w-2xl w-full p-0 flex flex-col gap-0">
|
||||
<SheetHeader className="px-5 py-4 border-b">
|
||||
<SheetTitle>
|
||||
{version ? `版本 ${version.version}` : "版本快照"}
|
||||
</SheetTitle>
|
||||
<SheetDescription>查看历史配置版本的完整快照内容。</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<ScrollArea className="flex-1 px-5 py-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
正在加载快照...
|
||||
</div>
|
||||
) : detail ? (
|
||||
<div className="space-y-5 pb-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail.is_active ? (
|
||||
<Badge className="rounded-full text-[10px]">当前激活</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="rounded-full text-[10px]">历史版本</Badge>
|
||||
)}
|
||||
<Badge variant="outline" className="rounded-full text-[10px] font-mono">
|
||||
{detail.checksum}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 text-xs">
|
||||
<div>
|
||||
<p className="text-muted-foreground">创建人</p>
|
||||
<p className="font-medium">{detail.created_by || "系统"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">创建时间</p>
|
||||
<p className="font-medium">{formatDateTime(detail.created_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold">快照 JSON</p>
|
||||
<CodeBlock code={detail.snapshot_json} language="json" className="my-0 text-xs" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold">主配置</p>
|
||||
<CodeBlock code={detail.main_config} language="nginx" className="my-0 text-xs" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold">路由配置</p>
|
||||
<CodeBlock code={detail.rendered_config} language="nginx" className="my-0 text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</ScrollArea>
|
||||
|
||||
<SheetFooter className="px-5 py-4 border-t">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,425 @@
|
||||
"use client"
|
||||
|
||||
import {useCallback, useEffect, useMemo, useState} from "react"
|
||||
import {Eye, GitCompare, History, Loader2, Play, RefreshCw, Trash2,} from "lucide-react"
|
||||
import {toast} from "sonner"
|
||||
|
||||
import {EmptyStateWithBorder} from "@/components/layout/empty"
|
||||
import {ErrorInline} from "@/components/layout/error"
|
||||
import {LoadingStateWithBorder} from "@/components/layout/loading"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
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 ConfigDiffResult,
|
||||
type ConfigPreviewResult,
|
||||
ConfigVersionService,
|
||||
type ConfigVersionSummary,
|
||||
} from "@/lib/services/openflare"
|
||||
import {formatDateTime} from "@/lib/utils"
|
||||
|
||||
import {CleanupDialog} from "./components/cleanup-dialog"
|
||||
import {DiffDialog} from "./components/diff-dialog"
|
||||
import {PreviewSheet} from "./components/preview-sheet"
|
||||
import {VersionSnapshotSheet} from "./components/version-snapshot-sheet"
|
||||
|
||||
function truncateChecksum(checksum: string) {
|
||||
if (!checksum) return "—"
|
||||
return checksum.length > 16 ? `${checksum.slice(0, 16)}...` : checksum
|
||||
}
|
||||
|
||||
function hasConfigDiff(diff: ConfigDiffResult) {
|
||||
return (
|
||||
diff.added_domains.length > 0 ||
|
||||
diff.removed_domains.length > 0 ||
|
||||
diff.modified_domains.length > 0 ||
|
||||
diff.main_config_changed ||
|
||||
diff.changed_option_keys.length > 0 ||
|
||||
!diff.active_version
|
||||
)
|
||||
}
|
||||
|
||||
export default function ConfigVersionsPage() {
|
||||
const [versions, setVersions] = useState<ConfigVersionSummary[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [previewOpen, setPreviewOpen] = useState(false)
|
||||
const [preview, setPreview] = useState<ConfigPreviewResult | null>(null)
|
||||
const [previewLoading, setPreviewLoading] = useState(false)
|
||||
const [previewError, setPreviewError] = useState<string | null>(null)
|
||||
|
||||
const [diffOpen, setDiffOpen] = useState(false)
|
||||
const [diff, setDiff] = useState<ConfigDiffResult | null>(null)
|
||||
const [diffLoading, setDiffLoading] = useState(false)
|
||||
const [diffError, setDiffError] = useState<string | null>(null)
|
||||
|
||||
const [snapshotVersion, setSnapshotVersion] = useState<ConfigVersionSummary | null>(null)
|
||||
const [snapshotOpen, setSnapshotOpen] = useState(false)
|
||||
|
||||
const [publishConfirmOpen, setPublishConfirmOpen] = useState(false)
|
||||
const [forcePublishConfirmOpen, setForcePublishConfirmOpen] = useState(false)
|
||||
const [activateTarget, setActivateTarget] = useState<ConfigVersionSummary | null>(null)
|
||||
const [cleanupOpen, setCleanupOpen] = useState(false)
|
||||
|
||||
const [publishing, setPublishing] = useState(false)
|
||||
const [activating, setActivating] = useState(false)
|
||||
const [cleaning, setCleaning] = useState(false)
|
||||
|
||||
const canPublish = useMemo(
|
||||
() => Boolean(preview && preview.route_count > 0 && diff && hasConfigDiff(diff)),
|
||||
[preview, diff],
|
||||
)
|
||||
|
||||
const fetchVersions = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data = await ConfigVersionService.list()
|
||||
setVersions(data)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "加载失败")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void fetchVersions()
|
||||
}, [fetchVersions])
|
||||
|
||||
const loadPreviewData = async () => {
|
||||
setPreviewLoading(true)
|
||||
setPreviewError(null)
|
||||
setDiffLoading(true)
|
||||
setDiffError(null)
|
||||
|
||||
try {
|
||||
const [previewData, diffData] = await Promise.all([
|
||||
ConfigVersionService.preview(),
|
||||
ConfigVersionService.diff(),
|
||||
])
|
||||
setPreview(previewData)
|
||||
setDiff(diffData)
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "加载预览失败"
|
||||
setPreviewError(message)
|
||||
setDiffError(message)
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
setDiffLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenPreview = async () => {
|
||||
setPreviewOpen(true)
|
||||
if (!preview) {
|
||||
await loadPreviewData()
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenDiff = async () => {
|
||||
setDiffOpen(true)
|
||||
if (!diff) {
|
||||
setDiffLoading(true)
|
||||
setDiffError(null)
|
||||
try {
|
||||
const diffData = await ConfigVersionService.diff()
|
||||
setDiff(diffData)
|
||||
} catch (err) {
|
||||
setDiffError(err instanceof Error ? err.message : "加载差异失败")
|
||||
} finally {
|
||||
setDiffLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handlePublish = async (force = false) => {
|
||||
setPublishing(true)
|
||||
try {
|
||||
const version = await ConfigVersionService.publish(force)
|
||||
toast.success("发布成功", { description: `版本 ${version.version}` })
|
||||
setPreviewOpen(false)
|
||||
setPublishConfirmOpen(false)
|
||||
setForcePublishConfirmOpen(false)
|
||||
setPreview(null)
|
||||
setDiff(null)
|
||||
await fetchVersions()
|
||||
} catch (err) {
|
||||
toast.error("发布失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
} finally {
|
||||
setPublishing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleActivate = async () => {
|
||||
if (!activateTarget) return
|
||||
|
||||
setActivating(true)
|
||||
try {
|
||||
const version = await ConfigVersionService.activate(activateTarget.id)
|
||||
toast.success("激活成功", { description: `版本 ${version.version}` })
|
||||
setActivateTarget(null)
|
||||
await fetchVersions()
|
||||
} catch (err) {
|
||||
toast.error("激活失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
} finally {
|
||||
setActivating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCleanup = async (keepCount: number) => {
|
||||
setCleaning(true)
|
||||
try {
|
||||
const result = await ConfigVersionService.cleanup({ keep_count: keepCount })
|
||||
toast.success("清理完成", {
|
||||
description: `已删除 ${result.deleted_count} 个历史快照`,
|
||||
})
|
||||
setCleanupOpen(false)
|
||||
await fetchVersions()
|
||||
} catch (err) {
|
||||
toast.error("清理失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
} finally {
|
||||
setCleaning(false)
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<History 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 flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => void fetchVersions()} disabled={loading}>
|
||||
<RefreshCw className={`size-3.5 mr-1 ${loading ? "animate-spin" : ""}`} />
|
||||
刷新
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCleanupOpen(true)}>
|
||||
<Trash2 className="size-3.5 mr-1" />
|
||||
清理旧版本
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => void handleOpenDiff()}>
|
||||
<GitCompare className="size-3.5 mr-1" />
|
||||
查看差异
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setForcePublishConfirmOpen(true)}>
|
||||
强制发布
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => void handleOpenPreview()}>
|
||||
<Eye className="size-3.5 mr-1" />
|
||||
预览并发布
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <ErrorInline message={error} onRetry={() => void fetchVersions()} /> : null}
|
||||
|
||||
<div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
|
||||
{loading ? (
|
||||
<LoadingStateWithBorder />
|
||||
) : versions.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">Checksum</TableHead>
|
||||
<TableHead className="text-xs font-semibold">创建时间</TableHead>
|
||||
<TableHead className="text-xs font-semibold text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{versions.map((version) => (
|
||||
<TableRow
|
||||
key={version.id}
|
||||
className="border-dashed hover:bg-muted/10 transition-colors"
|
||||
>
|
||||
<TableCell className="font-mono text-xs font-semibold">
|
||||
{version.version}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{version.is_active ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2"
|
||||
>
|
||||
<span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
|
||||
当前激活
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-[10px] rounded-full py-0 px-2">
|
||||
历史版本
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{version.created_by || "系统"}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="text-xs font-mono text-muted-foreground"
|
||||
title={version.checksum}
|
||||
>
|
||||
{truncateChecksum(version.checksum)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{formatDateTime(version.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => {
|
||||
setSnapshotVersion(version)
|
||||
setSnapshotOpen(true)
|
||||
}}
|
||||
>
|
||||
<Eye className="size-3 mr-1" />
|
||||
快照
|
||||
</Button>
|
||||
{!version.is_active ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setActivateTarget(version)}
|
||||
>
|
||||
<Play className="size-3 mr-1" />
|
||||
激活
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PreviewSheet
|
||||
open={previewOpen}
|
||||
onOpenChange={setPreviewOpen}
|
||||
preview={preview}
|
||||
loading={previewLoading}
|
||||
error={previewError}
|
||||
publishing={publishing}
|
||||
canPublish={canPublish}
|
||||
onPublish={() => setPublishConfirmOpen(true)}
|
||||
/>
|
||||
|
||||
<DiffDialog
|
||||
open={diffOpen}
|
||||
onOpenChange={setDiffOpen}
|
||||
diff={diff}
|
||||
loading={diffLoading}
|
||||
error={diffError}
|
||||
/>
|
||||
|
||||
<VersionSnapshotSheet
|
||||
version={snapshotVersion}
|
||||
open={snapshotOpen}
|
||||
onOpenChange={setSnapshotOpen}
|
||||
/>
|
||||
|
||||
<CleanupDialog
|
||||
open={cleanupOpen}
|
||||
onOpenChange={setCleanupOpen}
|
||||
onConfirm={(keepCount) => void handleCleanup(keepCount)}
|
||||
loading={cleaning}
|
||||
/>
|
||||
|
||||
<AlertDialog open={publishConfirmOpen} onOpenChange={setPublishConfirmOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认发布配置</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
将把当前待发布配置生成新版本并设为激活版本，节点将随后拉取更新。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={publishing}>取消</AlertDialogCancel>
|
||||
<Button onClick={() => void handlePublish(false)} disabled={publishing}>
|
||||
{publishing ? <Loader2 className="size-4 animate-spin" /> : "确认发布"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={forcePublishConfirmOpen} onOpenChange={setForcePublishConfirmOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认强制发布</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
将忽略配置变化检查并立即生成一个新版本，请确认你确实需要重新发布。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={publishing}>取消</AlertDialogCancel>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => void handlePublish(true)}
|
||||
disabled={publishing}
|
||||
>
|
||||
{publishing ? <Loader2 className="size-4 animate-spin" /> : "强制发布"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog
|
||||
open={activateTarget !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setActivateTarget(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认激活版本</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{activateTarget
|
||||
? `确认将版本 ${activateTarget.version} 设为当前激活版本吗？`
|
||||
: ""}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={activating}>取消</AlertDialogCancel>
|
||||
<Button onClick={() => void handleActivate()} disabled={activating}>
|
||||
{activating ? <Loader2 className="size-4 animate-spin" /> : "确认激活"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user