feat(devops): 新增流水线节点组件并优化相关功能

- 新增 CutePipelineNode 组件用于展示流水线节点状态 - 新增 CutePreviewDrawer 组件用于展示详细信息 - 新增 CuteFileDragUploadDemo 和 CutePipelineNodeDemo 组件用于演示功能 - 在 package.json 中添加 dayjs 依赖 - 更新 README 文档，添加新组件的说明和截图
2025-07-18 20:23:00 +08:00
parent 6e6a1e8233
commit da830f3039
14 changed files with 1064 additions and 15 deletions
@@ -72,8 +72,13 @@ https://github.com/odboy-tianjun/cutejava

 - CuteDeptTree 部门树
 - CuteUserSelect 用户多选框
+  ![CuteDeptTree](./doc/images/CuteBusiness.png)
 - CuteFileUpload 上传文件到OSS, 必须结合Minio使用（上传完成后必须销毁组件）
+  ![CuteFileUpload](./doc/images/CuteFileUpload.png)
 - CuteFileDragUpload 支持拖拽上传文件到OSS, 必须结合Minio使用（上传完成后必须销毁组件）
+  ![CuteFileDragUpload](./doc/images/CuteFileDragUpload.png)
+- CutePipelineNode 流水线节点组件
+  ![CutePipelineNode](./doc/images/CutePipelineNode.png)

 #### 系统模块

@@ -6,19 +6,6 @@

 模板文档： [https://panjiachen.github.io/vue-element-admin-site/zh/guide/](https://panjiachen.github.io/vue-element-admin-site/zh/guide/)

-#### 集成、自定义组件
- echart 图表
- wangEditor 富文本
- MavonEditor Markdown编辑器
- CodeMirror Yaml编辑器
- CodeMirror Java代码编辑器
- 自定义业务组件(用户下拉选择框、部门下拉选择框)
- 滚动数字
- 表格拖拽
- 面板分割
- WebSocket
- 快速复制
-
 ## 快速开始

 ### 环境要求
@@ -42,6 +42,7 @@
    "clipboard": "2.0.4",
    "codemirror": "^5.49.2",
    "core-js": "^2.6.12",
+    "dayjs": "^1.11.13",
    "echarts": "^4.2.1",
    "echarts-wordcloud": "^1.1.3",
    "element-ui": "^2.15.8",
@@ -2,6 +2,8 @@
 * Created by PanJiaChen on 16/11/18.
 */

+import dayjs from 'dayjs'
+
 /**
 * Parse the time to string
 * @param {(Object|string|number)} time
@@ -373,3 +375,11 @@ export const type = (value) => Object.prototype.toString.call(value).slice(8, -1

 // 深拷贝对象
 export const deepClone = (obj) => JSON.parse(JSON.stringify(obj))
+
+// 格式化日期时间字符串
+export const formatDateTimeStr = (date) => {
+  if (date) {
+    return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+  }
+  return ''
+}
@@ -0,0 +1,297 @@
+<template>
+  <div
+    class="box-card"
+    :style="{
+      borderTopWidth: '5px',
+      borderTopStyle: 'solid',
+      borderTopColor: statusColorConst[templateData.status].color
+    }"
+  >
+    <div>
+      <div style="float: left;">
+        <i
+          v-if="templateData.currentNodeStatus === 'pending'"
+          class="el-icon-time"
+          :style="{
+            fontSize: '22px',
+            color: statusColorConst.pending.color
+          }"
+        />
+        <i
+          v-else-if="templateData.currentNodeStatus === 'running'"
+          class="el-icon-loading"
+          :style="{
+            fontSize: '22px',
+            color: statusColorConst.running.color
+          }"
+        />
+        <i
+          v-else-if="templateData.currentNodeStatus === 'success'"
+          class="el-icon-success"
+          :style="{
+            fontSize: '22px',
+            color: statusColorConst.success.color
+          }"
+        />
+        <i
+          v-else-if="templateData.currentNodeStatus === 'fail'"
+          class="el-icon-error"
+          :style="{
+            fontSize: '22px',
+            color: statusColorConst.fail.color
+          }"
+        />
+        <i
+          v-else
+          class="el-icon-error"
+          :style="{
+            fontSize: '22px',
+            color: statusColorConst.fail.color
+          }"
+        />
+      </div>
+      <div class="box-name">{{ templateData.name }}</div>
+      <div style="clear: both" />
+    </div>
+    <div class="box-current-node">
+      <a @click="onCurrentNodeClick">
+        {{ templateData.currentNode }}
+      </a>
+    </div>
+    <el-row>
+      <el-col :span="12" style="text-align: left">
+        <!-- 流水线状态为fail，且节点支持重试 -->
+        <div v-if="templateData.status === 'fail' && templateData.retry === true">
+          <div class="box-buttons">
+            <el-button
+              type="text"
+              size="medium"
+              :style="{
+                padding: 0,
+                margin: '0 10px 0 10px',
+                color: statusColorConst.success.color
+              }"
+              @click="onNodeRetryClick"
+            >
+              重试
+            </el-button>
+          </div>
+        </div>
+        <!-- 流水线状态为running，且有操作按钮 -->
+        <div v-else-if="templateData.status === 'running' && templateData.buttons && templateData.buttons.length > 0">
+          <div class="box-buttons">
+            <el-button
+              v-for="buttonItem in templateData.buttons"
+              :key="buttonItem.service"
+              size="medium"
+              type="text"
+              :style="{
+                padding: 0,
+                margin: '0 10px 0 10px',
+                color: ['apply','agree','ok','success'].includes(buttonItem.code) ? 'green' : 'red'
+              }"
+              @click="onNodeOperationClick(buttonItem)"
+            >
+              {{ buttonItem.title }}
+            </el-button>
+          </div>
+        </div>
+        <!-- 流水线状态为success，且有需要满足条件的操作按钮 -->
+        <div v-else-if="templateData.status === 'success' && templateData.buttons && templateData.buttons.length > 0">
+          <div class="box-buttons">
+            <el-button
+              v-for="buttonItem in templateData.buttons"
+              :key="buttonItem.service"
+              size="medium"
+              type="text"
+              :style="{
+                padding: 0,
+                margin: '0 10px 0 10px',
+                color: ['apply','agree','ok','success'].includes(buttonItem.code) ? 'green' : 'red',
+                display: ['success', 'fail'].includes(buttonItem.code) && templateData.status === buttonItem.code ? '' : 'none'
+              }"
+              @click="onNodeOperationClick(buttonItem)"
+            >
+              {{ buttonItem.title }}
+            </el-button>
+          </div>
+        </div>
+        <!-- 占位用，为了前端样式美观些 -->
+        <div v-else>
+          <div style="width: 110px;height: 30px" />
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="box-execute-time">
+          {{ executeTimeStr }}
+        </div>
+      </el-col>
+      <div style="clear: both" />
+    </el-row>
+    <cute-preview-drawer ref="detailDrawer" :title="templateData.name">
+      <div style="padding: 20px">
+        这里是明细
+      </div>
+    </cute-preview-drawer>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import CutePreviewDrawer from '@/views/components/dev/CutePreviewDrawer'
+
+export default {
+  name: 'CutePipelineNode',
+  components: { CutePreviewDrawer },
+  props: {
+    templateData: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      statusColorConst: {
+        pending: { label: '未开始', color: '#C0C4CC' },
+        running: { label: '运行中', color: '#67C23A' },
+        success: { label: '执行成功', color: '#67C23A' },
+        fail: { label: '执行失败', color: '#F56C6C' }
+      },
+      executeTimeStr: ''
+    }
+  },
+  watch: {
+    templateData: {
+      handler(newVal, oldVal) {
+        this.executeTimeStr = this.renderDateTimeStr(newVal)
+      },
+      deep: true
+    }
+  },
+  // computed: {
+  //   formatExecuteTimeStr() {
+  //     return this.renderDateTimeStr(this.templateData)
+  //   }
+  // },
+  mounted() {
+    this.executeTimeStr = this.renderDateTimeStr(this.templateData)
+  },
+  methods: {
+    renderDateTimeStr(newVal) {
+      let executeTimeStr = ''
+      switch (newVal.status) {
+        case 'pending':
+          executeTimeStr = ''
+          break
+        case 'running':
+        case 'success':
+        case 'fail':
+          executeTimeStr = this.formatTimeDifference(newVal.startTime, newVal.updateTime)
+          break
+        default:
+          executeTimeStr = ''
+          break
+      }
+      return executeTimeStr
+    },
+    formatTimeDifference(createTimeStr, updateTimeStr) {
+      const startTime = dayjs(createTimeStr)
+      const endTime = dayjs(updateTimeStr)
+      // 计算两个时间点之间的差异（毫秒）
+      const diffInMilliseconds = endTime.diff(startTime)
+      // 将毫秒转换为秒
+      let totalSeconds = Math.floor(diffInMilliseconds / 1000)
+      const days = Math.floor(totalSeconds / (3600 * 24))
+      totalSeconds %= 3600 * 24
+      const hours = Math.floor(totalSeconds / 3600)
+      totalSeconds %= 3600
+      const minutes = Math.floor(totalSeconds / 60)
+      const seconds = totalSeconds % 60
+      // 格式化为字符串
+      if (days > 0) {
+        return `${days} 天 ${hours} 时 ${minutes} 分 ${seconds} 秒`
+      }
+      if (hours > 0) {
+        return `${hours} 时 ${minutes} 分 ${seconds} 秒`
+      }
+      if (minutes > 0) {
+        return `${minutes} 分 ${seconds} 秒`
+      }
+      if (seconds >= 0) {
+        return `${seconds} 秒`
+      }
+    },
+    onCurrentNodeClick() {
+      const templateData = this.templateData || { click: false }
+      if (!templateData.click) {
+        console.warn('当前流水线节点不支持查看明细')
+        return
+      }
+      console.error('templateData', this.templateData)
+      this.$refs.detailDrawer.show()
+    },
+    onNodeRetryClick() {
+      const templateData = this.templateData || { retry: false }
+      if (!templateData.retry) {
+        console.warn('当前流水线节点不支持重试')
+        return
+      }
+      console.error('templateData', this.templateData)
+    },
+    onNodeOperationClick(buttonInfo) {
+      console.error('buttonInfo', buttonInfo)
+    }
+  }
+}
+</script>
+<style scoped>
+.box-card {
+  width: 240px; /* 卡片宽度 */
+  max-width: 240px; /* 卡片宽度 */
+  padding: 10px;
+  background-color: #fff; /* 背景颜色 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  border-radius: 8px; /* 圆角效果 */
+  overflow: hidden; /* 防止子元素溢出 */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
+  display: inline-block;
+  margin-right: 30px;
+}
+
+.box-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.box-name {
+  float: left;
+  margin-left: 5px;
+  font-size: 16px;
+  line-height: 22px
+}
+
+.box-current-node {
+  padding: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  font-size: 18px;
+  text-align: center;
+}
+
+.box-buttons {
+  padding: 5px;
+  overflow: hidden;
+  text-align: center;
+  height: 30px;
+}
+
+.box-execute-time {
+  text-align: right;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+}
+</style>
@@ -0,0 +1,64 @@
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="visible"
+    :size="width"
+    :before-close="beforeClose"
+    :append-to-body="true"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :show-close="false"
+  >
+    <!-- 这里是插槽，用于渲染传入的组件 -->
+    <slot />
+  </el-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'CutePreviewDrawer',
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: '默认标题'
+    },
+    width: {
+      type: String,
+      required: false,
+      default: '40%'
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hidden() {
+      this.visible = false
+    },
+    beforeClose() {
+      this.hidden()
+    }
+  }
+}
+</script>
+<style scoped>
+.container-form {
+  overflow-y: scroll; /* 启用滚动 */
+  scrollbar-width: none; /* Firefox */
+  height: 88%;
+  padding-right: 20px;
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+.container-form::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera*/
+}
+</style>
+
@@ -0,0 +1,52 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="活动名称" prop="name">
+        <el-input v-model="form.name" style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region">
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 100%">
+          <el-option label="区域一" value="shanghai" />
+          <el-option label="区域二" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文件上传" prop="fileUrl">
+        <cute-file-drag-upload v-model="form" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('form')">提 交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import CuteFileDragUpload from '@/views/components/business/CuteFileDragUpload'
+
+export default {
+  name: 'CuteFileDragUploadDemo',
+  components: { CuteFileDragUpload },
+  data() {
+    return {
+      form: {
+        name: '',
+        region: '',
+        fileUrl: ''
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      const that = this
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.error('submitForm:form', that.form)
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
@@ -0,0 +1,633 @@
+<template>
+  <div>
+    <el-divider>演示：运行中</el-divider>
+    <div class="box-pipeline">
+      <div v-if="dataList1 && dataList1.length > 0" class="box-pipeline-content">
+        <cute-pipeline-node
+          v-for="(template, index) in dataList1"
+          :key="template.code"
+          :template-data="dataList1[index]"
+        />
+      </div>
+      <div v-else class="box-pipeline-content">
+        <cute-pipeline-node
+          v-for="(template, index) in templateList"
+          :key="template.code"
+          :template-data="dataList1[index]"
+        />
+      </div>
+    </div>
+    <el-divider>演示：成功</el-divider>
+    <div class="box-pipeline">
+      <div v-if="dataList2 && dataList2.length > 0" class="box-pipeline-content">
+        <cute-pipeline-node
+          v-for="(template, index) in dataList2"
+          :key="template.code"
+          :template-data="dataList2[index]"
+        />
+      </div>
+      <div v-else class="box-pipeline-content">
+        <cute-pipeline-node
+          v-for="(template, index) in templateList"
+          :key="template.code"
+          :template-data="dataList2[index]"
+        />
+      </div>
+    </div>
+    <el-divider>演示：失败或重试</el-divider>
+    <div class="box-pipeline">
+      <div v-if="dataList3 && dataList3.length > 0" class="box-pipeline-content">
+        <cute-pipeline-node
+          v-for="(template, index) in dataList3"
+          :key="template.code"
+          :template-data="dataList3[index]"
+        />
+      </div>
+      <div v-else class="box-pipeline-content">
+        <cute-pipeline-node
+          v-for="(template, index) in templateList"
+          :key="template.code"
+          :template-data="dataList3[index]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import CutePipelineNode from '@/views/components/dev/CutePipelineNode'
+import { formatDateTimeStr } from '@/utils'
+
+export default {
+  name: 'CutePipelineNodeDemo',
+  components: { CutePipelineNode },
+  data() {
+    return {
+      templateList: [
+        {
+          code: 'node_init',
+          type: 'service',
+          name: '初始化'
+        },
+        {
+          code: 'node_merge_branch',
+          type: 'service',
+          name: '合并代码',
+          click: true,
+          retry: true
+        },
+        {
+          code: 'node_build_java',
+          type: 'service',
+          name: '构建',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-backend'
+          }
+        },
+        {
+          code: 'node_image_scan',
+          type: 'service',
+          name: '镜像扫描',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-image-scan'
+          }
+        },
+        {
+          code: 'node_approve_deploy',
+          type: 'service',
+          name: '部署审批',
+          click: false,
+          retry: true,
+          buttons: [{
+            type: 'execute',
+            title: '同意',
+            code: 'agree',
+            parameters: {}
+          },
+          {
+            type: 'execute',
+            title: '拒绝',
+            code: 'refuse',
+            parameters: {}
+          }
+          ]
+        },
+        {
+          code: 'node_deploy_java',
+          type: 'service',
+          name: '部署',
+          click: true,
+          retry: false,
+          buttons: [{
+            type: 'link',
+            title: '查看部署详情',
+            code: 'success',
+            parameters: {
+              'isBlank': true
+            }
+          }]
+        },
+        {
+          code: 'node_merge_confirm',
+          type: 'service',
+          name: '合并确认',
+          click: false,
+          retry: false,
+          buttons: [{
+            type: 'execute',
+            title: '通过',
+            code: 'agree',
+            parameters: {}
+          }]
+        },
+        {
+          code: 'node_merge_master',
+          type: 'service',
+          name: '合并回Master',
+          click: false,
+          retry: true
+        }],
+      // 运行中
+      dataList1: [
+        {
+          code: 'node_init',
+          type: 'service',
+          name: '初始化',
+          createTime: '2025-07-17 21:12:01',
+          updateTime: '2025-07-17 21:13:01',
+          startTime: '2025-07-17 21:13:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_merge_branch',
+          type: 'service',
+          name: '合并代码',
+          click: true,
+          retry: true,
+          createTime: '2025-07-17 21:13:01',
+          updateTime: '2025-07-17 21:18:01',
+          startTime: '2025-07-17 21:13:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_build_java',
+          type: 'service',
+          name: '构建',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-backend'
+          },
+          createTime: '2025-07-17 21:18:01',
+          updateTime: '2025-07-17 21:28:01',
+          startTime: '2025-07-17 21:18:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_image_scan',
+          type: 'service',
+          name: '镜像扫描',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-image-scan'
+          },
+          createTime: '2025-07-17 21:28:01',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: '2025-07-17 21:28:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_approve_deploy',
+          type: 'service',
+          name: '部署审批',
+          click: false,
+          retry: true,
+          buttons: [
+            {
+              type: 'execute',
+              title: '同意',
+              code: 'agree',
+              parameters: {}
+            },
+            {
+              type: 'execute',
+              title: '拒绝',
+              code: 'refuse',
+              parameters: {}
+            }
+          ],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: '2025-07-17 21:28:21',
+          currentNode: '等待人工审批',
+          currentNodeStatus: 'running',
+          status: 'running'
+        },
+        {
+          code: 'node_deploy_java',
+          type: 'service',
+          name: '部署',
+          click: true,
+          retry: false,
+          buttons: [{
+            type: 'link',
+            title: '查看部署详情',
+            code: 'success',
+            parameters: {
+              'isBlank': true
+            }
+          }],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        },
+        {
+          code: 'node_merge_confirm',
+          type: 'service',
+          name: '合并确认',
+          click: false,
+          retry: false,
+          buttons: [{
+            type: 'execute',
+            title: '通过',
+            code: 'agree',
+            parameters: {}
+          }],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        },
+        {
+          code: 'node_merge_master',
+          type: 'service',
+          name: '合并回Master',
+          click: false,
+          retry: true,
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        }
+      ],
+      // 成功
+      dataList2: [
+        {
+          code: 'node_init',
+          type: 'service',
+          name: '初始化',
+          createTime: '2025-07-17 21:12:01',
+          updateTime: '2025-07-17 21:13:01',
+          startTime: '2025-07-17 21:13:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_merge_branch',
+          type: 'service',
+          name: '合并代码',
+          click: true,
+          retry: true,
+          createTime: '2025-07-17 21:13:01',
+          updateTime: '2025-07-17 21:18:01',
+          startTime: '2025-07-17 21:13:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_build_java',
+          type: 'service',
+          name: '构建',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-backend'
+          },
+          createTime: '2025-07-17 21:18:01',
+          updateTime: '2025-07-17 21:28:01',
+          startTime: '2025-07-17 21:18:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_image_scan',
+          type: 'service',
+          name: '镜像扫描',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-image-scan'
+          },
+          createTime: '2025-07-17 21:28:01',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: '2025-07-17 21:28:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_approve_deploy',
+          type: 'service',
+          name: '部署审批',
+          click: false,
+          retry: true,
+          buttons: [
+            {
+              type: 'execute',
+              title: '同意',
+              code: 'agree',
+              parameters: {}
+            },
+            {
+              type: 'execute',
+              title: '拒绝',
+              code: 'refuse',
+              parameters: {}
+            }
+          ],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:30:21',
+          startTime: '2025-07-17 21:28:21',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_deploy_java',
+          type: 'service',
+          name: '部署',
+          click: true,
+          retry: false,
+          buttons: [{
+            type: 'link',
+            title: '查看部署详情',
+            code: 'success',
+            parameters: {
+              'isBlank': true
+            }
+          }],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:58:21',
+          startTime: '2025-07-17 21:30:21',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_merge_confirm',
+          type: 'service',
+          name: '合并确认',
+          click: false,
+          retry: false,
+          buttons: [{
+            type: 'execute',
+            title: '通过',
+            code: 'agree',
+            parameters: {}
+          }],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 22:10:21',
+          startTime: '2025-07-17 21:58:21',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_merge_master',
+          type: 'service',
+          name: '合并回Master',
+          click: false,
+          retry: true,
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 22:10:58',
+          startTime: '2025-07-17 22:10:21',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        }
+      ],
+      // 失败或重试
+      dataList3: [
+        {
+          code: 'node_init',
+          type: 'service',
+          name: '初始化',
+          createTime: '2025-07-17 21:12:01',
+          updateTime: '2025-07-17 21:13:01',
+          startTime: '2025-07-17 21:13:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_merge_branch',
+          type: 'service',
+          name: '合并代码',
+          click: true,
+          retry: true,
+          createTime: '2025-07-17 21:13:01',
+          updateTime: '2025-07-17 21:18:01',
+          startTime: '2025-07-17 21:13:01',
+          currentNode: '执行成功',
+          currentNodeStatus: 'success',
+          status: 'success'
+        },
+        {
+          code: 'node_build_java',
+          type: 'service',
+          name: '构建',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-backend'
+          },
+          createTime: '2025-07-17 21:18:01',
+          updateTime: '2025-07-17 21:28:01',
+          startTime: '2025-07-17 21:18:01',
+          currentNode: '执行失败',
+          currentNodeStatus: 'fail',
+          status: 'fail'
+        },
+        {
+          code: 'node_image_scan',
+          type: 'service',
+          name: '镜像扫描',
+          click: true,
+          retry: true,
+          detailType: 'gitlab',
+          parameters: {
+            pipeline: 'pipeline-image-scan'
+          },
+          createTime: '2025-07-17 21:28:01',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        },
+        {
+          code: 'node_approve_deploy',
+          type: 'service',
+          name: '部署审批',
+          click: false,
+          retry: true,
+          buttons: [
+            {
+              type: 'execute',
+              title: '同意',
+              code: 'agree',
+              parameters: {}
+            },
+            {
+              type: 'execute',
+              title: '拒绝',
+              code: 'refuse',
+              parameters: {}
+            }
+          ],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        },
+        {
+          code: 'node_deploy_java',
+          type: 'service',
+          name: '部署',
+          click: true,
+          retry: false,
+          buttons: [{
+            type: 'link',
+            title: '查看部署详情',
+            code: 'success',
+            parameters: {
+              'isBlank': true
+            }
+          }],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        },
+        {
+          code: 'node_merge_confirm',
+          type: 'service',
+          name: '合并确认',
+          click: false,
+          retry: false,
+          buttons: [{
+            type: 'execute',
+            title: '通过',
+            code: 'agree',
+            parameters: {}
+          }],
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        },
+        {
+          code: 'node_merge_master',
+          type: 'service',
+          name: '合并回Master',
+          click: false,
+          retry: true,
+          createTime: '2025-07-17 21:28:21',
+          updateTime: '2025-07-17 21:28:21',
+          startTime: null,
+          currentNode: '待执行',
+          currentNodeStatus: 'pending',
+          status: 'pending'
+        }
+      ]
+    }
+  },
+  mounted() {
+    setInterval(this.refreshData, 1000)
+  },
+  methods: {
+    refreshData() {
+      // 运行中
+      for (const datum of this.dataList1) {
+        if (datum.status === 'running') {
+          datum.updateTime = formatDateTimeStr(new Date())
+        }
+      }
+      this.dataList1 = [...this.dataList1]
+      // 成功
+      for (const datum of this.dataList2) {
+        if (datum.status === 'running') {
+          datum.updateTime = formatDateTimeStr(new Date())
+        }
+      }
+      this.dataList2 = [...this.dataList2]
+      // 失败或重试
+      for (const datum of this.dataList3) {
+        if (datum.status === 'running') {
+          datum.updateTime = formatDateTimeStr(new Date())
+        }
+      }
+      this.dataList3 = [...this.dataList3]
+    }
+  }
+}
+</script>
+<style scoped>
+.box-pipeline {
+  width: 1500px; /* 固定宽度 */
+  overflow-x: auto; /* 允许水平滚动 */
+  white-space: nowrap; /* 防止内容换行，使所有内容在一行显示 */
+  padding: 30px 20px 30px 20px;
+}
+.box-pipeline::-webkit-scrollbar {
+  height: 5px; /* 设置水平滚动条高度 */
+}
+.box-pipeline::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条底色 */
+}
+.box-pipeline::-webkit-scrollbar-thumb {
+  background: #DCDFE6; /* 滚动条颜色 */
+}
+.box-pipeline-content {
+  display: inline-block; /* 使内容水平排列 */
+  white-space: nowrap; /* 防止内容换行 */
+}
+</style>
+
@@ -9,7 +9,7 @@ import lombok.Getter;
@Getter
@AllArgsConstructor
 public enum PipelineStatusEnum {
-    WAIT("wait", "#C0C4CC", "未开始"),
+    PENDING("pending", "#C0C4CC", "未开始"),
    RUNNING("running", "#409EFF", "运行中"),
    SUCCESS("success", "#67C23A", "执行成功"),
    FAIL("fail", "#F56C6C", "执行失败");
@@ -57,7 +57,7 @@ public class PipelineReleaseTests {
        pipelineInstanceTb.setType(pipelineTemplateTb.getType());
        pipelineInstanceTb.setAppName(appName);
        pipelineInstanceTb.setEnv(envCode);
-        pipelineInstanceTb.setStatus(PipelineStatusEnum.WAIT.getCode());
+        pipelineInstanceTb.setStatus(PipelineStatusEnum.PENDING.getCode());
        pipelineInstanceTb.setCurrentNode(null);
        pipelineInstanceTb.setCurrentNodeStatus(null);
        pipelineInstanceTb.setContext(JSON.toJSONString(context));