refactor: 拆分ReleaseManager.tsx(581→368行)提取releaseManagerHelpers+ReleaseApplyDialog+ReleaseApproveDialog子模块

frontend/src/components/deploy/ReleaseApplyDialog.tsx

@@ -0,0 +1,162 @@
+// 发布管理 - 新建发布申请弹窗（自包含表单状态 + 提交逻辑） // Logan.Li
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Loader2 } from 'lucide-react';
+import { releaseApi } from '@/services/api';
+import { toast } from 'sonner';
+
+interface ReleaseApplyDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}
+
+export function ReleaseApplyDialog({ open, onOpenChange, onSuccess }: ReleaseApplyDialogProps) {
+  const [submitting, setSubmitting] = useState(false);
+  const [form, setForm] = useState({
+    appName: '',
+    version: '',
+    environment: 'dev',
+    commitId: '',
+    commitMsg: '',
+    description: '',
+  });
+
+  // 弹窗打开时重置表单 // Logan.Li
+  useEffect(() => {
+    if (open) {
+      setForm({ appName: '', version: '', environment: 'dev', commitId: '', commitMsg: '', description: '' });
+    }
+  }, [open]);
+
+  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);
+      onSuccess?.();
+    } catch {
+      toast.error('创建失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>新建发布</DialogTitle>
+          <DialogDescription>创建新的应用版本发布申请</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div>
+            <Label>应用名称</Label>
+            <Input
+              value={form.appName}
+              onChange={(e) => setForm({ ...form, appName: e.target.value })}
+              placeholder="如：用户中心服务"
+              className="mt-1"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>版本号</Label>
+              <Input
+                value={form.version}
+                onChange={(e) => setForm({ ...form, version: e.target.value })}
+                placeholder="v1.0.0"
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label>目标环境</Label>
+              <Select
+                value={form.environment}
+                onValueChange={(value) => setForm({ ...form, environment: value })}
+              >
+                <SelectTrigger className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <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>Commit ID</Label>
+              <Input
+                value={form.commitId}
+                onChange={(e) => setForm({ ...form, commitId: e.target.value })}
+                placeholder="abc1234"
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label>提交信息</Label>
+              <Input
+                value={form.commitMsg}
+                onChange={(e) => setForm({ ...form, commitMsg: e.target.value })}
+                placeholder="feat: 新增功能"
+                className="mt-1"
+              />
+            </div>
+          </div>
+          <div>
+            <Label>发布说明</Label>
+            <Textarea
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              placeholder="描述本次发布的内容..."
+              className="mt-1"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : null}
+            提交申请
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/deploy/ReleaseApproveDialog.tsx

@@ -0,0 +1,94 @@
+// 发布管理 - 审批/驳回弹窗（自包含提交逻辑） // Logan.Li
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertCircle, X, Check, Loader2 } from 'lucide-react';
+import { releaseApi } from '@/services/api';
+import { toast } from 'sonner';
+
+interface ReleaseApproveDialogProps {
+  release: any | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}
+
+export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }: ReleaseApproveDialogProps) {
+  const [submitting, setSubmitting] = useState(false);
+
+  // 提交完成即重置 loading（防复用） // Logan.Li
+  useEffect(() => {
+    if (!open) setSubmitting(false);
+  }, [open]);
+
+  const handleApprove = async (approved: boolean) => {
+    if (!release) return;
+    setSubmitting(true);
+    try {
+      if (approved) {
+        await releaseApi.approveRelease(release.id);
+        toast.success('审批通过');
+      } else {
+        await releaseApi.rejectRelease(release.id);
+        toast.success('已驳回');
+      }
+      onOpenChange(false);
+      onSuccess?.();
+    } catch {
+      toast.error(approved ? '审批失败' : '驳回失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>审批发布</DialogTitle>
+          <DialogDescription>
+            {release?.app_name} - {release?.version}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          {release?.description && (
+            <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] mb-4">
+              <p className="text-xs text-[var(--dg-text-secondary)] mb-1">发布说明</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{release.description}</p>
+            </div>
+          )}
+          <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
+            <AlertCircle className="h-4 w-4" />
+            确认审批后将进入部署就绪状态
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            className="border-red-600 text-red-400 hover:bg-red-600/20"
+            disabled={submitting}
+            onClick={() => handleApprove(false)}
+          >
+            <X className="h-4 w-4 mr-2" />
+            驳回
+          </Button>
+          <Button
+            className="bg-emerald-600 hover:bg-emerald-700"
+            disabled={submitting}
+            onClick={() => handleApprove(true)}
+          >
+            {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
+            通过
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/deploy/ReleaseManager.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect, useCallback } from 'react';
 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 {
   Dialog,
   DialogContent,
@@ -18,38 +17,26 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Rocket,
   Plus,
   Search,
-  CheckCircle,
+  Check,
-  XCircle,
-  Clock,
   RotateCcw,
   GitCommit,
   User,
   Eye,
-  AlertCircle,
   Loader2,
   Play,
-  Check,
-  X,
   PackageOpen,
 } from 'lucide-react';
 import { releaseApi } from '@/services/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
-
+import { getStatusBadge, getEnvironmentBadge } from './releaseManagerHelpers';
-// 环境配置（值与后端 oneof=dev test staging prod 一致） // Logan.Li
+import { ReleaseApplyDialog } from './ReleaseApplyDialog';
-const ENVIRONMENTS: Record<string, { label: string; color: string }> = {
+import { ReleaseApproveDialog } from './ReleaseApproveDialog';
-  dev: { label: '开发环境', color: 'border-blue-500/30 text-blue-400 bg-blue-500/10' },
-  test: { label: '测试环境', color: 'border-cyan-500/30 text-cyan-400 bg-cyan-500/10' },
-  staging: { label: '预发环境', color: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
-  prod: { label: '生产环境', color: 'border-red-500/30 text-red-400 bg-red-500/10' },
-};
 
 export function ReleaseManager() {
   const _confirm = useConfirm();
@@ -62,15 +49,6 @@ export function ReleaseManager() {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
   const [isApproveDialogOpen, setIsApproveDialogOpen] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [newRelease, setNewRelease] = useState({
-    appName: '',
-    version: '',
-    environment: 'dev',
-    commitId: '',
-    commitMsg: '',
-    description: '',
-  });
 
   const loadData = useCallback(async () => {
     try {
@@ -97,82 +75,6 @@ export function ReleaseManager() {
     return matchesSearch && matchesEnv && matchesStatus;
   });
 
-  const getStatusBadge = (status: any) => {
-    const map: Record<string, { icon: any; label: string; cls: string }> = {
-      pending: { icon: Clock, label: '待审批', cls: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
-      approved: { icon: Check, label: '已审批', cls: 'border-purple-500/30 text-purple-400 bg-purple-500/10' },
-      rejected: { icon: XCircle, label: '已驳回', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
-      deploying: { icon: Loader2, label: '发布中', cls: 'border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse' },
-      success: { icon: CheckCircle, label: '发布成功', cls: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10' },
-      failed: { icon: XCircle, label: '发布失败', cls: 'border-red-500/30 text-red-400 bg-red-500/10' },
-      rolled_back: { icon: RotateCcw, label: '已回滚', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
-    };
-    const cfg = map[status];
-    if (!cfg) return null;
-    const Icon = cfg.icon;
-    return (
-      <Badge variant="outline" className={cfg.cls}>
-        <Icon className="h-3 w-3 mr-1" />
-        {cfg.label}
-      </Badge>
-    );
-  };
-
-  const getEnvironmentBadge = (env: any) => {
-    const cfg = ENVIRONMENTS[env];
-    return (
-      <Badge variant="outline" className={cfg?.color || 'border-slate-500/30 text-slate-400'}>
-        {cfg?.label || env}
-      </Badge>
-    );
-  };
-
-  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 handleApprove = async (approved: boolean) => {
-    if (!selectedRelease) return;
-    setSubmitting(true);
-    try {
-      if (approved) {
-        await releaseApi.approveRelease(selectedRelease.id);
-        toast.success('审批通过');
-      } else {
-        await releaseApi.rejectRelease(selectedRelease.id);
-        toast.success('已驳回');
-      }
-      setIsApproveDialogOpen(false);
-      loadData();
-    } catch {
-      toast.error(approved ? '审批失败' : '驳回失败');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
   const handleDeploy = async (id: any, appName: string, version: string) => {
     const ok = await _confirm({
       title: '确认部署',
@@ -380,94 +282,22 @@ export function ReleaseManager() {
         </div>
       )}
 
-      {/* Create Release Dialog */}
+      {/* 新建发布申请弹窗 */}
-      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+      <ReleaseApplyDialog
-        <DialogContent className="max-w-2xl">
+        open={isCreateDialogOpen}
-          <DialogHeader>
+        onOpenChange={setIsCreateDialogOpen}
-            <DialogTitle>新建发布</DialogTitle>
+        onSuccess={loadData}
-            <DialogDescription>创建新的应用版本发布申请</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div>
-              <Label>应用名称</Label>
-              <Input
-                value={newRelease.appName}
-                onChange={(e) => setNewRelease({ ...newRelease, appName: e.target.value })}
-                placeholder="如：用户中心服务"
-                className="mt-1"
       />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label>版本号</Label>
-                <Input
-                  value={newRelease.version}
-                  onChange={(e) => setNewRelease({ ...newRelease, version: e.target.value })}
-                  placeholder="v1.0.0"
-                  className="mt-1"
-                />
-              </div>
-              <div>
-                <Label>目标环境</Label>
-                <Select
-                  value={newRelease.environment}
-                  onValueChange={(value) => setNewRelease({ ...newRelease, environment: value })}
-                >
-                  <SelectTrigger className="mt-1">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <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>Commit ID</Label>
-                <Input
-                  value={newRelease.commitId}
-                  onChange={(e) => setNewRelease({ ...newRelease, commitId: e.target.value })}
-                  placeholder="abc1234"
-                  className="mt-1"
-                />
-              </div>
-              <div>
-                <Label>提交信息</Label>
-                <Input
-                  value={newRelease.commitMsg}
-                  onChange={(e) => setNewRelease({ ...newRelease, commitMsg: e.target.value })}
-                  placeholder="feat: 新增功能"
-                  className="mt-1"
-                />
-              </div>
-            </div>
-            <div>
-              <Label>发布说明</Label>
-              <Textarea
-                value={newRelease.description}
-                onChange={(e) => setNewRelease({ ...newRelease, description: e.target.value })}
-                placeholder="描述本次发布的内容..."
-                className="mt-1"
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
-              取消
-            </Button>
-            <Button onClick={handleCreateRelease} disabled={submitting}>
-              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : null}
-              提交申请
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
 
-      {/* Detail Dialog */}
+      {/* 审批/驳回弹窗 */}
+      <ReleaseApproveDialog
+        release={selectedRelease}
+        open={isApproveDialogOpen}
+        onOpenChange={setIsApproveDialogOpen}
+        onSuccess={loadData}
+      />
+
+      {/* Detail Dialog（只读详情，保留主组件内） */}
       <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
         <DialogContent className="max-w-lg">
           <DialogHeader>
@@ -533,49 +363,6 @@ export function ReleaseManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
-      {/* Approve Dialog */}
-      <Dialog open={isApproveDialogOpen} onOpenChange={setIsApproveDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>审批发布</DialogTitle>
-            <DialogDescription>
-              {selectedRelease?.app_name} - {selectedRelease?.version}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            {selectedRelease?.description && (
-              <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] mb-4">
-                <p className="text-xs text-[var(--dg-text-secondary)] mb-1">发布说明</p>
-                <p className="text-sm text-[var(--dg-text-primary)]">{selectedRelease.description}</p>
-              </div>
-            )}
-            <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
-              <AlertCircle className="h-4 w-4" />
-              确认审批后将进入部署就绪状态
-            </div>
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              className="border-red-600 text-red-400 hover:bg-red-600/20"
-              disabled={submitting}
-              onClick={() => handleApprove(false)}
-            >
-              <X className="h-4 w-4 mr-2" />
-              驳回
-            </Button>
-            <Button
-              className="bg-emerald-600 hover:bg-emerald-700"
-              disabled={submitting}
-              onClick={() => handleApprove(true)}
-            >
-              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
-              通过
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }

frontend/src/components/deploy/releaseManagerHelpers.tsx

@@ -0,0 +1,51 @@
+// 发布管理（审批流）共享工具函数与常量 // Logan.Li
+// 注意：本文件专用于 ReleaseManager（含审批流，状态标签与 AppRelease 的 releaseHelpers 不同）
+import { Badge } from '@/components/ui/badge';
+import {
+  Clock,
+  Check,
+  XCircle,
+  Loader2,
+  CheckCircle,
+  RotateCcw,
+} from 'lucide-react';
+
+// 环境配置（值与后端 oneof=dev test staging prod 一致） // Logan.Li
+export const ENVIRONMENTS: Record<string, { label: string; color: string }> = {
+  dev: { label: '开发环境', color: 'border-blue-500/30 text-blue-400 bg-blue-500/10' },
+  test: { label: '测试环境', color: 'border-cyan-500/30 text-cyan-400 bg-cyan-500/10' },
+  staging: { label: '预发环境', color: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
+  prod: { label: '生产环境', color: 'border-red-500/30 text-red-400 bg-red-500/10' },
+};
+
+// 发布状态徽章（审批流：待审批/已审批/已驳回/发布中/发布成功/发布失败/已回滚） // Logan.Li
+export function getStatusBadge(status: any) {
+  const map: Record<string, { icon: any; label: string; cls: string }> = {
+    pending: { icon: Clock, label: '待审批', cls: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
+    approved: { icon: Check, label: '已审批', cls: 'border-purple-500/30 text-purple-400 bg-purple-500/10' },
+    rejected: { icon: XCircle, label: '已驳回', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
+    deploying: { icon: Loader2, label: '发布中', cls: 'border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse' },
+    success: { icon: CheckCircle, label: '发布成功', cls: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10' },
+    failed: { icon: XCircle, label: '发布失败', cls: 'border-red-500/30 text-red-400 bg-red-500/10' },
+    rolled_back: { icon: RotateCcw, label: '已回滚', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
+  };
+  const cfg = map[status];
+  if (!cfg) return null;
+  const Icon = cfg.icon;
+  return (
+    <Badge variant="outline" className={cfg.cls}>
+      <Icon className="h-3 w-3 mr-1" />
+      {cfg.label}
+    </Badge>
+  );
+}
+
+// 环境徽章 // Logan.Li
+export function getEnvironmentBadge(env: any) {
+  const cfg = ENVIRONMENTS[env];
+  return (
+    <Badge variant="outline" className={cfg?.color || 'border-slate-500/30 text-slate-400'}>
+      {cfg?.label || env}
+    </Badge>
+  );
+}