[功能] 添加获取配置版本详情的API，优化配置版本管理逻辑

openflare_server/web/features/config-versions/components/config-version-snapshot-modal.tsx

@@ -1,20 +1,41 @@
 'use client';
 
+import { useQuery } from '@tanstack/react-query';
+
+import { ErrorState } from '@/components/feedback/error-state';
+import { LoadingState } from '@/components/feedback/loading-state';
 import { AppModal } from '@/components/ui/app-modal';
-import type { ConfigVersionItem } from '@/features/config-versions/types';
+import { getConfigVersion } from '@/features/config-versions/api/config-versions';
+import type { ConfigVersionSummary } from '@/features/config-versions/types';
 import {
   CodeBlock,
   SecondaryButton,
 } from '@/features/shared/components/resource-primitives';
 import { formatDateTime } from '@/lib/utils/date';
 
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
 export function ConfigVersionSnapshotModal({
   version,
   onClose,
 }: {
-  version: ConfigVersionItem | null;
+  version: ConfigVersionSummary | null;
   onClose: () => void;
 }) {
+  const versionDetailQuery = useQuery({
+    queryKey: ['config-versions', 'detail', version?.id ?? 0],
+    queryFn: () => {
+      if (!version) {
+        throw new Error('missing config version');
+      }
+      return getConfigVersion(version.id);
+    },
+    enabled: Boolean(version?.id),
+  });
+  const versionDetail = versionDetailQuery.data ?? null;
+
   return (
     <AppModal
       isOpen={Boolean(version)}
@@ -30,7 +51,14 @@ export function ConfigVersionSnapshotModal({
         </div>
       }
     >
-      {version ? (
+      {!version ? null : versionDetailQuery.isLoading && !versionDetail ? (
+        <LoadingState />
+      ) : versionDetailQuery.isError ? (
+        <ErrorState
+          title="配置版本详情加载失败"
+          description={getErrorMessage(versionDetailQuery.error)}
+        />
+      ) : versionDetail ? (
         <div className="space-y-5">
           <div className="grid gap-4 md:grid-cols-3">
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
@@ -38,7 +66,7 @@ export function ConfigVersionSnapshotModal({
                 Checksum
               </p>
               <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
-                {version.checksum}
+                {versionDetail.checksum}
               </p>
             </div>
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
@@ -46,7 +74,7 @@ export function ConfigVersionSnapshotModal({
                 创建人
               </p>
               <p className="mt-2 text-sm text-[var(--foreground-primary)]">
-                {version.created_by || '系统'}
+                {versionDetail.created_by || '系统'}
               </p>
             </div>
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
@@ -54,7 +82,7 @@ export function ConfigVersionSnapshotModal({
                 创建时间
               </p>
               <p className="mt-2 text-sm text-[var(--foreground-primary)]">
-                {formatDateTime(version.created_at)}
+                {formatDateTime(versionDetail.created_at)}
               </p>
             </div>
           </div>
@@ -64,23 +92,25 @@ export function ConfigVersionSnapshotModal({
               快照 JSON
             </p>
             <CodeBlock className="max-h-96 whitespace-pre-wrap">
-              {version.snapshot_json}
+              {versionDetail.snapshot_json}
             </CodeBlock>
           </div>
+
           <div>
             <p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
               主配置
             </p>
             <CodeBlock className="max-h-96 whitespace-pre-wrap">
-              {version.main_config}
+              {versionDetail.main_config}
             </CodeBlock>
           </div>
+
           <div>
             <p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
               路由配置
             </p>
             <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
-              {version.rendered_config}
+              {versionDetail.rendered_config}
             </CodeBlock>
           </div>
         </div>