654 lines
17 KiB
Vue
654 lines
17 KiB
Vue
<template>
|
||
<div class="dev-page">
|
||
<!-- 页面头部 -->
|
||
<div class="page-header">
|
||
<div>
|
||
<h2 class="page-title">⚙️ 流水线管理</h2>
|
||
<p class="page-desc">配置 CI/CD 流水线，对接 Gitea CI / Jenkins / GitHub Actions</p>
|
||
</div>
|
||
<a-space>
|
||
<a-button @click="loadPipelines">
|
||
<template #icon><ReloadOutlined /></template>
|
||
刷新
|
||
</a-button>
|
||
<a-button type="primary" @click="showPipelineModal = true">
|
||
<template #icon><PlusOutlined /></template>
|
||
新建流水线
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
|
||
<!-- 选择应用 -->
|
||
<div class="panel mb-4">
|
||
<div class="panel-header">
|
||
<span class="panel-title">📦 选择应用</span>
|
||
</div>
|
||
<div class="p-4">
|
||
<a-select
|
||
v-model:value="selectedAppId"
|
||
style="width: 300px"
|
||
placeholder="选择要管理流水线的应用"
|
||
:loading="loadingApps"
|
||
allow-clear
|
||
@change="handleAppChange"
|
||
>
|
||
<a-select-option v-for="app in apps" :key="app.productId" :value="app.productId">
|
||
{{ app.productName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流水线列表 -->
|
||
<div v-if="selectedAppId" class="panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">⚡ 流水线列表</span>
|
||
<a-tag v-if="pipelines.length > 0">{{ pipelines.length }} 条流水线</a-tag>
|
||
</div>
|
||
|
||
<a-spin :spinning="loading">
|
||
<div v-if="pipelines.length > 0" class="pipeline-list">
|
||
<div v-for="pipeline in pipelines" :key="pipeline.id" class="pipeline-item">
|
||
<div class="pipeline-header">
|
||
<div class="pipeline-info">
|
||
<span class="pipeline-name">{{ pipeline.name }}</span>
|
||
<a-tag :color="pipeline.enabled ? 'green' : 'default'" size="small">
|
||
{{ pipeline.enabled ? '启用' : '禁用' }}
|
||
</a-tag>
|
||
<a-tag size="small">{{ ciTypeText(pipeline.ciType) }}</a-tag>
|
||
<a-tag v-if="pipeline.autoDeploy" color="blue" size="small">自动部署</a-tag>
|
||
</div>
|
||
<div class="pipeline-actions">
|
||
<a-switch
|
||
:checked="pipeline.enabled"
|
||
size="small"
|
||
@change="(checked: boolean) => handleToggle(pipeline, checked)"
|
||
/>
|
||
<a-button type="link" size="small" @click="handleEdit(pipeline)">编辑</a-button>
|
||
<a-popconfirm title="确定要删除此流水线？" @confirm="handleDelete(pipeline)">
|
||
<a-button danger type="link" size="small">删除</a-button>
|
||
</a-popconfirm>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pipeline-body">
|
||
<div class="pipeline-desc">{{ pipeline.description || '暂无描述' }}</div>
|
||
|
||
<div class="pipeline-meta">
|
||
<span v-if="pipeline.repoFullName" class="meta-item">
|
||
<GithubOutlined /> {{ pipeline.repoFullName }}
|
||
</span>
|
||
<span v-if="pipeline.workflowFile" class="meta-item">
|
||
<FileOutlined /> {{ pipeline.workflowFile }}
|
||
</span>
|
||
<span class="meta-item">
|
||
<BranchesOutlined /> {{ pipeline.defaultBranch || 'main' }}
|
||
</span>
|
||
<span class="meta-item">
|
||
<NodeIndexOutlined /> {{ stagesText(pipeline.stages) }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="pipeline-stats">
|
||
<span class="stat-item success">
|
||
<CheckCircleOutlined /> {{ pipeline.successCount || 0 }} 成功
|
||
</span>
|
||
<span class="stat-item failed">
|
||
<CloseCircleOutlined /> {{ pipeline.failureCount || 0 }} 失败
|
||
</span>
|
||
<span v-if="pipeline.lastBuildTime" class="stat-item">
|
||
<ClockCircleOutlined /> {{ formatTime(pipeline.lastBuildTime) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="pipeline.lastBuildStatus" class="pipeline-last-build" :class="pipeline.lastBuildStatus">
|
||
最近构建: <span>{{ statusText(pipeline.lastBuildStatus) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a-empty v-else description="暂无流水线配置" class="py-8">
|
||
<template #image>
|
||
<div class="empty-icon">⚙️</div>
|
||
</template>
|
||
<a-button type="primary" @click="showPipelineModal = true">创建第一条流水线</a-button>
|
||
</a-empty>
|
||
</a-spin>
|
||
</div>
|
||
|
||
<!-- 未选择应用提示 -->
|
||
<div v-else class="panel">
|
||
<div class="empty-state">
|
||
<div class="empty-icon">📦</div>
|
||
<div class="empty-title">请先选择应用</div>
|
||
<div class="empty-desc">选择应用后，可以查看和管理该应用的 CI/CD 流水线</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新建/编辑流水线弹窗 -->
|
||
<a-modal
|
||
v-model:open="showPipelineModal"
|
||
:title="editingPipeline ? '编辑流水线' : '新建流水线'"
|
||
width="600px"
|
||
:confirm-loading="submitting"
|
||
@ok="handleSubmit"
|
||
@cancel="resetForm"
|
||
>
|
||
<a-form :model="form" layout="vertical">
|
||
<a-form-item label="流水线名称" required>
|
||
<a-input v-model:value="form.name" placeholder="如：生产环境构建" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="描述">
|
||
<a-textarea v-model:value="form.description" :rows="2" placeholder="描述此流水线的用途" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="CI 系统" required>
|
||
<a-radio-group v-model:value="form.ciType">
|
||
<a-radio value="gitea">Gitea CI</a-radio>
|
||
<a-radio value="jenkins">Jenkins</a-radio>
|
||
<a-radio value="github">GitHub Actions</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
|
||
<template v-if="form.ciType === 'gitea'">
|
||
<a-form-item label="仓库全称" required>
|
||
<a-input v-model:value="form.repoFullName" placeholder="如：gxwebsoft/my-app" />
|
||
<div class="form-hint">Gitea 上的仓库完整名称（用户名/仓库名）</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="工作流文件">
|
||
<a-input v-model:value="form.workflowFile" placeholder="build.yml" />
|
||
<div class="form-hint">.gitea/workflows/ 目录下的工作流文件名</div>
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<template v-if="form.ciType === 'jenkins'">
|
||
<a-form-item label="Jenkins Job 名称" required>
|
||
<a-input v-model:value="form.repoFullName" placeholder="如：my-app-build" />
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<template v-if="form.ciType === 'github'">
|
||
<a-form-item label="仓库全称" required>
|
||
<a-input v-model:value="form.repoFullName" placeholder="如：owner/repo" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="工作流文件">
|
||
<a-input v-model:value="form.workflowFile" placeholder=".github/workflows/build.yml" />
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<a-form-item label="环境" required>
|
||
<a-radio-group v-model:value="form.env">
|
||
<a-radio value="development">开发环境</a-radio>
|
||
<a-radio value="staging">测试环境</a-radio>
|
||
<a-radio value="production">生产环境</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="默认分支">
|
||
<a-input v-model:value="form.defaultBranch" placeholder="main" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="流水线阶段">
|
||
<a-checkbox-group v-model:value="form.selectedStages">
|
||
<a-checkbox value="build">构建</a-checkbox>
|
||
<a-checkbox value="test">测试</a-checkbox>
|
||
<a-checkbox value="deploy">部署</a-checkbox>
|
||
</a-checkbox-group>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="超时时间（秒）">
|
||
<a-input-number v-model:value="form.timeout" :min="60" :max="7200" style="width: 200px" />
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-checkbox v-model:checked="form.autoDeploy">自动部署</a-checkbox>
|
||
<div class="form-hint">构建成功后自动触发部署流程</div>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
ReloadOutlined,
|
||
PlusOutlined,
|
||
GithubOutlined,
|
||
FileOutlined,
|
||
BranchesOutlined,
|
||
NodeIndexOutlined,
|
||
CheckCircleOutlined,
|
||
CloseCircleOutlined,
|
||
ClockCircleOutlined,
|
||
} from '@ant-design/icons-vue'
|
||
import { message } from 'ant-design-vue'
|
||
import {
|
||
pagePipeline,
|
||
listPipelineByApp,
|
||
createPipeline,
|
||
updatePipeline,
|
||
deletePipeline,
|
||
togglePipeline,
|
||
} from '@/api/app/cicd'
|
||
import type { AppPipeline } from '@/api/app/cicd'
|
||
import { getDeveloperApps } from '@/api/app/appProduct'
|
||
import type { AppProduct } from '@/api/app/appProduct/model'
|
||
|
||
definePageMeta({ layout: 'developer' })
|
||
useHead({ title: '流水线管理 - 开发者中心' })
|
||
|
||
const userId = import.meta.client ? localStorage.getItem('UserId') : null
|
||
|
||
// 状态
|
||
const loading = ref(false)
|
||
const loadingApps = ref(false)
|
||
const submitting = ref(false)
|
||
const apps = ref<AppProduct[]>([])
|
||
const pipelines = ref<AppPipeline[]>([])
|
||
const selectedAppId = ref<number | undefined>()
|
||
|
||
// 弹窗
|
||
const showPipelineModal = ref(false)
|
||
const editingPipeline = ref<AppPipeline | null>(null)
|
||
|
||
// 表单
|
||
const form = reactive({
|
||
name: '',
|
||
description: '',
|
||
ciType: 'gitea' as 'gitea' | 'jenkins' | 'github',
|
||
repoFullName: '',
|
||
workflowFile: '',
|
||
env: 'production' as 'development' | 'staging' | 'production',
|
||
defaultBranch: 'main',
|
||
stages: '',
|
||
selectedStages: ['build', 'test', 'deploy'] as string[],
|
||
timeout: 3600,
|
||
autoDeploy: false,
|
||
})
|
||
|
||
// ========== 加载数据 ==========
|
||
|
||
async function loadApps() {
|
||
loadingApps.value = true
|
||
try {
|
||
const res = await getDeveloperApps({ page: 1, limit: 100, userId: userId ? Number(userId) : undefined })
|
||
apps.value = (res as any)?.data?.records || res?.list || []
|
||
} catch (e) {
|
||
console.error('加载应用列表失败:', e)
|
||
} finally {
|
||
loadingApps.value = false
|
||
}
|
||
}
|
||
|
||
async function loadPipelines() {
|
||
if (!selectedAppId.value) {
|
||
pipelines.value = []
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
try {
|
||
const res = await listPipelineByApp(selectedAppId.value)
|
||
if (res?.data?.code === 200) {
|
||
pipelines.value = res.data.data || []
|
||
} else {
|
||
pipelines.value = []
|
||
}
|
||
} catch (e) {
|
||
console.error('加载流水线列表失败:', e)
|
||
pipelines.value = []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function handleAppChange(appId: number | undefined) {
|
||
selectedAppId.value = appId
|
||
if (appId) {
|
||
loadPipelines()
|
||
} else {
|
||
pipelines.value = []
|
||
}
|
||
}
|
||
|
||
// ========== 操作 ==========
|
||
|
||
function handleEdit(pipeline: AppPipeline) {
|
||
editingPipeline.value = pipeline
|
||
form.name = pipeline.name || ''
|
||
form.description = pipeline.description || ''
|
||
form.ciType = (pipeline.ciType as any) || 'gitea'
|
||
form.repoFullName = pipeline.repoFullName || ''
|
||
form.workflowFile = pipeline.workflowFile || ''
|
||
form.env = (pipeline.env as any) || 'production'
|
||
form.defaultBranch = pipeline.defaultBranch || 'main'
|
||
form.selectedStages = pipeline.stages ? pipeline.stages.split(',') : ['build', 'test', 'deploy']
|
||
form.timeout = pipeline.timeout || 3600
|
||
form.autoDeploy = pipeline.autoDeploy || false
|
||
showPipelineModal.value = true
|
||
}
|
||
|
||
async function handleToggle(pipeline: AppPipeline, enabled: boolean) {
|
||
try {
|
||
const res = await togglePipeline(pipeline.id!, enabled)
|
||
if (res?.data?.code === 200) {
|
||
message.success(enabled ? '流水线已启用' : '流水线已禁用')
|
||
loadPipelines()
|
||
} else {
|
||
message.error(res?.data?.message || '操作失败')
|
||
}
|
||
} catch (e: any) {
|
||
message.error(e?.message || '操作失败')
|
||
}
|
||
}
|
||
|
||
async function handleDelete(pipeline: AppPipeline) {
|
||
try {
|
||
const res = await deletePipeline(pipeline.id!)
|
||
if (res?.data?.code === 200) {
|
||
message.success('流水线已删除')
|
||
loadPipelines()
|
||
} else {
|
||
message.error(res?.data?.message || '删除失败')
|
||
}
|
||
} catch (e: any) {
|
||
message.error(e?.message || '删除失败')
|
||
}
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
if (!form.name.trim()) {
|
||
message.error('请填写流水线名称')
|
||
return
|
||
}
|
||
|
||
if (!selectedAppId.value) {
|
||
message.error('请先选择应用')
|
||
return
|
||
}
|
||
|
||
submitting.value = true
|
||
try {
|
||
const data: Partial<AppPipeline> = {
|
||
appId: selectedAppId.value,
|
||
name: form.name,
|
||
description: form.description,
|
||
ciType: form.ciType,
|
||
repoFullName: form.repoFullName,
|
||
workflowFile: form.workflowFile,
|
||
env: form.env,
|
||
defaultBranch: form.defaultBranch,
|
||
stages: form.selectedStages.join(','),
|
||
timeout: form.timeout,
|
||
autoDeploy: form.autoDeploy,
|
||
}
|
||
|
||
let res
|
||
if (editingPipeline.value) {
|
||
data.id = editingPipeline.value.id
|
||
res = await updatePipeline(data)
|
||
} else {
|
||
res = await createPipeline(data)
|
||
}
|
||
|
||
if (res?.data?.code === 200) {
|
||
message.success(editingPipeline.value ? '流水线已更新' : '流水线已创建')
|
||
showPipelineModal.value = false
|
||
resetForm()
|
||
loadPipelines()
|
||
} else {
|
||
message.error(res?.data?.message || '操作失败')
|
||
}
|
||
} catch (e: any) {
|
||
message.error(e?.message || '操作失败')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function resetForm() {
|
||
form.name = ''
|
||
form.description = ''
|
||
form.ciType = 'gitea'
|
||
form.repoFullName = ''
|
||
form.workflowFile = ''
|
||
form.env = 'production'
|
||
form.defaultBranch = 'main'
|
||
form.selectedStages = ['build', 'test', 'deploy']
|
||
form.timeout = 3600
|
||
form.autoDeploy = false
|
||
editingPipeline.value = null
|
||
}
|
||
|
||
// ========== 辅助函数 ==========
|
||
|
||
function ciTypeText(type?: string) {
|
||
const map: Record<string, string> = {
|
||
gitea: 'Gitea CI',
|
||
jenkins: 'Jenkins',
|
||
github: 'GitHub Actions',
|
||
}
|
||
return map[type || ''] || type || 'CI'
|
||
}
|
||
|
||
function stagesText(stages?: string) {
|
||
if (!stages) return '未知'
|
||
const map: Record<string, string> = {
|
||
build: '构建',
|
||
test: '测试',
|
||
deploy: '部署',
|
||
}
|
||
return stages.split(',').map(s => map[s] || s).join(' → ')
|
||
}
|
||
|
||
function statusText(status?: string) {
|
||
const map: Record<string, string> = {
|
||
pending: '排队中',
|
||
running: '构建中',
|
||
success: '成功',
|
||
failed: '失败',
|
||
cancelled: '已取消',
|
||
}
|
||
return map[status || ''] || status || '未知'
|
||
}
|
||
|
||
function formatTime(time?: string) {
|
||
if (!time) return ''
|
||
return new Date(time).toLocaleString('zh-CN')
|
||
}
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
loadApps()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dev-page {
|
||
min-height: 100%;
|
||
padding: 20px 24px 28px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin: 0;
|
||
}
|
||
|
||
.page-desc {
|
||
font-size: 13px;
|
||
color: #9ca3af;
|
||
margin: 4px 0 0;
|
||
}
|
||
|
||
/* 面板 */
|
||
.panel {
|
||
background: #fff;
|
||
border: 1px solid #f0f0f0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.panel-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: rgba(0,0,0,0.85);
|
||
}
|
||
|
||
/* 流水线列表 */
|
||
.pipeline-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.pipeline-item {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.pipeline-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.pipeline-item:hover {
|
||
background: #fafafa;
|
||
}
|
||
|
||
.pipeline-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.pipeline-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pipeline-name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: rgba(0,0,0,0.85);
|
||
}
|
||
|
||
.pipeline-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.pipeline-body {
|
||
padding: 14px 18px;
|
||
}
|
||
|
||
.pipeline-desc {
|
||
font-size: 13px;
|
||
color: rgba(0,0,0,0.65);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.pipeline-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
font-size: 12px;
|
||
color: rgba(0,0,0,0.45);
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.pipeline-stats {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px dashed #f0f0f0;
|
||
}
|
||
|
||
.stat-item {
|
||
font-size: 12px;
|
||
color: rgba(0,0,0,0.45);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.stat-item.success { color: #52c41a; }
|
||
.stat-item.failed { color: #ff4d4f; }
|
||
|
||
.pipeline-last-build {
|
||
padding: 8px 18px;
|
||
background: #f9f9f9;
|
||
font-size: 12px;
|
||
color: rgba(0,0,0,0.45);
|
||
}
|
||
|
||
.pipeline-last-build span {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pipeline-last-build.success span { color: #52c41a; }
|
||
.pipeline-last-build.failed span { color: #ff4d4f; }
|
||
.pipeline-last-build.running span { color: #1890ff; }
|
||
.pipeline-last-build.pending span { color: #faad14; }
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
padding: 60px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: rgba(0,0,0,0.85);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 14px;
|
||
color: rgba(0,0,0,0.45);
|
||
}
|
||
|
||
.py-8 { padding: 40px 0; }
|
||
.mb-4 { margin-bottom: 16px; }
|
||
|
||
.form-hint {
|
||
font-size: 12px;
|
||
color: rgba(0,0,0,0.38);
|
||
margin-top: 4px;
|
||
}
|
||
</style>
|