更新 CompilerController 接口

src/views/devops/build/Compiler.vue

@@ -22,34 +22,21 @@
           label="编译名字"
         />
         <el-table-column
-          prop="homePath"
-          label="编译器主目录"
-        />
-        <el-table-column
-          prop="compilerImage"
-          label="编译器镜像"
-        />
-        <el-table-column
-          prop="compileCmd"
-          label="编译命令"
-        />
-        <el-table-column
-          prop="versionCmd"
-          label="编译器版本命令"
+          prop="compilerBinds"
+          label="dockerfile 变量"
         >
           <template slot-scope="scope">
-            <span style="margin: 5px">{{ scope.row.versionCmd }}</span>
             <el-button
-              style="margin: 5px"
               size="mini"
               type="success"
-              @click="handleGetVersion(scope.$index, scope.row)"
-            >查看</el-button>
+              icon="el-icon-edit"
+              @click="handleShowImage(scope.$index, scope.row)"
+            >编辑</el-button>
           </template>
         </el-table-column>
         <el-table-column
           prop="compilerBinds"
-          label="镜像映射"
+          label="容器目录映射"
         >
           <template slot-scope="scope">
             <el-button
@@ -62,7 +49,7 @@
         </el-table-column>
         <el-table-column
           prop="compilerBinds"
-          label="环境变量"
+          label="容器环境变量"
         >
           <template slot-scope="scope">
             <el-button
@@ -76,9 +63,14 @@
         <el-table-column
           fixed="right"
           label="操作"
-          width="120"
+          width="240"
         >
           <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="info"
+              @click="handleDetail(scope.row)"
+            >详情</el-button>
             <el-button
               size="mini"
               type="danger"
@@ -108,36 +100,62 @@
       center
     >
       <template>
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="编译类型">
-            <el-select v-model="form.type" placeholder="选择编译类型">
-              <el-option
-                v-for="(item, index) in compileTypes"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="编译名字">
-            <el-input v-model="form.name" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-          <el-form-item label="编译主目录" style="width: 70%; padding-right: 2px">
-            <el-input v-model="form.homePath" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-          <el-form-item label="编译命令">
-            <el-input v-model="form.compileCmd" type="textarea" autosize style="padding-right: 1px;" />
-          </el-form-item>
-          <el-form-item label="编译器版本命令" style="width: 70%; padding-right: 2px">
-            <el-input v-model="form.versionCmd" type="textarea" autosize style="padding-right: 1px;" />
-          </el-form-item>
-          <el-form-item label="编译镜像">
-            <el-input v-model="form.compilerImage" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onAddCompiler">确定</el-button>
-          </el-form-item>
-        </el-form>
+        <div class="compiler-config-steps">
+          <el-steps :active="active" finish-status="success" simple style="margin-bottom: 30px">
+            <el-step title="配置基础环境" icon="el-icon-monitor" />
+            <el-step title="编写编译脚本" icon="el-icon-edit" />
+          </el-steps>
+
+          <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+            <div v-show="active === 0">
+              <el-form-item label="编译类型" prop="type">
+                <el-select v-model="form.type" placeholder="请选择编译类型" style="width: 100%">
+                  <el-option
+                    v-for="(item, index) in compileTypes"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="配置名称" prop="name">
+                <el-input v-model="form.name" placeholder="例如：Dotnet8-Standard-Build" />
+              </el-form-item>
+            </div>
+
+            <div v-show="active === 1">
+              <el-form-item v-if="form.type === 'dockerRun'" label="编译镜像" prop="compilerImage">
+                <el-input v-model="form.compilerImage" placeholder="e.g. mcr.microsoft.com/dotnet/sdk:8.0" />
+                <div class="form-tip">该镜像将作为构建时的 Runtime 容器</div>
+              </el-form-item>
+              <el-form-item v-if="form.type === 'shell'" label="编译主目录" prop="homePath">
+                <el-input v-model="form.homePath" placeholder="例如：/src 或 /app" />
+              </el-form-item>
+              <el-form-item v-if="form.type !== 'dockerBuild'" label="编译器版本命令" prop="versionCmd">
+                <el-input
+                  v-model="form.versionCmd"
+                  type="textarea"
+                  :autosize="{ minRows: 2 }"
+                  placeholder="例如：dotnet --version"
+                />
+              </el-form-item>
+              <el-form-item v-if="form.type !== 'dockerBuild'" label="编译命令" prop="compileCmd">
+                <el-input
+                  v-model="form.compileCmd"
+                  type="textarea"
+                  :autosize="{ minRows: 4 }"
+                  placeholder="例如：dotnet publish -c Release -o ./publish"
+                />
+              </el-form-item>
+            </div>
+
+            <el-form-item style="margin-top: 40px">
+              <el-button v-if="active > 0" @click="active--">上一步</el-button>
+              <el-button v-if="active < 1" type="primary" @click="nextStep">下一步</el-button>
+              <el-button v-if="active === 1" type="success" @click="onAddCompiler">提交保存</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
       </template>
     </el-dialog>
     <!-- 查看 docker 目录映射对话框 -->
@@ -235,9 +253,18 @@ export default {
       totalSize: 0,
       dataList: [],
       // **********************************************************************
+      active: 0,
+      rules: {
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+        name: [{ required: true, message: '请输入配置名字', trigger: 'blur' }],
+        compilerImage: [{ required: true, message: '必须指定编译镜像', trigger: 'blur' }],
+        homePath: [{ required: true, message: '主目录不能为空', trigger: 'blur' }],
+        compileCmd: [{ required: true, message: '编译命令是核心，必须填写', trigger: 'blur' }]
+      },
+      // **********************************************************************
       showAddDialog: false,
       form: {
-        type: 'none',
+        type: '',
         name: '',
         homePath: '',
         compileCmd: '',
@@ -297,7 +324,7 @@ export default {
         this.$message.error(error.message)
       })
     },
-    onAddCompiler() {
+    onAddCompiler1() {
       const formData = new FormData()
       formData.append('type', this.form.type)
       formData.append('name', this.form.name)
@@ -314,6 +341,39 @@ export default {
         this.showAddDialog = false
       })
     },
+    // 异步校验并跳转
+    async nextStep() {
+      const stepFields = ['type', 'name'] // 第一步需要校验的字段
+
+      try {
+        // 关键：将所有字段的校验转为 Promise 数组
+        const checkActions = stepFields.map(field => {
+          return new Promise((resolve, reject) => {
+            this.$refs.form.validateField(field, error => {
+              if (error) reject(error)
+              else resolve()
+            })
+          })
+        })
+
+        await Promise.all(checkActions)
+        this.active++ // 只有全部校验成功才加 1
+      } catch (e) {
+        this.$message.warning('请检查基础配置是否填写完整')
+      }
+    },
+    onAddCompiler() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // 这里发起 API 请求
+          console.log('Final Data:', this.form)
+          this.$message.success('编译器配置添加成功！')
+          // 逻辑处理，如关闭弹窗或跳转列表
+        } else {
+          return false
+        }
+      })
+    },
     handleGetVersion(index, row) {
       getCompilerVersion(row.id).then(resp => {
         if (resp.code === 0) {
@@ -379,6 +439,9 @@ export default {
         this.dockerBindForm.containerPath = ''
       })
     },
+    handleDetail(row) {
+      this.$message.info('get ' + row.name + ' detail')
+    },
     handleEdit(index, row) {
       this.$confirm('确定要删除 ' + row.name + '?', '提示', {
         confirmButtonText: '确定',
@@ -404,5 +467,34 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.compiler-config-steps {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 2;
+}
+
+/* 使用 ::v-deep 穿透 scoped 限制
+  这是 Vue 2 中兼容性最好的写法，支持 Less/Sass
+*/
+::v-deep .el-textarea__inner {
+  font-family: 'Courier New', Courier, monospace;
+  background-color: #f8f9fa;
+  color: #2c3e50;
+  border: 1px solid #dcdfe6;
+}
+
+/* 鼠标悬停和聚焦时的效果优化 */
+::v-deep .el-textarea__inner:focus {
+  background-color: #fff;
+  border-color: #409EFF;
+}
 </style>