feat：推荐版本号模版优化 #11186

src/frontend/devops-pipeline/src/components/ExecPipeline.vue

@@ -718,27 +718,35 @@
                 done
             ) {
                 if (!isContinue) {
-                    const postData = {
-                        projectId: this.routerParams.projectId,
-                        pipelineId: this.routerParams.pipelineId,
-                        buildId: this.routerParams.buildNo,
-                        stageId,
-                        containerId,
-                        taskId,
-                        isContinue,
-                        element: atom
-                    }
+                    this.$bkInfo({
+                        title: this.$t('isTaskTermination'),
+                        confirmFn: async () => {
+                            const postData = {
+                                projectId: this.routerParams.projectId,
+                                pipelineId: this.routerParams.pipelineId,
+                                buildId: this.routerParams.buildNo,
+                                stageId,
+                                containerId,
+                                taskId,
+                                isContinue,
+                                element: atom
+                            }
 
-                    try {
-                        await this.pausePlugin(postData)
-                        await this.requestPipelineExecDetail(this.routerParams)
-                    } catch (err) {
-                        this.$showTips({
-                            message: err.message || err,
-                            theme: 'error'
-                        })
-                        done()
-                    }
+                            try {
+                                await this.pausePlugin(postData)
+                                await this.requestPipelineExecDetail(this.routerParams)
+                            } catch (err) {
+                                this.$showTips({
+                                    message: err.message || err,
+                                    theme: 'error'
+                                })
+                                done()
+                            }
+                        },
+                        cancelFn: () => {
+                            done()
+                        }
+                    })
                 } else {
                     this.toggleAsidePropertyPanel({
                         isShow: true,

src/frontend/devops-pipeline/src/components/PipelineVersionsForm.vue

@@ -1,7 +1,7 @@
 <template>
     <bk-form
-        :class="[{ 'is-not-Preview': !isPreview }, 'pipeline-execute-version-params']"
-        :form-type="!isPreview ? 'vertical' : 'inline'"
+        :class="[{ 'is-not-Preview': isTemplateEdit }, 'pipeline-execute-version-params']"
+        :form-type="formType"
     >
         <bk-form-item>
             <label class="pipeline-execute-version-label">
@@ -28,25 +28,45 @@
         </bk-form-item>
 
         <div
+            v-if="isTemplateEdit"
             class="execute-buildno-params"
-            v-if="!isPreview"
         >
-            <form-field
-                :required="true"
-                :label="$t('buildNum')"
-                :is-error="errors.has('buildNo')"
-                :error-msg="errors.first('buildNo')"
+            <bk-form-item
+                required
+                :label="$t('buildNoBaseline.buildNoBaseline')"
+                :desc="baselineTooltipContent"
             >
-                <vuex-input
-                    :disabled="(isPreview && buildNo.buildNoType !== 'CONSISTENT') || disabled"
-                    input-type="number"
-                    name="buildNo"
-                    placeholder="BK_CI_BUILD_NO"
-                    v-validate.initial="'required|numeric'"
-                    :value="buildNo.buildNo"
-                    :handle-change="handleBuildNoChange"
-                />
-            </form-field>
+                <form-field
+                    :required="true"
+                    :is-error="errors.has('buildNo')"
+                    :error-msg="errors.first('buildNo')"
+                >
+                    <vuex-input
+                        :disabled="isPreviewAndLockedNo"
+                        input-type="number"
+                        name="buildNo"
+                        placeholder="BK_CI_BUILD_NO"
+                        v-validate.initial="'required|numeric'"
+                        :value="buildNo.buildNo"
+                        :handle-change="handleBuildNoChange"
+                    />
+                </form-field>
+                <span class="baseline-tips">
+                    <Logo
+                        size="14"
+                        name="warning-circle-fill"
+                    />
+                    <span class="baseline-tips-text">{{ $t('buildNoBaseline.templateManualResetRequired') }}</span>
+                </span>
+                <div id="baseline-tooltip-content">
+                    <p
+                        v-for="(tip, index) in buildNoBaselineTips"
+                        :key="index"
+                    >
+                        {{ tip }}
+                    </p>
+                </div>
+            </bk-form-item>
             <form-field
                 :required="true"
                 :is-error="errors.has('buildNoType')"
@@ -63,22 +83,62 @@
             </form-field>
         </div>
         <bk-form-item
-            ext-cls="preview-buildno"
             v-else
+            ext-cls="preview-buildno"
         >
             <label class="pipeline-execute-version-label">
                 <span>{{ $t('buildNum') }}</span>
+                <bk-checkbox
+                    v-if="isInstance && !isInitInstance"
+                    class="instance_reset"
+                    :value="resetBuildNo"
+                    @change="handleCheckChange"
+                >
+                    {{ $t('buildNoBaseline.instanceBuildNo') }}
+                </bk-checkbox>
             </label>
             <div class="preview-buildno-params">
                 <div class="build">
                     <span class="build-label">{{ $t('buildNoBaseline.baselineValue') }}</span>
-                    <span class="build-value">{{ `${buildNo.buildNo} (${currentBuildNoType})` }}</span>
+                    <span
+                        class="build-value"
+                        v-if="!isInstance"
+                    >
+                        {{ `${buildNo.buildNo} (${currentBuildNoType})` }}
+                    </span>
+                    <p
+                        class="build-input"
+                        v-else
+                    >
+                        <vuex-input
+                            :disabled="isPreviewAndLockedNo"
+                            input-type="number"
+                            name="buildNo"
+                            placeholder="BK_CI_BUILD_NO"
+                            v-validate.initial="'required|numeric'"
+                            :value="buildNo.buildNo"
+                            :handle-change="handleBuildNoChange"
+                        />
+                        <span class="bk-form-help is-danger">{{ errors.first('buildNo') }}</span>
+                    </p>
                 </div>
-                <div class="build">
+                <div
+                    class="build"
+                    v-if="isInstance"
+                >
+                    <span class="build-label">{{ $t('buildNoBaseline.strategy') }}</span>
+                    <span class="build-value">
+                        {{ currentBuildNoType }}
+                    </span>
+                </div>
+                <div
+                    class="build"
+                    v-if="!isInitInstance"
+                >
                     <span class="build-label">{{ $t('buildNoBaseline.currentValue') }}</span>
                     <p>
                         <vuex-input
-                            :disabled="buildNo.buildNoType !== 'CONSISTENT'"
+                            :disabled="(isLockedNo && !isInstance) || isInstance"
                             input-type="number"
                             name="currentBuildNo"
                             placeholder="CURRENT_BUILD_NO"
@@ -87,6 +147,16 @@
                             :handle-change="handleBuildNoChange"
                         />
                         <span class="bk-form-help is-danger">{{ errors.first('currentBuildNo') }}</span>
+                        <span
+                            v-if="resetBuildNo && isInstance"
+                            class="reset-build-no"
+                        >
+                            <Logo
+                                size="14"
+                                name="arrow-right"
+                            />
+                            {{ buildNo.buildNo }}
+                        </span>
                     </p>
                 </div>
             </div>
@@ -100,12 +170,14 @@
     import VuexInput from '@/components/atomFormField/VuexInput'
     import { allVersionKeyList, getVersionConfig } from '@/utils/pipelineConst'
     import { mapGetters } from 'vuex'
+    import Logo from '@/components/Logo'
 
     export default {
         components: {
             EnumInput,
             VuexInput,
-            FormField
+            FormField,
+            Logo
         },
         props: {
             isPreview: {
@@ -130,6 +202,22 @@
             handleVersionChange: {
                 type: Function,
                 default: () => () => { }
+            },
+            handleCheckChange: {
+                type: Function,
+                default: () => () => { }
+            },
+            isInstance: Boolean,
+            isInitInstance: Boolean,
+            resetBuildNo: Boolean
+        },
+        data () {
+            return {
+                baselineTooltipContent: {
+                    allowHTML: true,
+                    width: 610,
+                    content: '#baseline-tooltip-content'
+                }
             }
         },
         computed: {
@@ -152,6 +240,21 @@
             currentBuildNoType () {
                 const buildNoItem = this.buildNoRules.find(item => item.value === this.buildNo.buildNoType)
                 return buildNoItem ? buildNoItem.label : undefined
+            },
+            buildNoBaselineTips () {
+                return Array(7).fill(0).map((_, i) => this.$t(`buildNoBaseline.tips${i + 1}`))
+            },
+            formType () {
+                return this.isTemplateEdit ? 'vertical' : 'inline'
+            },
+            isLockedNo () {
+                return this.buildNo.buildNoType !== 'CONSISTENT'
+            },
+            isTemplateEdit () {
+                return !this.isPreview && !this.isInstance
+            },
+            isPreviewAndLockedNo () {
+                return (this.isLockedNo && this.isPreview) || this.disabled
             }
         }
     }
@@ -164,20 +267,28 @@
     grid-gap: 10px;
 
     .pipeline-execute-version-label {
+        display: flex;
+        align-items: center;
         font-size: 12px;
         font-weight: 700;
 
         .desc-text {
             font-weight: normal;
             color: #979ba5;
         }
+
+        .instance_reset {
+            font-weight: normal;
+            margin-left: 18px;
+        }
     }
 
     .execute-build-version {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-gap: 16px;
         width: 222px;
+        margin-right: 20px;
 
         .execute-build-version-input:not(:last-child) {
             position: relative;
@@ -195,10 +306,18 @@
         display: grid;
         grid-gap: 8px;
         width: fit-content;
+        .baseline-tips {
+            svg {
+                vertical-align: middle;
+            }
+            .baseline-tips-text {
+                font-size: 12px;
+                color: #979BA5;
+            }
+        }
     }
-    .preview-buildno{
-        margin-left: 20px;
-
+    .preview-buildno {
+        margin-left: 0;
         .preview-buildno-params {
             display: flex;
 
@@ -210,7 +329,7 @@
                 .build-label,
                 .build-value {
                     font-size: 12px;
-                    padding: 0 8px;
+                    padding: 0 12px;
                     border: 1px solid #dcdee5;
                     cursor: not-allowed;
                     height: 32px;
@@ -222,6 +341,7 @@
                 }
 
                 .build-value {
+                    min-width: 153px;
                     margin-right: 16px;
                     border-left: none;
                     border-radius: 0 2px 2px 0;
@@ -232,12 +352,25 @@
                     position: relative;
                     display: flex;
 
-                    .is-danger{
+                    .is-danger {
                         position: absolute;
                         white-space: nowrap;
                         top: 70%;
                         left: 0;
                     }
+
+                    .reset-build-no {
+                        display: flex;
+                        align-items: center;
+                        color: #3A84FF;
+                        svg {
+                            margin: 0 8px 0 16px;
+                        }
+                    }
+                }
+
+                .build-input {
+                    margin-right: 16px;
                 }
             }
         }

src/frontend/devops-pipeline/src/components/atomFormField/AtomAceEditor/index.vue

@@ -146,7 +146,6 @@
 
 <style lang="scss">
     .ace-fullscreen {
-        top: 10px;
         right: 10px;
         position: absolute;
         z-index: 999;

src/frontend/devops-pipeline/src/components/atomFormField/AtomCheckboxList/index.vue

@@ -52,9 +52,11 @@
 <style lang="scss">
     .atom-checkbox-list-item {
         padding: 0 20px 10px 0;
-        overflow: hidden;
-        text-overflow:ellipsis;
-        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        .bk-checkbox {
+            flex-shrink: 0;
+        }
     }
     .underline-text {
         border-bottom: dashed 1px #c3cdd7;