调整构建配置相关页面

src/router/background_devops.js

@@ -154,7 +154,7 @@ export default {
         {
           path: '/bg/build/compiler',
           name: 'Compiler',
-          title: '编译器',
+          title: '编译配置',
           icon: 'el-icon-film',
           component: Compiler,
           meta: { needAuth: true, roles: ['devops_admin'] }
@@ -162,7 +162,7 @@ export default {
         {
           path: '/bg/build/packer',
           name: 'Packer',
-          title: '应用打包',
+          title: '打包配置',
           icon: 'el-icon-files',
           component: Packer,
           meta: { needAuth: true, roles: ['devops_admin'] }

src/views/devops/build/Compiler.vue

@@ -142,6 +142,11 @@
                 <div class="form-tip">shell 类型需要使用绝对路径</div>
                 <div class="form-tip">dockerRun 类型直接使用相应命令即可</div>
               </el-form-item>
+              <el-form-item v-if="form.type !== 'dockerBuild'" label="编译命令" prop="versionCmd">
+                <el-input v-model="form.versionCmd" placeholder="例如 mvn -v" />
+                <div class="form-tip">shell 类型需要使用绝对路径</div>
+                <div class="form-tip">dockerRun 类型直接使用相应命令即可</div>
+              </el-form-item>
             </div>
 
             <el-form-item style="margin-top: 40px">
@@ -352,6 +357,7 @@ export default {
         type: '',
         name: '',
         compileCmd: '',
+        versionCmd: '',
         compilerImage: ''
       },
       compileTypes: [],
@@ -395,6 +401,7 @@ export default {
       }
       if (this.form.type === 'shell' || this.form.type === 'dockerRun') {
         baseRules.compileCmd = [{ required: true, message: 'shell 和 dockerRun 类型必须填写编译命令', trigger: 'blur' }]
+        baseRules.versionCmd = [{ required: true, message: 'shell 和 dockerRun 类型必须填写编译器的版本命令', trigger: 'blur' }]
       }
       return baseRules
     }

src/views/devops/build/Packer.vue

@@ -22,13 +22,22 @@
           label="打包名字"
         />
         <el-table-column
-          prop="binDirname"
-          label="bin 目录路径"
-        />
-        <el-table-column
-          prop="targetPath"
-          label="存放位置"
-        />
+          prop="artifactPath"
+          label="构建产物路径"
+        >
+          <template slot="header">
+            <span>
+              构建产物路径
+              <el-tooltip placement="top" effect="dark">
+                <div slot="content">
+                  构建产物所在的相对于源码根目录的路径，例如: target/app.jar 或 dist/ <br/>
+                  docker 打包类型的路径在 Dockerfile 中指定, 此处为 N/A
+                </div>
+                <i class="el-icon-question" style="margin-left: 5px; cursor: pointer; color: #909399;"/>
+              </el-tooltip>
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           fixed="right"
           label="操作"
@@ -112,19 +121,57 @@
                   <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 v-else-if="form.type === 'ossStatic'" class="oss-config-group">
+                <el-form-item prop="artifactPath">
+                  <span slot="label">
+                    构建产物路径
+                    <el-tooltip content="构建完成后产物所在的相对路径，例如：dist/ 或 build/" placement="top">
+                      <i class="el-icon-question" style="cursor: help; color: #909399;"></i>
+                    </el-tooltip>
+                  </span>
+                  <el-input v-model="form.artifactPath" placeholder="例如 /dist" clearable />
                   <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 label="OSS Bucket" prop="ossEndpoint">
+                  <div class="oss-select-wrapper">
+                    <el-select
+                        v-model="form.ossEndpoint"
+                        placeholder="请选择阿里云 OSS Bucket"
+                        style="flex: 1"
+                        filterable
+                    >
+                      <el-option
+                          v-for="(item, index) in ossList"
+                          :key="index"
+                          :label="item.label"
+                          :value="item.value"
+                      />
+                    </el-select>
+
+                    <el-tooltip content="添加新的 OSS Bucket" placement="top">
+                      <el-button
+                          type="primary"
+                          icon="el-icon-plus"
+                          circle
+                          size="small"
+                          class="add-bucket-btn"
+                          @click="goToAddBucket"
+                      />
+                    </el-tooltip>
+                  </div>
+                  <div class="form-tip">构建生成的静态产物将自动上传并同步至该 Bucket</div>
                 </el-form-item>
               </div>
               <div v-else>
-                <el-form-item label="提示">
-                  <el-input value="dockerBuild 类型可能还需要设置 dockerfile 中的参数变量" readonly />
+                <el-form-item prop="artifactPath">
+                  <span slot="label">
+                    构建产物路径
+                    <el-tooltip content="构建完成后产物所在的相对路径，例如：dist/ 或 build/" placement="top">
+                      <i class="el-icon-question" style="cursor: help; color: #909399;"></i>
+                    </el-tooltip>
+                  </span>
+                  <el-input v-model="form.artifactPath" placeholder="例如 /dist" clearable />
+                  <div class="form-tip">源码根目录下的相对路径</div>
                 </el-form-item>
               </div>
             </div>
@@ -171,12 +218,14 @@ export default {
       form: {
         type: '',
         name: '',
-        binDirname: '',
-        targetPath: '',
-        dockerRegistry: ''
+        artifactPath: '',
+        dockerRegistry: '',
+        ossEndpoint: '',
+        targetPath: ''
       },
       packTypes: [],
       registryList: [],
+      ossList: [],
       // **********************************************************************
       showAddRegistryDialog: false,
       registryForm: {
@@ -228,6 +277,7 @@ export default {
           this.showAddDialog = true
           this.packTypes = resp.data.packTypes
           this.registryList = resp.data.registryList
+          this.ossList = resp.data.ossList
         } else {
           this.$message.error(resp.msg)
         }
@@ -239,7 +289,7 @@ export default {
       const formData = new FormData()
       formData.append('type', this.form.type)
       formData.append('name', this.form.name)
-      formData.append('binDirname', this.form.binDirname)
+      formData.append('artifactPath', this.form.artifactPath)
       formData.append('dockerRegistry', this.form.dockerRegistry)
       formData.append('targetPath', this.form.targetPath)
       addPacker(formData).then(resp => {
@@ -307,10 +357,50 @@ export default {
     },
     goToAddRegistry() {
       this.showAddRegistryDialog = true
+    },
+    goToAddBucket() {
+      this.showAddRegistryDialog = true
     }
   }
 }
 </script>
 
 <style>
+/* OSS 配置组容器，可以加一个淡色背景或边框区分 */
+.oss-config-group {
+  padding: 15px;
+  background-color: #fcfcfc;
+  border-radius: 4px;
+  border: 1px dashed #e4e7ed;
+  margin-bottom: 20px;
+}
+
+/* Flex 布局让选择框和按钮完美对齐 */
+.oss-select-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px; /* 间距更加现代化 */
+}
+
+/* 按钮悬停动画 */
+.add-bucket-btn {
+  transition: transform 0.2s;
+}
+.add-bucket-btn:hover {
+  transform: scale(1.1);
+}
+
+/* 提示文字样式优化 */
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+/* 统一图标颜色 */
+.el-icon-question {
+  font-size: 14px;
+  vertical-align: middle;
+}
 </style>

src/views/devops/docker/DockerRegistry.vue

@@ -1,7 +1,7 @@
 <template>
   <el-container>
     <el-header height="220">
-      <h3>镜像仓库列表</h3>
+      <h3>docker 仓库列表</h3>
       <el-row style="margin-top: 10px">
         <el-button type="success" size="mini" icon="el-icon-plus" @click="handleShowAdd">添加</el-button>
       </el-row>
@@ -18,12 +18,8 @@
           label="仓库地址"
         />
         <el-table-column
-          prop="username"
-          label="帐号"
-        />
-        <el-table-column
-          prop="password"
-          label="密码"
+          prop="repoAuthName"
+          label="仓库认证名"
         />
         <el-table-column
           fixed="right"
@@ -141,7 +137,7 @@ export default {
     }
   },
   created() {
-    document.title = '镜像仓库列表'
+    document.title = 'docker 仓库列表'
     this.getData()
   },
   methods: {