refactor: 拆分AppRelease.tsx(650→339行)提取ReleaseDetailDialog+ReleaseCreateDialog+releaseHelpers子模块

2026-06-17 00:05:38 +08:00
1 parent 8a4ae0ac5c
commit 28655b4ad5
@@ -0,0 +1,138 @@
+// 发布详情弹窗（流水线进度 + 构建日志 + 重新部署） // Logan.Li
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Rocket, CheckCircle, Loader2, RotateCcw } from 'lucide-react';
+import { releaseApi } from '@/services/api';
+import { toast } from 'sonner';
+import { PIPELINE_STEPS } from './releaseHelpers';
+
+interface ReleaseDetailDialogProps {
+  release: any | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}
+
+export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }: ReleaseDetailDialogProps) {
+  const [submitting, setSubmitting] = useState(false);
+
+  // 重新触发部署 // Logan.Li
+  const handleRedeploy = async () => {
+    if (!release) return;
+    try {
+      setSubmitting(true);
+      await releaseApi.deployRelease(release.id);
+      toast.success('已重新触发部署');
+      onOpenChange(false);
+      onSuccess?.();
+    } catch {
+      toast.error('重新部署失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl bg-slate-900 border-slate-800">
+        <DialogHeader>
+          <DialogTitle className="text-slate-100 flex items-center gap-2">
+            <Rocket className="h-5 w-5 text-blue-400" />
+            {release?.app_name}
+            <Badge variant="outline" className="border-slate-700 text-slate-400">
+              {release?.version}
+            </Badge>
+          </DialogTitle>
+          <DialogDescription className="text-slate-500">
+            环境: {release?.environment}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Pipeline Steps */}
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium text-slate-300">发布进度</h4>
+            <div className="space-y-2">
+              {PIPELINE_STEPS.map((step, index) => (
+                <div
+                  key={index}
+                  className={cn(
+                    'flex items-center gap-3 p-3 rounded-lg',
+                    step.status === 'success' && 'bg-emerald-500/5',
+                    step.status === 'running' && 'bg-blue-500/5',
+                    step.status === 'pending' && 'bg-slate-800/50'
+                  )}
+                >
+                  <div
+                    className={cn(
+                      'w-6 h-6 rounded-full flex items-center justify-center',
+                      step.status === 'success' && 'bg-emerald-500/20 text-emerald-400',
+                      step.status === 'running' && 'bg-blue-500/20 text-blue-400',
+                      step.status === 'pending' && 'bg-slate-700 text-slate-500'
+                    )}
+                  >
+                    {step.status === 'success' ? (
+                      <CheckCircle className="h-4 w-4" />
+                    ) : step.status === 'running' ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <span className="text-xs">{index + 1}</span>
+                    )}
+                  </div>
+                  <span className="flex-1 text-sm text-slate-200">{step.name}</span>
+                  <span className="text-sm text-slate-500">{step.duration}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Build Logs */}
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium text-slate-300">构建日志</h4>
+            <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
+              <div className="space-y-1">
+                <p>[10:00:00] Starting pipeline for {release?.app_name}...</p>
+                <p>[10:00:15] Checkout code from branch {release?.branch}</p>
+                <p>[10:00:30] Installing dependencies...</p>
+                <p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>
+                <p>[10:01:15] Running code analysis...</p>
+                <p className="text-emerald-400">[10:01:45] Code analysis passed</p>
+                <p>[10:01:45] Running unit tests...</p>
+                <p className="text-emerald-400">[10:04:00] All tests passed (156/156)</p>
+                <p>[10:04:00] Building Docker image...</p>
+                <p className="text-emerald-400">[10:07:30] Image built successfully</p>
+                <p>[10:07:30] Pushing image to registry...</p>
+                <p className="text-emerald-400">[10:08:50] Image pushed successfully</p>
+                <p>[10:08:50] Deploying to Kubernetes...</p>
+                <p className="text-blue-400">[10:10:00] Deployment in progress...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          {release?.status === 'failed' && (
+            <Button
+              className="bg-blue-600 hover:bg-blue-700 text-white"
+              onClick={handleRedeploy}
+              disabled={submitting}
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              重新部署
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}