mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-03 15:06:36 +08:00
ryan
690 lines
24 KiB
TypeScript
690 lines
24 KiB
TypeScript
'use client';
|
||
|
||
import { useMemo, useState } from 'react';
|
||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||
|
||
import { EmptyState } from '@/components/feedback/empty-state';
|
||
import { ErrorState } from '@/components/feedback/error-state';
|
||
import { InlineMessage } from '@/components/feedback/inline-message';
|
||
import { LoadingState } from '@/components/feedback/loading-state';
|
||
import { PageHeader } from '@/components/layout/page-header';
|
||
import { AppCard } from '@/components/ui/app-card';
|
||
import { StatusBadge } from '@/components/ui/status-badge';
|
||
import {
|
||
activateConfigVersion,
|
||
getActiveConfigVersion,
|
||
getConfigVersionDiff,
|
||
getConfigVersionPreview,
|
||
getConfigVersions,
|
||
publishConfigVersion,
|
||
cleanupConfigVersions,
|
||
} from '@/features/config-versions/api/config-versions';
|
||
import { ConfigVersionSnapshotModal } from '@/features/config-versions/components/config-version-snapshot-modal';
|
||
import { CleanupConfigVersionsModal } from '@/features/config-versions/components/cleanup-config-versions-modal';
|
||
import type {
|
||
ConfigOptionDiffItem,
|
||
ConfigDiffResult,
|
||
ConfigPreviewResult,
|
||
ConfigVersionDetail,
|
||
ConfigVersionSummary,
|
||
SupportFile,
|
||
} from '@/features/config-versions/types';
|
||
import {
|
||
CodeBlock,
|
||
PrimaryButton,
|
||
SecondaryButton,
|
||
} from '@/features/shared/components/resource-primitives';
|
||
import { formatDateTime } from '@/lib/utils/date';
|
||
|
||
const versionsQueryKey = ['config-versions'];
|
||
|
||
type FeedbackState = {
|
||
tone: 'info' | 'success' | 'danger';
|
||
message: string;
|
||
};
|
||
|
||
function getErrorMessage(error: unknown) {
|
||
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
|
||
}
|
||
|
||
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
|
||
);
|
||
}
|
||
|
||
function DiffList({ title, items }: { title: string; items: string[] }) {
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
{title}
|
||
</p>
|
||
<StatusBadge
|
||
label={`${items.length} 项`}
|
||
variant={items.length > 0 ? 'info' : 'warning'}
|
||
/>
|
||
</div>
|
||
{items.length > 0 ? (
|
||
<div className="flex flex-wrap gap-2">
|
||
{items.map((item) => (
|
||
<span
|
||
key={item}
|
||
className="rounded-full border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-1 text-xs text-[var(--foreground-secondary)]"
|
||
>
|
||
{item}
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||
当前无相关变更。
|
||
</p>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SupportFilesList({ files }: { files: SupportFile[] }) {
|
||
if (files.length === 0) {
|
||
return (
|
||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||
当前发布不需要额外支持文件。
|
||
</p>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{files.map((file) => (
|
||
<details
|
||
key={file.path}
|
||
className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3"
|
||
>
|
||
<summary className="cursor-pointer text-sm font-medium text-[var(--foreground-primary)]">
|
||
{file.path}
|
||
</summary>
|
||
<CodeBlock className="mt-3 max-h-72 whitespace-pre-wrap">
|
||
{file.content}
|
||
</CodeBlock>
|
||
</details>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function renderOptionValue(value: string) {
|
||
return value === '' ? '空' : value;
|
||
}
|
||
|
||
function OptionDiffTable({ items }: { items: ConfigOptionDiffItem[] }) {
|
||
if (items.length === 0) {
|
||
return (
|
||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||
当前无 OpenResty 性能参数变化。
|
||
</p>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="overflow-x-auto rounded-2xl border border-[var(--border-default)]">
|
||
<table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
|
||
<thead>
|
||
<tr className="bg-[var(--surface-elevated)] text-[var(--foreground-secondary)]">
|
||
<th className="px-3 py-3 font-medium">参数</th>
|
||
<th className="px-3 py-3 font-medium">当前激活值</th>
|
||
<th className="px-3 py-3 font-medium">待发布值</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-[var(--border-default)]">
|
||
{items.map((item) => (
|
||
<tr key={item.key} className="align-top">
|
||
<td className="px-3 py-3 font-medium text-[var(--foreground-primary)]">
|
||
{item.key}
|
||
</td>
|
||
<td className="px-3 py-3 text-[var(--foreground-secondary)]">
|
||
<code>{renderOptionValue(item.previous_value)}</code>
|
||
</td>
|
||
<td className="px-3 py-3 text-[var(--foreground-secondary)]">
|
||
<code>{renderOptionValue(item.current_value)}</code>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PublishPreviewCard({
|
||
preview,
|
||
diff,
|
||
activeVersionMeta,
|
||
activeVersionDetail,
|
||
isActiveVersionDetailLoading,
|
||
activeVersionDetailError,
|
||
isPublishing,
|
||
onConfirm,
|
||
onCancel,
|
||
}: {
|
||
preview: ConfigPreviewResult;
|
||
diff: ConfigDiffResult;
|
||
activeVersionMeta: ConfigVersionSummary | null;
|
||
activeVersionDetail: ConfigVersionDetail | null;
|
||
isActiveVersionDetailLoading: boolean;
|
||
activeVersionDetailError: string | null;
|
||
isPublishing: boolean;
|
||
onConfirm: () => void;
|
||
onCancel: () => void;
|
||
}) {
|
||
const canPublish = preview.route_count > 0 && hasConfigDiff(diff);
|
||
|
||
return (
|
||
<AppCard
|
||
title="发布前预览"
|
||
description="先核对增删改域名、渲染结果与支持文件，再决定是否发布为新激活版本。"
|
||
action={
|
||
<StatusBadge
|
||
label={`启用规则 ${preview.route_count} 条`}
|
||
variant="info"
|
||
/>
|
||
}
|
||
>
|
||
<div className="space-y-5">
|
||
<div className="grid gap-4 md:grid-cols-4">
|
||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
|
||
当前激活版本
|
||
</p>
|
||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||
{diff.active_version || '无'}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-[var(--status-success-border)] bg-[var(--status-success-soft)] px-4 py-4">
|
||
<p className="text-xs tracking-[0.2em] text-[var(--status-success-foreground)] uppercase">
|
||
新增域名
|
||
</p>
|
||
<p className="mt-2 text-lg font-semibold text-[var(--status-success-foreground)]">
|
||
{diff.added_domains.length}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-4">
|
||
<p className="text-xs tracking-[0.2em] text-[var(--status-warning-foreground)] uppercase">
|
||
删除域名
|
||
</p>
|
||
<p className="mt-2 text-lg font-semibold text-[var(--status-warning-foreground)]">
|
||
{diff.removed_domains.length}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-[var(--status-info-border)] bg-[var(--status-info-soft)] px-4 py-4">
|
||
<p className="text-xs tracking-[0.2em] text-[var(--status-info-foreground)] uppercase">
|
||
修改域名
|
||
</p>
|
||
<p className="mt-2 text-lg font-semibold text-[var(--status-info-foreground)]">
|
||
{diff.modified_domains.length}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
|
||
主配置变化
|
||
</p>
|
||
<p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
|
||
{diff.main_config_changed ? '已变化' : '无变化'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{!canPublish ? (
|
||
<InlineMessage
|
||
tone="info"
|
||
message="当前规则与已激活版本一致，已阻止重复发布。"
|
||
/>
|
||
) : null}
|
||
|
||
<div className="grid gap-5 xl:grid-cols-3">
|
||
<DiffList title="新增域名" items={diff.added_domains} />
|
||
<DiffList title="删除域名" items={diff.removed_domains} />
|
||
<DiffList title="修改域名" items={diff.modified_domains} />
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
OpenResty 参数变化
|
||
</p>
|
||
<StatusBadge
|
||
label={`${diff.changed_option_keys.length} 项`}
|
||
variant={diff.changed_option_keys.length > 0 ? 'info' : 'warning'}
|
||
/>
|
||
</div>
|
||
<OptionDiffTable items={diff.changed_option_details} />
|
||
</div>
|
||
|
||
{diff.main_config_changed && activeVersionMeta ? (
|
||
<div className="grid gap-5 xl:grid-cols-2">
|
||
<div>
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
Current Active Main Config
|
||
</p>
|
||
<StatusBadge label={activeVersionMeta.version} variant="info" />
|
||
</div>
|
||
{isActiveVersionDetailLoading ? (
|
||
<LoadingState />
|
||
) : activeVersionDetailError ? (
|
||
<InlineMessage
|
||
tone="danger"
|
||
message={activeVersionDetailError}
|
||
/>
|
||
) : activeVersionDetail ? (
|
||
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||
{activeVersionDetail.main_config}
|
||
</CodeBlock>
|
||
) : (
|
||
<InlineMessage
|
||
tone="info"
|
||
message="当前激活版本详情暂不可用。"
|
||
/>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
Pending Main Config
|
||
</p>
|
||
</div>
|
||
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||
{preview.main_config}
|
||
</CodeBlock>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{/* Legacy duplicated main config preview block kept commented out while
|
||
we replace it with an explicit active-vs-pending comparison above.
|
||
{diff.main_config_changed && activeVersion ? (
|
||
<div className="grid gap-5 xl:grid-cols-2">
|
||
<div>
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
褰撳墠婵€娲讳富閰嶇疆
|
||
</p>
|
||
<StatusBadge label={activeVersion.version} variant="info" />
|
||
</div>
|
||
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||
{activeVersion.main_config}
|
||
</CodeBlock>
|
||
</div>
|
||
<div>
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
寰呭彂甯冧富閰嶇疆
|
||
</p>
|
||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||
Checksum锛歿preview.checksum}
|
||
</p>
|
||
</div>
|
||
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||
{preview.main_config}
|
||
</CodeBlock>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
*/}
|
||
|
||
<div>
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
主配置
|
||
</p>
|
||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||
Checksum：{preview.checksum}
|
||
</p>
|
||
</div>
|
||
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||
{preview.main_config}
|
||
</CodeBlock>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||
路由配置
|
||
</p>
|
||
</div>
|
||
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||
{preview.rendered_config}
|
||
</CodeBlock>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
|
||
支持文件
|
||
</p>
|
||
<SupportFilesList files={preview.support_files} />
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
<PrimaryButton
|
||
type="button"
|
||
onClick={onConfirm}
|
||
disabled={isPublishing || !canPublish}
|
||
>
|
||
{isPublishing ? '发布中...' : '确认发布'}
|
||
</PrimaryButton>
|
||
<SecondaryButton
|
||
type="button"
|
||
onClick={onCancel}
|
||
disabled={isPublishing}
|
||
>
|
||
取消预览
|
||
</SecondaryButton>
|
||
</div>
|
||
</div>
|
||
</AppCard>
|
||
);
|
||
}
|
||
|
||
export function ConfigVersionsPage() {
|
||
const queryClient = useQueryClient();
|
||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||
const [selectedVersionId, setSelectedVersionId] = useState<number | null>(
|
||
null,
|
||
);
|
||
const [publishPreview, setPublishPreview] = useState<{
|
||
preview: ConfigPreviewResult;
|
||
diff: ConfigDiffResult;
|
||
} | null>(null);
|
||
const [isPreviewLoading, setIsPreviewLoading] = useState(false);
|
||
const [isCleanupModalOpen, setIsCleanupModalOpen] = useState(false);
|
||
|
||
const versionsQuery = useQuery({
|
||
queryKey: versionsQueryKey,
|
||
queryFn: getConfigVersions,
|
||
});
|
||
|
||
const versions = useMemo(
|
||
() => versionsQuery.data ?? [],
|
||
[versionsQuery.data],
|
||
);
|
||
const activeVersion = useMemo(
|
||
() => versions.find((item) => item.is_active) ?? null,
|
||
[versions],
|
||
);
|
||
const selectedVersion = useMemo(
|
||
() => versions.find((item) => item.id === selectedVersionId) ?? null,
|
||
[selectedVersionId, versions],
|
||
);
|
||
const shouldLoadActiveVersionDetail = Boolean(
|
||
activeVersion?.id && publishPreview?.diff.main_config_changed,
|
||
);
|
||
const activeVersionDetailQuery = useQuery({
|
||
queryKey: ['config-versions', 'active-detail', activeVersion?.id ?? 0],
|
||
queryFn: getActiveConfigVersion,
|
||
enabled: shouldLoadActiveVersionDetail,
|
||
});
|
||
|
||
const publishMutation = useMutation({
|
||
mutationFn: (force?: boolean) => publishConfigVersion(force),
|
||
onSuccess: async (version) => {
|
||
setFeedback({
|
||
tone: 'success',
|
||
message: `发布成功，版本 ${version.version}`,
|
||
});
|
||
setPublishPreview(null);
|
||
await queryClient.invalidateQueries({ queryKey: versionsQueryKey });
|
||
},
|
||
onError: (error) => {
|
||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||
},
|
||
});
|
||
|
||
const activateMutation = useMutation({
|
||
mutationFn: activateConfigVersion,
|
||
onSuccess: async (version) => {
|
||
setFeedback({
|
||
tone: 'success',
|
||
message: `已激活版本 ${version.version}`,
|
||
});
|
||
setSelectedVersionId(version.id);
|
||
await queryClient.invalidateQueries({ queryKey: versionsQueryKey });
|
||
},
|
||
onError: (error) => {
|
||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||
},
|
||
});
|
||
|
||
const cleanupMutation = useMutation({
|
||
mutationFn: cleanupConfigVersions,
|
||
onSuccess: async (data) => {
|
||
setFeedback({
|
||
tone: 'success',
|
||
message: `成功清理 ${data.deleted_count} 个历史快照`,
|
||
});
|
||
setIsCleanupModalOpen(false);
|
||
await queryClient.invalidateQueries({ queryKey: versionsQueryKey });
|
||
},
|
||
onError: (error) => {
|
||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||
},
|
||
});
|
||
|
||
const handleOpenPublishPreview = async () => {
|
||
setFeedback(null);
|
||
setIsPreviewLoading(true);
|
||
|
||
try {
|
||
const [preview, diff] = await Promise.all([
|
||
getConfigVersionPreview(),
|
||
getConfigVersionDiff(),
|
||
]);
|
||
setPublishPreview({ preview, diff });
|
||
} catch (error) {
|
||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||
} finally {
|
||
setIsPreviewLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleActivate = (version: ConfigVersionSummary) => {
|
||
if (version.is_active) {
|
||
return;
|
||
}
|
||
|
||
if (!window.confirm(`确认激活版本 ${version.version} 吗？`)) {
|
||
return;
|
||
}
|
||
|
||
setFeedback(null);
|
||
activateMutation.mutate(version.id);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="space-y-6">
|
||
<PageHeader
|
||
title="配置版本"
|
||
description="查看历史快照、预览待发布配置差异，并在需要时重新激活旧版本。"
|
||
action={
|
||
<div className="flex gap-2">
|
||
<SecondaryButton
|
||
type="button"
|
||
onClick={() => {
|
||
if (
|
||
window.confirm(
|
||
'确认强制重新发布吗？这会忽略配置变化检查并立即生成一个新版本。',
|
||
)
|
||
) {
|
||
publishMutation.mutate(true);
|
||
}
|
||
}}
|
||
disabled={publishMutation.isPending}
|
||
>
|
||
重新发布
|
||
</SecondaryButton>
|
||
<PrimaryButton
|
||
type="button"
|
||
onClick={handleOpenPublishPreview}
|
||
disabled={isPreviewLoading || publishMutation.isPending}
|
||
>
|
||
{isPreviewLoading ? '加载预览中...' : '预览并发布'}
|
||
</PrimaryButton>
|
||
</div>
|
||
}
|
||
/>
|
||
|
||
{feedback ? (
|
||
<InlineMessage tone={feedback.tone} message={feedback.message} />
|
||
) : null}
|
||
|
||
{publishPreview ? (
|
||
<PublishPreviewCard
|
||
preview={publishPreview.preview}
|
||
diff={publishPreview.diff}
|
||
activeVersionMeta={activeVersion}
|
||
activeVersionDetail={activeVersionDetailQuery.data ?? null}
|
||
isActiveVersionDetailLoading={activeVersionDetailQuery.isLoading}
|
||
activeVersionDetailError={
|
||
activeVersionDetailQuery.isError
|
||
? getErrorMessage(activeVersionDetailQuery.error)
|
||
: null
|
||
}
|
||
isPublishing={publishMutation.isPending}
|
||
onConfirm={() => publishMutation.mutate(false)}
|
||
onCancel={() => setPublishPreview(null)}
|
||
/>
|
||
) : null}
|
||
|
||
<AppCard
|
||
title="历史版本"
|
||
description="发布成功后会立即刷新列表，不再需要手动刷新页面。"
|
||
action={
|
||
<div className="flex gap-2">
|
||
<SecondaryButton
|
||
type="button"
|
||
onClick={() => setIsCleanupModalOpen(true)}
|
||
>
|
||
清理旧版本
|
||
</SecondaryButton>
|
||
<SecondaryButton
|
||
type="button"
|
||
onClick={() =>
|
||
void queryClient.invalidateQueries({
|
||
queryKey: versionsQueryKey,
|
||
})
|
||
}
|
||
>
|
||
刷新列表
|
||
</SecondaryButton>
|
||
</div>
|
||
}
|
||
>
|
||
{versionsQuery.isLoading ? (
|
||
<LoadingState />
|
||
) : versionsQuery.isError ? (
|
||
<ErrorState
|
||
title="版本列表加载失败"
|
||
description={getErrorMessage(versionsQuery.error)}
|
||
/>
|
||
) : versions.length === 0 ? (
|
||
<EmptyState
|
||
title="暂无历史版本"
|
||
description="当前还没有可查看的发布记录，请先从反代规则页触发一次发布。"
|
||
/>
|
||
) : (
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
|
||
<thead>
|
||
<tr className="text-[var(--foreground-secondary)]">
|
||
<th className="px-3 py-3 font-medium">版本号</th>
|
||
<th className="px-3 py-3 font-medium">状态</th>
|
||
<th className="px-3 py-3 font-medium">创建人</th>
|
||
<th className="px-3 py-3 font-medium">Checksum</th>
|
||
<th className="px-3 py-3 font-medium">创建时间</th>
|
||
<th className="px-3 py-3 font-medium">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-[var(--border-default)]">
|
||
{versions.map((version) => (
|
||
<tr key={version.id} className="align-top">
|
||
<td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
|
||
{version.version}
|
||
</td>
|
||
<td className="px-3 py-4">
|
||
<StatusBadge
|
||
label={version.is_active ? '当前激活' : '历史版本'}
|
||
variant={version.is_active ? 'success' : 'info'}
|
||
/>
|
||
</td>
|
||
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
|
||
{version.created_by || '系统'}
|
||
</td>
|
||
<td
|
||
className="px-3 py-4 text-[var(--foreground-secondary)]"
|
||
title={version.checksum}
|
||
>
|
||
{truncateChecksum(version.checksum)}
|
||
</td>
|
||
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
|
||
{formatDateTime(version.created_at)}
|
||
</td>
|
||
<td className="px-3 py-4">
|
||
<div className="flex flex-wrap gap-2">
|
||
<SecondaryButton
|
||
type="button"
|
||
onClick={() => setSelectedVersionId(version.id)}
|
||
className="px-3 py-2 text-xs"
|
||
>
|
||
查看快照
|
||
</SecondaryButton>
|
||
{!version.is_active ? (
|
||
<PrimaryButton
|
||
type="button"
|
||
onClick={() => handleActivate(version)}
|
||
disabled={activateMutation.isPending}
|
||
className="px-3 py-2 text-xs"
|
||
>
|
||
重新激活
|
||
</PrimaryButton>
|
||
) : null}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</AppCard>
|
||
</div>
|
||
|
||
<ConfigVersionSnapshotModal
|
||
version={selectedVersion}
|
||
onClose={() => setSelectedVersionId(null)}
|
||
/>
|
||
|
||
<CleanupConfigVersionsModal
|
||
isOpen={isCleanupModalOpen}
|
||
onClose={() => setIsCleanupModalOpen(false)}
|
||
onConfirm={(keepCount) =>
|
||
cleanupMutation.mutate({ keep_count: keepCount })
|
||
}
|
||
isPending={cleanupMutation.isPending}
|
||
/>
|
||
</>
|
||
);
|
||
}
|