[优化] 添加清理历史快照功能

2026-10-06 15:46:37 +08:00 · 2026-05-25 16:41:07 +08:00
parent 4f698be0a5
commit 83a426d3d6
6 changed files with 197 additions and 10 deletions
@@ -38,3 +38,10 @@ export function activateConfigVersion(id: number) {
    method: 'POST',
  });
 }
+
+export function cleanupConfigVersions(payload: { keep_count: number }) {
+  return apiRequest<{ deleted_count: number }>('/config-versions/cleanup', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
@@ -0,0 +1,79 @@
+'use client';
+
+import { useState } from 'react';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { AppModal } from '@/components/ui/app-modal';
+import {
+  PrimaryButton,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+
+export function CleanupConfigVersionsModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  isPending,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (keepCount: number) => void;
+  isPending: boolean;
+}) {
+  const [keepCount, setKeepCount] = useState<number>(10);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (keepCount < 3) {
+      setError('最少保留 3 个历史快照');
+      return;
+    }
+    setError(null);
+    onConfirm(keepCount);
+  };
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="清理历史快照"
+      description="删除旧的历史快照配置，系统将始终自动保护当前已激活的版本不被删除。"
+      size="md"
+      footer={
+        <div className="flex justify-end gap-3">
+          <SecondaryButton type="button" onClick={onClose} disabled={isPending}>
+            取消
+          </SecondaryButton>
+          <PrimaryButton type="submit" form="cleanup-form" disabled={isPending} className="bg-[var(--status-danger-foreground)] hover:bg-[var(--status-danger-foreground)] hover:opacity-90 border-[var(--status-danger-foreground)]">
+            {isPending ? '清理中...' : '确认清理'}
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <form id="cleanup-form" onSubmit={handleSubmit} className="space-y-4">
+        {error && <InlineMessage tone="danger" message={error} />}
+        <div>
+          <label
+            htmlFor="keepCount"
+            className="mb-1 block text-sm font-medium text-[var(--foreground-primary)]"
+          >
+            保留最近快照个数
+          </label>
+          <input
+            id="keepCount"
+            type="number"
+            min={3}
+            value={keepCount}
+            onChange={(e) => setKeepCount(parseInt(e.target.value, 10) || 3)}
+            className="w-full rounded-lg border border-[var(--border-default)] bg-[var(--surface-default)] px-3 py-2 text-sm text-[var(--foreground-primary)] focus:border-[var(--brand-primary)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:outline-none"
+            disabled={isPending}
+          />
+          <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
+            默认为 10 个，最少需保留 3 个。
+          </p>
+        </div>
+      </form>
+    </AppModal>
+  );
+}
@@ -17,8 +17,10 @@ import {
  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,
@@ -404,6 +406,7 @@ export function ConfigVersionsPage() {
    diff: ConfigDiffResult;
  } | null>(null);
  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [isCleanupModalOpen, setIsCleanupModalOpen] = useState(false);

  const versionsQuery = useQuery({
    queryKey: versionsQueryKey,
@@ -462,6 +465,21 @@ export function ConfigVersionsPage() {
    },
  });

+  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);
@@ -535,16 +553,24 @@ export function ConfigVersionsPage() {
          title="历史版本"
          description="发布成功后会立即刷新列表，不再需要手动刷新页面。"
          action={
-            <SecondaryButton
-              type="button"
-              onClick={() =>
-                void queryClient.invalidateQueries({
-                  queryKey: versionsQueryKey,
-                })
-              }
-            >
-              刷新列表
-            </SecondaryButton>
+            <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 ? (
@@ -630,6 +656,13 @@ export function ConfigVersionsPage() {
        version={selectedVersion}
        onClose={() => setSelectedVersionId(null)}
      />
+
+      <CleanupConfigVersionsModal
+        isOpen={isCleanupModalOpen}
+        onClose={() => setIsCleanupModalOpen(false)}
+        onConfirm={(keepCount) => cleanupMutation.mutate({ keep_count: keepCount })}
+        isPending={cleanupMutation.isPending}
+      />
    </>
  );
 }