From e481b88fd80fe4e9548bb90d2360a48b25e3aaa9 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Tue, 30 Jul 2024 16:47:46 +0800
Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F,=E5=BA=94=E8=AF=A5=E5=9C=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=97=B6=E5=B0=B1=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=90=88?=
 =?UTF-8?q?=E6=B3=95,=E8=80=8C=E4=B8=8D=E6=98=AF=E7=AD=89=E5=88=B0?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=89=8D?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20#8125?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContainerPropertyPanel/BuildParams.vue    |  2 +-
 .../PipelineActionDialog/DisableDialog.vue    | 31 +++++--
 .../PipelineDetailTabs/VersionSelector.vue    | 93 ++++++++++++++-----
 .../components/pipeline-param-form.vue        |  4 +-
 .../devops-pipeline/src/utils/customRules.js  |  5 +
 .../src/utils/validDictionary.js              |  2 +
 6 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue b/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue
index 831c8f662e2..e8718e2da8c 100755
--- a/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue
+++ b/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue
@@ -127,7 +127,7 @@
                                                 :data-vv-scope="`param-${param.id}`"
                                                 :disabled="disabled"
                                                 :handle-change="(name, value) => handleUpdateParamId(name, value, index)"
-                                                v-validate.initial="`required|unique:${validateParams.map(p => p.id).join(',')}`"
+                                                v-validate.initial="`required|paramsIdRule|unique:${validateParams.map(p => p.id).join(',')}`"
                                                 name="id"
                                                 :placeholder="$t('nameInputTips')"
                                                 :value="param.id"
diff --git a/src/frontend/devops-pipeline/src/components/PipelineActionDialog/DisableDialog.vue b/src/frontend/devops-pipeline/src/components/PipelineActionDialog/DisableDialog.vue
index 8f3b543a923..098288ad17c 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineActionDialog/DisableDialog.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineActionDialog/DisableDialog.vue
@@ -7,10 +7,12 @@
         @cancel="handleCancel"
     >
         <div class="disable-pipeline-dialog">
-            <i :class="['bk-icon disable-pipeline-warning-icon', {
-                'icon-exclamation': !lock,
-                'icon-check-1': lock
-            }]"></i>
+            <i
+                :class="['bk-icon disable-pipeline-warning-icon', {
+                    'icon-exclamation': !lock,
+                    'icon-check-1': lock
+                }]"
+            ></i>
             <h3>{{ $t(lock ? 'enablePipelineConfirmTips' : 'disablePipelineConfirmTips') }}</h3>
             <p v-if="!lock">
                 {{ $t(pacEnabled ? 'disablePacPipelineConfirmDesc' : 'disablePipelineConfirmDesc') }}
@@ -18,10 +20,18 @@
             <p v-else>
                 {{ $t(pacEnabled ? 'enablePacPipelineConfirmDesc' : 'enablePipelineConfirmDesc') }}
             </p>
-            <pre class="disable-pac-code" v-if="pacEnabled">{{ disablePipelineYaml }}<copy-icon :value="disablePipelineYaml" /></pre>
+            <pre
+                class="disable-pac-code"
+                v-if="pacEnabled"
+            >{{ disablePipelineYaml }}<copy-icon :value="disablePipelineYaml" /></pre>
         </div>
         <footer slot="footer">
-            <bk-button v-if="!pacEnabled" :loading="disabling" theme="primary" @click="disablePipeline">
+            <bk-button
+                v-if="!pacEnabled"
+                :loading="disabling"
+                theme="primary"
+                @click="disablePipeline"
+            >
                 {{ $t(lock ? 'enable' : 'disable') }}
             </bk-button>
             <bk-button @click="handleCancel">
@@ -98,14 +108,15 @@
         height: 42px;
         background: #FFE8C3;
         color: #FF9C01;
-        &.icon-check-1 {
-            background: #e5f6ea;
-            color: #3fc06d;
-        }
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         font-size: 26px;
+        &.icon-check-1 {
+            background: #e5f6ea;
+            color: #3fc06d;
+        }
+
     }
     .disable-pac-code {
         position: relative;
diff --git a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/VersionSelector.vue b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/VersionSelector.vue
index 0ec57140fe7..ee05456c502 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/VersionSelector.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/VersionSelector.vue
@@ -16,12 +16,26 @@
         @change="switchVersion"
         @toggle="selectorToggle"
     >
-        <div slot="trigger" class="pipeline-version-dropmenu-trigger">
-            <i v-if="isActiveDraft" class="devops-icon icon-edit-line" />
-            <logo v-else-if="isActiveBranchVersion" class="pipeline-branch-version-icon" name="branch" size="14" />
-            <i v-else :class="['devops-icon icon-check-circle', {
-                'is-release-version-icon': isCurrentVersion(activeVersion)
-            }]" />
+        <div
+            slot="trigger"
+            class="pipeline-version-dropmenu-trigger"
+        >
+            <i
+                v-if="isActiveDraft"
+                class="devops-icon icon-edit-line"
+            />
+            <logo
+                v-else-if="isActiveBranchVersion"
+                class="pipeline-branch-version-icon"
+                name="branch"
+                size="14"
+            />
+            <i
+                v-else
+                :class="['devops-icon icon-check-circle', {
+                    'is-release-version-icon': isCurrentVersion(activeVersion)
+                }]"
+            />
             <p class="pipeline-version-name">
                 <span v-bk-overflow-tips>
                     <template v-if="isActiveDraft">
@@ -31,15 +45,27 @@
                         {{ activeDisplayName }}
                     </template>
                 </span>
-                <i v-if="activeVersion?.latestReleasedFlag" class="pipeline-release-version-tag">
+                <i
+                    v-if="activeVersion?.latestReleasedFlag"
+                    class="pipeline-release-version-tag"
+                >
                     {{ $t('latest') }}
                 </i>
-                <i v-else-if="isActiveDraft && showDraftTag" class="pipeline-draft-version-tag">
+                <i
+                    v-else-if="isActiveDraft && showDraftTag"
+                    class="pipeline-draft-version-tag"
+                >
                     {{ $t('willRelease') }}
                 </i>
             </p>
-            <i v-if="isLoading" class="devops-icon icon-circle-2-1 spin-icon" />
-            <i v-else class="bk-icon icon-angle-down" />
+            <i
+                v-if="isLoading"
+                class="devops-icon icon-circle-2-1 spin-icon"
+            />
+            <i
+                v-else
+                class="bk-icon icon-angle-down"
+            />
         </div>
         <bk-option
             v-for="item in versionList"
@@ -52,16 +78,30 @@
             }"
         >
             <div class="pipeline-version-option-item-name">
-                <i v-if="item.isDraft" class="devops-icon icon-edit-line" />
-                <logo v-else-if="item.isBranchVersion" class="pipeline-branch-version-icon" name="branch" size="14" />
-                <i v-else :class="['devops-icon icon-check-circle', {
-                    'is-release-version-icon': isCurrentVersion(item)
-                }]" />
+                <i
+                    v-if="item.isDraft"
+                    class="devops-icon icon-edit-line"
+                />
+                <logo
+                    v-else-if="item.isBranchVersion"
+                    class="pipeline-branch-version-icon"
+                    name="branch"
+                    size="14"
+                />
+                <i
+                    v-else
+                    :class="['devops-icon icon-check-circle', {
+                        'is-release-version-icon': isCurrentVersion(item)
+                    }]"
+                />
                 <p class="pipeline-version-name">
                     <span v-bk-overflow-tips>
                         {{ item.displayName }}
                     </span>
-                    <i v-if="isCurrentVersion(item)" class="pipeline-release-version-tag">
+                    <i
+                        v-if="isCurrentVersion(item)"
+                        class="pipeline-release-version-tag"
+                    >
                         {{ $t('latest') }}
                     </i>
                 </p>
@@ -69,12 +109,23 @@
                                 [{{ $t('mainBranch') }}]
                             </span> -->
             </div>
-            <span class="pipeline-version-option-item-desc" v-bk-overflow-tips>
+            <span
+                class="pipeline-version-option-item-desc"
+                v-bk-overflow-tips
+            >
                 {{ item.description || '--' }}
             </span>
         </bk-option>
-        <p v-if="showExtension" slot="extension" class="show-all-pipeline-version-entry" @click="showAll">
-            <logo name="tiaozhuan" :size="16" />
+        <p
+            v-if="showExtension"
+            slot="extension"
+            class="show-all-pipeline-version-entry"
+            @click="showAll"
+        >
+            <logo
+                name="tiaozhuan"
+                :size="16"
+            />
             {{ $t('viewAll') }}
         </p>
     </bk-select>
@@ -321,11 +372,11 @@
     overflow: hidden;
     .icon-edit-line,
     .icon-check-circle {
+        color: #979BA5;
+        font-size: 14px;
         &.icon-check-circle.is-release-version-icon {
             color: #3FC362;
         }
-        color: #979BA5;
-        font-size: 14px;
     }
     .pipeline-branch-version-icon {
         color: #FF9C01;
diff --git a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/pipeline-param-form.vue b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/pipeline-param-form.vue
index f1e416c1df0..a25c4c366b6 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/pipeline-param-form.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/pipeline-param-form.vue
@@ -132,8 +132,8 @@
         computed: {
             idValidRule () {
                 return this.paramType === 'constant'
-                    ? `required|notInList:${this.getUniqueArgs('id')}|constVarRule|max:64`
-                    : `required|notInList:${this.getUniqueArgs('id')}`
+                    ? `required|paramsIdRule|notInList:${this.getUniqueArgs('id')}|constVarRule|max:64`
+                    : `required|paramsIdRule|notInList:${this.getUniqueArgs('id')}`
             },
             idLabel () {
                 return this.paramType === 'constant' ? this.$t('newui.pipelineParam.constName') : this.$t('newui.pipelineParam.varName')
diff --git a/src/frontend/devops-pipeline/src/utils/customRules.js b/src/frontend/devops-pipeline/src/utils/customRules.js
index 36727a18313..62f75e34b80 100755
--- a/src/frontend/devops-pipeline/src/utils/customRules.js
+++ b/src/frontend/devops-pipeline/src/utils/customRules.js
@@ -102,6 +102,11 @@ const customeRules = {
             return /^[a-zA-Z0-9_]+$/g.test(value)
         }
     },
+    paramsIdRule: {
+        validate: function (value, args) {
+            return /^[a-z][a-z\d_]+$/gi.test(value)
+        }
+    },
     buildNumRule: {
         validate: function (value, args) {
             return /^[\w-{}() +?.:$"]{1,256}$/.test(value)
diff --git a/src/frontend/devops-pipeline/src/utils/validDictionary.js b/src/frontend/devops-pipeline/src/utils/validDictionary.js
index 2f024938ada..679bedabaad 100755
--- a/src/frontend/devops-pipeline/src/utils/validDictionary.js
+++ b/src/frontend/devops-pipeline/src/utils/validDictionary.js
@@ -50,6 +50,7 @@ const dictionary = {
             nonVarRule: field => '该字段不需要包含${{}}',
             notStartWithBKCI: field => '该字段不能以BK_CI开头',
             paramsRule: field => '字段只能包含英文字母、数字及下划线',
+            paramsIdRule: field => '变量名只能使用英文字母，数字和下划线，首字符不能以数字开头',
             timeoutsRule: field => '请输入1-10080之间的正整数，支持引用流水线变量',
             reminderTimeRule: field => '请输入1-168之间的正整数',
             maxConcurrencyRule: field => '请输入1-1000之间的正整数'
@@ -85,6 +86,7 @@ const dictionary = {
             nonVarRule: field => 'This field does not need to be included ${{}}',
             notStartWithBKCI: field => "Field can not start with 'BK_CI'",
             paramsRule: () => 'Field only support English letter, numbers and underscores',
+            paramsIdRule: field => 'Variable names can only contain English letters, numbers, and underscores, and must not start with a number.',
             timeoutsRule: field => 'Please enter an integer between 1-10080, or a pipeline variable',
             reminderTimeRule: field => ''
         }

From aa8753f8f1f26c0b1ecf26d4489d9f199b73af17 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Thu, 1 Aug 2024 17:45:12 +0800
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F,=E5=BA=94=E8=AF=A5=E5=9C=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=97=B6=E5=B0=B1=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=90=88?=
 =?UTF-8?q?=E6=B3=95,=E8=80=8C=E4=B8=8D=E6=98=AF=E7=AD=89=E5=88=B0?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=89=8D?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20#8125?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BuildHistoryTable/FilterBar.vue           | 124 +++++++++---------
 .../src/views/subpages/preview.vue            |  13 +-
 2 files changed, 72 insertions(+), 65 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue b/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue
index 5b2c7ba1d5e..ef1d7214693 100755
--- a/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue
+++ b/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue
@@ -34,26 +34,10 @@
         props: {
             resetQueryCondition: Function
         },
-        data () {
-            return {
-                triggerList: [],
-                statusList: [],
-                repoList: [],
-                branchList: []
-            }
-        },
         computed: {
             ...mapGetters({
                 historyPageStatus: 'pipelines/getHistoryPageStatus'
             }),
-            conditionsMap () {
-                return {
-                    trigger: this.triggerList,
-                    status: this.statusList,
-                    materialAlias: this.repoList,
-                    materialBranch: this.branchList
-                }
-            },
             datePickerConf () {
                 return {
                     format: 'yyyy-MM-dd HH:mm:ss',
@@ -66,19 +50,45 @@
                         name: this.$t('status'),
                         id: 'status',
                         multiable: true,
-                        children: this.statusList
+                        remoteMethod: async () => {
+                            const statusList = await this.getConditionList('status')
+                            return statusList.map(item => ({
+                                name: item.value,
+                                id: item.id
+                            }))
+                        }
                     },
                     {
                         name: this.$t('materialRepo'),
                         id: 'materialAlias',
                         multiable: true,
-                        children: this.repoList
+                        remoteMethod: async (search) => {
+                            const repoList = await this.getConditionList('repo', {
+                                type: 'MATERIAL',
+                                search
+                            })
+                            return repoList.map(item => ({
+                                name: item,
+                                id: item
+                            }))
+                        },
+                        inputInclude: true
                     },
                     {
                         name: this.$t('triggerRepo'),
-                        id: 'triggerRepo',
+                        id: 'triggerAlias',
                         multiable: true,
-                        children: this.repoList
+                        remoteMethod: async (search) => {
+                            const repoList = await this.getConditionList('repo', {
+                                type: 'TRIGGER',
+                                search
+                            })
+                            return repoList.map(item => ({
+                                name: item,
+                                id: item
+                            }))
+                        },
+                        inputInclude: true
                     },
                     {
                         name: 'Commit ID',
@@ -92,19 +102,45 @@
                         name: this.$t('history.triggerType'),
                         id: 'trigger',
                         multiable: true,
-                        children: this.triggerList
+                        remoteMethod: async () => {
+                            const repoList = await this.getConditionList('trigger')
+                            return repoList.map(item => ({
+                                name: item.value,
+                                id: item.id
+                            }))
+                        }
                     },
                     {
                         name: this.$t('materialBranch'),
                         id: 'materialBranch',
                         multiable: true,
-                        children: this.branchList
+                        remoteMethod: async (search) => {
+                            const repoList = await this.getConditionList('branchName', {
+                                type: 'MATERIAL',
+                                search
+                            })
+                            return repoList.map(item => ({
+                                name: item,
+                                id: item
+                            }))
+                        },
+                        inputInclude: true
                     },
                     {
                         name: this.$t('triggerBranch'),
                         id: 'triggerBranch',
                         multiable: true,
-                        children: this.branchList
+                        remoteMethod: async (search) => {
+                            const repoList = await this.getConditionList('branchName', {
+                                type: 'TRIGGER',
+                                search
+                            })
+                            return repoList.map(item => ({
+                                name: item,
+                                id: item
+                            }))
+                        },
+                        inputInclude: true
                     },
                     {
                         name: this.$t('history.remark'),
@@ -117,49 +153,12 @@
             }
         },
         created () {
-            this.init()
             this.handlePathQuery()
         },
         methods: {
             ...mapActions('pipelines', [
                 'setHistoryPageStatus'
             ]),
-            async init () {
-                try {
-                    const [statusList, repoList, branchList, triggerList] = await Promise.all([
-                        'status',
-                        'repo',
-                        `branchName?materialAlias=${this.$route.query.materialAlias ?? ''}`,
-                        'trigger'
-                    ].map(this.getConditionList))
-                    this.statusList = statusList.map(item => ({
-                        name: item.value,
-                        id: item.id
-                    }))
-                    this.repoList = repoList.map(item => ({
-                        name: item,
-                        id: item
-                    }))
-                    this.branchList = branchList.map(item => ({
-                        name: item,
-                        id: item
-                    }))
-                    this.triggerList = triggerList.map(item => ({
-                        name: item.value,
-                        id: item.id
-                    }))
-                    this.historyPageStatus.searchKey.forEach(item => {
-                        if (this.conditionsMap[item.id]) {
-                            item.values = item.values.map(item => ({
-                                id: item,
-                                name: this.conditionsMap[item.id].find(val => val.id === item)?.name ?? 'unknown'
-                            }))
-                        }
-                    })
-                } catch (error) {
-                    console.error(error)
-                }
-            },
             async handlePathQuery () {
                 // TODO 筛选参数目前不支持带#字符串回填
                 const { $route, historyPageStatus } = this
@@ -231,10 +230,11 @@
                 this.startQuery()
             },
 
-            async getConditionList (condition) {
+            async getConditionList (condition, query = {}) {
                 try {
                     const { $route: { params }, $ajax } = this
-                    const url = `${PROCESS_API_URL_PREFIX}/user/builds/${params.projectId}/${params.pipelineId}/historyCondition/${condition}`
+                    const querySearch = new URLSearchParams(query)
+                    const url = `${PROCESS_API_URL_PREFIX}/user/builds/${params.projectId}/${params.pipelineId}/historyCondition/${condition}?${querySearch}`
                     const res = await $ajax.get(url)
 
                     return res.data
diff --git a/src/frontend/devops-pipeline/src/views/subpages/preview.vue b/src/frontend/devops-pipeline/src/views/subpages/preview.vue
index daa33ff8466..5e53b790424 100755
--- a/src/frontend/devops-pipeline/src/views/subpages/preview.vue
+++ b/src/frontend/devops-pipeline/src/views/subpages/preview.vue
@@ -326,12 +326,19 @@
                     this.paramList = startupInfo.properties.filter(p => !p.constant && p.required && !allVersionKeyList.includes(p.id) && p.propertyType !== 'BUILD').map(p => ({
                         ...p,
                         isChanged: p.defaultValue !== p.value,
-                        readOnly: false
+                        readOnly: false,
+                        label: `${p.id}(${p.name || p.id})`
                     }))
                     this.versionParamList = startupInfo.properties.filter(p => allVersionKeyList.includes(p.id))
                     this.buildList = startupInfo.properties.filter(p => p.propertyType === 'BUILD')
-                    this.constantParams = startupInfo.properties.filter(p => p.constant)
-                    this.otherParams = startupInfo.properties.filter(p => !p.constant && !p.required && !allVersionKeyList.includes(p.id) && p.propertyType !== 'BUILD')
+                    this.constantParams = startupInfo.properties.filter(p => p.constant).map(p => ({
+                        ...p,
+                        label: `${p.id}(${p.name || p.id})`
+                    }))
+                    this.otherParams = startupInfo.properties.filter(p => !p.constant && !p.required && !allVersionKeyList.includes(p.id) && p.propertyType !== 'BUILD').map(p => ({
+                        ...p,
+                        label: `${p.id}(${p.name || p.id})`
+                    }))
                     this.getParamsValue(values)
                     this.setExecuteParams({
                         pipelineId: this.pipelineId,

From fd5d7fe768ed7b31374b2844c8025fb813fc3660 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Fri, 2 Aug 2024 10:31:30 +0800
Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F,=E5=BA=94=E8=AF=A5=E5=9C=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=97=B6=E5=B0=B1=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=90=88?=
 =?UTF-8?q?=E6=B3=95,=E8=80=8C=E4=B8=8D=E6=98=AF=E7=AD=89=E5=88=B0?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=89=8D?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20#8125?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/devops-codelib/src/views/Index.vue | 8 ++++++--
 src/frontend/locale/pipeline/en-US.json         | 1 +
 src/frontend/locale/pipeline/zh-CN.json         | 1 +
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/frontend/devops-codelib/src/views/Index.vue b/src/frontend/devops-codelib/src/views/Index.vue
index b36d5ad4df1..69f468b7b72 100755
--- a/src/frontend/devops-codelib/src/views/Index.vue
+++ b/src/frontend/devops-codelib/src/views/Index.vue
@@ -2,7 +2,10 @@
     <div class="codelib-content">
         <template v-if="hasCodelibs || aliasName.length || isLoading">
             <div id="codelib-list-content">
-                <layout :flod.sync="isListFlod" @on-flod="handleLayoutFlod">
+                <layout
+                    :flod.sync="isListFlod"
+                    @on-flod="handleLayoutFlod"
+                >
                     <template>
                         <section class="header-content">
                             <link-code-lib
@@ -19,7 +22,8 @@
                                 :create-codelib="createCodelib"
                             >
                             </link-code-lib>
-                            <bk-input :placeholder="$t('codelib.aliasNamePlaceholder')"
+                            <bk-input
+                                :placeholder="$t('codelib.aliasNamePlaceholder')"
                                 :class="{
                                     'codelib-search': true,
                                     'is-fold-search': isListFlod
diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
index 12cb60e7749..f6dde2c065c 100644
--- a/src/frontend/locale/pipeline/en-US.json
+++ b/src/frontend/locale/pipeline/en-US.json
@@ -1452,6 +1452,7 @@
   "oauth": "OAUTH Authorization",
   "refreshOauthStatus": "Refresh Authorization Status",
   "oauthPacTips": "Not yet authorized, please click the button to authorize first.<br/> After authorization, your identity will be used to submit the YAML file to the code repository. You need to have developer or higher permissions in the code repository.",
+  "withoutOauthCodelib": "The code library source supported by the current environment has not yet been connected to the PAC function, please consult us",
   "reExec": "Re-execute",
   "reDebug": "Re-debug",
   "pipelineConf": "Pipeline Configuration",
diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
index b41c05ea710..17417473d6f 100644
--- a/src/frontend/locale/pipeline/zh-CN.json
+++ b/src/frontend/locale/pipeline/zh-CN.json
@@ -1453,6 +1453,7 @@
   "oauth": "OAUTH 授权",
   "refreshOauthStatus": "刷新授权状态",
   "oauthPacTips": "尚未授权，请先点击按钮授权。<br/> 授权后，将使用你的身份提交 YAML 文件到代码库。需拥有代码库开发者及以上权限。",
+  "withoutOauthCodelib": "当前环境支持的代码库源，尚未对接 PAC 功能，请咨询",
   "reExec": "重新执行",
   "reDebug": "重新调试",
   "pipelineConf": "流水线配置",

From 2dac3153296fd659541003d82c1fb7478f2521e9 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Fri, 2 Aug 2024 15:48:40 +0800
Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F,=E5=BA=94=E8=AF=A5=E5=9C=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=97=B6=E5=B0=B1=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=90=88?=
 =?UTF-8?q?=E6=B3=95,=E8=80=8C=E4=B8=8D=E6=98=AF=E7=AD=89=E5=88=B0?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=89=8D?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20#8125?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BuildHistoryTable/FilterBar.vue           | 97 +++++++++++++------
 1 file changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue b/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue
index ef1d7214693..3fe825e8e8b 100755
--- a/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue
+++ b/src/frontend/devops-pipeline/src/components/BuildHistoryTable/FilterBar.vue
@@ -34,6 +34,12 @@
         props: {
             resetQueryCondition: Function
         },
+        data () {
+            return {
+                statusList: [],
+                triggerList: []
+            }
+        },
         computed: {
             ...mapGetters({
                 historyPageStatus: 'pipelines/getHistoryPageStatus'
@@ -50,34 +56,32 @@
                         name: this.$t('status'),
                         id: 'status',
                         multiable: true,
-                        remoteMethod: async () => {
-                            const statusList = await this.getConditionList('status')
-                            return statusList.map(item => ({
-                                name: item.value,
-                                id: item.id
-                            }))
-                        }
+                        children: this.statusList.map(item => ({
+                            id: item.id,
+                            name: item.value
+                        }))
                     },
                     {
                         name: this.$t('materialRepo'),
                         id: 'materialAlias',
-                        multiable: true,
-                        remoteMethod: async (search) => {
-                            const repoList = await this.getConditionList('repo', {
-                                type: 'MATERIAL',
-                                search
-                            })
-                            return repoList.map(item => ({
-                                name: item,
-                                id: item
-                            }))
-                        },
+                        // multiable: true,
+                        remoteMethod:
+                            async (search) => {
+                                const repoList = await this.getConditionList('repo', {
+                                    type: 'MATERIAL',
+                                    search
+                                })
+                                return repoList.map(item => ({
+                                    name: item,
+                                    id: item
+                                }))
+                            },
                         inputInclude: true
                     },
                     {
                         name: this.$t('triggerRepo'),
                         id: 'triggerAlias',
-                        multiable: true,
+                        // multiable: true,
                         remoteMethod: async (search) => {
                             const repoList = await this.getConditionList('repo', {
                                 type: 'TRIGGER',
@@ -102,21 +106,19 @@
                         name: this.$t('history.triggerType'),
                         id: 'trigger',
                         multiable: true,
-                        remoteMethod: async () => {
-                            const repoList = await this.getConditionList('trigger')
-                            return repoList.map(item => ({
-                                name: item.value,
-                                id: item.id
-                            }))
-                        }
+                        children: this.triggerList.map(item => ({
+                            id: item.id,
+                            name: item.value
+                        }))
                     },
                     {
                         name: this.$t('materialBranch'),
                         id: 'materialBranch',
-                        multiable: true,
+                        // multiable: true,
                         remoteMethod: async (search) => {
                             const repoList = await this.getConditionList('branchName', {
                                 type: 'MATERIAL',
+                                alias: this.getSearchKeyById('materialAlias'),
                                 search
                             })
                             return repoList.map(item => ({
@@ -129,10 +131,11 @@
                     {
                         name: this.$t('triggerBranch'),
                         id: 'triggerBranch',
-                        multiable: true,
+                        // multiable: true,
                         remoteMethod: async (search) => {
                             const repoList = await this.getConditionList('branchName', {
                                 type: 'TRIGGER',
+                                alias: this.getSearchKeyById('triggerAlias'),
                                 search
                             })
                             return repoList.map(item => ({
@@ -153,13 +156,30 @@
             }
         },
         created () {
-            this.handlePathQuery()
+            this.init()
         },
         methods: {
             ...mapActions('pipelines', [
                 'setHistoryPageStatus'
             ]),
-            async handlePathQuery () {
+            async init () {
+                try {
+                    const [statusList, triggerList] = await Promise.all([
+                        'status',
+                        'trigger'
+                    ].map(this.getConditionList))
+                    const conditionsMap = {
+                        status: statusList,
+                        trigger: triggerList
+                    }
+                    this.statusList = statusList
+                    this.triggerList = triggerList
+                    this.handlePathQuery(conditionsMap)
+                } catch (error) {
+                    console.error(error)
+                }
+            },
+            handlePathQuery (conditionsMap) {
                 // TODO 筛选参数目前不支持带#字符串回填
                 const { $route, historyPageStatus } = this
                 const pathQuery = $route.query
@@ -173,12 +193,17 @@
                     const newSearchKey = queryArr.map(key => {
                         const newItem = this.filterData.find(item => item.id === key)
                         if (!newItem) return null
+                        const valueMap = conditionsMap[key]?.reduce((acc, item) => {
+                                acc[item.id] = item.value
+                                return acc
+                            }, {})
+
                         newItem.values = newItem.multiable
                             ? pathQuery[key].split(',').map(v => ({
                                 id: v,
-                                name: v
+                                name: valueMap?.[v] ?? v
                             }))
-                            : [{ id: pathQuery[key], name: pathQuery[key] }]
+                            : [{ id: pathQuery[key], name: valueMap?.[pathQuery[key]] ?? pathQuery[key] }]
                         return newItem
                     }).filter(item => !!item)
 
@@ -250,6 +275,14 @@
                     searchKey
                 })
                 this.startQuery()
+            },
+            getSearchKeyById (id) {
+                try {
+                    const values = this.historyPageStatus.searchKey.find(item => item.id === id)?.values
+                    return Array.isArray(values) ? values.map(i => i.id).join(',') : ''
+                } catch (error) {
+                    return ''
+                }
             }
         }
     }

From fd7235fbda72ab12d5886e1310177716abb548db Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Mon, 5 Aug 2024 09:51:47 +0800
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F,=E5=BA=94=E8=AF=A5=E5=9C=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=97=B6=E5=B0=B1=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=90=88?=
 =?UTF-8?q?=E6=B3=95,=E8=80=8C=E4=B8=8D=E6=98=AF=E7=AD=89=E5=88=B0?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=89=8D?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20#8125?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devops-codelib/src/views/Index.vue        |   6 +-
 .../ReleasePipelineSideSlider.vue             | 233 +++++++++++++-----
 2 files changed, 182 insertions(+), 57 deletions(-)

diff --git a/src/frontend/devops-codelib/src/views/Index.vue b/src/frontend/devops-codelib/src/views/Index.vue
index 69f468b7b72..2be5646b827 100755
--- a/src/frontend/devops-codelib/src/views/Index.vue
+++ b/src/frontend/devops-codelib/src/views/Index.vue
@@ -73,7 +73,9 @@
             <bk-button
                 v-for="item in codelibTypes"
                 :key="item.scmType"
-                :disabled="item.status !== 'OK'"
+                :ext-cls="{
+                    'is-disabled': item.status !== 'OK'
+                }"
                 @click="createCodelib(item.scmType)"
             >
                 {{ $t('codelib.linkCodelibLabel', [item.name]) }}
@@ -321,7 +323,7 @@
                 const codelibType = this.codelibTypes.find(type => type.scmType === typeLabel)
                 if (codelibType?.status === 'DEPLOYING') {
                     this.showUndeployDialog({
-                        title: this.$t('codelib.codelibUndeployTitle', [typeLabel]),
+                        title: this.$t('codelib.codelibUndeployTitle', [codelibType.name]),
                         desc: this.$t(`codelib.${typeLabel.toLowerCase()}UndeployDesc`),
                         link: `${DOCS_URL_PREFIX}${codelibType.docUrl}`
                     })
diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/ReleasePipelineSideSlider.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/ReleasePipelineSideSlider.vue
index fef22043a59..dbb492b0352 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/ReleasePipelineSideSlider.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/ReleasePipelineSideSlider.vue
@@ -1,20 +1,41 @@
 <template>
-    <bk-sideslider :is-show.sync="value" :width="640" @shown="showReleaseSlider" @hidden="hideReleaseSlider"
-        ext-cls="release-pipeline-side-slider">
-        <header slot="header" :class="['release-pipeline-side-slider-header', {
-            'has-pac-tag': pacEnabled
-        }]">
+    <bk-sideslider
+        :is-show.sync="value"
+        :width="640"
+        @shown="showReleaseSlider"
+        @hidden="hideReleaseSlider"
+        ext-cls="release-pipeline-side-slider"
+    >
+        <header
+            slot="header"
+            :class="['release-pipeline-side-slider-header', {
+                'has-pac-tag': pacEnabled
+            }]"
+        >
             {{ $t("releasePipeline") }}
-            <PacTag v-if="pacEnabled" :info="pipelineInfo?.yamlInfo" />
-            <span v-bk-overflow-tips class="release-pipeline-new-version">
+            <PacTag
+                v-if="pacEnabled"
+                :info="pipelineInfo?.yamlInfo"
+            />
+            <span
+                v-bk-overflow-tips
+                class="release-pipeline-new-version"
+            >
                 {{ $t("releasePipelineVersion",[newReleaseVersionName]) }}
             </span>
             <span v-bk-overflow-tips>
                 {{ $t("releasePipelineBaseVersion", [draftBaseVersionName]) }}
             </span>
         </header>
-        <section slot="content" v-bkloading="{ isLoading: isLoading || releasing }" class="release-pipeline-pac-form">
-            <div v-if="!pacEnabled" class="release-pipeline-pac-conf">
+        <section
+            slot="content"
+            v-bkloading="{ isLoading: isLoading || releasing }"
+            class="release-pipeline-pac-form"
+        >
+            <div
+                v-if="!pacEnabled"
+                class="release-pipeline-pac-conf"
+            >
                 <aside class="release-pipeline-pac-conf-leftside">
                     <label for="enablePac">
                         {{ $t("pacMode") }}
@@ -32,36 +53,64 @@
                         @change="handlePacEnableChange"
                     />
                 </aside>
-                <aside v-if="releaseParams.enablePac" class="release-pipeline-pac-conf-rightside">
+                <aside
+                    v-if="releaseParams.enablePac && hasPacSupportScmTypeList"
+                    class="release-pipeline-pac-conf-rightside"
+                >
                     <label for="enablePac">
                         {{ $t("codelibSrc") }}
                     </label>
                     <bk-radio-group v-model="releaseParams.scmType">
-                        <bk-radio v-for="item in pacSupportScmTypeList" :key="item.id" :value="item.id">
+                        <bk-radio
+                            v-for="item in pacSupportScmTypeList"
+                            :key="item.id"
+                            :value="item.id"
+                        >
                             {{ $t(item.value) }}
                         </bk-radio>
                     </bk-radio-group>
                 </aside>
             </div>
-            <bk-form v-if="!releaseParams.enablePac || (releaseParams.enablePac && hasOauth)" label-width="auto"
-                form-type="vertical" :model="releaseParams" :rules="rules" ref="releaseForm"
-                class="release-pipeline-pac-setting" error-display-type="normal">
+            <bk-form
+                v-if="!releaseParams.enablePac || (releaseParams.enablePac && hasOauth)"
+                label-width="auto"
+                form-type="vertical"
+                :model="releaseParams"
+                :rules="rules"
+                ref="releaseForm"
+                class="release-pipeline-pac-setting"
+                error-display-type="normal"
+            >
                 <div v-if="releaseParams.enablePac && hasOauth">
-                    <header @click="togglePacCodelibSettingForm" class="release-pac-pipeline-form-header">
+                    <header
+                        @click="togglePacCodelibSettingForm"
+                        class="release-pac-pipeline-form-header"
+                    >
                         {{ $t("codelibSetting") }}
-                        <i :class="[
-                            'devops-icon icon-angle-right',
-                            {
-                                'pac-codelib-form-show': showPacCodelibSetting
-                            }
-                        ]" />
+                        <i
+                            :class="[
+                                'devops-icon icon-angle-right',
+                                {
+                                    'pac-codelib-form-show': showPacCodelibSetting
+                                }
+                            ]"
+                        />
                     </header>
                     <section v-show="showPacCodelibSetting">
-                        <label class="yaml-info-codelib-label" for="yamlCodelib">
+                        <label
+                            class="yaml-info-codelib-label"
+                            for="yamlCodelib"
+                        >
                             {{ $t("yamlCodeLib") }}
-                            <i class="devops-icon icon-info-circle-shape" v-bk-tooltips="$t('yamlCodeLibDesc')" />
+                            <i
+                                class="devops-icon icon-info-circle-shape"
+                                v-bk-tooltips="$t('yamlCodeLibDesc')"
+                            />
                         </label>
-                        <bk-form-item required property="repoHashId">
+                        <bk-form-item
+                            required
+                            property="repoHashId"
+                        >
                             <bk-select
                                 id="yamlCodelib"
                                 :disabled="pacEnabled"
@@ -77,31 +126,64 @@
                                 @toggle="refreshPacEnableCodelibList"
                             >
                                 <template v-if="pacEnableCodelibList.length">
-                                    <bk-option v-for="option in pacEnableCodelibList" :key="option.repositoryHashId"
-                                        :id="option.repositoryHashId" :name="option.aliasName">
+                                    <bk-option
+                                        v-for="option in pacEnableCodelibList"
+                                        :key="option.repositoryHashId"
+                                        :id="option.repositoryHashId"
+                                        :name="option.aliasName"
+                                    >
                                     </bk-option>
                                 </template>
-                                <bk-loading is-loading mode="spin" size="small" v-else-if="isInitPacRepo">
+                                <bk-loading
+                                    is-loading
+                                    mode="spin"
+                                    size="small"
+                                    v-else-if="isInitPacRepo"
+                                >
                                 </bk-loading>
-                                <bk-exception v-else scene="part" type="empty">
+                                <bk-exception
+                                    v-else
+                                    scene="part"
+                                    type="empty"
+                                >
                                     <span class="no-pac-enable-codelib-yet">
                                         {{ $t("noPacEnableCodelibYet") }}
                                     </span>
                                 </bk-exception>
-                                <p class="enable-pac-codelib-link" slot="extension" @click="goCodelib">
+                                <p
+                                    class="enable-pac-codelib-link"
+                                    slot="extension"
+                                    @click="goCodelib"
+                                >
                                     <i class="devops-icon icon-jump-link" />
                                     {{ $t("goCodelibsEnablePac") }}
                                 </p>
                             </bk-select>
                         </bk-form-item>
-                        <label class="yaml-info-codelib-label" for="yamlFilePath">
+                        <label
+                            class="yaml-info-codelib-label"
+                            for="yamlFilePath"
+                        >
                             {{ $t("yamlDir") }}
-                            <i class="devops-icon icon-info-circle-shape" v-bk-tooltips="$t('yamlDirDesc')" />
+                            <i
+                                class="devops-icon icon-info-circle-shape"
+                                v-bk-tooltips="$t('yamlDirDesc')"
+                            />
                         </label>
-                        <bk-form-item required property="filePath">
-                            <bk-input :disabled="pacEnabled" v-model="releaseParams.filePath" id="yamlFilePath"
-                                :placeholder="$t('yamlFilePathPlaceholder')">
-                                <span class="group-text" slot="prepend">{{ filePathDir }}</span>
+                        <bk-form-item
+                            required
+                            property="filePath"
+                        >
+                            <bk-input
+                                :disabled="pacEnabled"
+                                v-model="releaseParams.filePath"
+                                id="yamlFilePath"
+                                :placeholder="$t('yamlFilePathPlaceholder')"
+                            >
+                                <span
+                                    class="group-text"
+                                    slot="prepend"
+                                >{{ filePathDir }}</span>
                             </bk-input>
                         </bk-form-item>
                     </section>
@@ -111,7 +193,11 @@
                         {{ $t("submitSetting") }}
                     </header>
 
-                    <bk-form-item required :label="$t('versionDesc')" property="description">
+                    <bk-form-item
+                        required
+                        :label="$t('versionDesc')"
+                        property="description"
+                    >
                         <bk-input
                             type="textarea"
                             maxlength="512"
@@ -121,8 +207,12 @@
                                     ? 'commitMsgPlaceholder'
                                     : 'versionDescPlaceholder'
                             )
-                            " />
-                        <span v-if="releaseParams.enablePac" class="release-pac-version-desc">
+                            "
+                        />
+                        <span
+                            v-if="releaseParams.enablePac"
+                            class="release-pac-version-desc"
+                        >
                             {{ $t("commitMsgDesc") }}
                         </span>
                     </bk-form-item>
@@ -150,33 +240,63 @@
                 class="pac-oauth-enable"
                 v-bkloading="{ isLoading: refreshing }"
             >
-                <header>
-                    <bk-button :loading="oauthing" :disabled="oauthing" theme="primary" size="large"
-                        @click="requestOauth">
+                <header v-if="hasPacSupportScmTypeList">
+                    <bk-button
+                        :loading="oauthing"
+                        :disabled="oauthing"
+                        theme="primary"
+                        size="large"
+                        @click="requestOauth"
+                    >
                         {{ $t("oauth") }}
                     </bk-button>
-                    <span :class="[
-                        'text-link',
-                        {
-                            disabled: refreshing
-                        }
-                    ]" @click="refreshOatuStatus">
+                    <span
+                        :class="[
+                            'text-link',
+                            {
+                                disabled: refreshing
+                            }
+                        ]"
+                        @click="refreshOatuStatus"
+                    >
                         <i class="devops-icon icon-refresh" />
                         {{ $t("refreshOauthStatus") }}
                     </span>
                 </header>
-                <p class="pac-oauth-tips" v-html="$t('oauthPacTips')"></p>
+                <p
+                    class="pac-oauth-tips"
+                    v-html="$t(hasPacSupportScmTypeList ? 'oauthPacTips' : 'withoutOauthCodelib')"
+                ></p>
             </div>
         </section>
-        <footer v-if="!releaseParams.enablePac || hasOauth" slot="footer" class="release-pipeline-pac-footer">
-            <bk-button theme="primary" :loading="releasing" :disabled="releasing" @click="releasePipeline">
+        <footer
+            v-if="!releaseParams.enablePac || hasOauth"
+            slot="footer"
+            class="release-pipeline-pac-footer"
+        >
+            <bk-button
+                theme="primary"
+                :loading="releasing"
+                :disabled="releasing"
+                @click="releasePipeline"
+            >
                 {{ $t("release") }}
             </bk-button>
-            <version-diff-entry v-if="releaseParams.enablePac" :text="false" theme="" :disabled="releasing"
-                :can-switch-version="false" :version="pipelineInfo?.releaseVersion" :latest-version="version">
+            <version-diff-entry
+                v-if="releaseParams.enablePac"
+                :text="false"
+                theme=""
+                :disabled="releasing"
+                :can-switch-version="false"
+                :version="pipelineInfo?.releaseVersion"
+                :latest-version="version"
+            >
                 {{ $t("checkDiff") }}
             </version-diff-entry>
-            <bk-button :disabled="releasing" @click="cancelRelease">
+            <bk-button
+                :disabled="releasing"
+                @click="cancelRelease"
+            >
                 {{ $t("cancelRelease") }}
             </bk-button>
         </footer>
@@ -307,6 +427,9 @@
                         ? 'PUSH_BRANCH_AND_REQUEST_MERGE'
                         : 'CHECKOUT_BRANCH_AND_REQUEST_MERGE'
                 ]
+            },
+            hasPacSupportScmTypeList () {
+                return this.pacSupportScmTypeList?.length > 0
             }
         },
         watch: {
@@ -386,10 +509,10 @@
                         })
                     ])
 
-                    this.releaseParams.scmType = this.pacSupportScmTypeList[0]?.id
                     const newReleaseVersion = results[enablePac ? 1 : 0]
                     this.newReleaseVersionName = newReleaseVersion?.newVersionName || '--'
-                    if (enablePac) {
+                    if (enablePac && this.hasPacSupportScmTypeList) {
+                        this.releaseParams.scmType = this.pacSupportScmTypeList[0]?.id
                         this.$nextTick(() => {
                             this.fetchPacEnableCodelibList(true)
                             if (this.isDraftBaseBranchVersion) {

From feceed5cbf628cca747d6ae4405f2b8b028d0eba Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Mon, 5 Aug 2024 17:02:20 +0800
Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F,=E5=BA=94=E8=AF=A5=E5=9C=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=97=B6=E5=B0=B1=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=90=88?=
 =?UTF-8?q?=E6=B3=95,=E8=80=8C=E4=B8=8D=E6=98=AF=E7=AD=89=E5=88=B0?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=89=8D?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20#8125?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/devops-pipeline/webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/devops-pipeline/webpack.config.js b/src/frontend/devops-pipeline/webpack.config.js
index f27e459d4e3..ae3c0b266f9 100755
--- a/src/frontend/devops-pipeline/webpack.config.js
+++ b/src/frontend/devops-pipeline/webpack.config.js
@@ -42,6 +42,7 @@ module.exports = (env, argv) => {
         new MonacoWebpackPlugin({
             publicPath: '/pipeline',
             languages: ['yaml'],
+            filename: '[name].[contenthash].worker.js',
             customLanguages: [
                 {
                     label: 'yaml',

From 6d22fad9ab8faa2d47b4d4d3c80ee61dc01b71d9 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Mon, 5 Aug 2024 20:28:18 +0800
Subject: [PATCH 07/13] =?UTF-8?q?Bug:=20=E6=B5=81=E6=B0=B4=E7=BA=BF?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E5=A4=8D=E5=88=B6=E7=9B=B8=E5=BA=94=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=E7=9A=84=E5=8F=82=E6=95=B0=E5=80=BC=20issue=20#10580?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PipelineHeader/MoreActions.vue   |  4 ++--
 .../src/mixins/pipeline-action-mixin.js             |  4 ++--
 .../devops-pipeline/src/views/template/instance.vue |  5 +++--
 .../src/views/template/instance_create.vue          | 13 +++++--------
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
index 871ec0b15d2..d9b6c50df37 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
@@ -293,8 +293,8 @@
             },
             copyAsTemplateInstance (pipeline) {
                 const pipelineName = (pipeline.pipelineName + '_copy').substring(0, 128)
-                const { templateId, projectId, templateVersion } = pipeline
-                window.top.location.href = `${location.origin}/console/pipeline/${projectId}/template/${templateId}/createInstance/${templateVersion}/${pipelineName}`
+                const { templateId, pipelineId, projectId, templateVersion } = pipeline
+                window.top.location.href = `${location.origin}/console/pipeline/${projectId}/template/${templateId}/createInstance/${templateVersion}/${pipelineName}?pipelineId=${pipelineId}`
             },
             afterRemovePipeline () {
                 this.$router.push({
diff --git a/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js b/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js
index eb36d91fccb..b3b548b234a 100644
--- a/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js
+++ b/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js
@@ -492,8 +492,8 @@ export default {
         },
         copyAsTemplateInstance (pipeline) {
             const pipelineName = (pipeline.pipelineName + '_copy').substring(0, 128)
-            const { templateId, projectId, version } = pipeline
-            window.top.location.href = `${location.origin}/console/pipeline/${projectId}/template/${templateId}/createInstance/${version}/${pipelineName}`
+            const { templateId, pipelineId, projectId, version } = pipeline
+            window.top.location.href = `${location.origin}/console/pipeline/${projectId}/template/${templateId}/createInstance/${version}/${pipelineName}?pipelineId=${pipelineId}`
         }
     }
 }
diff --git a/src/frontend/devops-pipeline/src/views/template/instance.vue b/src/frontend/devops-pipeline/src/views/template/instance.vue
index f0acb5b58f1..554ec5de4ab 100755
--- a/src/frontend/devops-pipeline/src/views/template/instance.vue
+++ b/src/frontend/devops-pipeline/src/views/template/instance.vue
@@ -517,10 +517,11 @@
                 const route = {
                     name: 'createInstance',
                     params: {
-                        projectId: this.projectId,
-                        pipelineId: this.pipelineId,
                         curVersionId: this.currentVersionId,
                         pipelineName: (row.pipelineName + '_copy').substring(0, 128)
+                    },
+                    query: {
+                        pipelineId: row.pipelineId
                     }
                 }
                 this.$router.push(route)
diff --git a/src/frontend/devops-pipeline/src/views/template/instance_create.vue b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
index 3269949c298..0bf4f0b40d0 100755
--- a/src/frontend/devops-pipeline/src/views/template/instance_create.vue
+++ b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
@@ -258,6 +258,8 @@
                     const hashVal = this.$route.hash.substr(1, this.$route.hash.length)
                     const pipeline = hashVal.split('&')
                     return pipeline
+                } else if (this.$route.query.pipelineId) {
+                    return [this.$route.query.pipelineId]
                 }
                 return ''
             }
@@ -309,13 +311,6 @@
             },
             async requestPipelineParams (pipeline, versionId) {
                 const { $store, loading } = this
-                const params = []
-
-                pipeline.forEach(item => {
-                    params.push({
-                        id: item
-                    })
-                })
 
                 loading.isLoading = true
 
@@ -324,7 +319,9 @@
                         projectId: this.projectId,
                         templateId: this.templateId,
                         versionId: versionId,
-                        params
+                        params: pipeline.map(id => ({
+                            id
+                        }))
                     })
                     this.handlePipelineParams(res)
                 } catch (err) {

From 8ca37cb93985c0cd3425b298395935d46a74743e Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Mon, 5 Aug 2024 20:48:25 +0800
Subject: [PATCH 08/13] =?UTF-8?q?Bug:=20=E6=B5=81=E6=B0=B4=E7=BA=BF?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E5=A4=8D=E5=88=B6=E7=9B=B8=E5=BA=94=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=E7=9A=84=E5=8F=82=E6=95=B0=E5=80=BC=20issue=20#10580?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PipelineHeader/MoreActions.vue | 26 ++++++++++++-------
 .../src/mixins/pipeline-action-mixin.js       |  3 ++-
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
index d9b6c50df37..7042c9ff914 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
@@ -166,11 +166,15 @@
                                 {
                                     label: 'copyAsTemplateInstance',
                                     handler: () => this.copyAsTemplateInstance(pipeline),
-                                    permissionData: {
-                                        projectId,
-                                        resourceType: 'project',
-                                        resourceCode: projectId,
-                                        action: RESOURCE_ACTION.CREATE
+                                    vPerm: {
+                                        hasPermission: pipeline.permissions?.canCreate,
+                                        disablePermissionApi: true,
+                                        permissionData: {
+                                            projectId,
+                                            resourceType: 'project',
+                                            resourceCode: projectId,
+                                            action: RESOURCE_ACTION.CREATE
+                                        }
                                     }
                                 }
                             ]
@@ -192,11 +196,13 @@
                         {
                             label: 'newlist.saveAsTemp',
                             handler: () => this.saveAsTempHandler(pipeline),
-                            permissionData: {
-                                projectId,
-                                resourceType: 'project',
-                                resourceCode: projectId,
-                                action: TEMPLATE_RESOURCE_ACTION.CREATE
+                            vPerm: {
+                                permissionData: {
+                                    projectId,
+                                    resourceType: 'project',
+                                    resourceCode: projectId,
+                                    action: TEMPLATE_RESOURCE_ACTION.CREATE
+                                }
                             }
                         },
                         {
diff --git a/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js b/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js
index b3b548b234a..e18f6012833 100644
--- a/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js
+++ b/src/frontend/devops-pipeline/src/mixins/pipeline-action-mixin.js
@@ -187,6 +187,7 @@ export default {
                 }
                 : {}
             const isDynamicGroup = this.currentGroup?.viewType === 1
+
             return [
                 {
                     text: this.$t(pipeline.lock ? 'enable' : 'disable'),
@@ -208,7 +209,7 @@ export default {
                     ? [{
                         text: this.$t('copyAsTemplateInstance'),
                         handler: () => this.copyAsTemplateInstance(pipeline),
-                        hasPermission: pipeline.permissions.canCreate,
+                        hasPermission: pipeline.permissions.canManage,
                         disablePermissionApi: true,
                         permissionData: {
                             projectId: pipeline.projectId,

From d212fec1777e6e65a2055938805df8df58494384 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Mon, 5 Aug 2024 20:52:13 +0800
Subject: [PATCH 09/13] =?UTF-8?q?Bug:=20=E6=B5=81=E6=B0=B4=E7=BA=BF?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E5=A4=8D=E5=88=B6=E7=9B=B8=E5=BA=94=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=E7=9A=84=E5=8F=82=E6=95=B0=E5=80=BC=20issue=20#10580?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PipelineHeader/MoreActions.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
index 7042c9ff914..ed80fdcdcf7 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/MoreActions.vue
@@ -167,7 +167,7 @@
                                     label: 'copyAsTemplateInstance',
                                     handler: () => this.copyAsTemplateInstance(pipeline),
                                     vPerm: {
-                                        hasPermission: pipeline.permissions?.canCreate,
+                                        hasPermission: pipeline.permissions?.canManage,
                                         disablePermissionApi: true,
                                         permissionData: {
                                             projectId,

From 8121c95a2e39c90eeaf9b7fc0fa9d8c1cb823190 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Tue, 6 Aug 2024 11:39:27 +0800
Subject: [PATCH 10/13] =?UTF-8?q?Bug:=20=E6=B5=81=E6=B0=B4=E7=BA=BF?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E5=A4=8D=E5=88=B6=E7=9B=B8=E5=BA=94=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=E7=9A=84=E5=8F=82=E6=95=B0=E5=80=BC=20issue=20#10580?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/template/instance_create.vue    | 76 +++++++++----------
 1 file changed, 35 insertions(+), 41 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/views/template/instance_create.vue b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
index 0bf4f0b40d0..ea7ea8952e0 100755
--- a/src/frontend/devops-pipeline/src/views/template/instance_create.vue
+++ b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
@@ -92,13 +92,13 @@
                                     />
                                     <i
                                         class="delete-btn"
-                                        v-if="!hashVal"
+                                        v-if="!hashVal && !isCopyInstance"
                                         @click="deletePipelineName(index)"
                                         v-bk-tooltips="$t('delete')"
                                     />
                                 </div>
                             </div>
-                            <div class="pipeline-item add-item" @click="addPipelineName" v-if="!hashVal">
+                            <div class="pipeline-item add-item" @click="addPipelineName" v-if="!hashVal && !isCopyInstance">
                                 <i class="plus-icon"></i>
                                 <span>{{ $t('template.addPipelineInstance') }}</span>
                             </div>
@@ -247,9 +247,6 @@
             curVersionId () {
                 return this.$route.params.curVersionId
             },
-            pipelineName () {
-                return this.$route.params.pipelineName
-            },
             type () {
                 return this.$route.params.type
             },
@@ -258,18 +255,21 @@
                     const hashVal = this.$route.hash.substr(1, this.$route.hash.length)
                     const pipeline = hashVal.split('&')
                     return pipeline
-                } else if (this.$route.query.pipelineId) {
-                    return [this.$route.query.pipelineId]
                 }
                 return ''
+            },
+            copyPipelineName () {
+                return this.$route.params.pipelineName
+            },
+            queryPipelineId () {
+                return this.$route.query?.pipelineId ?? ''
+            },
+            isCopyInstance () {
+                return !!(this.copyPipelineName && this.queryPipelineId)
             }
         },
         async mounted () {
             this.requestTemplateDatail(this.curVersionId)
-            this.handlePipeLineName()
-            if (this.hashVal) {
-                this.requestPipelineParams(this.hashVal, this.curVersionId)
-            }
             if (this.$route.query.useTemplateSettings === 'true') {
                 this.isTemplateSetting = true
             }
@@ -298,7 +298,11 @@
                     this.template.creator = res.creator
                     this.template.description = res.description
                     this.versionList = res.versions
-                    this.handleParams(res.template.stages)
+                    if (this.hashVal || this.isCopyInstance) {
+                        await this.requestPipelineParams(versionId)
+                    } else {
+                        this.handleParams(res.template.stages)
+                    }
                 } catch (err) {
                     this.$showTips({
                         message: err.message || err,
@@ -309,9 +313,9 @@
                     this.showContent = true
                 }
             },
-            async requestPipelineParams (pipeline, versionId) {
+            async requestPipelineParams (versionId) {
                 const { $store, loading } = this
-
+                const pipelines = this.isCopyInstance ? [this.queryPipelineId] : this.hashVal
                 loading.isLoading = true
 
                 try {
@@ -319,11 +323,11 @@
                         projectId: this.projectId,
                         templateId: this.templateId,
                         versionId: versionId,
-                        params: pipeline.map(id => ({
+                        params: pipelines.map(id => ({
                             id
                         }))
                     })
-                    this.handlePipelineParams(res)
+                    this.handlePipelineParams(pipelines, res)
                 } catch (err) {
                     this.$showTips({
                         message: err.message || err,
@@ -350,7 +354,7 @@
                     this.buildParams = {}
                 }
 
-                if (!this.hashVal) {
+                if (!this.hashVal && !this.isCopyInstance) {
                     this.pipelineNameList.forEach(item => {
                         item.params = this.deepCopyParams(this.paramList)
                         item.pipelineParams = item.params.filter(item => this.buildNoParams.indexOf(item.id) === -1)
@@ -361,37 +365,28 @@
                 }
             },
 
-            /**
-             * 初次进来的时候，如果有需要实例化流水线的名字，就带上
-             */
-            handlePipeLineName () {
-                const params = this.$route.params || {}
-                const name = params.pipelineName
-                if (name) this.confirmHandler(name)
-            },
-
-            handlePipelineParams (data) {
-                this.pipelineNameList.splice(0, this.pipelineNameList.length)
-                this.hashVal.forEach((item, index) => {
+            handlePipelineParams (pipelines, data) {
+                this.pipelineNameList = pipelines.map((id, index) => {
+                    const item = data[id]
                     const pipelineItem = {
-                        pipelineId: data[item].pipelineId,
-                        pipelineName: data[item].pipelineName,
+                        pipelineId: id,
+                        pipelineName: id === this.queryPipelineId ? this.copyPipelineName : item.pipelineName,
                         selected: index === 0
                     }
-                    if (data[item].buildNo) {
-                        pipelineItem.buildParams = data[item].buildNo
+                    if (item.buildNo) {
+                        pipelineItem.buildParams = item.buildNo
                     }
-                    if (data[item].param.length) {
-                        const paramValues = data[item].param.reduce((values, param) => {
+                    if (item.param.length) {
+                        const paramValues = item.param.reduce((values, param) => {
                             values[param.id] = param.defaultValue
                             return values
                         }, {})
-                        pipelineItem.params = this.deepCopyParams(data[item].param)
-                        pipelineItem.pipelineParams = pipelineItem.params.filter(item => this.buildNoParams.indexOf(item.id) === -1)
-                        pipelineItem.versionParams = pipelineItem.params.filter(item => this.buildNoParams.indexOf(item.id) > -1)
+                        pipelineItem.params = this.deepCopyParams(item.param)
+                        pipelineItem.pipelineParams = pipelineItem.params.filter(sub => this.buildNoParams.indexOf(sub.id) === -1)
+                        pipelineItem.versionParams = pipelineItem.params.filter(sub => this.buildNoParams.indexOf(sub.id) > -1)
                         pipelineItem.paramValues = paramValues
                     }
-                    this.pipelineNameList.push(pipelineItem)
+                    return pipelineItem
                 })
                 this.currentPipelineParams = this.pipelineNameList[0]
             },
@@ -409,8 +404,7 @@
                 this.$router.push(route)
             },
             changeVersion (newVal) {
-                this.requestTemplateDatail(newVal)
-                if (this.hashVal && newVal) this.requestPipelineParams(this.hashVal, newVal)
+                newVal && this.requestTemplateDatail(newVal)
             },
             addPipelineName () {
                 this.pipelineNameList.forEach(pipeline => {

From a66b64ee50299439e90a5452e78f7c58b4f42715 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Tue, 6 Aug 2024 15:19:05 +0800
Subject: [PATCH 11/13] =?UTF-8?q?bug:=20=E3=80=90=E6=B5=81=E6=B0=B4?=
 =?UTF-8?q?=E7=BA=BF=E6=A8=A1=E6=9D=BF=E3=80=91=E6=A8=A1=E6=9D=BF=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=E7=9A=84=E5=9B=9E=E6=BB=9A=E5=8A=9F=E8=83=BD=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E8=B7=B3=E8=BD=AC=E5=88=B0=E6=A8=A1=E6=9D=BF=EF=BC=8C?=
 =?UTF-8?q?=E5=90=A6=E5=88=99=E4=BC=9A=E5=BC=95=E5=8F=91=E5=87=BAbug=20#81?=
 =?UTF-8?q?25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PipelineDetailTabs/RollbackEntry.vue      | 20 ++++++++++++++++++-
 .../PipelineHeader/HistoryHeader.vue          |  5 ++++-
 .../src/components/StageSteps/index.vue       |  6 +++---
 .../src/views/template/instance_create.vue    | 11 +++++++++-
 src/frontend/locale/pipeline/en-US.json       |  3 ++-
 src/frontend/locale/pipeline/zh-CN.json       |  3 ++-
 6 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue
index 108ed84a693..2ffe2aab412 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue
@@ -125,6 +125,9 @@
             },
             draftHintTitle () {
                 return this.hasDraftPipeline ? this.$t('hasDraftTips', [this.draftBaseVersionName]) : this.$t('createDraftTips', [this.versionName])
+            },
+            isTemplatePipeline () {
+                return this.pipelineInfo?.instanceFromTemplate ?? false
             }
         },
         methods: {
@@ -132,7 +135,22 @@
                 'rollbackPipelineVersion'
             ]),
             handleClick () {
-                if (this.isRollback) {
+                if (this.isTemplatePipeline) {
+                    this.$bkInfo({
+                        subTitle: this.$t('templateRollbackBackTips'),
+                        confirmFn: () => {
+                            this.$router.push({
+                                name: 'createInstance',
+                                params: {
+                                    projectId: this.projectId,
+                                    templateId: this.pipelineInfo?.templateId,
+                                    curVersionId: this.pipelineInfo?.templateVersion
+                                },
+                                hash: `#${this.pipelineId}`
+                            })
+                        }
+                    })
+                } else if (this.isRollback) {
                     this.showDraftConfirmDialog()
                 } else {
                     this.goEdit(this.draftVersion ?? this.version)
diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/HistoryHeader.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/HistoryHeader.vue
index 51334f25fcc..9392c2199c2 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/HistoryHeader.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/HistoryHeader.vue
@@ -37,7 +37,7 @@
         </div>
         <aside v-show="!(isSwitchPipeline || switchingVersion)" class="pipeline-history-right-aside">
             <VersionDiffEntry
-                v-if="!isReleaseVersion"
+                v-if="!isTemplatePipeline && !isReleaseVersion"
                 :text="false"
                 outline
                 :version="currentVersion"
@@ -166,6 +166,9 @@
             currentVersion () {
                 return this.$route.params.version ? parseInt(this.$route.params.version) : this.releaseVersion
             },
+            isTemplatePipeline () {
+                return this.pipelineInfo?.instanceFromTemplate ?? false
+            },
             releaseVersion () {
                 return this.pipelineInfo?.releaseVersion
             },
diff --git a/src/frontend/devops-pipeline/src/components/StageSteps/index.vue b/src/frontend/devops-pipeline/src/components/StageSteps/index.vue
index ecffe75b23e..95f6742685e 100644
--- a/src/frontend/devops-pipeline/src/components/StageSteps/index.vue
+++ b/src/frontend/devops-pipeline/src/components/StageSteps/index.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="stage-steps">
         <template v-for="step in steps">
-            <span v-if="step.tooltip" v-bk-tooltips="step.tooltip" :class="`stage-step ${step.statusCls}`" :key="step.icon">
+            <span v-if="step.tooltip" v-bk-tooltips="step.tooltip" :class="`stage-step ${step.statusCls}`" :key="step.stageId">
                 <logo :class="`step-icon ${step.statusCls} ${getRunningCls(step.statusCls)}`" :name="step.icon" size="16" />
             </span>
-            <span v-else-if="step.status === 'RUNNING'" v-bk-tooltips="progressTooltips" :data-stageId="step.stageId" :class="`stage-step ${step.statusCls}`" :key="step.icon">
+            <span v-else-if="step.status === 'RUNNING'" v-bk-tooltips="progressTooltips" :data-stageId="step.stageId" :class="`stage-step ${step.statusCls}`" :key="step.stageId">
                 <logo :class="`step-icon ${step.statusCls} ${getRunningCls(step.statusCls)}`" :name="step.icon" size="16" />
             </span>
-            <span v-else :class="`stage-step ${step.statusCls}`" :key="step.icon">
+            <span v-else :class="`stage-step ${step.statusCls}`" :key="step.stageId">
                 <logo :class="`step-icon ${step.statusCls} ${getRunningCls(step.statusCls)}`" :name="step.icon" size="16" />
             </span>
         </template>
diff --git a/src/frontend/devops-pipeline/src/views/template/instance_create.vue b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
index ea7ea8952e0..13db5ba2cae 100755
--- a/src/frontend/devops-pipeline/src/views/template/instance_create.vue
+++ b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
@@ -404,7 +404,16 @@
                 this.$router.push(route)
             },
             changeVersion (newVal) {
-                newVal && this.requestTemplateDatail(newVal)
+                if (newVal && newVal !== this.curVersionId) {
+                    this.$router.push({
+                        ...this.$route,
+                        params: {
+                            ...this.$route.params,
+                            curVersionId: newVal
+                        }
+                    })
+                    this.requestTemplateDatail(newVal)
+                }
             },
             addPipelineName () {
                 this.pipelineNameList.forEach(pipeline => {
diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
index f6dde2c065c..61b07b6cb5c 100644
--- a/src/frontend/locale/pipeline/en-US.json
+++ b/src/frontend/locale/pipeline/en-US.json
@@ -1549,5 +1549,6 @@
   "runningSteps": "Running steps: ",
   "completeness": "Completeness: ",
   "pacDesc": "Pipeline as Code mode, referred to as PAC mode. After enabling and submitting the pipeline file to the code base, you can maintain the pipeline by maintaining the code base file.",
-  "debugHint": "Debugging and execution do not share build numbers, but they share concurrency control. Debug records are only valid during the draft version debugging period and will be automatically cleared after the version is released."
+  "debugHint": "Debugging and execution do not share build numbers, but they share concurrency control. Debug records are only valid during the draft version debugging period and will be automatically cleared after the version is released.",
+  "templateRollbackBackTips": "The current pipeline is in constraint mode (template instance). You need to jump to the template to roll back the version."
 }
diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
index 17417473d6f..e3bc9eda543 100644
--- a/src/frontend/locale/pipeline/zh-CN.json
+++ b/src/frontend/locale/pipeline/zh-CN.json
@@ -1550,5 +1550,6 @@
   "runningSteps": "正在运行的步骤：",
   "completeness": "完成度：",
   "pacDesc": "Pipeline as Code 模式，简称 PAC 模式。开启并将流水线文件提交到代码库后，可通过维护代码库文件的方式来维护流水线。",
-  "debugHint": "调试和执行不共享构建号，但共享并发控制。调试记录仅在草稿版本调试期间有效，版本发布后将自动清理。"
+  "debugHint": "调试和执行不共享构建号，但共享并发控制。调试记录仅在草稿版本调试期间有效，版本发布后将自动清理。",
+  "templateRollbackBackTips": "当前流水线为约束模式（模板实例），需要跳转到模板进行版本回滚。"
 }
\ No newline at end of file

From db821fcd35fdcd7d25ffe5e9390806710df4b1c2 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Tue, 6 Aug 2024 15:52:51 +0800
Subject: [PATCH 12/13] =?UTF-8?q?bug:=20=E3=80=90=E6=B5=81=E6=B0=B4?=
 =?UTF-8?q?=E7=BA=BF=E6=A8=A1=E6=9D=BF=E3=80=91=E6=A8=A1=E6=9D=BF=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=E7=9A=84=E5=9B=9E=E6=BB=9A=E5=8A=9F=E8=83=BD=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E8=B7=B3=E8=BD=AC=E5=88=B0=E6=A8=A1=E6=9D=BF=EF=BC=8C?=
 =?UTF-8?q?=E5=90=A6=E5=88=99=E4=BC=9A=E5=BC=95=E5=8F=91=E5=87=BAbug=20#81?=
 =?UTF-8?q?25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PipelineDetailTabs/RollbackEntry.vue      | 36 ++++++++++---------
 .../ImportPipelinePopup/index.vue             |  1 +
 .../src/views/subpages/edit.vue               |  2 +-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue
index 2ffe2aab412..7af11652d20 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/RollbackEntry.vue
@@ -135,23 +135,25 @@
                 'rollbackPipelineVersion'
             ]),
             handleClick () {
-                if (this.isTemplatePipeline) {
-                    this.$bkInfo({
-                        subTitle: this.$t('templateRollbackBackTips'),
-                        confirmFn: () => {
-                            this.$router.push({
-                                name: 'createInstance',
-                                params: {
-                                    projectId: this.projectId,
-                                    templateId: this.pipelineInfo?.templateId,
-                                    curVersionId: this.pipelineInfo?.templateVersion
-                                },
-                                hash: `#${this.pipelineId}`
-                            })
-                        }
-                    })
-                } else if (this.isRollback) {
-                    this.showDraftConfirmDialog()
+                if (this.isRollback) {
+                    if (this.isTemplatePipeline) {
+                        this.$bkInfo({
+                            subTitle: this.$t('templateRollbackBackTips'),
+                            confirmFn: () => {
+                                this.$router.push({
+                                    name: 'createInstance',
+                                    params: {
+                                        projectId: this.projectId,
+                                        templateId: this.pipelineInfo?.templateId,
+                                        curVersionId: this.pipelineInfo?.templateVersion
+                                    },
+                                    hash: `#${this.pipelineId}`
+                                })
+                            }
+                        })
+                    } else {
+                        this.showDraftConfirmDialog()
+                    }
                 } else {
                     this.goEdit(this.draftVersion ?? this.version)
                 }
diff --git a/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue b/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
index d730e391200..e05a5b08500 100644
--- a/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
+++ b/src/frontend/devops-pipeline/src/components/pipelineList/ImportPipelinePopup/index.vue
@@ -126,6 +126,7 @@
             async updatePipeline (result, newPipelineName) {
                 const pipeline = {
                     ...result.model,
+                    instanceFromTemplate: false,
                     name: newPipelineName
                 }
                 try {
diff --git a/src/frontend/devops-pipeline/src/views/subpages/edit.vue b/src/frontend/devops-pipeline/src/views/subpages/edit.vue
index 1e634114e3f..5aca62ec60f 100755
--- a/src/frontend/devops-pipeline/src/views/subpages/edit.vue
+++ b/src/frontend/devops-pipeline/src/views/subpages/edit.vue
@@ -140,7 +140,7 @@
                         label: this.$t('settings.trigger'),
                         component: 'TriggerTab',
                         bindData: {
-                            editable: !this.pipeline?.instanceFromTemplate,
+                            editable: !this.isTemplatePipeline,
                             pipeline: this.pipeline
                         }
                     },

From fdd4e2b4ab892c42f03835075c288efeb5d3a157 Mon Sep 17 00:00:00 2001
From: lockiechen <lockiechen@tencent.com>
Date: Tue, 6 Aug 2024 17:32:22 +0800
Subject: [PATCH 13/13] =?UTF-8?q?bug:=20=E3=80=90=E6=B5=81=E6=B0=B4?=
 =?UTF-8?q?=E7=BA=BF=E6=A8=A1=E6=9D=BF=E3=80=91=E6=A8=A1=E6=9D=BF=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=E7=9A=84=E5=9B=9E=E6=BB=9A=E5=8A=9F=E8=83=BD=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E8=B7=B3=E8=BD=AC=E5=88=B0=E6=A8=A1=E6=9D=BF=EF=BC=8C?=
 =?UTF-8?q?=E5=90=A6=E5=88=99=E4=BC=9A=E5=BC=95=E5=8F=91=E5=87=BAbug=20#81?=
 =?UTF-8?q?25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pipelineList/PipelinesCardView.vue           | 2 +-
 .../src/views/PipelineList/PipelineGroupAside.vue               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/pipelineList/PipelinesCardView.vue b/src/frontend/devops-pipeline/src/components/pipelineList/PipelinesCardView.vue
index 60b75a1caa9..898efac42a0 100644
--- a/src/frontend/devops-pipeline/src/components/pipelineList/PipelinesCardView.vue
+++ b/src/frontend/devops-pipeline/src/components/pipelineList/PipelinesCardView.vue
@@ -93,7 +93,7 @@
                 this.$refs.infiniteScroll?.updateList?.()
             },
             requestList ({ page }) {
-                return this.fetchList(page)
+                this.$refs.infiniteScroll?.updateList?.()
             }
         }
     }
diff --git a/src/frontend/devops-pipeline/src/views/PipelineList/PipelineGroupAside.vue b/src/frontend/devops-pipeline/src/views/PipelineList/PipelineGroupAside.vue
index e8dada08e5e..30fbfed7c05 100644
--- a/src/frontend/devops-pipeline/src/views/PipelineList/PipelineGroupAside.vue
+++ b/src/frontend/devops-pipeline/src/views/PipelineList/PipelineGroupAside.vue
@@ -19,7 +19,7 @@
                         @click="toggle(block.id)"
                         class="pipeline-group-classify-header"
                         :style="`top: ${block.stickyTop}`"
-                        :key="block.title"
+                        :key="block.id"
                     >
                         <i :class="['devops-icon', 'pipeline-group-item-icon', {
                             'icon-down-shape': block.show,