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

frontend/src/components/deploy/AppRelease.tsx

@@ -1,12 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { cn } from '@/lib/utils';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   Table,
   TableBody,
@@ -15,15 +12,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import {
   Select,
   SelectContent,
@@ -31,31 +19,25 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
 import {
   Rocket,
   Plus,
   Search,
-  Play,
   RotateCcw,
   CheckCircle,
   XCircle,
-  Clock,
   GitBranch,
   GitCommit,
-  User,
-  MoreHorizontal,
   Eye,
   Settings,
   History,
-  Pause,
   Loader2,
-  ArrowLeft,
-  ArrowRight,
 } from 'lucide-react';
 import { releaseApi } from '@/services/api';
 import { toast } from 'sonner';
+import { getStatusBadge, getEnvBadge } from './releaseHelpers';
+import { ReleaseDetailDialog } from './ReleaseDetailDialog';
+import { ReleaseCreateDialog } from './ReleaseCreateDialog';
 
 export function AppReleaseManager() {
   const navigate = useNavigate();
@@ -66,15 +48,6 @@ export function AppReleaseManager() {
   const [loading, setLoading] = useState(true);
   const [selectedRelease, setSelectedRelease] = useState<any | null>(null);
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [newRelease, setNewRelease] = useState({
-    appName: '',
-    version: '',
-    environment: 'dev',
-    commitId: '',
-    commitMsg: '',
-    description: '',
-  });
 
   const loadData = async () => {
     try {
@@ -101,75 +74,7 @@ export function AppReleaseManager() {
     return matchesSearch && matchesEnv && matchesStatus;
   });
 
-  const getStatusBadge = (status: any) => {
-    switch (status) {
-      case 'success':
-        return (
-          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
-            <CheckCircle className="h-3 w-3 mr-1" />
-            成功
-          </Badge>
-        );
-      case 'failed':
-        return (
-          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
-            <XCircle className="h-3 w-3 mr-1" />
-            失败
-          </Badge>
-        );
-      case 'deploying':
-        return (
-          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
-            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
-            发布中
-          </Badge>
-        );
-      case 'building':
-        return (
-          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
-            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
-            构建中
-          </Badge>
-        );
-      case 'rolled_back':
-        return (
-          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
-            <RotateCcw className="h-3 w-3 mr-1" />
-            已回滚
-          </Badge>
-        );
-      case 'pending':
-        return (
-          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
-            <Clock className="h-3 w-3 mr-1" />
-            待发布
-          </Badge>
-        );
-      default:
-        return null;
-    }
-  };
-
-  const getEnvBadge = (env: any) => {
-    const colors: Record<string, string> = {
-      dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
-      test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
-      staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
-      prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
-    };
-    const labels: Record<string, string> = {
-      dev: '开发环境',
-      test: '测试环境',
-      staging: '预发布',
-      prod: '生产环境',
-    };
-    return (
-      <Badge variant="outline" className={colors[env] || colors.dev}>
-        {labels[env] || env}
-      </Badge>
-    );
-  };
-
+  // 回滚发布 // Logan.Li
   const handleRollback = async (id: any) => {
     try {
       await releaseApi.rollbackRelease(id);
@@ -179,45 +84,6 @@ export function AppReleaseManager() {
     }
   };
 
-  // 新建发布提交（复用 releaseApi.createRelease） // Logan.Li
-  const handleCreateRelease = async () => {
-    if (!newRelease.appName.trim() || !newRelease.version.trim()) {
-      toast.error('请填写应用名称和版本号');
-      return;
-    }
-    setSubmitting(true);
-    try {
-      await releaseApi.createRelease({
-        app_name: newRelease.appName.trim(),
-        version: newRelease.version.trim(),
-        environment: newRelease.environment,
-        commit_id: newRelease.commitId.trim(),
-        commit_msg: newRelease.commitMsg.trim(),
-        description: newRelease.description.trim(),
-      });
-      toast.success('发布申请已提交');
-      setIsCreateDialogOpen(false);
-      setNewRelease({ appName: '', version: '', environment: 'dev', commitId: '', commitMsg: '', description: '' });
-      loadData();
-    } catch {
-      toast.error('创建失败');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  // 模拟流水线步骤
-  const pipelineSteps = [
-    { name: '代码检出', status: 'success', duration: '15s' },
-    { name: '依赖安装', status: 'success', duration: '45s' },
-    { name: '代码检查', status: 'success', duration: '30s' },
-    { name: '单元测试', status: 'success', duration: '2m 15s' },
-    { name: '构建镜像', status: 'success', duration: '3m 30s' },
-    { name: '推送镜像', status: 'success', duration: '1m 20s' },
-    { name: '部署到K8s', status: 'running', duration: '--' },
-    { name: '健康检查', status: 'pending', duration: '--' },
-  ];
-
   return (
     <div className="space-y-6">
       {/* Page Header */}
@@ -455,196 +321,19 @@ export function AppReleaseManager() {
       </Card>
 
       {/* Release Detail Dialog */}
-      <Dialog open={!!selectedRelease} onOpenChange={() => setSelectedRelease(null)}>
-        <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" />
-              {selectedRelease?.app_name}
-              <Badge variant="outline" className="border-slate-700 text-slate-400">
-                {selectedRelease?.version}
-              </Badge>
-            </DialogTitle>
-            <DialogDescription className="text-slate-500">
-              环境: {selectedRelease?.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">
-                {pipelineSteps.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 {selectedRelease?.app_name}...</p>
-                  <p>[10:00:15] Checkout code from branch {selectedRelease?.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>
-            {selectedRelease?.status === 'failed' && (
-              <Button
-                className="bg-blue-600 hover:bg-blue-700 text-white"
-                onClick={async () => {
-                  try {
-                    setSubmitting(true);
-                    await releaseApi.deployRelease(selectedRelease.id);
-                    toast.success('已重新触发部署');
-                    setSelectedRelease(null);
-                    loadData();
-                  } catch {
-                    toast.error('重新部署失败');
-                  } finally {
-                    setSubmitting(false);
-                  }
-                }}
-                disabled={submitting}
-              >
-                <RotateCcw className="h-4 w-4 mr-2" />
-                重新部署
-              </Button>
-            )}
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <ReleaseDetailDialog
+        release={selectedRelease}
+        open={!!selectedRelease}
+        onOpenChange={(open) => { if (!open) setSelectedRelease(null); }}
+        onSuccess={loadData}
+      />
 
       {/* Create Release Dialog */}
-      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-        <DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
-          <DialogHeader>
-            <DialogTitle className="text-slate-100">新建发布</DialogTitle>
-            <DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div>
-              <Label className="text-slate-300">应用名称</Label>
-              <Input
-                value={newRelease.appName}
-                onChange={(e) => setNewRelease({ ...newRelease, appName: e.target.value })}
-                placeholder="如：用户中心服务"
-                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+      <ReleaseCreateDialog
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+        onSuccess={loadData}
       />
     </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label className="text-slate-300">版本号</Label>
-                <Input
-                  value={newRelease.version}
-                  onChange={(e) => setNewRelease({ ...newRelease, version: e.target.value })}
-                  placeholder="v1.0.0"
-                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
-                />
-              </div>
-              <div>
-                <Label className="text-slate-300">目标环境</Label>
-                <Select
-                  value={newRelease.environment}
-                  onValueChange={(value) => setNewRelease({ ...newRelease, environment: value })}
-                >
-                  <SelectTrigger className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="bg-slate-800 border-slate-700">
-                    <SelectItem value="dev">开发环境</SelectItem>
-                    <SelectItem value="test">测试环境</SelectItem>
-                    <SelectItem value="staging">预发布</SelectItem>
-                    <SelectItem value="prod">生产环境</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label className="text-slate-300">Commit ID</Label>
-                <Input
-                  value={newRelease.commitId}
-                  onChange={(e) => setNewRelease({ ...newRelease, commitId: e.target.value })}
-                  placeholder="abc1234"
-                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
-                />
-              </div>
-              <div>
-                <Label className="text-slate-300">提交信息</Label>
-                <Input
-                  value={newRelease.commitMsg}
-                  onChange={(e) => setNewRelease({ ...newRelease, commitMsg: e.target.value })}
-                  placeholder="feat: 新增功能"
-                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
-                />
-              </div>
-            </div>
-            <div>
-              <Label className="text-slate-300">发布说明</Label>
-              <Textarea
-                value={newRelease.description}
-                onChange={(e) => setNewRelease({ ...newRelease, description: e.target.value })}
-                placeholder="描述本次发布的内容..."
-                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setIsCreateDialogOpen(false)}>
-              取消
-            </Button>
-            <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateRelease} disabled={submitting}>
-              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
-              提交申请
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
   );
 }

frontend/src/components/deploy/ReleaseCreateDialog.tsx

@@ -0,0 +1,162 @@
+// 新建发布弹窗（应用/版本/环境/Commit/说明 + 提交申请） // Logan.Li
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Plus, Loader2 } from 'lucide-react';
+import { releaseApi } from '@/services/api';
+import { toast } from 'sonner';
+
+interface ReleaseCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}
+
+const EMPTY_FORM = {
+  appName: '',
+  version: '',
+  environment: 'dev',
+  commitId: '',
+  commitMsg: '',
+  description: '',
+};
+
+export function ReleaseCreateDialog({ open, onOpenChange, onSuccess }: ReleaseCreateDialogProps) {
+  const [form, setForm] = useState({ ...EMPTY_FORM });
+  const [submitting, setSubmitting] = useState(false);
+
+  const update = (key: keyof typeof form, value: string) =>
+    setForm((prev) => ({ ...prev, [key]: value }));
+
+  // 提交发布申请 // Logan.Li
+  const handleSubmit = async () => {
+    if (!form.appName.trim() || !form.version.trim()) {
+      toast.error('请填写应用名称和版本号');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await releaseApi.createRelease({
+        app_name: form.appName.trim(),
+        version: form.version.trim(),
+        environment: form.environment,
+        commit_id: form.commitId.trim(),
+        commit_msg: form.commitMsg.trim(),
+        description: form.description.trim(),
+      });
+      toast.success('发布申请已提交');
+      onOpenChange(false);
+      setForm({ ...EMPTY_FORM });
+      onSuccess?.();
+    } catch {
+      toast.error('创建失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
+        <DialogHeader>
+          <DialogTitle className="text-slate-100">新建发布</DialogTitle>
+          <DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div>
+            <Label className="text-slate-300">应用名称</Label>
+            <Input
+              value={form.appName}
+              onChange={(e) => update('appName', e.target.value)}
+              placeholder="如：用户中心服务"
+              className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-slate-300">版本号</Label>
+              <Input
+                value={form.version}
+                onChange={(e) => update('version', e.target.value)}
+                placeholder="v1.0.0"
+                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              />
+            </div>
+            <div>
+              <Label className="text-slate-300">目标环境</Label>
+              <Select
+                value={form.environment}
+                onValueChange={(value) => update('environment', value)}
+              >
+                <SelectTrigger className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="bg-slate-800 border-slate-700">
+                  <SelectItem value="dev">开发环境</SelectItem>
+                  <SelectItem value="test">测试环境</SelectItem>
+                  <SelectItem value="staging">预发布</SelectItem>
+                  <SelectItem value="prod">生产环境</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-slate-300">Commit ID</Label>
+              <Input
+                value={form.commitId}
+                onChange={(e) => update('commitId', e.target.value)}
+                placeholder="abc1234"
+                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              />
+            </div>
+            <div>
+              <Label className="text-slate-300">提交信息</Label>
+              <Input
+                value={form.commitMsg}
+                onChange={(e) => update('commitMsg', e.target.value)}
+                placeholder="feat: 新增功能"
+                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              />
+            </div>
+          </div>
+          <div>
+            <Label className="text-slate-300">发布说明</Label>
+            <Textarea
+              value={form.description}
+              onChange={(e) => update('description', e.target.value)}
+              placeholder="描述本次发布的内容..."
+              className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleSubmit} disabled={submitting}>
+            {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
+            提交申请
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/deploy/ReleaseDetailDialog.tsx

@@ -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>
+  );
+}

frontend/src/components/deploy/releaseHelpers.tsx

@@ -0,0 +1,92 @@
+// 发布相关共享工具函数与常量 // Logan.Li
+import { Badge } from '@/components/ui/badge';
+import {
+  CheckCircle,
+  XCircle,
+  RotateCcw,
+  Clock,
+  Loader2,
+} from 'lucide-react';
+
+// 发布状态徽章（列表 + 详情共用） // Logan.Li
+export function getStatusBadge(status: any) {
+  switch (status) {
+    case 'success':
+      return (
+        <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+          <CheckCircle className="h-3 w-3 mr-1" />
+          成功
+        </Badge>
+      );
+    case 'failed':
+      return (
+        <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+          <XCircle className="h-3 w-3 mr-1" />
+          失败
+        </Badge>
+      );
+    case 'deploying':
+      return (
+        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
+          <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          发布中
+        </Badge>
+      );
+    case 'building':
+      return (
+        <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+          <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          构建中
+        </Badge>
+      );
+    case 'rolled_back':
+      return (
+        <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+          <RotateCcw className="h-3 w-3 mr-1" />
+          已回滚
+        </Badge>
+      );
+    case 'pending':
+      return (
+        <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+          <Clock className="h-3 w-3 mr-1" />
+          待发布
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}
+
+// 环境徽章 // Logan.Li
+export function getEnvBadge(env: any) {
+  const colors: Record<string, string> = {
+    dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
+    test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
+    staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
+    prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
+  };
+  const labels: Record<string, string> = {
+    dev: '开发环境',
+    test: '测试环境',
+    staging: '预发布',
+    prod: '生产环境',
+  };
+  return (
+    <Badge variant="outline" className={colors[env] || colors.dev}>
+      {labels[env] || env}
+    </Badge>
+  );
+}
+
+// 模拟流水线步骤（详情弹窗使用） // Logan.Li
+export const PIPELINE_STEPS = [
+  { name: '代码检出', status: 'success', duration: '15s' },
+  { name: '依赖安装', status: 'success', duration: '45s' },
+  { name: '代码检查', status: 'success', duration: '30s' },
+  { name: '单元测试', status: 'success', duration: '2m 15s' },
+  { name: '构建镜像', status: 'success', duration: '3m 30s' },
+  { name: '推送镜像', status: 'success', duration: '1m 20s' },
+  { name: '部署到K8s', status: 'running', duration: '--' },
+  { name: '健康检查', status: 'pending', duration: '--' },
+];