refactor: 标准化项目结构 frontend/ + backend/ + SQLite + run.sh

- 目录重构: app/ -> frontend/，与 backend/ 并列 - 数据库: 默认 SQLite（零配置），修复 DSN() bug - run.sh: 一键启动前后端，支持 start/stop/restart/status - Makefile: install/dev/build/lint/clean 快捷命令 - vite.config.ts: 配置 dev server 端口 5173 + API 代理到 8080 - config.yaml: SQLite 默认配置，开箱即用 - docs/: 完整开发文档（项目结构/API/数据库/规范/部署） - 修复: GORM foreign key 关联声明 - 修复: go get gorm.io/driver/sqlite 依赖
2026-06-13 23:34:23 +08:00
1 parent 7d6674bddd
commit 97c4207ff8
@@ -0,0 +1,450 @@
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Rocket,
+  Plus,
+  Search,
+  Play,
+  RotateCcw,
+  CheckCircle,
+  XCircle,
+  Clock,
+  GitBranch,
+  GitCommit,
+  User,
+  MoreHorizontal,
+  Eye,
+  Settings,
+  History,
+  Pause,
+  Loader2,
+  ArrowLeft,
+  ArrowRight,
+  Terminal,
+} from 'lucide-react';
+import { appReleases } from '@/mocks/data';
+import type { AppRelease } from '@/types';
+
+export function AppReleaseManager() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [envFilter, setEnvFilter] = useState<string>('all');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [selectedRelease, setSelectedRelease] = useState<AppRelease | null>(null);
+
+  const filteredReleases = appReleases.filter((release) => {
+    const matchesSearch =
+      release.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      release.version.includes(searchQuery);
+    const matchesEnv = envFilter === 'all' || release.environment === envFilter;
+    const matchesStatus = statusFilter === 'all' || release.status === statusFilter;
+    return matchesSearch && matchesEnv && matchesStatus;
+  });
+
+  const getStatusBadge = (status: AppRelease['status']) => {
+    switch (status) {
+      case 'success':
+        return (
+          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+            <CheckCircle className="h-3 w-3 mr-1" />
+            成功
+          </Badge>
+        );
+      case 'failed':
+        return (
+          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+            <XCircle className="h-3 w-3 mr-1" />
+            失败
+          </Badge>
+        );
+      case 'deploying':
+        return (
+          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
+            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+            发布中
+          </Badge>
+        );
+      case 'building':
+        return (
+          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+            构建中
+          </Badge>
+        );
+      case 'rolled_back':
+        return (
+          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+            <RotateCcw className="h-3 w-3 mr-1" />
+            已回滚
+          </Badge>
+        );
+      case 'pending':
+        return (
+          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+            <Clock className="h-3 w-3 mr-1" />
+            待发布
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getEnvBadge = (env: AppRelease['environment']) => {
+    const colors = {
+      dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
+      test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
+      staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
+      prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
+    };
+    const labels = {
+      dev: '开发环境',
+      test: '测试环境',
+      staging: '预发布',
+      prod: '生产环境',
+    };
+    return (
+      <Badge variant="outline" className={colors[env]}>
+        {labels[env]}
+      </Badge>
+    );
+  };
+
+  // 模拟流水线步骤
+  const pipelineSteps = [
+    { name: '代码检出', status: 'success', duration: '15s' },
+    { name: '依赖安装', status: 'success', duration: '45s' },
+    { name: '代码检查', status: 'success', duration: '30s' },
+    { name: '单元测试', status: 'success', duration: '2m 15s' },
+    { name: '构建镜像', status: 'success', duration: '3m 30s' },
+    { name: '推送镜像', status: 'success', duration: '1m 20s' },
+    { name: '部署到K8s', status: 'running', duration: '--' },
+    { name: '健康检查', status: 'pending', duration: '--' },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <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">CI/CD流水线管理与发布历史</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
+            <Settings className="h-4 w-4 mr-2" />
+            流水线配置
+          </Button>
+          <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+            <Plus className="h-4 w-4 mr-2" />
+            新建发布
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">今日发布</p>
+                <p className="text-2xl font-bold text-slate-100">12</p>
+              </div>
+              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
+                <Rocket className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">发布成功</p>
+                <p className="text-2xl font-bold text-emerald-400">10</p>
+              </div>
+              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
+                <CheckCircle className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">发布失败</p>
+                <p className="text-2xl font-bold text-red-400">1</p>
+              </div>
+              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
+                <XCircle className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">成功率</p>
+                <p className="text-2xl font-bold text-blue-400">83.3%</p>
+              </div>
+              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
+                <History className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative w-64">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Input
+            placeholder="搜索应用名称或版本..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+          />
+        </div>
+        <Select value={envFilter} onValueChange={setEnvFilter}>
+          <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
+            <SelectValue placeholder="环境" />
+          </SelectTrigger>
+          <SelectContent className="bg-slate-800 border-slate-700">
+            <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-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
+            <SelectValue placeholder="状态" />
+          </SelectTrigger>
+          <SelectContent className="bg-slate-800 border-slate-700">
+            <SelectItem value="all">全部状态</SelectItem>
+            <SelectItem value="success">成功</SelectItem>
+            <SelectItem value="failed">失败</SelectItem>
+            <SelectItem value="deploying">发布中</SelectItem>
+            <SelectItem value="rolled_back">已回滚</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Releases Table */}
+      <Card className="bg-slate-900 border-slate-800">
+        <CardContent className="p-0">
+          <div className="border-t border-slate-800">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-slate-800 hover:bg-transparent">
+                  <TableHead className="text-slate-400">应用名称</TableHead>
+                  <TableHead className="text-slate-400">版本</TableHead>
+                  <TableHead className="text-slate-400">环境</TableHead>
+                  <TableHead className="text-slate-400">状态</TableHead>
+                  <TableHead className="text-slate-400">代码</TableHead>
+                  <TableHead className="text-slate-400">发布人</TableHead>
+                  <TableHead className="text-slate-400">开始时间</TableHead>
+                  <TableHead className="text-slate-400">耗时</TableHead>
+                  <TableHead className="text-slate-400 text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredReleases.map((release) => (
+                  <TableRow key={release.id} className="border-slate-800 hover:bg-slate-800/50">
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Rocket className="h-4 w-4 text-slate-500" />
+                        <span className="text-sm font-medium text-slate-200">{release.appName}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline" className="border-slate-700 text-slate-400">
+                        {release.version}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{getEnvBadge(release.environment)}</TableCell>
+                    <TableCell>{getStatusBadge(release.status)}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1 text-xs text-slate-400">
+                        <GitBranch className="h-3 w-3" />
+                        <span>{release.branch}</span>
+                        <span className="mx-1">·</span>
+                        <GitCommit className="h-3 w-3" />
+                        <span>{release.commitId}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-slate-300">{release.deployer}</span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-slate-400">
+                        {new Date(release.startedAt).toLocaleString()}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-slate-400">
+                        {release.duration ? `${Math.floor(release.duration / 60)}m ${release.duration % 60}s` : '--'}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex items-center justify-end gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 text-slate-400 hover:text-slate-100"
+                          onClick={() => setSelectedRelease(release)}
+                        >
+                          <Eye className="h-4 w-4 mr-1" />
+                          详情
+                        </Button>
+                        {release.status === 'failed' && (
+                          <Button variant="ghost" size="sm" className="h-8 text-slate-400 hover:text-blue-400">
+                            <RotateCcw className="h-4 w-4 mr-1" />
+                            重试
+                          </Button>
+                        )}
+                        {release.status === 'success' && (
+                          <Button variant="ghost" size="sm" className="h-8 text-slate-400 hover:text-amber-400">
+                            <RotateCcw className="h-4 w-4 mr-1" />
+                            回滚
+                          </Button>
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Release Detail Dialog */}
+      <Dialog open={!!selectedRelease} onOpenChange={() => setSelectedRelease(null)}>
+        <DialogContent className="max-w-4xl bg-slate-900 border-slate-800">
+          <DialogHeader>
+            <DialogTitle className="text-slate-100 flex items-center gap-2">
+              <Rocket className="h-5 w-5 text-blue-400" />
+              {selectedRelease?.appName}
+              <Badge variant="outline" className="border-slate-700 text-slate-400">
+                {selectedRelease?.version}
+              </Badge>
+            </DialogTitle>
+            <DialogDescription className="text-slate-500">
+              流水线: {selectedRelease?.pipeline}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Pipeline Steps */}
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-slate-300">发布进度</h4>
+              <div className="space-y-2">
+                {pipelineSteps.map((step, index) => (
+                  <div
+                    key={index}
+                    className={cn(
+                      'flex items-center gap-3 p-3 rounded-lg',
+                      step.status === 'success' && 'bg-emerald-500/5',
+                      step.status === 'running' && 'bg-blue-500/5',
+                      step.status === 'pending' && 'bg-slate-800/50'
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        'w-6 h-6 rounded-full flex items-center justify-center',
+                        step.status === 'success' && 'bg-emerald-500/20 text-emerald-400',
+                        step.status === 'running' && 'bg-blue-500/20 text-blue-400',
+                        step.status === 'pending' && 'bg-slate-700 text-slate-500'
+                      )}
+                    >
+                      {step.status === 'success' ? (
+                        <CheckCircle className="h-4 w-4" />
+                      ) : step.status === 'running' ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : (
+                        <span className="text-xs">{index + 1}</span>
+                      )}
+                    </div>
+                    <span className="flex-1 text-sm text-slate-200">{step.name}</span>
+                    <span className="text-sm text-slate-500">{step.duration}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Build Logs */}
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-slate-300">构建日志</h4>
+              <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
+                <div className="space-y-1">
+                  <p>[10:00:00] Starting pipeline for {selectedRelease?.appName}...</p>
+                  <p>[10:00:15] Checkout code from branch {selectedRelease?.branch}</p>
+                  <p>[10:00:30] Installing dependencies...</p>
+                  <p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>
+                  <p>[10:01:15] Running code analysis...</p>
+                  <p className="text-emerald-400">[10:01:45] Code analysis passed</p>
+                  <p>[10:01:45] Running unit tests...</p>
+                  <p className="text-emerald-400">[10:04:00] All tests passed (156/156)</p>
+                  <p>[10:04:00] Building Docker image...</p>
+                  <p className="text-emerald-400">[10:07:30] Image built successfully</p>
+                  <p>[10:07:30] Pushing image to registry...</p>
+                  <p className="text-emerald-400">[10:08:50] Image pushed successfully</p>
+                  <p>[10:08:50] Deploying to Kubernetes...</p>
+                  <p className="text-blue-400">[10:10:00] Deployment in progress...</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" className="border-slate-700 text-slate-300">
+              <Terminal className="h-4 w-4 mr-2" />
+              查看完整日志
+            </Button>
+            {selectedRelease?.status === 'failed' && (
+              <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+                <RotateCcw className="h-4 w-4 mr-2" />
+                重新发布
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
@@ -0,0 +1,616 @@
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} 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 {
+  Play,
+  Plus,
+  Search,
+  Settings,
+  GitBranch,
+  GitCommit,
+  Clock,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  MoreHorizontal,
+  Edit,
+  Trash2,
+  Copy,
+  Eye,
+  Terminal,
+  Pause,
+  RotateCw,
+  History,
+  ChevronRight,
+  ChevronDown,
+  FileCode,
+  Workflow,
+} from 'lucide-react';
+import { pipelines, pipelineExecutions, releases } from '@/mocks/data';
+
+interface PipelineStage {
+  id: string;
+  name: string;
+  status: 'pending' | 'running' | 'success' | 'failed' | 'skipped';
+  duration: string;
+  logs: string[];
+}
+
+interface Pipeline {
+  id: string;
+  name: string;
+  description: string;
+  repository: string;
+  branch: string;
+  stages: PipelineStage[];
+  lastRun: string;
+  lastStatus: 'success' | 'failed' | 'running' | 'never';
+  triggerType: 'manual' | 'auto';
+  createdAt: string;
+}
+
+const mockPipelines: Pipeline[] = [
+  {
+    id: 'pipe-001',
+    name: 'frontend-build-and-deploy',
+    description: '前端项目构建与部署',
+    repository: 'https://gitlab.company.com/frontend/app.git',
+    branch: 'main',
+    stages: [
+      { id: 'stage-1', name: '代码检出', status: 'success', duration: '15s', logs: ['检出代码...', '代码检出完成'] },
+      { id: 'stage-2', name: '依赖安装', status: 'success', duration: '45s', logs: ['安装依赖...', '依赖安装完成'] },
+      { id: 'stage-3', name: '代码检查', status: 'success', duration: '30s', logs: ['执行 ESLint...', '代码检查通过'] },
+      { id: 'stage-4', name: '构建打包', status: 'success', duration: '2m 15s', logs: ['开始构建...', '构建完成'] },
+      { id: 'stage-5', name: '部署到测试环境', status: 'success', duration: '30s', logs: ['部署中...', '部署完成'] },
+    ],
+    lastRun: '2025-04-14 10:30:00',
+    lastStatus: 'success',
+    triggerType: 'auto',
+    createdAt: '2025-01-15',
+  },
+  {
+    id: 'pipe-002',
+    name: 'backend-api-deploy',
+    description: '后端API服务部署',
+    repository: 'https://gitlab.company.com/backend/api.git',
+    branch: 'develop',
+    stages: [
+      { id: 'stage-1', name: '代码检出', status: 'success', duration: '12s', logs: [] },
+      { id: 'stage-2', name: '单元测试', status: 'success', duration: '1m 30s', logs: [] },
+      { id: 'stage-3', name: '构建镜像', status: 'running', duration: '45s', logs: ['构建Docker镜像...'] },
+      { id: 'stage-4', name: '推送镜像', status: 'pending', duration: '-', logs: [] },
+      { id: 'stage-5', name: '部署到K8s', status: 'pending', duration: '-', logs: [] },
+    ],
+    lastRun: '2025-04-14 11:15:00',
+    lastStatus: 'running',
+    triggerType: 'manual',
+    createdAt: '2025-02-01',
+  },
+  {
+    id: 'pipe-003',
+    name: 'database-migration',
+    description: '数据库迁移脚本执行',
+    repository: 'https://gitlab.company.com/database/migrations.git',
+    branch: 'main',
+    stages: [
+      { id: 'stage-1', name: '代码检出', status: 'success', duration: '10s', logs: [] },
+      { id: 'stage-2', name: '数据库备份', status: 'success', duration: '2m 00s', logs: [] },
+      { id: 'stage-3', name: '执行迁移', status: 'failed', duration: '15s', logs: ['迁移失败: 表已存在'] },
+    ],
+    lastRun: '2025-04-14 09:00:00',
+    lastStatus: 'failed',
+    triggerType: 'manual',
+    createdAt: '2025-01-20',
+  },
+];
+
+const pipelineTemplates = [
+  { id: 'template-1', name: 'Node.js 项目', description: '适用于 Node.js 前端项目', stages: ['代码检出', '依赖安装', '代码检查', '构建打包', '部署'] },
+  { id: 'template-2', name: 'Go 项目', description: '适用于 Go 后端项目', stages: ['代码检出', '单元测试', '构建', '构建镜像', '部署'] },
+  { id: 'template-3', name: 'Java 项目', description: '适用于 Java Spring Boot 项目', stages: ['代码检出', 'Maven构建', '单元测试', '打包', '部署'] },
+  { id: 'template-4', name: 'Python 项目', description: '适用于 Python 项目', stages: ['代码检出', '依赖安装', '代码检查', '测试', '部署'] },
+];
+
+export function PipelineManager() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | null>(null);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
+  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
+  const [activeStage, setActiveStage] = useState<string | null>(null);
+  const [newPipeline, setNewPipeline] = useState({
+    name: '',
+    description: '',
+    repository: '',
+    branch: 'main',
+    template: '',
+  });
+
+  const filteredPipelines = mockPipelines.filter(
+    (p) =>
+      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      p.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getStatusBadge = (status: Pipeline['lastStatus']) => {
+    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 'running':
+        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>
+        );
+      default:
+        return (
+          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+            从未运行
+          </Badge>
+        );
+    }
+  };
+
+  const getStageStatusIcon = (status: PipelineStage['status']) => {
+    switch (status) {
+      case 'success':
+        return <CheckCircle className="h-4 w-4 text-emerald-400" />;
+      case 'failed':
+        return <XCircle className="h-4 w-4 text-red-400" />;
+      case 'running':
+        return <Loader2 className="h-4 w-4 text-blue-400 animate-spin" />;
+      case 'skipped':
+        return <span className="text-slate-500 text-xs">跳过</span>;
+      default:
+        return <span className="text-slate-600 text-xs">待执行</span>;
+    }
+  };
+
+  const handleCreatePipeline = () => {
+    // Mock create
+    setIsCreateDialogOpen(false);
+    setNewPipeline({ name: '', description: '', repository: '', branch: 'main', template: '' });
+  };
+
+  const handleRunPipeline = () => {
+    setIsRunDialogOpen(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 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">CI/CD 流水线配置与管理</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" className="border-slate-700 text-slate-300">
+            <History className="h-4 w-4 mr-2" />
+            执行历史
+          </Button>
+          <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            新建流水线
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-4">
+        <Card className="bg-slate-800 border-slate-700">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-slate-400 text-sm">流水线总数</p>
+                <p className="text-2xl font-bold text-slate-100">{mockPipelines.length}</p>
+              </div>
+              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+                <Workflow className="h-5 w-5 text-blue-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-800 border-slate-700">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-slate-400 text-sm">运行中</p>
+                <p className="text-2xl font-bold text-blue-400">
+                  {mockPipelines.filter((p) => p.lastStatus === 'running').length}
+                </p>
+              </div>
+              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+                <Loader2 className="h-5 w-5 text-blue-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-800 border-slate-700">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-slate-400 text-sm">今日成功</p>
+                <p className="text-2xl font-bold text-emerald-400">12</p>
+              </div>
+              <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
+                <CheckCircle className="h-5 w-5 text-emerald-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-800 border-slate-700">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-slate-400 text-sm">今日失败</p>
+                <p className="text-2xl font-bold text-red-400">2</p>
+              </div>
+              <div className="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
+                <XCircle className="h-5 w-5 text-red-400" />
+              </div>
+            </div>
+          </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>
+      </div>
+
+      {/* Pipeline List */}
+      <div className="space-y-4">
+        {filteredPipelines.map((pipeline) => (
+          <Card key={pipeline.id} className="bg-slate-800 border-slate-700">
+            <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">{pipeline.name}</h3>
+                    {getStatusBadge(pipeline.lastStatus)}
+                    <Badge variant="outline" className="border-slate-700 text-slate-400">
+                      {pipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-slate-400 mt-1">{pipeline.description}</p>
+                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
+                    <span className="flex items-center gap-1">
+                      <GitBranch className="h-3 w-3" />
+                      {pipeline.branch}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      上次运行: {pipeline.lastRun}
+                    </span>
+                  </div>
+
+                  {/* Pipeline Stages */}
+                  <div className="mt-4">
+                    <div className="flex items-center gap-2">
+                      {pipeline.stages.map((stage, index) => (
+                        <div key={stage.id} className="flex items-center">
+                          <div
+                            className={`flex items-center gap-1 px-2 py-1 rounded text-xs ${
+                              stage.status === 'success'
+                                ? 'bg-emerald-500/20 text-emerald-400'
+                                : stage.status === 'failed'
+                                ? 'bg-red-500/20 text-red-400'
+                                : stage.status === 'running'
+                                ? 'bg-blue-500/20 text-blue-400'
+                                : 'bg-slate-700 text-slate-400'
+                            }`}
+                          >
+                            {getStageStatusIcon(stage.status)}
+                            <span className="ml-1">{stage.name}</span>
+                          </div>
+                          {index < pipeline.stages.length - 1 && (
+                            <ChevronRight className="h-4 w-4 text-slate-600 mx-1" />
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
+                    onClick={() => {
+                      setSelectedPipeline(pipeline);
+                      setIsRunDialogOpen(true);
+                    }}
+                  >
+                    <Play 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={() => {
+                      setSelectedPipeline(pipeline);
+                      setIsDetailDialogOpen(true);
+                    }}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400">
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Create Pipeline Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent className="max-w-2xl bg-slate-900 border-slate-700 text-slate-100">
+          <DialogHeader>
+            <DialogTitle>新建流水线</DialogTitle>
+            <DialogDescription className="text-slate-500">配置新的 CI/CD 流水线</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label className="text-slate-300">流水线名称</Label>
+              <Input
+                value={newPipeline.name}
+                onChange={(e) => setNewPipeline({ ...newPipeline, name: e.target.value })}
+                placeholder="例如: frontend-build"
+                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+              />
+            </div>
+            <div>
+              <Label className="text-slate-300">描述</Label>
+              <Textarea
+                value={newPipeline.description}
+                onChange={(e) => setNewPipeline({ ...newPipeline, description: e.target.value })}
+                placeholder="流水线描述..."
+                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+              />
+            </div>
+            <div>
+              <Label className="text-slate-300">代码仓库</Label>
+              <Input
+                value={newPipeline.repository}
+                onChange={(e) => setNewPipeline({ ...newPipeline, repository: e.target.value })}
+                placeholder="https://gitlab.company.com/project/repo.git"
+                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+              />
+            </div>
+            <div>
+              <Label className="text-slate-300">默认分支</Label>
+              <Input
+                value={newPipeline.branch}
+                onChange={(e) => setNewPipeline({ ...newPipeline, 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">选择模板</Label>
+              <div className="grid grid-cols-2 gap-3 mt-1">
+                {pipelineTemplates.map((template) => (
+                  <Card
+                    key={template.id}
+                    className={`cursor-pointer transition-all ${
+                      newPipeline.template === template.id
+                        ? 'border-blue-500 ring-1 ring-blue-500/30 bg-slate-800'
+                        : 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
+                    }`}
+                    onClick={() => setNewPipeline({ ...newPipeline, template: template.id })}
+                  >
+                    <CardContent className="p-3">
+                      <p className="font-medium text-slate-200">{template.name}</p>
+                      <p className="text-xs text-slate-500">{template.description}</p>
+                      <div className="flex flex-wrap gap-1 mt-2">
+                        {template.stages.slice(0, 3).map((stage) => (
+                          <Badge key={stage} variant="secondary" className="bg-slate-700 text-slate-300 text-xs">
+                            {stage}
+                          </Badge>
+                        ))}
+                        {template.stages.length > 3 && (
+                          <Badge variant="secondary" className="bg-slate-700 text-slate-300 text-xs">
+                            +{template.stages.length - 3}
+                          </Badge>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)} className="border-slate-700 text-slate-300">
+              取消
+            </Button>
+            <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleCreatePipeline}>
+              创建流水线
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Pipeline Detail Dialog */}
+      <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
+        <DialogContent className="max-w-4xl bg-slate-900 border-slate-700 text-slate-100">
+          <DialogHeader>
+            <DialogTitle>{selectedPipeline?.name}</DialogTitle>
+            <DialogDescription className="text-slate-500">{selectedPipeline?.description}</DialogDescription>
+          </DialogHeader>
+          {selectedPipeline && (
+            <div className="space-y-4">
+              <Tabs defaultValue="stages">
+                <TabsList className="bg-slate-800 border border-slate-700">
+                  <TabsTrigger value="stages" className="data-[state=active]:bg-slate-700">
+                    执行阶段
+                  </TabsTrigger>
+                  <TabsTrigger value="config" className="data-[state=active]:bg-slate-700">
+                    配置
+                  </TabsTrigger>
+                  <TabsTrigger value="history" className="data-[state=active]:bg-slate-700">
+                    历史记录
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="stages" className="mt-4">
+                  <div className="space-y-2">
+                    {selectedPipeline.stages.map((stage, index) => (
+                      <div
+                        key={stage.id}
+                        className={`p-3 rounded-lg border cursor-pointer transition-all ${
+                          activeStage === stage.id
+                            ? 'border-blue-500 bg-blue-500/10'
+                            : 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
+                        }`}
+                        onClick={() => setActiveStage(activeStage === stage.id ? null : stage.id)}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            <span className="text-slate-500 w-6">{index + 1}</span>
+                            {getStageStatusIcon(stage.status)}
+                            <span className="text-slate-200">{stage.name}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs text-slate-500">{stage.duration}</span>
+                            <ChevronDown
+                              className={`h-4 w-4 text-slate-500 transition-transform ${
+                                activeStage === stage.id ? 'rotate-180' : ''
+                              }`}
+                            />
+                          </div>
+                        </div>
+                        {activeStage === stage.id && stage.logs.length > 0 && (
+                          <div className="mt-3 p-3 bg-slate-900 rounded font-mono text-xs text-slate-400">
+                            {stage.logs.map((log, i) => (
+                              <div key={i}>{log}</div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </TabsContent>
+                <TabsContent value="config" className="mt-4">
+                  <div className="space-y-4">
+                    <div>
+                      <Label className="text-slate-400">代码仓库</Label>
+                      <p className="text-slate-200">{selectedPipeline.repository}</p>
+                    </div>
+                    <div>
+                      <Label className="text-slate-400">默认分支</Label>
+                      <p className="text-slate-200">{selectedPipeline.branch}</p>
+                    </div>
+                    <div>
+                      <Label className="text-slate-400">触发方式</Label>
+                      <p className="text-slate-200">
+                        {selectedPipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
+                      </p>
+                    </div>
+                  </div>
+                </TabsContent>
+                <TabsContent value="history" className="mt-4">
+                  <div className="text-slate-500 text-center py-8">历史执行记录将在这里显示</div>
+                </TabsContent>
+              </Tabs>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Run Pipeline Dialog */}
+      <Dialog open={isRunDialogOpen} onOpenChange={setIsRunDialogOpen}>
+        <DialogContent className="bg-slate-900 border-slate-700 text-slate-100">
+          <DialogHeader>
+            <DialogTitle>执行流水线</DialogTitle>
+            <DialogDescription className="text-slate-500">{selectedPipeline?.name}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label className="text-slate-300">分支</Label>
+              <Input defaultValue={selectedPipeline?.branch} className="bg-slate-800 border-slate-700 text-slate-100 mt-1" />
+            </div>
+            <div>
+              <Label className="text-slate-300">Commit ID (可选)</Label>
+              <Input placeholder="留空则使用最新提交" className="bg-slate-800 border-slate-700 text-slate-100 mt-1" />
+            </div>
+            <div>
+              <Label className="text-slate-300">环境变量 (可选)</Label>
+              <Textarea
+                placeholder="KEY=value&#10;KEY2=value2"
+                className="bg-slate-800 border-slate-700 text-slate-100 mt-1 font-mono text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsRunDialogOpen(false)} className="border-slate-700 text-slate-300">
+              取消
+            </Button>
+            <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleRunPipeline}>
+              <Play className="h-4 w-4 mr-2" />
+              开始执行
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
@@ -0,0 +1,564 @@
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} 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 {
+  Rocket,
+  Plus,
+  Search,
+  CheckCircle,
+  XCircle,
+  Clock,
+  RotateCcw,
+  GitBranch,
+  GitCommit,
+  User,
+  Eye,
+  MoreHorizontal,
+  FileText,
+  AlertCircle,
+  History,
+  ChevronRight,
+  Loader2,
+  Play,
+  Pause,
+  Check,
+  X,
+} from 'lucide-react';
+import { appReleases } from '@/mocks/data';
+
+interface Release {
+  id: string;
+  appName: string;
+  version: string;
+  environment: 'production' | 'staging' | 'development';
+  status: 'pending' | 'approved' | 'deploying' | 'success' | 'failed' | 'rolled_back';
+  commitId: string;
+  branch: string;
+  applicant: string;
+  approver?: string;
+  description: string;
+  createdAt: string;
+  deployedAt?: string;
+  rollbackVersion?: string;
+}
+
+const mockReleases: Release[] = [
+  {
+    id: 'rel-001',
+    appName: '用户中心服务',
+    version: 'v2.3.1',
+    environment: 'production',
+    status: 'success',
+    commitId: 'a1b2c3d',
+    branch: 'main',
+    applicant: '张三',
+    approver: '李四',
+    description: '修复用户登录异常问题，优化性能',
+    createdAt: '2025-04-14 09:00:00',
+    deployedAt: '2025-04-14 10:30:00',
+  },
+  {
+    id: 'rel-002',
+    appName: '订单服务',
+    version: 'v1.5.0',
+    environment: 'production',
+    status: 'pending',
+    commitId: 'e4f5g6h',
+    branch: 'release/v1.5.0',
+    applicant: '王五',
+    description: '新增订单批量导出功能',
+    createdAt: '2025-04-14 11:00:00',
+  },
+  {
+    id: 'rel-003',
+    appName: '支付网关',
+    version: 'v3.0.2',
+    environment: 'staging',
+    status: 'deploying',
+    commitId: 'i7j8k9l',
+    branch: 'develop',
+    applicant: '赵六',
+    approver: '李四',
+    description: '集成新的支付渠道',
+    createdAt: '2025-04-14 10:00:00',
+    deployedAt: '2025-04-14 11:15:00',
+  },
+  {
+    id: 'rel-004',
+    appName: '消息推送服务',
+    version: 'v1.2.0',
+    environment: 'production',
+    status: 'failed',
+    commitId: 'm0n1o2p',
+    branch: 'main',
+    applicant: '张三',
+    approver: '李四',
+    description: '优化推送性能',
+    createdAt: '2025-04-14 08:00:00',
+    deployedAt: '2025-04-14 08:30:00',
+  },
+  {
+    id: 'rel-005',
+    appName: '数据分析平台',
+    version: 'v2.0.0',
+    environment: 'production',
+    status: 'rolled_back',
+    commitId: 'q3r4s5t',
+    branch: 'main',
+    applicant: '王五',
+    approver: '李四',
+    description: '新版数据分析引擎',
+    createdAt: '2025-04-13 14:00:00',
+    deployedAt: '2025-04-13 15:00:00',
+    rollbackVersion: 'v1.9.8',
+  },
+];
+
+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' },
+];
+
+export function ReleaseManager() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [envFilter, setEnvFilter] = useState<string>('all');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [selectedRelease, setSelectedRelease] = useState<Release | null>(null);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
+  const [isApproveDialogOpen, setIsApproveDialogOpen] = useState(false);
+  const [newRelease, setNewRelease] = useState({
+    appId: '',
+    version: '',
+    environment: 'staging',
+    branch: '',
+    commitId: '',
+    description: '',
+  });
+
+  const filteredReleases = mockReleases.filter((release) => {
+    const matchesSearch =
+      release.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      release.version.includes(searchQuery);
+    const matchesEnv = envFilter === 'all' || release.environment === envFilter;
+    const matchesStatus = statusFilter === 'all' || release.status === statusFilter;
+    return matchesSearch && matchesEnv && matchesStatus;
+  });
+
+  const getStatusBadge = (status: Release['status']) => {
+    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>
+        );
+    }
+  };
+
+  const getEnvironmentBadge = (env: Release['environment']) => {
+    const colors = {
+      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 = {
+      production: '生产环境',
+      staging: '预发环境',
+      development: '开发环境',
+    };
+    return (
+      <Badge variant="outline" className={colors[env]}>
+        {labels[env]}
+      </Badge>
+    );
+  };
+
+  const handleCreateRelease = () => {
+    setIsCreateDialogOpen(false);
+    setNewRelease({ appId: '', version: '', environment: 'staging', branch: '', commitId: '', description: '' });
+  };
+
+  const handleApprove = (approved: boolean) => {
+    setIsApproveDialogOpen(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 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>
+        </div>
+        <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          新建发布
+        </Button>
+      </div>
+
+      {/* 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">
+              {mockReleases.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">
+              {mockReleases.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">
+              {mockReleases.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">
+              {mockReleases.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">
+              {mockReleases.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>
+
+      {/* Release List */}
+      <div className="space-y-3">
+        {filteredReleases.map((release) => (
+          <Card key={release.id} className="bg-slate-800 border-slate-700">
+            <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.appName}</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.commitId}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <User className="h-3 w-3" />
+                      申请人: {release.applicant}
+                    </span>
+                  </div>
+                  <p className="text-sm text-slate-500 mt-2">{release.description}</p>
+                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
+                    <span>创建: {release.createdAt}</span>
+                    {release.deployedAt && <span>部署: {release.deployedAt}</span>}
+                    {release.rollbackVersion && (
+                      <span className="text-red-400">回滚至: {release.rollbackVersion}</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">
+                      <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">
+                      <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>
+            </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">
+          <DialogHeader>
+            <DialogTitle>新建发布</DialogTitle>
+            <DialogDescription className="text-slate-500">创建新的应用版本发布申请</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>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label className="text-slate-300">版本号</Label>
+                <Input
+                  value={newRelease.version}
+                  onChange={(e) => setNewRelease({ ...newRelease, version: e.target.value })}
+                  placeholder="v1.0.0"
+                  className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                />
+              </div>
+              <div>
+                <Label className="text-slate-300">目标环境</Label>
+                <Select
+                  value={newRelease.environment}
+                  onValueChange={(value: any) => setNewRelease({ ...newRelease, environment: value })}
+                >
+                  <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-100 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>
+                </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>
+                <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"
+                />
+              </div>
+            </div>
+            <div>
+              <Label className="text-slate-300">发布说明</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"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)} className="border-slate-700 text-slate-300">
+              取消
+            </Button>
+            <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleCreateRelease}>
+              提交发布申请
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Approve Dialog */}
+      <Dialog open={isApproveDialogOpen} onOpenChange={setIsApproveDialogOpen}>
+        <DialogContent className="bg-slate-900 border-slate-700 text-slate-100">
+          <DialogHeader>
+            <DialogTitle>审批发布</DialogTitle>
+            <DialogDescription className="text-slate-500">
+              {selectedRelease?.appName} - {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"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => handleApprove(false)} className="border-red-600 text-red-400 hover:bg-red-600/20">
+              <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>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}