调整构建配置相关页面

src/api/devops.js

@@ -13,7 +13,7 @@ const devopsApi = {
   getMachineTaskList: '/api/devops/machine/task',
   getMachineNginx: '/api/search1/nginx',
   getMachineNginx1: '/api/devops/srv/nginx',
-  getDockerList: '/api/devops/docker',
+  getDockerList: '/api/devops/build/docker',
   getCompilerList: '/api/devops/build/compiler',
   getRepoAuthList: '/api/devops/build/repoauth',
   getPackerList: '/api/devops/build/packer',
@@ -177,6 +177,10 @@ export function eraseBuildDir() {
   return post(devopsApi.eraseBuildDir)
 }
 
+export function getRepoAuthNames() {
+  return get(devopsApi.getRepoAuthList + "/kv")
+}
+
 export function getRepoAuthList(pn) {
   return get(devopsApi.getRepoAuthList + '?pn=' + pn)
 }

src/router/background_devops.js

@@ -20,10 +20,10 @@ const NginxLog = () => import('views/devops/srv/NginxLog')
 // build
 const BuildDir = () => import('views/devops/build/BuildDir')
 const RepoAuth = () => import('views/devops/build/RepoAuth')
+const DockerRegistry = () => import('views/devops/docker/DockerRegistry')
 const Compiler = () => import('views/devops/build/Compiler')
 const Packer = () => import('views/devops/build/Packer')
 // docker
-const DockerRegistry = () => import('views/devops/docker/DockerRegistry')
 const DockerImage = () => import('views/devops/docker/DockerImage')
 const Docker = () => import('views/devops/docker/Docker')
 // app
@@ -109,14 +109,6 @@ export default {
       component: { render: (e) => e('router-view') },
       meta: { needAuth: true, roles: ['devops_admin'] },
       children: [
-        {
-          path: '/bg/docker/registry',
-          name: 'DockerRegistry',
-          title: '镜像仓库',
-          icon: 'el-icon-user-solid',
-          component: DockerRegistry,
-          meta: { needAuth: true, roles: ['devops_admin'] }
-        },
         {
           path: '/bg/docker/image',
           name: 'DockerImage',
@@ -151,6 +143,14 @@ export default {
           component: RepoAuth,
           meta: { needAuth: true, roles: ['devops_admin'] }
         },
+        {
+          path: '/bg/build/docker_registry',
+          name: 'DockerRegistry',
+          title: 'docker 仓库',
+          icon: 'el-icon-user-solid',
+          component: DockerRegistry,
+          meta: { needAuth: true, roles: ['devops_admin'] }
+        },
         {
           path: '/bg/build/compiler',
           name: 'Compiler',

src/views/devops/build/Packer.vue

@@ -63,46 +63,88 @@
       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 packTypes"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="打包名字" style="width: 70%; padding-right: 2px">
-            <el-input v-model="form.name" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-          <div v-if="form.type === 'docker'">
-            <el-form-item label="docker 仓库">
-              <el-select v-model="form.dockerRegistry" placeholder="选择 docker 仓库">
-                <el-option
-                  v-for="(item, index) in registryList"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="存放位置" style="width: 70%; padding-right: 2px">
-              <el-input v-model="form.targetPath" style="width: 70%; padding-right: 2px" />
-            </el-form-item>
-          </div>
-          <div v-else>
-            <el-form-item label="bin 目录路径" style="width: 70%; padding-right: 2px">
-              <el-input v-model="form.binDirname" style="width: 70%; padding-right: 2px" />
+        <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="type">
+                <el-select v-model="form.type" placeholder="请选择打包类型" style="width: 100%">
+                  <el-option
+                      v-for="(item, index) in packTypes"
+                      :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="例如 docker-pack" />
+              </el-form-item>
+            </div>
+
+            <div v-show="active === 1">
+              <div v-if="form.type === 'docker'">
+                <el-form-item label="docker 仓库" prop="dockerRegistry">
+                  <div style="display: flex; align-items: center;">
+                    <el-select v-model="form.dockerRegistry" placeholder="请选择 docker 仓库" style="width: 100%">
+                      <el-option
+                          v-for="(item, index) in registryList"
+                          :key="index"
+                          :label="item.label"
+                          :value="item.value"
+                      />
+                    </el-select>
+                    <el-tooltip content="添加 docker 仓库" placement="top">
+                      <el-button
+                          type="primary"
+                          icon="el-icon-plus"
+                          circle
+                          size="mini"
+                          style="margin-left: 10px"
+                          @click="goToAddRegistry"
+                      />
+                    </el-tooltip>
+                  </div>
+                  <div class="form-tip">构建生成的镜像会推送到该仓库</div>
+                </el-form-item>
+              </div>
+              <div v-else-if="form.type === 'staticFiles'">
+                <el-form-item label="构建产物路径" prop="binDirname">
+                  <el-input v-model="form.binDirname" placeholder="例如 /dist" />
+                  <div class="form-tip">源码根目录下的相对路径</div>
+                </el-form-item>
+                <el-form-item label="存储位置" prop="targetPath">
+                  <el-input v-model="form.targetPath" placeholder="例如 registry.cn-chengdu.aliyuncs.com/reghao" />
+                  <div class="form-tip">shell 类型需要使用绝对路径</div>
+                </el-form-item>
+              </div>
+              <div v-else>
+                <el-form-item label="提示">
+                  <el-input value="dockerBuild 类型可能还需要设置 dockerfile 中的参数变量" readonly />
+                </el-form-item>
+              </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="onAddPacker">提交保存</el-button>
             </el-form-item>
-          </div>
-          <el-form-item>
-            <el-button type="primary" @click="onAddPacker">确定</el-button>
-          </el-form-item>
-        </el-form>
+          </el-form>
+        </div>
       </template>
     </el-dialog>
+    <el-dialog
+        title="添加 docker 仓库"
+        append-to-body
+        :visible.sync="showAddRegistryDialog"
+        center
+    >
+    </el-dialog>
   </el-container>
 </template>
 
@@ -124,16 +166,35 @@ export default {
       totalSize: 0,
       dataList: [],
       // **********************************************************************
+      active: 0,
       showAddDialog: false,
       form: {
         type: '',
         name: '',
-        binDirname: '/',
+        binDirname: '',
         targetPath: '',
         dockerRegistry: ''
       },
       packTypes: [],
-      registryList: []
+      registryList: [],
+      // **********************************************************************
+      showAddRegistryDialog: false,
+      registryForm: {
+        registryUrl: ''
+      }
+    }
+  },
+  computed: {
+    dynamicRules() {
+      const baseRules = {
+        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+      }
+      // 根据选择的类型增加特定规则
+      if (this.form.type === 'docker') {
+        baseRules.dockerRegistry = [{ required: true, message: 'docker 类型必须指定使用的仓库', trigger: 'blur' }]
+      }
+      return baseRules
     }
   },
   created() {
@@ -174,7 +235,7 @@ export default {
         this.$message.error(error.message)
       })
     },
-    onAddPacker() {
+    onAddPacker1() {
       const formData = new FormData()
       formData.append('type', this.form.type)
       formData.append('name', this.form.name)
@@ -190,6 +251,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('请检查基础配置是否填写完整')
+      }
+    },
+    onAddPacker() {
+      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: '确定',
@@ -210,6 +304,9 @@ export default {
           message: '已取消'
         })
       })
+    },
+    goToAddRegistry() {
+      this.showAddRegistryDialog = true
     }
   }
 }

src/views/devops/docker/DockerRegistry.vue

@@ -59,27 +59,59 @@
       center
     >
       <template>
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="仓库地址">
-            <el-input v-model="form.registryUrl" 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 ref="form" :model="form" label-width="100px">
+          <el-form-item label="仓库认证" prop="repoAuthName">
+            <el-row :gutter="10">
+              <el-col :span="14">
+                <el-select
+                    v-model="form.repoAuthName"
+                    placeholder="请选择仓库认证"
+                    style="width: 100%"
+                    :disabled="repoAuthNames.length === 0"
+                >
+                  <el-option
+                      v-for="(item, index) in repoAuthNames"
+                      :key="index"
+                      :label="item.label"
+                      :value="item.value"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="6">
+                <el-button
+                    type="text"
+                    icon="el-icon-plus"
+                    @click="handleAddRepoAuth"
+                >
+                  {{ repoAuthNames.length === 0 ? '暂无数据，去添加' : '新增认证' }}
+                </el-button>
+              </el-col>
+            </el-row>
           </el-form-item>
-          <el-form-item label="密码">
-            <el-input v-model="form.password" style="width: 70%; padding-right: 2px" />
+
+          <el-form-item label="仓库地址">
+            <el-input v-model="form.registryUrl" style="width: 70%" placeholder="e.g. registry.cn-hangzhou.aliyuncs.com" />
           </el-form-item>
+
           <el-form-item>
             <el-button type="primary" @click="onAddDockerRegistry">确定</el-button>
           </el-form-item>
         </el-form>
       </template>
     </el-dialog>
+    <el-dialog
+        title="添加仓库认证"
+        append-to-body
+        :visible.sync="showAddRepoAuthDialog"
+        center
+    >
+
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
-import { addDockerRegistry, deleteDockerRegistry, getDockerRegistryList } from '@/api/devops'
+import { addDockerRegistry, deleteDockerRegistry, getDockerRegistryList, getRepoAuthNames } from '@/api/devops'
 
 export default {
   name: 'DockerRegistry',
@@ -97,10 +129,14 @@ export default {
       dataList: [],
       // **********************************************************************
       showAddDialog: false,
+      repoAuthNames: [],
       form: {
-        registryUrl: '',
-        username: '',
-        password: ''
+        repoAuthName: '',
+        registryUrl: ''
+      },
+      // **********************************************************************
+      showAddRepoAuthDialog: false,
+      repoAuthForm: {
       }
     }
   },
@@ -131,12 +167,22 @@ export default {
     },
     handleShowAdd() {
       this.showAddDialog = true
+      getRepoAuthNames().then(resp => {
+        if (resp.code === 0) {
+          this.repoAuthNames = resp.data
+        } else {
+          this.showAddDialog = false
+          this.$message.info(resp.msg)
+        }
+      }).catch(error => {
+        this.showAddDialog = false
+        this.$message.error(error.message)
+      })
     },
     onAddDockerRegistry() {
       const formData = new FormData()
       formData.append('registryUrl', this.form.registryUrl)
-      formData.append('username', this.form.username)
-      formData.append('password', this.form.password)
+      formData.append('repoAuthName', this.form.repoAuthName)
       addDockerRegistry(formData).then(resp => {
         this.$message.info(resp.msg)
         this.getData()
@@ -166,6 +212,9 @@ export default {
           message: '已取消'
         })
       })
+    },
+    handleAddRepoAuth() {
+      this.showAddRepoAuthDialog = true
     }
   }
 }