RepoAuth.vue 页面使用分步表单添加仓库认证配置

src/views/devops/build/Compiler.vue

@@ -388,15 +388,15 @@ export default {
       const baseRules = {
         type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
-      };
+      }
       // 根据选择的类型增加特定规则
       if (this.form.type === 'dockerRun') {
-        baseRules.compilerImage = [{ required: true, message: 'dockerRun 类型必须指定编译使用的镜像', trigger: 'blur' }];
+        baseRules.compilerImage = [{ required: true, message: 'dockerRun 类型必须指定编译使用的镜像', trigger: 'blur' }]
       }
       if (this.form.type === 'shell' || this.form.type === 'dockerRun') {
-        baseRules.compileCmd = [{ required: true, message: 'shell 和 dockerRun 类型必须填写编译命令', trigger: 'blur' }];
+        baseRules.compileCmd = [{ required: true, message: 'shell 和 dockerRun 类型必须填写编译命令', trigger: 'blur' }]
       }
-      return baseRules;
+      return baseRules
     }
   },
   created() {

src/views/devops/build/RepoAuth.vue

@@ -62,50 +62,75 @@
 
     <!-- 添加编译器对话框 -->
     <el-dialog
-      title="添加编译器"
+      title="添加仓库认证"
       append-to-body
       :visible.sync="showAddDialog"
       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 repoTypes"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="认证类型">
-            <el-select v-model="form.authType" placeholder="选择编译类型">
-              <el-option
-                v-for="(item, index) in authTypes"
-                :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.username" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-          <el-form-item label="密码">
-            <el-input v-model="form.password" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-<!--          <el-form-item label="私钥" style="width: 70%; padding-right: 2px">
-            <el-input v-model="form.rsaPrikey" type="textarea" autosize style="padding-right: 1px;" />
-          </el-form-item>-->
-          <el-form-item>
-            <el-button type="primary" @click="onAddRepoAuth">确定</el-button>
+      <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="dynamicRules" label-width="130px">
+          <div v-show="active === 0">
+            <el-form-item label="认证类型" prop="authType">
+              <el-select v-model="form.authType" placeholder="请选择认证类型" style="width: 100%">
+                <el-option
+                    v-for="(item, index) in authTypes"
+                    :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="例如 git-auth" />
+            </el-form-item>
+            <el-form-item label="仓库类型" prop="type">
+              <el-select v-model="form.type" placeholder="请选择仓库类型" style="width: 100%">
+                <el-option
+                    v-for="(item, index) in repoTypes"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </div>
+
+          <div v-show="active === 1">
+            <div v-if="form.authType === 'ssh'">
+              <el-form-item label="RSA 私钥" prop="rsaPrikey">
+                <el-input
+                    v-model="form.rsaPrikey"
+                    type="textarea"
+                    :autosize="{ minRows: 4 }"
+                    placeholder="请填写 RSA 私钥"
+                />
+              </el-form-item>
+            </div>
+            <div v-else-if="form.authType === 'http'">
+              <el-form-item label="用户名" prop="username">
+                <el-input v-model="form.username" placeholder="请填写用户名" />
+              </el-form-item>
+              <el-form-item label="密码" prop="password">
+                <el-input v-model="form.password" placeholder="请填写密码" />
+              </el-form-item>
+            </div>
+            <div v-else>
+              <el-input value="none 认证类型不需要填写任何认证资料" readonly />
+            </div>
+          </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="onAddRepoAuth">提交保存</el-button>
           </el-form-item>
         </el-form>
-      </template>
+      </div>
     </el-dialog>
   </el-container>
 </template>
@@ -129,10 +154,11 @@ export default {
       dataList: [],
       // **********************************************************************
       showAddDialog: false,
+      active: 0,
       form: {
-        type: 'git',
-        name: '',
         authType: 'http',
+        name: '',
+        type: 'git',
         username: '',
         password: '',
         rsaPrikey: ''
@@ -141,6 +167,23 @@ export default {
       authTypes: []
     }
   },
+  computed: {
+    dynamicRules() {
+      const baseRules = {
+        type: [{ required: true, message: '请选择仓库类型', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        authType: [{ required: true, message: '请选择认证类型', trigger: 'blur' }]
+      }
+      // 根据选择的类型增加特定规则
+      if (this.form.authType === 'ssh') {
+        baseRules.rsaPrikey = [{ required: true, message: 'ssh 认证类型必须填写 RSA 私钥', trigger: 'blur' }]
+      } else if (this.form.authType === 'http') {
+        baseRules.username = [{ required: true, message: 'http 认证类型必须填写 username', trigger: 'blur' }]
+        baseRules.password = [{ required: true, message: 'http 认证类型必须填写 password', trigger: 'blur' }]
+      }
+      return baseRules
+    }
+  },
   created() {
     document.title = '仓库认证列表'
     this.getData()
@@ -169,9 +212,9 @@ export default {
     handleShowAdd(index, row) {
       getRepoTypes().then(resp => {
         if (resp.code === 0) {
-          this.showAddDialog = true
           this.repoTypes = resp.data.repoTypes
           this.authTypes = resp.data.authTypes
+          this.showAddDialog = true
         } else {
           this.$message.error(resp.msg)
         }
@@ -179,7 +222,7 @@ export default {
         this.$message.error(error.message)
       })
     },
-    onAddRepoAuth() {
+    onAddRepoAuth1() {
       const formData = new FormData()
       formData.append('type', this.form.type)
       formData.append('name', this.form.name)
@@ -195,6 +238,39 @@ export default {
         this.showAddDialog = false
       })
     },
+    // 异步校验并跳转
+    async nextStep() {
+      const stepFields = ['type', 'authType', '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('请检查基础配置是否填写完整')
+      }
+    },
+    onAddRepoAuth() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // 这里发起 API 请求
+          console.log('Final Data:', this.form)
+          this.$message.success('仓库认证配置添加成功！')
+          // 逻辑处理，如关闭弹窗或跳转列表
+        } else {
+          return false
+        }
+      })
+    },
     handleEdit(index, row) {
       this.$confirm('确定要删除 ' + row.name + '?', '提示', {
         confirmButtonText: '确定',
@@ -220,5 +296,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>