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

frontend/src/components/deploy/ReleaseManager.tsx

@@ -1,11 +1,8 @@
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+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 { 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 {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { ScrollArea } from '@/components/ui/scroll-area';
 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 = [
-  { id: 'app-1', name: '用户中心服务', currentVersion: 'v2.3.0' },
-  { id: 'app-2', name: '订单服务', currentVersion: 'v1.4.5' },
-  { id: 'app-3', name: '支付网关', currentVersion: 'v3.0.1' },
-  { id: 'app-4', name: '消息推送服务', currentVersion: 'v1.1.9' },
-  { id: 'app-5', name: '数据分析平台', currentVersion: 'v1.9.8' },
-];
+// 环境配置（值与后端 oneof=dev test staging prod 一致） // Logan.Li
+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' },
+};
 
 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',
-    branch: '',
+    environment: 'dev',
     commitId: '',
+    commitMsg: '',
     description: '',
   });
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       setLoading(true);
       const data = await releaseApi.getReleases();
       setReleases(data.list || []);
-    } catch (error) {
-      console.error('Failed to load releases:', error);
+    } catch {
+      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) {
-      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 '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 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 colors: Record<string, string> = {
-      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: '开发环境',
-    };
+    const cfg = ENVIRONMENTS[env];
     return (
-      <Badge variant="outline" className={colors[env] || colors.development}>
-        {labels[env] || env}
+      <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: applications.find((a) => a.id === newRelease.appId)?.name || newRelease.appId,
-        version: newRelease.version,
+        app_name: newRelease.appName.trim(),
+        version: newRelease.version.trim(),
         environment: newRelease.environment,
-        branch: newRelease.branch,
-        commit_id: newRelease.commitId,
-        description: newRelease.description,
+        commit_id: newRelease.commitId.trim(),
+        commit_msg: newRelease.commitMsg.trim(),
+        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) {
-      console.error('Failed to create release:', error);
+    } 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.rollbackRelease(selectedRelease.id);
+        await releaseApi.rejectRelease(selectedRelease.id);
+        toast.success('已驳回');
       }
       setIsApproveDialogOpen(false);
       loadData();
-    } catch (error) {
-      console.error('Failed to process approval:', error);
+    } catch {
+      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) {
-      console.error('Failed to deploy release:', error);
+    } catch {
+      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) {
-      console.error('Failed to rollback release:', error);
+    } catch {
+      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>
-          <p className="text-sm text-slate-500 mt-1">管理应用版本发布与审批流程</p>
+          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">发布管理</h1>
+          <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,307 +220,357 @@ export function ReleaseManager() {
 
       {/* Stats */}
       <div className="grid grid-cols-5 gap-4">
-        <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-amber-400">
-              {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" />
-          <Input
-            placeholder="搜索应用或版本..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
-          />
-        </div>
-        <select
-          value={envFilter}
-          onChange={(e) => setEnvFilter(e.target.value)}
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
-        >
-          <option value="all">全部环境</option>
-          <option value="production">生产环境</option>
-          <option value="staging">预发环境</option>
-          <option value="development">开发环境</option>
-        </select>
-        <select
-          value={statusFilter}
-          onChange={(e) => setStatusFilter(e.target.value)}
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
-        >
-          <option value="all">全部状态</option>
-          <option value="pending">待审批</option>
-          <option value="approved">已审批</option>
-          <option value="deploying">发布中</option>
-          <option value="success">发布成功</option>
-          <option value="failed">发布失败</option>
-          <option value="rolled_back">已回滚</option>
-        </select>
-      </div>
-
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
-        </div>
-      ) : null}
-
-      {/* Release List */}
-      <div className="space-y-3">
-        {filteredReleases.map((release) => (
-          <Card key={release.id} 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">
-              <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>
-                    {getStatusBadge(release.status)}
-                    {getEnvironmentBadge(release.environment)}
-                  </div>
-                  <div className="flex items-center gap-4 mt-2 text-sm text-slate-400">
-                    <span className="flex items-center gap-1">
-                      <Rocket className="h-3 w-3" />
-                      {release.version}
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <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>
-                    <span className="flex items-center gap-1">
-                      <User className="h-3 w-3" />
-                      发布人: {release.deployer}
-                    </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>
-                </div>
-
-                <div className="flex items-center gap-2">
-                  {release.status === 'pending' && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
-                      onClick={() => {
-                        setSelectedRelease(release);
-                        setIsApproveDialogOpen(true);
-                      }}
-                    >
-                      <Check className="h-4 w-4 mr-1" />
-                      审批
-                    </Button>
-                  )}
-                  {release.status === 'approved' && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="border-blue-600 text-blue-400 hover:bg-blue-600/20"
-                      onClick={() => handleDeploy(release.id)}
-                    >
-                      <Play className="h-4 w-4 mr-1" />
-                      开始发布
-                    </Button>
-                  )}
-                  {(release.status === 'success' || release.status === 'failed') && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="border-amber-600 text-amber-400 hover:bg-amber-600/20"
-                      onClick={() => handleRollback(release.id)}
-                    >
-                      <RotateCcw className="h-4 w-4 mr-1" />
-                      回滚
-                    </Button>
-                  )}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-slate-400 hover:text-blue-400"
-                    onClick={() => {
-                      setSelectedRelease(release);
-                      setIsDetailDialogOpen(true);
-                    }}
-                  >
-                    <Eye className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
+              <p className="text-[var(--dg-text-secondary)] text-sm">{s.label}</p>
+              <p className={`text-2xl font-bold ${s.color}`}>{s.val}</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-[var(--dg-text-secondary)]" />
+          <Input
+            placeholder="搜索应用或版本..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <Select value={envFilter} onValueChange={setEnvFilter}>
+          <SelectTrigger className="w-[140px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部环境</SelectItem>
+            <SelectItem value="dev">开发环境</SelectItem>
+            <SelectItem value="test">测试环境</SelectItem>
+            <SelectItem value="staging">预发环境</SelectItem>
+            <SelectItem value="prod">生产环境</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-[140px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部状态</SelectItem>
+            <SelectItem value="pending">待审批</SelectItem>
+            <SelectItem value="approved">已审批</SelectItem>
+            <SelectItem value="rejected">已驳回</SelectItem>
+            <SelectItem value="deploying">发布中</SelectItem>
+            <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-[var(--dg-text-secondary)] animate-spin" />
+        </div>
+      ) : filteredReleases.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
+          <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-[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-[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-[var(--dg-text-secondary)]">
+                      <span className="flex items-center gap-1">
+                        <Rocket className="h-3 w-3" />
+                        {release.version}
+                      </span>
+                      {release.commit_id && (
+                        <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.author}
+                        </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">
+                    {release.status === 'pending' && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
+                        onClick={() => {
+                          setSelectedRelease(release);
+                          setIsApproveDialogOpen(true);
+                        }}
+                      >
+                        <Check className="h-4 w-4 mr-1" />
+                        审批
+                      </Button>
+                    )}
+                    {release.status === 'approved' && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="border-blue-600 text-blue-400 hover:bg-blue-600/20"
+                        onClick={() => handleDeploy(release.id, release.app_name, release.version)}
+                      >
+                        <Play className="h-4 w-4 mr-1" />
+                        部署
+                      </Button>
+                    )}
+                    {(release.status === 'success' || release.status === 'failed') && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="border-amber-600 text-amber-400 hover:bg-amber-600/20"
+                        onClick={() => handleRollback(release.id, release.app_name, release.version)}
+                      >
+                        <RotateCcw className="h-4 w-4 mr-1" />
+                        回滚
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={() => {
+                        setSelectedRelease(release);
+                        setIsDetailDialogOpen(true);
+                      }}
+                    >
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </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>
-              <Select
-                value={newRelease.appId}
-                onValueChange={(value) => setNewRelease({ ...newRelease, appId: value })}
-              >
-                <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-100 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>
+              <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 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">
-                    <SelectItem value="development" className="text-slate-100">开发环境</SelectItem>
-                    <SelectItem value="staging" className="text-slate-100">预发环境</SelectItem>
-                    <SelectItem value="production" className="text-slate-100">生产环境</SelectItem>
+                  <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 className="text-slate-300">分支</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>
+                <Label>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">
-              <p className="text-sm text-slate-400">发布说明</p>
-              <p className="text-slate-200 mt-1">{selectedRelease?.description || '无'}</p>
-            </div>
-            <div className="mt-4">
-              <Label className="text-slate-300">审批意见</Label>
-              <Textarea
-                placeholder="输入审批意见..."
-                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
-              />
+            {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" 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)}>
-              <Check className="h-4 w-4 mr-2" />
+            <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>