|
|
@@ -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>
|
