attacker
97c4207ff8
- 目录重构: 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 依赖
617 lines
25 KiB
TypeScript
617 lines
25 KiB
TypeScript
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 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>
|
|
);
|
|
}
|