feat(devops): 重构流水线任务构建器界面布局并添加参数配置功能

- 将界面改为左右两列布局，左侧显示节点演示和选项预览，右侧显示参数设置
- 添加 CutePage 组件包装各个功能区域
- 重构按钮组配置，区分链接和执行服务两种类型的执行动作配置
- 添加节点参数表格配置功能
- 更新请求URL模板，使用管道实例节点ID作为参数
- 添加默认参数列表配置示例

cutejava-front/src/views/components/devops/pipeline/PipeTaskBuilder.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <el-row>
+    <el-col :span="12">
+      <CutePage>
         <el-divider content-position="left">节点演示</el-divider>
         <div style="padding-left: 15px">
           <pipe-task
@@ -51,6 +53,8 @@
             :duration-millis="1767237071"
           />
         </div>
+      </CutePage>
+      <CutePage>
         <el-divider content-position="left">节点选项(预览)</el-divider>
         <el-form ref="form" :model="parameters" label-width="160px">
           <el-form-item
@@ -68,6 +72,10 @@
             </el-select>
           </el-form-item>
         </el-form>
+      </CutePage>
+    </el-col>
+    <el-col :span="12">
+      <CutePage>
         <el-divider content-position="left">节点参数设置</el-divider>
         <el-form label-width="140px">
           <el-form-item label="节点名称">
@@ -116,23 +124,27 @@
                   </el-select>
                 </template>
               </el-table-column>
-          <el-table-column prop="blank" label="是否新开窗口" width="100">
+              <el-table-column label="执行动作">
                 <template v-slot="scope">
-              <el-switch v-model="scope.row.blank" :disabled="scope.row.type === 'execute'" />
+                  <el-table v-if="scope.row.type === 'link'" :data="buttonList">
+                    <el-table-column prop="blank" label="是否新开窗口" width="100">
+                      <template v-slot="innerScope">
+                        <el-switch v-model="innerScope.row.blank" />
                       </template>
                     </el-table-column>
                     <el-table-column prop="linkUrl" label="打开链接">
-            <template v-slot="scope">
+                      <template v-slot="innerScope">
-              <el-input v-model="scope.row.linkUrl" :disabled="scope.row.type === 'execute'" />
+                        <el-input v-model="innerScope.row.linkUrl" />
                       </template>
                     </el-table-column>
-          <el-table-column prop="method" label="请求类型" width="100">
+                  </el-table>
-            <template v-slot="scope">
+                  <el-table v-if="scope.row.type === 'execute'" :data="buttonList">
+                    <el-table-column prop="method" label="请求类型" width="120">
+                      <template v-slot="innerScope">
                         <el-select
-                v-model="scope.row.method"
+                          v-model="innerScope.row.method"
                           placeholder="请选择请求类型"
                           clearable
-                :disabled="scope.row.type === 'link'"
                         >
                           <el-option label="Get" value="get" />
                           <el-option label="Post" value="post" />
@@ -140,23 +152,46 @@
                       </template>
                     </el-table-column>
                     <el-table-column prop="requestUrl" label="请求地址">
-            <template v-slot="scope">
+                      <template v-slot="innerScope">
-              <el-input v-model="scope.row.requestUrl" :disabled="scope.row.type === 'link'" />
+                        <el-input v-model="innerScope.row.requestUrl" />
+                      </template>
+                    </el-table-column>
+                  </el-table>
                 </template>
               </el-table-column>
             </el-table>
           </el-form-item>
+          <el-form-item label="节点参数">
+            <el-table :data="parameterList">
+              <el-table-column prop="name" label="参数名称">
+                <template v-slot="scope">
+                  <el-input v-model="scope.row.name" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="code" label="参数编码">
+                <template v-slot="scope">
+                  <el-input v-model="scope.row.code" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="dataSource" label="参数可选项">
+                <template v-slot="scope" />
+              </el-table-column>
+            </el-table>
+          </el-form-item>
         </el-form>
-  </div>
+      </CutePage>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 
 import PipeTask from '@/views/components/devops/pipeline/PipeTask.vue'
+import CutePage from '@/views/components/dev/CutePage.vue'
 
 export default {
   name: 'PipeTaskBuilder',
-  components: { PipeTask },
+  components: { CutePage, PipeTask },
   data() {
     return {
       name: '环境准备',
@@ -168,7 +203,7 @@ export default {
         {
           condition: 'running',
           method: 'get',
-          requestUrl: 'api/devops/ci/doCheck?id=60012',
+          requestUrl: `api/devops/ci/doCheck?id=#pipelineInstanceNodeId`,
           text: '确认合并',
           type: 'execute'
         }
@@ -183,7 +218,18 @@ export default {
             { label: 'jdk21', value: 'jdk21' }
           ]
         }
+      },
+      parameterList: [
+        {
+          name: 'Jdk版本',
+          code: 'jdkVersion',
+          dataSource: [
+            { label: 'jdk8', value: 'jdk8' },
+            { label: 'jdk11', value: 'jdk11' },
+            { label: 'jdk21', value: 'jdk21' }
+          ]
         }
+      ]
     }
   },
   computed: {},