feat: 发布管理全栈完善——环境值修复+驳回API+toast反馈+详情弹窗+确认框

后端:
- pipeline.go: 新增 RejectRelease handler(仅pending可驳回,状态置rejected)
- routes.go: 注册 POST /releases/:id/reject 路由

前端:
- ReleaseManager.tsx 重写(553→581行):
  - 修复环境值不匹配: development/production → dev/prod(与后端binding一致)
  - 移除硬编码mock applications数组,改自由输入应用名
  - 修复字段名: release.deployer → release.author
  - 新增toast反馈(create/approve/reject/deploy/rollback均有success/error)
  - 新增确认框(deploy/rollback操作前确认)
  - 新增发布详情弹窗(原缺失,Eye按钮无响应)
  - 新增空状态展示
  - 新增rejected状态徽章
  - 主题感知: bg-slate-800 → var(--dg-bg-secondary)
  - Select替换原生select下拉框
- api.ts: 新增 rejectRelease 方法

// Logan.Li

backend/internal/api/handlers/pipeline.go

@@ -463,6 +463,43 @@ func (h *PipelineHandler) DeployRelease(c *gin.Context) {
 	})
 }
 
+// RejectRelease 驳回发布申请 // Logan.Li
+func (h *PipelineHandler) RejectRelease(c *gin.Context) {
+	id, _ := strconv.Atoi(c.Param("id"))
+
+	var release models.AppRelease
+	if err := h.db.First(&release, id).Error; err != nil {
+		c.JSON(http.StatusNotFound, models.Response{
+			Code:    404,
+			Message: "发布不存在",
+		})
+		return
+	}
+
+	if release.Status != "pending" {
+		c.JSON(http.StatusBadRequest, models.Response{
+			Code:    400,
+			Message: "仅待审批状态可驳回",
+		})
+		return
+	}
+
+	release.Status = "rejected"
+	if err := h.db.Save(&release).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, models.Response{
+			Code:    500,
+			Message: "驳回失败",
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, models.Response{
+		Code:    200,
+		Message: "已驳回",
+		Data:    release,
+	})
+}
+
 // RollbackRelease 回滚发布
 // @Summary 回滚发布
 // @Description 回滚应用发布

backend/internal/api/routes/routes.go

@@ -236,6 +236,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config) {
 		releases.GET("", pipelineHandler.ListReleases)
 		releases.POST("", pipelineHandler.CreateRelease)
 		releases.POST("/:id/approve", pipelineHandler.ApproveRelease)
+		releases.POST("/:id/reject", pipelineHandler.RejectRelease)   // 驳回发布 // Logan.Li
 		releases.POST("/:id/deploy", pipelineHandler.DeployRelease)
 		releases.POST("/:id/rollback", pipelineHandler.RollbackRelease)
 	}

frontend/src/components/deploy/ReleaseManager.tsx

@@ -1,11 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
-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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Progress } from '@/components/ui/progress';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Dialog,
   DialogContent,
@@ -23,14 +20,7 @@ import {
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import {
+import { ScrollArea } from '@/components/ui/scroll-area';
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import {
   Rocket,
   Plus,
@@ -39,32 +29,30 @@ import {
   XCircle,
   Clock,
   RotateCcw,
-  GitBranch,
   GitCommit,
   User,
   Eye,
-  MoreHorizontal,
-  FileText,
   AlertCircle,
-  History,
-  ChevronRight,
   Loader2,
   Play,
-  Pause,
   Check,
   X,
+  PackageOpen,
 } from 'lucide-react';
 import { releaseApi } from '@/services/api';
+import { useConfirm } from '@/components/ui/confirm-dialog';
+import { toast } from 'sonner';
 
-const applications = [
+// 环境配置（值与后端 oneof=dev test staging prod 一致） // Logan.Li
-  { id: 'app-1', name: '用户中心服务', currentVersion: 'v2.3.0' },
+const ENVIRONMENTS: Record<string, { label: string; color: string }> = {
-  { id: 'app-2', name: '订单服务', currentVersion: 'v1.4.5' },
+  dev: { label: '开发环境', color: 'border-blue-500/30 text-blue-400 bg-blue-500/10' },
-  { id: 'app-3', name: '支付网关', currentVersion: 'v3.0.1' },
+  test: { label: '测试环境', color: 'border-cyan-500/30 text-cyan-400 bg-cyan-500/10' },
-  { id: 'app-4', name: '消息推送服务', currentVersion: 'v1.1.9' },
+  staging: { label: '预发环境', color: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
-  { id: 'app-5', name: '数据分析平台', currentVersion: 'v1.9.8' },
+  prod: { label: '生产环境', color: 'border-red-500/30 text-red-400 bg-red-500/10' },
-];
+};
 
 export function ReleaseManager() {
+  const _confirm = useConfirm();
   const [searchQuery, setSearchQuery] = useState('');
   const [envFilter, setEnvFilter] = useState<string>('all');
   const [statusFilter, setStatusFilter] = useState<string>('all');
@@ -74,30 +62,31 @@ 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({
-    appId: '',
+    appName: '',
     version: '',
-    environment: 'staging',
+    environment: 'dev',
-    branch: '',
     commitId: '',
+    commitMsg: '',
     description: '',
   });
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       setLoading(true);
       const data = await releaseApi.getReleases();
       setReleases(data.list || []);
-    } catch (error) {
+    } catch {
-      console.error('Failed to load releases:', error);
+      toast.error('获取发布列表失败');
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [loadData]);
 
   const filteredReleases = releases.filter((release) => {
     const matchesSearch =
@@ -109,120 +98,109 @@ export function ReleaseManager() {
   });
 
   const getStatusBadge = (status: any) => {
-    switch (status) {
+    const map: Record<string, { icon: any; label: string; cls: string }> = {
-      case 'success':
+      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="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+      <Badge variant="outline" className={cfg.cls}>
-            <CheckCircle className="h-3 w-3 mr-1" />
+        <Icon className="h-3 w-3 mr-1" />
-            发布成功
+        {cfg.label}
       </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 'pending':
-        return (
-          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
-            <Clock className="h-3 w-3 mr-1" />
-            待审批
-          </Badge>
-        );
-      case 'approved':
-        return (
-          <Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
-            <Check className="h-3 w-3 mr-1" />
-            已审批
-          </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>
-        );
-      default:
-        return null;
-    }
   };
 
   const getEnvironmentBadge = (env: any) => {
-    const colors: Record<string, string> = {
+    const cfg = ENVIRONMENTS[env];
-      production: 'border-red-500/30 text-red-400 bg-red-500/10',
-      staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
-      development: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
-    };
-    const labels: Record<string, string> = {
-      production: '生产环境',
-      staging: '预发环境',
-      development: '开发环境',
-    };
     return (
-      <Badge variant="outline" className={colors[env] || colors.development}>
+      <Badge variant="outline" className={cfg?.color || 'border-slate-500/30 text-slate-400'}>
-        {labels[env] || env}
+        {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: applications.find((a) => a.id === newRelease.appId)?.name || newRelease.appId,
+        app_name: newRelease.appName.trim(),
-        version: newRelease.version,
+        version: newRelease.version.trim(),
         environment: newRelease.environment,
-        branch: newRelease.branch,
+        commit_id: newRelease.commitId.trim(),
-        commit_id: newRelease.commitId,
+        commit_msg: newRelease.commitMsg.trim(),
-        description: newRelease.description,
+        description: newRelease.description.trim(),
       });
+      toast.success('发布申请已提交');
       setIsCreateDialogOpen(false);
-      setNewRelease({ appId: '', version: '', environment: 'staging', branch: '', commitId: '', description: '' });
+      setNewRelease({ appName: '', version: '', environment: 'dev', commitId: '', commitMsg: '', description: '' });
       loadData();
-    } catch (error) {
+    } catch {
-      console.error('Failed to create release:', error);
+      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.rollbackRelease(selectedRelease.id);
+        await releaseApi.rejectRelease(selectedRelease.id);
+        toast.success('已驳回');
       }
       setIsApproveDialogOpen(false);
       loadData();
-    } catch (error) {
+    } catch {
-      console.error('Failed to process approval:', error);
+      toast.error(approved ? '审批失败' : '驳回失败');
+    } finally {
+      setSubmitting(false);
     }
   };
 
-  const handleDeploy = async (id: any) => {
+  const handleDeploy = async (id: any, appName: string, version: string) => {
+    const ok = await _confirm({
+      title: '确认部署',
+      description: `确定部署 ${appName} ${version} 到目标环境？`,
+    });
+    if (!ok) return;
     try {
       await releaseApi.deployRelease(id);
+      toast.success('部署已启动');
       loadData();
-    } catch (error) {
+    } catch {
-      console.error('Failed to deploy release:', error);
+      toast.error('部署失败');
     }
   };
 
-  const handleRollback = async (id: any) => {
+  const handleRollback = async (id: any, appName: string, version: string) => {
+    const ok = await _confirm({
+      title: '确认回滚',
+      description: `确定回滚 ${appName} ${version}？此操作将恢复到上一版本。`,
+      variant: 'destructive',
+    });
+    if (!ok) return;
     try {
       await releaseApi.rollbackRelease(id);
+      toast.success('回滚成功');
       loadData();
-    } catch (error) {
+    } catch {
-      console.error('Failed to rollback release:', error);
+      toast.error('回滚失败');
     }
   };
 
@@ -231,10 +209,10 @@ export function ReleaseManager() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-slate-100">应用发布</h1>
+          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">发布管理</h1>
-          <p className="text-sm text-slate-500 mt-1">管理应用版本发布与审批流程</p>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">管理应用版本发布与审批流程</p>
         </div>
-        <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsCreateDialogOpen(true)}>
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
           <Plus className="h-4 w-4 mr-2" />
           新建发布
         </Button>
@@ -242,127 +220,108 @@ export function ReleaseManager() {
 
       {/* Stats */}
       <div className="grid grid-cols-5 gap-4">
-        <Card className="bg-slate-800 border-slate-700">
+        {[
+          { label: '待审批', val: releases.filter((r) => r.status === 'pending').length, color: 'text-amber-400' },
+          { label: '发布中', val: releases.filter((r) => r.status === 'deploying').length, color: 'text-blue-400' },
+          { label: '发布成功', val: releases.filter((r) => r.status === 'success').length, color: 'text-emerald-400' },
+          { label: '发布失败', val: releases.filter((r) => r.status === 'failed').length, color: 'text-red-400' },
+          { label: '已回滚', val: releases.filter((r) => r.status === 'rolled_back').length, color: 'text-slate-400' },
+        ].map((s) => (
+          <Card key={s.label} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
             <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">待审批</p>
+              <p className="text-[var(--dg-text-secondary)] text-sm">{s.label}</p>
-            <p className="text-2xl font-bold text-amber-400">
+              <p className={`text-2xl font-bold ${s.color}`}>{s.val}</p>
-              {releases.filter((r) => r.status === 'pending').length}
-            </p>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">发布中</p>
-            <p className="text-2xl font-bold text-blue-400">
-              {releases.filter((r) => r.status === 'deploying').length}
-            </p>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">今日成功</p>
-            <p className="text-2xl font-bold text-emerald-400">
-              {releases.filter((r) => r.status === 'success').length}
-            </p>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">今日失败</p>
-            <p className="text-2xl font-bold text-red-400">
-              {releases.filter((r) => r.status === 'failed').length}
-            </p>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">已回滚</p>
-            <p className="text-2xl font-bold text-slate-400">
-              {releases.filter((r) => r.status === 'rolled_back').length}
-            </p>
             </CardContent>
           </Card>
+        ))}
       </div>
 
       {/* Filters */}
       <div className="flex items-center gap-4">
         <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
           <Input
             placeholder="搜索应用或版本..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
+            className="pl-10"
           />
         </div>
-        <select
+        <Select value={envFilter} onValueChange={setEnvFilter}>
-          value={envFilter}
+          <SelectTrigger className="w-[140px]">
-          onChange={(e) => setEnvFilter(e.target.value)}
+            <SelectValue />
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
+          </SelectTrigger>
-        >
+          <SelectContent>
-          <option value="all">全部环境</option>
+            <SelectItem value="all">全部环境</SelectItem>
-          <option value="production">生产环境</option>
+            <SelectItem value="dev">开发环境</SelectItem>
-          <option value="staging">预发环境</option>
+            <SelectItem value="test">测试环境</SelectItem>
-          <option value="development">开发环境</option>
+            <SelectItem value="staging">预发环境</SelectItem>
-        </select>
+            <SelectItem value="prod">生产环境</SelectItem>
-        <select
+          </SelectContent>
-          value={statusFilter}
+        </Select>
-          onChange={(e) => setStatusFilter(e.target.value)}
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
+          <SelectTrigger className="w-[140px]">
-        >
+            <SelectValue />
-          <option value="all">全部状态</option>
+          </SelectTrigger>
-          <option value="pending">待审批</option>
+          <SelectContent>
-          <option value="approved">已审批</option>
+            <SelectItem value="all">全部状态</SelectItem>
-          <option value="deploying">发布中</option>
+            <SelectItem value="pending">待审批</SelectItem>
-          <option value="success">发布成功</option>
+            <SelectItem value="approved">已审批</SelectItem>
-          <option value="failed">发布失败</option>
+            <SelectItem value="rejected">已驳回</SelectItem>
-          <option value="rolled_back">已回滚</option>
+            <SelectItem value="deploying">发布中</SelectItem>
-        </select>
+            <SelectItem value="success">发布成功</SelectItem>
+            <SelectItem value="failed">发布失败</SelectItem>
+            <SelectItem value="rolled_back">已回滚</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
       {loading ? (
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+          <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
         </div>
-      ) : null}
+      ) : filteredReleases.length === 0 ? (
-
+        <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
-      {/* Release List */}
+          <PackageOpen className="h-12 w-12 mb-3 opacity-50" />
+          <p className="text-sm">暂无发布记录</p>
+        </div>
+      ) : (
         <div className="space-y-3">
           {filteredReleases.map((release) => (
-          <Card key={release.id} className="bg-slate-800 border-slate-700">
+            <Card key={release.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
               <CardContent className="p-4">
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-3">
-                    <h3 className="font-medium text-slate-100">{release.app_name}</h3>
+                      <h3 className="font-medium text-[var(--dg-text-primary)]">{release.app_name}</h3>
                       {getStatusBadge(release.status)}
                       {getEnvironmentBadge(release.environment)}
                     </div>
-                  <div className="flex items-center gap-4 mt-2 text-sm text-slate-400">
+                    <div className="flex items-center gap-4 mt-2 text-sm text-[var(--dg-text-secondary)]">
                       <span className="flex items-center gap-1">
                         <Rocket className="h-3 w-3" />
                         {release.version}
                       </span>
-                    <span className="flex items-center gap-1">
+                      {release.commit_id && (
-                      <GitBranch className="h-3 w-3" />
-                      {release.branch}
-                    </span>
                         <span className="flex items-center gap-1">
                           <GitCommit className="h-3 w-3" />
                           {release.commit_id}
                         </span>
+                      )}
+                      {release.author && (
                         <span className="flex items-center gap-1">
                           <User className="h-3 w-3" />
-                      发布人: {release.deployer}
+                          {release.author}
                         </span>
-                  </div>
-                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
-                    <span>创建: {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}</span>
-                    {release.updated_at && <span>部署: {new Date(release.updated_at).toLocaleString()}</span>}
-                    {release.rollback_to && (
-                      <span className="text-red-400">回滚至: {release.rollback_to}</span>
                       )}
                     </div>
+                    {release.commit_msg && (
+                      <p className="text-xs text-[var(--dg-text-secondary)] mt-1 truncate max-w-xl">{release.commit_msg}</p>
+                    )}
+                    <div className="flex items-center gap-4 mt-2 text-xs text-[var(--dg-text-secondary)] opacity-70">
+                      <span>创建: {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}</span>
+                      {release.deployed_at && <span>部署: {new Date(release.deployed_at).toLocaleString()}</span>}
+                    </div>
                   </div>
 
                   <div className="flex items-center gap-2">
@@ -385,10 +344,10 @@ export function ReleaseManager() {
                         variant="outline"
                         size="sm"
                         className="border-blue-600 text-blue-400 hover:bg-blue-600/20"
-                      onClick={() => handleDeploy(release.id)}
+                        onClick={() => handleDeploy(release.id, release.app_name, release.version)}
                       >
                         <Play className="h-4 w-4 mr-1" />
-                      开始发布
+                        部署
                       </Button>
                     )}
                     {(release.status === 'success' || release.status === 'failed') && (
@@ -396,7 +355,7 @@ export function ReleaseManager() {
                         variant="outline"
                         size="sm"
                         className="border-amber-600 text-amber-400 hover:bg-amber-600/20"
-                      onClick={() => handleRollback(release.id)}
+                        onClick={() => handleRollback(release.id, release.app_name, release.version)}
                       >
                         <RotateCcw className="h-4 w-4 mr-1" />
                         回滚
@@ -405,7 +364,7 @@ export function ReleaseManager() {
                     <Button
                       variant="ghost"
                       size="icon"
-                    className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                      className="h-8 w-8"
                       onClick={() => {
                         setSelectedRelease(release);
                         setIsDetailDialogOpen(true);
@@ -419,130 +378,199 @@ export function ReleaseManager() {
             </Card>
           ))}
         </div>
+      )}
 
       {/* Create Release Dialog */}
       <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-        <DialogContent className="max-w-2xl bg-slate-900 border-slate-700 text-slate-100">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle>新建发布</DialogTitle>
-            <DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
+            <DialogDescription>创建新的应用版本发布申请</DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div>
-              <Label className="text-slate-300">选择应用</Label>
+              <Label>应用名称</Label>
-              <Select
+              <Input
-                value={newRelease.appId}
+                value={newRelease.appName}
-                onValueChange={(value) => setNewRelease({ ...newRelease, appId: value })}
+                onChange={(e) => setNewRelease({ ...newRelease, appName: e.target.value })}
-              >
+                placeholder="如：用户中心服务"
-                <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-100 mt-1">
+                className="mt-1"
-                  <SelectValue placeholder="选择应用" />
+              />
-                </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
-                  {applications.map((app) => (
-                    <SelectItem key={app.id} value={app.id} className="text-slate-100">
-                      {app.name} (当前: {app.currentVersion})
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <Label className="text-slate-300">版本号</Label>
+                <Label>版本号</Label>
                 <Input
                   value={newRelease.version}
                   onChange={(e) => setNewRelease({ ...newRelease, version: e.target.value })}
                   placeholder="v1.0.0"
-                  className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                  className="mt-1"
                 />
               </div>
               <div>
-                <Label className="text-slate-300">目标环境</Label>
+                <Label>目标环境</Label>
                 <Select
                   value={newRelease.environment}
-                  onValueChange={(value: any) => setNewRelease({ ...newRelease, environment: value })}
+                  onValueChange={(value) => setNewRelease({ ...newRelease, environment: value })}
                 >
-                  <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-100 mt-1">
+                  <SelectTrigger className="mt-1">
                     <SelectValue />
                   </SelectTrigger>
-                  <SelectContent className="bg-slate-800 border-slate-700">
+                  <SelectContent>
-                    <SelectItem value="development" className="text-slate-100">开发环境</SelectItem>
+                    <SelectItem value="dev">开发环境</SelectItem>
-                    <SelectItem value="staging" className="text-slate-100">预发环境</SelectItem>
+                    <SelectItem value="test">测试环境</SelectItem>
-                    <SelectItem value="production" className="text-slate-100">生产环境</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">分支</Label>
+                <Label>Commit ID</Label>
-                <Input
-                  value={newRelease.branch}
-                  onChange={(e) => setNewRelease({ ...newRelease, branch: e.target.value })}
-                  placeholder="main"
-                  className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
-                />
-              </div>
-              <div>
-                <Label className="text-slate-300">Commit ID</Label>
                 <Input
                   value={newRelease.commitId}
                   onChange={(e) => setNewRelease({ ...newRelease, commitId: e.target.value })}
                   placeholder="abc1234"
-                  className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                  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 className="text-slate-300">发布说明</Label>
+              <Label>发布说明</Label>
               <Textarea
                 value={newRelease.description}
                 onChange={(e) => setNewRelease({ ...newRelease, description: e.target.value })}
                 placeholder="描述本次发布的内容..."
-                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                className="mt-1"
               />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)} className="border-slate-700 text-slate-300">
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
               取消
             </Button>
-            <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleCreateRelease}>
+            <Button onClick={handleCreateRelease} disabled={submitting}>
-              提交发布申请
+              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : null}
+              提交申请
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* Detail Dialog */}
+      <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>发布详情</DialogTitle>
+            <DialogDescription>
+              {selectedRelease?.app_name} - {selectedRelease?.version}
+            </DialogDescription>
+          </DialogHeader>
+          {selectedRelease && (
+            <ScrollArea className="max-h-[60vh]">
+              <div className="space-y-3 py-2">
+                <div className="flex items-center gap-3">
+                  {getStatusBadge(selectedRelease.status)}
+                  {getEnvironmentBadge(selectedRelease.environment)}
+                </div>
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div>
+                    <span className="text-[var(--dg-text-secondary)]">应用名称</span>
+                    <p className="text-[var(--dg-text-primary)] mt-0.5">{selectedRelease.app_name}</p>
+                  </div>
+                  <div>
+                    <span className="text-[var(--dg-text-secondary)]">版本号</span>
+                    <p className="text-[var(--dg-text-primary)] mt-0.5">{selectedRelease.version}</p>
+                  </div>
+                  <div>
+                    <span className="text-[var(--dg-text-secondary)]">提交人</span>
+                    <p className="text-[var(--dg-text-primary)] mt-0.5">{selectedRelease.author || '--'}</p>
+                  </div>
+                  <div>
+                    <span className="text-[var(--dg-text-secondary)]">审批人</span>
+                    <p className="text-[var(--dg-text-primary)] mt-0.5">{selectedRelease.approver || '--'}</p>
+                  </div>
+                  {selectedRelease.commit_id && (
+                    <div>
+                      <span className="text-[var(--dg-text-secondary)]">Commit ID</span>
+                      <p className="text-[var(--dg-text-primary)] mt-0.5 font-mono">{selectedRelease.commit_id}</p>
+                    </div>
+                  )}
+                  <div>
+                    <span className="text-[var(--dg-text-secondary)]">创建时间</span>
+                    <p className="text-[var(--dg-text-primary)] mt-0.5">
+                      {selectedRelease.created_at ? new Date(selectedRelease.created_at).toLocaleString() : '--'}
+                    </p>
+                  </div>
+                </div>
+                {selectedRelease.commit_msg && (
+                  <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)]">
+                    <p className="text-xs text-[var(--dg-text-secondary)] mb-1">提交信息</p>
+                    <p className="text-sm text-[var(--dg-text-primary)]">{selectedRelease.commit_msg}</p>
+                  </div>
+                )}
+                {selectedRelease.description && (
+                  <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)]">
+                    <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>
+            </ScrollArea>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDetailDialogOpen(false)}>关闭</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Approve Dialog */}
       <Dialog open={isApproveDialogOpen} onOpenChange={setIsApproveDialogOpen}>
-        <DialogContent className="bg-slate-900 border-slate-700 text-slate-100">
+        <DialogContent>
           <DialogHeader>
             <DialogTitle>审批发布</DialogTitle>
-            <DialogDescription className="text-slate-500">
+            <DialogDescription>
               {selectedRelease?.app_name} - {selectedRelease?.version}
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
-            <div className="p-4 bg-slate-800 rounded-lg">
+            {selectedRelease?.description && (
-              <p className="text-sm text-slate-400">发布说明</p>
+              <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] mb-4">
-              <p className="text-slate-200 mt-1">{selectedRelease?.description || '无'}</p>
+                <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="mt-4">
+            )}
-              <Label className="text-slate-300">审批意见</Label>
+            <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
-              <Textarea
+              <AlertCircle className="h-4 w-4" />
-                placeholder="输入审批意见..."
+              确认审批后将进入部署就绪状态
-                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
-              />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => handleApprove(false)} className="border-red-600 text-red-400 hover:bg-red-600/20">
+            <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" onClick={() => handleApprove(true)}>
+            <Button
-              <Check className="h-4 w-4 mr-2" />
+              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>

frontend/src/services/api.ts

@@ -251,6 +251,9 @@ export const releaseApi = {
   approveRelease: async (id: number | string) => {
     return http.post(`/releases/${id}/approve`);
   },
+  rejectRelease: async (id: number | string) => {
+    return http.post(`/releases/${id}/reject`);
+  },
   deployRelease: async (id: number | string) => {
     return http.post(`/releases/${id}/deploy`);
   },