From 6ecc40e6e07311fed312f3657cf9cbf86cb695ef Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Tue, 23 Jul 2024 11:04:14 +0800
Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=E6=8F=92=E4=BB=B6=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=81=E8=8C=83=E5=9B=B4=E3=80=81=E5=B7=B2=E7=9F=A5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/loader/index.vue           |   2 +
 .../loader/loading/visible-range.vue          |  42 ++
 .../src/components/pass-plugin-title.vue      |  10 +
 .../src/components/user-selector/index.vue    |  40 +-
 .../src/components/user-selector/tree.vue     | 608 +++++++++---------
 webfe/package_vue/src/language/lang/en.js     |   9 +
 webfe/package_vue/src/language/lang/zh.js     |   9 +
 webfe/package_vue/src/store/modules/plugin.js |  22 +-
 .../base-config/comps/base-info-item.vue      |   1 -
 .../plugin/base-config/visible-range.vue      | 293 +++++++--
 .../plugin-center/plugin/summary/index.vue    |   7 +-
 .../package_vue/static/json/paas_static.ce.js |   6 +
 .../package_vue/static/json/paas_static.ee.js |   6 +
 13 files changed, 687 insertions(+), 368 deletions(-)
 create mode 100644 webfe/package_vue/src/components/loader/loading/visible-range.vue

diff --git a/webfe/package_vue/src/components/loader/index.vue b/webfe/package_vue/src/components/loader/index.vue
index 2e86aa09a6..69b130d197 100644
--- a/webfe/package_vue/src/components/loader/index.vue
+++ b/webfe/package_vue/src/components/loader/index.vue
@@ -89,6 +89,7 @@ import ImageManageLoading from './loading/image-manage.vue';
 import ProcessServiceLoading from './loading/process-service.vue';
 import PluinVersionListLoading from './loading/pluin-version-list.vue';
 import PersistentStorageLoading from './loading/persistent-storage.vue';
+import VisibleRangeLoading from './loading/visible-range.vue';
 export default {
   components: {
     ByUserLoading,
@@ -154,6 +155,7 @@ export default {
     ProcessServiceLoading,
     PluinVersionListLoading,
     PersistentStorageLoading,
+    VisibleRangeLoading,
   },
   props: {
     isLoading: {
diff --git a/webfe/package_vue/src/components/loader/loading/visible-range.vue b/webfe/package_vue/src/components/loader/loading/visible-range.vue
new file mode 100644
index 0000000000..e52d7d4c3e
--- /dev/null
+++ b/webfe/package_vue/src/components/loader/loading/visible-range.vue
@@ -0,0 +1,42 @@
+<template>
+  <content-loader
+    :width="baseWidth"
+    :style="{ 'transform': `scaleX(${isTransform ? contentWidth / baseWidth : 1})` }"
+    :height="350"
+    :speed="loadingConf.speed"
+    :primary-color="loadingConf.primaryColor"
+    :secondary-color="loadingConf.secondaryColor">
+    <rect x="50" y="0" rx="2" ry="2" width="150" height="42" />
+    <rect x="230" y="0" rx="2" ry="2" :width="baseWidth - 200" height="42" />
+    <rect x="50" y="72" rx="2" ry="2" width="150" height="42" />
+    <rect x="230" y="72" rx="2" ry="2" width="240" height="42" />
+    <rect x="230" y="142" rx="2" ry="2" width="240" height="60" />
+  </content-loader>
+</template>
+<script>
+import { ContentLoader } from 'vue-content-loader';
+export default {
+  components: {
+    ContentLoader,
+  },
+  props: {
+    baseWidth: {
+      type: Number,
+      default: 1180,
+    },
+    contentWidth: {
+      type: Number,
+      default: 1180,
+    },
+    isTransform: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    loadingConf() {
+      return this.$store.state.loadingConf;
+    },
+  },
+};
+</script>
diff --git a/webfe/package_vue/src/components/pass-plugin-title.vue b/webfe/package_vue/src/components/pass-plugin-title.vue
index ecc31b4c91..b60413cbb0 100644
--- a/webfe/package_vue/src/components/pass-plugin-title.vue
+++ b/webfe/package_vue/src/components/pass-plugin-title.vue
@@ -41,6 +41,7 @@
           {{ $t('插件文档') }}
         </a>
       </div>
+      <span v-if="tips" class="tips">{{ tips }}</span>
     </div>
   </div>
 </template>
@@ -74,6 +75,10 @@ export default {
       type: String,
       default: '',
     },
+    tips: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -204,6 +209,11 @@ export default {
       font-weight: bold;
       cursor: pointer;
     }
+    .tips {
+      margin-left: 16px;
+      font-size: 12px;
+      color: #979BA5;
+    }
   }
 }
 </style>
diff --git a/webfe/package_vue/src/components/user-selector/index.vue b/webfe/package_vue/src/components/user-selector/index.vue
index 83fab7615d..9f9b3fd00a 100644
--- a/webfe/package_vue/src/components/user-selector/index.vue
+++ b/webfe/package_vue/src/components/user-selector/index.vue
@@ -30,7 +30,7 @@
             </bk-select>
             <bk-input
               v-model="keyword"
-              :placeholder="$t('用户或组织')"
+              :placeholder="$t(placeholder)"
               maxlength="64"
               :clearable="true"
               style="position: relative; left: -1px;"
@@ -78,8 +78,12 @@
         <div class="right">
           <div class="header">
             <div class="has-selected"> {{ $t('已选择') }} <template v-if="isShowSelectedText">
-              <span class="organization-count">{{ hasSelectedDepartments.length }}</span> {{ $t('个组织') }}，
-              <span class="user-count">{{ hasSelectedUsers.length }}</span> {{ $t('个用户') }}
+              <span class="organization-count">
+                {{ hasSelectedDepartments.length }}
+              </span> {{ $t('个组织') }}<span v-if="isUsingDefaultRule">，</span>
+              <template v-if="isUsingDefaultRule">
+                <span class="user-count">{{ hasSelectedUsers.length }}</span> {{ $t('个用户') }}
+              </template>
             </template>
               <template v-else>
                 <span class="user-count">0</span>
@@ -181,6 +185,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    placeholder: {
+      type: String,
+      default: '用户或组织',
+    },
+    range: {
+      type: String,
+      default: 'all',
+    },
   },
   data() {
     return {
@@ -250,6 +262,9 @@ export default {
         height: '383px',
       };
     },
+    isUsingDefaultRule() {
+      return this.range === 'all';
+    },
   },
   watch: {
     show: {
@@ -303,14 +318,15 @@ export default {
         this.focusItemIndex = len - 1;
       }
     },
-
+    // 用户
     fetchUser(params = {}) {
       return request.getData(this.userApi, params);
     },
+    // 组织
     fetchDepartment(params = {}) {
       return request.getData(this.departmentApi, params);
     },
-
+    // 搜索用户
     fetchSearchUser(params = {}) {
       return request.getData(this.userSearchApi, params);
     },
@@ -449,7 +465,12 @@ export default {
       }
 
       try {
-        const res = await Promise.all([this.fetchDepartment(requestDepartParams), this.fetchSearchUser(requestUserParams)]);
+        // 组织
+        const fetchList = [this.fetchDepartment(requestDepartParams)];
+        if (this.isUsingDefaultRule) { // 用户
+          fetchList.push(this.fetchSearchUser(requestUserParams));
+        }
+        const res = await Promise.all(fetchList);
         const departments = unique(res[0], 'id');
         const users = unique(res[1], 'id');
         departments.forEach((depart) => {
@@ -508,7 +529,12 @@ export default {
       };
 
       try {
-        const res = await Promise.all([this.fetchDepartment(requestDepartParams), this.fetchUser(requestUserParams)]);
+        // 组织
+        const fetchList = [this.fetchDepartment(requestDepartParams)];
+        if (this.isUsingDefaultRule) { // 用户
+          fetchList.push(this.fetchUser(requestUserParams));
+        }
+        const res = await Promise.all(fetchList);
         const categories = unique(res[0], 'id');
         const members = unique(res[1], 'id');
         const curIndex = this.treeList.findIndex(item => item.id === payload.id);
diff --git a/webfe/package_vue/src/components/user-selector/tree.vue b/webfe/package_vue/src/components/user-selector/tree.vue
index 18d9ba1ddf..f16e8dbece 100644
--- a/webfe/package_vue/src/components/user-selector/tree.vue
+++ b/webfe/package_vue/src/components/user-selector/tree.vue
@@ -1,324 +1,326 @@
 <template>
-    <div :class="['paasng-infinite-tree', { 'bk-has-border-tree': isBorder }]"
-        @scroll="rootScroll">
-        <div class="ghost-wrapper" :style="ghostStyle"></div>
-        <div class="render-wrapper" ref="content">
-            <div
-                v-for="item in renderData" :key="item.$id"
-                :style="getNodeStyle(item)"
-                :class="['node-item', { 'is-disabled': item.disabled && item.type === 'user' }]"
-                @click.stop="nodeClick(item)">
-                <template v-if="item.async">
-                    <img class="arrow-icon" src="./images/angle-up-fill.svg" alt="" v-if="item.expanded" @click.stop="expandNode(item)">
-                    <img class="arrow-icon" src="./images/right-shape.svg" alt="" v-else @click.stop="expandNode(item)">
-                </template>
-                <template v-if="item.type === 'department'">
-                    <img class="node-icon" src="./images/file-close.svg" alt="">
-                </template>
-                <img v-else class="node-svg" src="./images/personal-user.svg" alt="">
-                <span
-                    :style="nameStyle(item)"
-                    :class="['node-title', { 'is-disabled': item.disabled && item.type === 'user' }]"
-                    :title="item.type === 'department' ? item.full_name : item.username !== '' ? `${item.display_name}(${item.username})` : item.display_name">
-                    {{ item.type === 'user' ? item.display_name : item.name }}
-                    <template v-if="item.type === 'user' && item.username !== ''">
-                        ({{ item.username }})
-                    </template>
-                </span>
-                <div class="bk-spin-loading bk-spin-loading-mini bk-spin-loading-primary loading" v-if="item.loading">
-                    <div class="rotate rotate1"></div>
-                    <div class="rotate rotate2"></div>
-                    <div class="rotate rotate3"></div>
-                    <div class="rotate rotate4"></div>
-                    <div class="rotate rotate5"></div>
-                    <div class="rotate rotate6"></div>
-                    <div class="rotate rotate7"></div>
-                    <div class="rotate rotate8"></div>
-                </div>
-                <div class="node-radio" v-if="item.showRadio">
-                    <span class="node-checkbox"
-                        :class="{
-                            'is-disabled': item.disabled,
-                            'is-checked': item.is_selected,
-                            'is-indeterminate': item.indeterminate
-                        }"
-                        @click.stop="handleNodeClick(item)">
-                    </span>
-                </div>
-            </div>
+  <div
+    :class="['paasng-infinite-tree', { 'bk-has-border-tree': isBorder }]"
+    @scroll="rootScroll">
+    <div class="ghost-wrapper" :style="ghostStyle"></div>
+    <div class="render-wrapper" ref="content">
+      <div
+        v-for="item in renderData" :key="item.$id"
+        :style="getNodeStyle(item)"
+        :class="['node-item', { 'is-disabled': item.disabled && item.type === 'user' }]"
+        @click.stop="nodeClick(item)">
+        <template v-if="item.async">
+          <img class="arrow-icon mr5" src="./images/angle-up-fill.svg" alt="" v-if="item.expanded" @click.stop="expandNode(item)">
+          <img class="arrow-icon mr5" src="./images/right-shape.svg" alt="" v-else @click.stop="expandNode(item)">
+        </template>
+        <template v-if="item.type === 'department'">
+          <img class="node-icon" src="./images/file-close.svg" alt="">
+        </template>
+        <img v-else class="node-svg" src="./images/personal-user.svg" alt="">
+        <span
+          :style="nameStyle(item)"
+          :class="['node-title', { 'is-disabled': item.disabled && item.type === 'user' }]"
+          :title="item.type === 'department' ? item.full_name : item.username !== '' ? `${item.display_name}(${item.username})` : item.display_name">
+          {{ item.type === 'user' ? item.display_name : item.name }}
+          <template v-if="item.type === 'user' && item.username !== ''">
+            ({{ item.username }})
+          </template>
+        </span>
+        <div class="bk-spin-loading bk-spin-loading-mini bk-spin-loading-primary loading ml5" v-if="item.loading">
+          <div class="rotate rotate1"></div>
+          <div class="rotate rotate2"></div>
+          <div class="rotate rotate3"></div>
+          <div class="rotate rotate4"></div>
+          <div class="rotate rotate5"></div>
+          <div class="rotate rotate6"></div>
+          <div class="rotate rotate7"></div>
+          <div class="rotate rotate8"></div>
         </div>
+        <div class="node-radio" v-if="item.showRadio">
+          <span
+            class="node-checkbox"
+            :class="{
+              'is-disabled': item.disabled,
+              'is-checked': item.is_selected,
+              'is-indeterminate': item.indeterminate
+            }"
+            @click.stop="handleNodeClick(item)">
+          </span>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-    export default {
-        name: '',
-        props: {
-            // 所有数据
-            allData: {
-                type: Array,
-                default: () => []
-            },
-            // 每个节点的高度
-            itemHeight: {
-                type: Number,
-                default: 32
-            },
-            // 子节点左侧偏移的基础值
-            leftBaseIndent: {
-                type: Number,
-                default: 18
-            },
-            // 点击事件 $emit 事件 类型
-            // all: 既触发click 也触发 radio 事件
-            // only-click: 只触发click 不触发 radio 事件
-            // only-radio: 不触发click 只触发 radio 事件
-            clickTriggerType: {
-                type: String,
-                default: 'all',
-                validator (val) {
-                    return ['all', 'only-click', 'only-radio'].includes(val)
-                }
-            },
-            isBorder: {
-                type: Boolean,
-                default: true
-            }
-        },
-        data () {
-            return {
-                startIndex: 0,
-                endIndex: 0,
-                clickTriggerTypeBat: this.clickTriggerType
-            }
-        },
-        computed: {
-            ghostStyle () {
-                return {
-                    height: this.visiableData.length * this.itemHeight + 'px'
-                }
-            },
-            // allData 中 visiable 为 true 的数据，visiable 属性辅助设置展开收起的
-            // 当父节点收起时，子节点的 visiable 为 false
-            visiableData () {
-                return this.allData.filter(item => item.visiable)
-            },
-            // 页面渲染的数据
-            renderData () {
-                // 渲染 visiable 为 true 并且在可视区的，这里要注意，必须要先 filter visiable 然后 slice，不能反过来
-                return this.visiableData.slice(this.startIndex, this.endIndex)
-            },
-            nameStyle () {
-                return (payload) => {
-                    if (payload.type === 'user') {
-                        return {
-                            'maxWidth': 'calc(100% - 50px)'
-                        }
-                    }
-                    let otherOffset = 14 + 18 + 22 + 18 + 10
-                    // loading 时需计算loading的宽度
-                    if (payload.loading) {
-                        otherOffset += 20
-                    }
-                    if (payload.async) {
-                        otherOffset += 14
-                    }
-                    return {
-                        'maxWidth': `calc(100% - ${otherOffset}px)`
-                    }
-                }
-            }
-        },
-        watch: {
-            clickTriggerType (val) {
-                if (!val) {
-                    this.clickTriggerTypeBat = 'all'
-                }
-                this.clickTriggerTypeBat = val
-            }
-        },
-        mounted () {
-            const height = this.$el.clientHeight === 0
-                ? parseInt(window.getComputedStyle(this.$el).height, 10)
-                : this.$el.clientHeight
+export default {
+  name: '',
+  props: {
+    // 所有数据
+    allData: {
+      type: Array,
+      default: () => [],
+    },
+    // 每个节点的高度
+    itemHeight: {
+      type: Number,
+      default: 32,
+    },
+    // 子节点左侧偏移的基础值
+    leftBaseIndent: {
+      type: Number,
+      default: 18,
+    },
+    // 点击事件 $emit 事件 类型
+    // all: 既触发click 也触发 radio 事件
+    // only-click: 只触发click 不触发 radio 事件
+    // only-radio: 不触发click 只触发 radio 事件
+    clickTriggerType: {
+      type: String,
+      default: 'all',
+      validator(val) {
+        return ['all', 'only-click', 'only-radio'].includes(val);
+      },
+    },
+    isBorder: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      startIndex: 0,
+      endIndex: 0,
+      clickTriggerTypeBat: this.clickTriggerType,
+    };
+  },
+  computed: {
+    ghostStyle() {
+      return {
+        height: `${this.visiableData.length * this.itemHeight}px`,
+      };
+    },
+    // allData 中 visiable 为 true 的数据，visiable 属性辅助设置展开收起的
+    // 当父节点收起时，子节点的 visiable 为 false
+    visiableData() {
+      return this.allData.filter(item => item.visiable);
+    },
+    // 页面渲染的数据
+    renderData() {
+      // 渲染 visiable 为 true 并且在可视区的，这里要注意，必须要先 filter visiable 然后 slice，不能反过来
+      return this.visiableData.slice(this.startIndex, this.endIndex);
+    },
+    nameStyle() {
+      return (payload) => {
+        if (payload.type === 'user') {
+          return {
+            maxWidth: 'calc(100% - 50px)',
+          };
+        }
+        let otherOffset = 14 + 18 + 22 + 18 + 10;
+        // loading 时需计算loading的宽度
+        if (payload.loading) {
+          otherOffset += 20;
+        }
+        if (payload.async) {
+          otherOffset += 14;
+        }
+        return {
+          maxWidth: `calc(100% - ${otherOffset}px)`,
+        };
+      };
+    },
+  },
+  watch: {
+    clickTriggerType(val) {
+      if (!val) {
+        this.clickTriggerTypeBat = 'all';
+      }
+      this.clickTriggerTypeBat = val;
+    },
+  },
+  mounted() {
+    const height = this.$el.clientHeight === 0
+      ? parseInt(window.getComputedStyle(this.$el).height, 10)
+      : this.$el.clientHeight;
 
-            this.endIndex = Math.ceil(height / this.itemHeight)
-        },
-        methods: {
-            /**
-             * 获取节点的样式
-             *
-             * @param {Object} node 当前节点对象
-             */
-            getNodeStyle (node) {
-                // node.async 表示含有子节点的节点，含有子节点的节点即节点左侧有箭头
-                return {
-                    paddingLeft: (node.async ? node.level : node.level + 1) * this.leftBaseIndent + 'px'
-                }
-            },
+    this.endIndex = Math.ceil(height / this.itemHeight);
+  },
+  methods: {
+    /**
+     * 获取节点的样式
+     *
+     * @param {Object} node 当前节点对象
+     */
+    getNodeStyle(node) {
+      // node.async 表示含有子节点的节点，含有子节点的节点即节点左侧有箭头
+      return {
+        paddingLeft: `${(node.async ? node.level : node.level + 1) * this.leftBaseIndent}px`,
+      };
+    },
 
-            /**
-             * 滚动回调函数
-             */
-            rootScroll () {
-                this.updateRenderData(this.$el.scrollTop)
-            },
+    /**
+     * 滚动回调函数
+     */
+    rootScroll() {
+      this.updateRenderData(this.$el.scrollTop);
+    },
 
-            /**
-             * 更新可视区渲染的数据列表
-             *
-             * @param {Number} scrollTop 滚动条高度
-             */
-            updateRenderData (scrollTop = 0) {
-                // 可视区显示的条数
-                const count = Math.ceil(this.$el.clientHeight / this.itemHeight)
-                // 滚动后可视区新的 startIndex
-                const newStartIndex = Math.floor(scrollTop / this.itemHeight)
-                // 滚动后可视区新的 endIndex
-                const newEndIndex = newStartIndex + count
-                this.startIndex = newStartIndex
-                this.endIndex = newEndIndex
-                this.$refs.content.style.transform = `translate3d(0, ${newStartIndex * this.itemHeight}px, 0)`
-            },
+    /**
+     * 更新可视区渲染的数据列表
+     *
+     * @param {Number} scrollTop 滚动条高度
+     */
+    updateRenderData(scrollTop = 0) {
+      // 可视区显示的条数
+      const count = Math.ceil(this.$el.clientHeight / this.itemHeight);
+      // 滚动后可视区新的 startIndex
+      const newStartIndex = Math.floor(scrollTop / this.itemHeight);
+      // 滚动后可视区新的 endIndex
+      const newEndIndex = newStartIndex + count;
+      this.startIndex = newStartIndex;
+      this.endIndex = newEndIndex;
+      this.$refs.content.style.transform = `translate3d(0, ${newStartIndex * this.itemHeight}px, 0)`;
+    },
 
-            /**
-             * 点击节点
-             *
-             * @param {Object} node 当前节点
-             */
-            nodeClick (node) {
-                if (node.async && node.disabled) {
-                    this.expandNode(node)
-                    return
-                }
-                if (!node.disabled) {
-                    if (['all', 'only-radio'].includes(this.clickTriggerTypeBat)) {
-                        node.is_selected = !node.is_selected
-                        // type为user时需校验不同组织下的相同用户让其禁选
-                        if (node.type === 'user') {
-                            this.handleBanUser(node, node.is_selected)
-                        }
-                        this.$emit('on-select', node.is_selected, node)
-                    }
-                }
-                if (['all', 'only-click'].includes(this.clickTriggerTypeBat)) {
-                    this.$emit('on-click', node)
-                }
-            },
+    /**
+     * 点击节点
+     *
+     * @param {Object} node 当前节点
+     */
+    nodeClick(node) {
+      if (node.async && node.disabled) {
+        this.expandNode(node);
+        return;
+      }
+      if (!node.disabled) {
+        if (['all', 'only-radio'].includes(this.clickTriggerTypeBat)) {
+          node.is_selected = !node.is_selected;
+          // type为user时需校验不同组织下的相同用户让其禁选
+          if (node.type === 'user') {
+            this.handleBanUser(node, node.is_selected);
+          }
+          this.$emit('on-select', node.is_selected, node);
+        }
+      }
+      if (['all', 'only-click'].includes(this.clickTriggerTypeBat)) {
+        this.$emit('on-click', node);
+      }
+    },
 
-            handleBanUser (node, flag) {
-                this.allData.forEach(item => {
-                    if (item.username === node.username && item.id !== node.id) {
-                        item.disabled = flag
-                        item.is_selected = flag
-                    }
-                })
-            },
+    handleBanUser(node, flag) {
+      this.allData.forEach((item) => {
+        if (item.username === node.username && item.id !== node.id) {
+          item.disabled = flag;
+          item.is_selected = flag;
+        }
+      });
+    },
 
-            /**
-             * 节点展开/收起
-             *
-             * @param {Object} node 当前节点
-             * @param {Boolean} isExpand 是否展开
-             */
-            expandNode (node, isExpand) {
-                if (node.loading) {
-                    return
-                }
-                if (isExpand) {
-                    node.expanded = isExpand
-                } else {
-                    node.expanded = !node.expanded
-                }
-                
-                if (node.children && node.children.length) {
-                    const children = this.allData.filter(item => item.parent === node.id)
-                    children.forEach(child => {
-                        child.visiable = node.expanded
-                        if (child.async && !node.expanded) {
-                            this.collapseNode(child)
-                        }
-                    })
-                } else {
-                    if (node.async) {
-                        this.$emit('async-load-nodes', node)
-                    }
-                }
-                this.$emit('expand-node', node)
-            },
+    /**
+     * 节点展开/收起
+     *
+     * @param {Object} node 当前节点
+     * @param {Boolean} isExpand 是否展开
+     */
+    expandNode(node, isExpand) {
+      if (node.loading) {
+        return;
+      }
+      if (isExpand) {
+        node.expanded = isExpand;
+      } else {
+        node.expanded = !node.expanded;
+      }
 
-            /**
-             * 收起节点，收起节点的时候需要把节点里面的所有节点都收起，节点里面的父节点收起同时节点里面的父节点下的子节点都要隐藏
-             *
-             * @param {Object} node 当前要收起的节点，这个节点指的是含有子节点的节点
-             */
-            collapseNode (node) {
-                node.expanded = false
-                ;(node.children || []).forEach(child => {
-                    child.visiable = false
-                    if (child.async && !node.expanded) {
-                        this.collapseNode(child)
-                    }
-                })
-            },
+      if (node.children && node.children.length) {
+        const children = this.allData.filter(item => item.parent === node.id);
+        children.forEach((child) => {
+          child.visiable = node.expanded;
+          if (child.async && !node.expanded) {
+            this.collapseNode(child);
+          }
+        });
+      } else {
+        if (node.async) {
+          this.$emit('async-load-nodes', node);
+        }
+      }
+      this.$emit('expand-node', node);
+    },
 
-            /**
-             * 设置父级节点 radio 是否显示
-             */
-            showAllRadio (flag) {
-                this.allData.forEach(item => {
-                    // 父节点
-                    if (item.async) {
-                        item.showRadio = flag
-                    }
-                })
-            },
+    /**
+     * 收起节点，收起节点的时候需要把节点里面的所有节点都收起，节点里面的父节点收起同时节点里面的父节点下的子节点都要隐藏
+     *
+     * @param {Object} node 当前要收起的节点，这个节点指的是含有子节点的节点
+     */
+    collapseNode(node) {
+      node.expanded = false
+      ;(node.children || []).forEach((child) => {
+        child.visiable = false;
+        if (child.async && !node.expanded) {
+          this.collapseNode(child);
+        }
+      });
+    },
 
-            handleNodeClick (node) {
-                if (node.disabled) {
-                    return
-                }
-                node.is_selected = !node.is_selected
-                if (node.type === 'user') {
-                    this.handleBanUser(node, node.is_selected)
-                }
-                this.$emit('on-select', node.is_selected, node)
-            },
+    /**
+     * 设置父级节点 radio 是否显示
+     */
+    showAllRadio(flag) {
+      this.allData.forEach((item) => {
+        // 父节点
+        if (item.async) {
+          item.showRadio = flag;
+        }
+      });
+    },
 
-            /**
-             * radio 选择回调
-             */
-            nodeChange (newVal, oldVal, localVal, node) {
-                this.$emit('on-select', newVal, node)
-            },
+    handleNodeClick(node) {
+      if (node.disabled) {
+        return;
+      }
+      node.is_selected = !node.is_selected;
+      if (node.type === 'user') {
+        this.handleBanUser(node, node.is_selected);
+      }
+      this.$emit('on-select', node.is_selected, node);
+    },
 
-            /**
-             * 清除节点 is_selected 状态(不含禁选节点)
-             */
-            clearAllIsSelectedStatus () {
-                this.allData.forEach(item => {
-                    if (!item.disabled) {
-                        item.is_selected = false
-                    }
-                })
-            },
+    /**
+     * radio 选择回调
+     */
+    nodeChange(newVal, oldVal, localVal, node) {
+      this.$emit('on-select', newVal, node);
+    },
 
-            /**
-             * 设置单个节点 is_selected 状态
-             *
-             * @param {String} nodeKey 当前节点唯一key值
-             * @param {Boolean} isSelected 多选框是否选中
-             */
-            setSingleSelectedStatus (nodeKey, isSelected) {
-                for (let i = 0; i < this.allData.length; i++) {
-                    const item = this.allData[i]
-                    if (nodeKey === item.id) {
-                        item.is_selected = isSelected
-                        break
-                    }
-                }
-            }
+    /**
+     * 清除节点 is_selected 状态(不含禁选节点)
+     */
+    clearAllIsSelectedStatus() {
+      this.allData.forEach((item) => {
+        if (!item.disabled) {
+          item.is_selected = false;
         }
-    }
+      });
+    },
+
+    /**
+     * 设置单个节点 is_selected 状态
+     *
+     * @param {String} nodeKey 当前节点唯一key值
+     * @param {Boolean} isSelected 多选框是否选中
+     */
+    setSingleSelectedStatus(nodeKey, isSelected) {
+      for (let i = 0; i < this.allData.length; i++) {
+        const item = this.allData[i];
+        if (nodeKey === item.id) {
+          item.is_selected = isSelected;
+          break;
+        }
+      }
+    },
+  },
+};
 </script>
 <style lang="scss">
     .paasng-infinite-tree {
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 48758eaf62..cef7f95761 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2756,4 +2756,13 @@ export default {
   '每个模块可以设置一个访问入口，请求访问地址时{t}会被转发到访问入口指向的目标服务上。': 'Each module can set an access entry. When requesting the access address {t}, it will be forwarded to the target service pointed to by the access entry.',
   '如：': 'e.g., ',
   '每次查询最多返回 {n} 条日志。如需查看全部日志，请缩小查询时间范围。': 'Each query returns a maximum of {n} logs. To view all logs, please narrow the query time range.',
+  未修改: 'Not Modified',
+  选择组织: 'Select Organization',
+  蓝盾项目: 'Blue Shield Project',
+  提交审核: 'Submit for Review',
+  正在审批中: 'Under Review',
+  请用英文分号分隔: 'Please use English semicolons to separate',
+  暂未设置可见范围: 'Visibility range not yet set',
+  '请输入蓝盾项目 Project ID，并用英文分号分隔': 'Please enter the Blue Shield Project ID and separate them with English semicolons',
+  '修改可见范围需由<i class="bold">平台管理员</i>进行审批': 'Changes to the visibility range require approval from the <i class="bold">platform administrator</i>',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 3f7b602485..080f8e7a63 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2893,4 +2893,13 @@ export default {
   '如：': '如：',
   '每个模块可以设置一个访问入口，请求访问地址时（如：{r}）会被转发到访问入口指向的目标服务上。': '每个模块可以设置一个访问入口，请求访问地址时（如：{r}）会被转发到访问入口指向的目标服务上。',
   '每次查询最多返回 {n} 条日志。如需查看全部日志，请缩小查询时间范围。': '每次查询最多返回 {n} 条日志。如需查看全部日志，请缩小查询时间范围。',
+  未修改: '未修改',
+  选择组织: '选择组织',
+  蓝盾项目: '蓝盾项目',
+  提交审核: '提交审核',
+  正在审批中: '正在审批中',
+  请用英文分号分隔: '请用英文分号分隔',
+  暂未设置可见范围: '暂未设置可见范围',
+  '请输入蓝盾项目 Project ID，并用英文分号分隔': '请输入蓝盾项目 Project ID，并用英文分号分隔',
+  '修改可见范围需由<i class="bold">平台管理员</i>进行审批': '修改可见范围需由<i class="bold">平台管理员</i>进行审批',
 };
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index 6b174e08a6..f26a3b9d1c 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -33,8 +33,6 @@ export default {
     chartData: bartOptions,
     // 当前插件的基础信息
     curPluginInfo: {},
-    // curPluginId
-    // curPluginTypeId
     // 当前插件的当前发布版本
     curRelease: {},
     pluginApplyUrl: '',
@@ -83,8 +81,6 @@ export default {
     },
     updatePluginInfo(state, { pluginId, pluginTypeId, data }) {
       state.curPluginInfo = data;
-      state.curPluginId = pluginId;
-      state.curPluginTypeId = pluginTypeId;
     },
     updatePluginApplyUrl(state, url) {
       state.pluginApplyUrl = url;
@@ -589,5 +585,23 @@ export default {
       const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/publisher/`;
       return http.post(url, data, config);
     },
+
+    /**
+     * 获取可见范围数据
+     * @param {Object} params 请求参数：pdId, pluginId
+     */
+    getVisibleRange({}, { pdId, pluginId }, config) {
+      const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/visible_range/`;
+      return http.get(url, {}, config);
+    },
+
+    /**
+     * 可见范围
+     * @param {Object} params 请求参数：pdId, pluginId, data
+     */
+    updateVisibleRange({}, { pdId, pluginId, data }, config) {
+      const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/visible_range/`;
+      return http.post(url, data, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/base-info-item.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/base-info-item.vue
index 60e2b02a8d..c1101855e3 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/base-info-item.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/base-info-item.vue
@@ -113,7 +113,6 @@ export default {
   },
   watch: {
     pluginInfo(newValue) {
-      console.log('newValue', newValue);
       this.init(newValue);
     },
   },
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index ba8786841d..c57c23d61e 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -1,61 +1,256 @@
 <template>
-  <div class="container visible-range">
-    <div class="app-container middle">
-      <paas-plugin-title />
-      <div class="desc mb20 mt10">
-        {{ $t('仅可见范围内的组织、用户可在研发商店查看并使用该插件') }}
-      </div>
-      <div class="group-warp mb20">
-        <bk-button>{{ $t('选择组织/人员') }}</bk-button>
-        <div class="user-warp mt20">
-          <div class="mb10">
-            {{ $t('用户') }}
-          </div>
-          <bk-tag
-            closable
-            @close="close"
+  <div class="visible-range">
+    <paas-plugin-title :tips="$t('仅可见范围内的组织、用户可在研发商店查看并使用该插件')" />
+    <paas-content-loader
+      class="app-container middle"
+      :is-loading="isContentLoading"
+      placeholder="visible-range-loading"
+      :is-transform="false"
+    >
+      <!-- 无数据状态 -->
+      <section class="exception-wrapper" v-if="!isEdit">
+        <bk-exception class="exception-wrap-item exception-part" type="empty" scene="part">
+          <p class="text-btn">{{ $t('暂未设置可见范围') }}</p>
+          <bk-button
+            :text="true"
+            title="primary"
+            size="small"
+            @click="() => isEdit = true"
           >
-            {{ $t('企业邮箱') }}
-          </bk-tag>
+            {{ $t('去设置') }}
+          </bk-button>
+        </bk-exception>
+      </section>
+      <!-- 编辑态 -->
+      <template v-else>
+        <section class="visible-range-form card-style">
+          <bk-form style="width: 800px" :label-width="150" :model="formData" ref="visibleRangeForm">
+            <bk-form-item
+              :label="$t('蓝盾项目')"
+              :required="true"
+              :property="'projectIds'"
+              :error-display-type="'normal'"
+              :rules="rules.projectIds">
+              <bk-input v-model="formData.projectIds" :placeholder="$t('请输入蓝盾项目 Project ID，并用英文分号分隔')"></bk-input>
+            </bk-form-item>
+            <bk-form-item :label="$t('组织')">
+              <bk-button :theme="'default'" @click="handleSelectOrganization">{{ $t('选择组织') }}</bk-button>
+              <div class="render-member-wrapper" v-if="departments.length > 0">
+                <render-member-list
+                  type="department"
+                  :data="departments"
+                />
+              </div>
+            </bk-form-item>
+          </bk-form>
+        </section>
+        <div class="footer-btn">
+          <!-- 当前数据未更改禁用、 审批中禁用 -->
+          <span v-bk-tooltips="{ content: submitBtnTips, disabled: !submitDisabled }">
+            <bk-button
+              :theme="'primary'"
+              :disabled="submitDisabled"
+              @click="submitReview">
+              {{ $t('提交审核') }}
+            </bk-button>
+          </span>
+          <p v-html="tips"></p>
         </div>
-        <div class="organize-warp mt20">
-          <div class="mb10">
-            {{ $t('组织') }}
-          </div>
-          <bk-tag
-            closable
-            @close="close"
-          >
-            {{ $t('企业邮箱') }}
-          </bk-tag>
-        </div>
-      </div>
-    </div>
+      </template>
+    </paas-content-loader>
+
+    <user-selector-dialog
+      ref="userSelectorDialogRef"
+      title="选择组织"
+      placeholder="组织"
+      :show.sync="isShow"
+      :departments="departments"
+      :api-host="apiHost"
+      :custom-close="true"
+      :range="'departments'"
+      @sumbit="handleSubmit"
+    />
   </div>
 </template>
 <script>
-    import paasPluginTitle from '@/components/pass-plugin-title';
-    export default {
-        components: {
-            paasPluginTitle
-        },
-        data () {
-            return {};
-        },
-        watch: {
+import paasPluginTitle from '@/components/pass-plugin-title';
+import userSelectorDialog from '@/components/user-selector';
+import renderMemberList from '@/views/dev-center/app/market/render-member-list';
 
-        },
-        methods: {
-            close () {}
+export default {
+  components: {
+    paasPluginTitle,
+    userSelectorDialog,
+    renderMemberList,
+  },
+  data() {
+    return {
+      formData: {
+        projectIds: '',
+        organization: [],
+      },
+      apiHost: window.BK_COMPONENT_API_URL,
+      isShow: false,
+      departments: [],
+      isEdit: false,
+      isContentLoading: true,
+      initStatus: '',
+      visibleRangeData: {},
+      isEditingFormData: true,
+      submitBtnTips: '',
+      rules: {
+        projectIds: [
+          {
+            required: true,
+            message: this.$t('必填项'),
+            trigger: 'blur',
+          },
+          {
+            regex: /^([a-z][a-z0-9-]{0,31})(;[a-z][a-z0-9-]{0,31})*;?$/,
+            message: this.$t('请用英文分号分隔'),
+            trigger: 'blur',
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    pdId() {
+      return this.$route.params.pluginTypeId;
+    },
+    pluginId() {
+      return this.$route.params.id;
+    },
+    tips() {
+      return this.$t('修改可见范围需由<i class="bold">平台管理员</i>进行审批');
+    },
+    submitDisabled() {
+      if (this.visibleRangeData.is_in_approval) {
+        this.submitBtnTips = this.$t('正在审批中');
+        return true;
+      }
+      if (this.isEditingFormData) {
+        this.submitBtnTips = this.$t('未修改');
+        return true;
+      }
+      return false;
+    },
+  },
+  watch: {
+    formData: {
+      handler(newValue) {
+        this.isEditingFormData = this.initStatus === JSON.stringify(newValue);
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.getVisibleRange();
+  },
+  methods: {
+    // 提交审核
+    submitReview() {
+      this.$refs.visibleRangeForm.validate().then(() => {
+        const params = {
+          bkci_project: this.formData.projectIds.split(';'),
+          organization: this.formData.organization,
+        };
+        this.updateVisibleRange(params);
+      }, (validator) => {
+        console.warn(validator);
+      });
+    },
+    // 组织弹窗
+    handleSelectOrganization() {
+      this.isShow = true;
+    },
+    collectDependencies() {
+      // 初始状态
+      this.initStatus = JSON.stringify(this.formData);
+    },
+    async handleSubmit(payload) {
+      this.formData.organization = payload;
+      this.departments = payload;
+      this.isShow = false;
+    },
+    // 获取可见范围数据
+    async getVisibleRange() {
+      try {
+        const res = await this.$store.dispatch('plugin/getVisibleRange', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+        });
+        // is_in_approval 审批中
+        this.visibleRangeData = res;
+        this.formData.projectIds = res.bkci_project.join(';');
+        this.formData.organization = res.organization || [];
+        this.departments = this.formData.organization;
 
+        this.isEdit = true;
+      } catch (e) {
+        // 404 就说明没有数据
+        if (e.status === 404) {
+          this.isEdit = false;
+          return;
         }
-    };
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      } finally {
+        this.isContentLoading = false;
+        this.collectDependencies();
+      }
+    },
+    async updateVisibleRange(params) {
+      try {
+        await this.$store.dispatch('plugin/updateVisibleRange', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          data: params,
+        });
+        this.getVisibleRange();
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-        .visible-range{
-            .desc{
-                font-size: 12px;
-                color: #979BA5;
-            }
-        }
+.visible-range {
+  .exception-wrapper {
+    height: 350px;
+  }
+  .visible-range-form {
+    padding: 24px 0;
+    .render-member-wrapper {
+      margin-top: 12px;
+      padding: 12px 12px 12px 36px;
+      width: 320px;
+      background: #f5f7fa;
+      border-radius: 2px;
+    }
+  }
+  .footer-btn {
+    margin-top: 24px;
+    display: flex;
+    align-items: center;
+    p {
+      color: #979BA5;
+      font-size: 12px;
+      margin-left: 8px;
+    }
+  }
+  /deep/ .bold {
+    font-style: normal;
+    font-weight: bold;
+  }
+  .text-btn {
+    margin-bottom: 8px;
+  }
+}
 </style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue
index e1d930a512..1c88c6aa09 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue
@@ -173,7 +173,7 @@
                       </p>
                       <p class="dynamic-time">
                         <span
-                          v-bk-tooltips="item.updated"
+                          v-bk-tooltips="{ content: item.updated, allowHTML: true }"
                           class="tooltip-time"
                         >
                           {{ item.created_format }}
@@ -763,8 +763,7 @@ export default {
   color: #63656e;
   .dynamic-time {
     margin-top: 5px;
-    line-height: 20px;
-    height: 36px;
+    line-height: 22px;
     font-size: 12px;
     color: #979BA5;
     cursor: default;
@@ -809,7 +808,7 @@ export default {
   position: absolute;
   content: '';
   width: 1px;
-  height: 62px;
+  height: 53px;
   top: 13px;
   left: 5px;
   background: #D8D8D8;
diff --git a/webfe/package_vue/static/json/paas_static.ce.js b/webfe/package_vue/static/json/paas_static.ce.js
index f20a92e4f4..7fb5c0e547 100644
--- a/webfe/package_vue/static/json/paas_static.ce.js
+++ b/webfe/package_vue/static/json/paas_static.ce.js
@@ -832,6 +832,12 @@ export const PAAS_STATIC_CONFIG = {
                             "moreInfoEdit"
                         ]
                     },
+                    {
+                        "name": staticI18n.$t("可见范围"),
+                        "destRoute": {
+                          "name": "pluginVisibleRange"
+                        }
+                    },
                     {
                         "name": staticI18n.$t("成员管理"),
                         "destRoute": {
diff --git a/webfe/package_vue/static/json/paas_static.ee.js b/webfe/package_vue/static/json/paas_static.ee.js
index 448ff2826a..8554755761 100644
--- a/webfe/package_vue/static/json/paas_static.ee.js
+++ b/webfe/package_vue/static/json/paas_static.ee.js
@@ -840,6 +840,12 @@ export const PAAS_STATIC_CONFIG = {
                             "moreInfoEdit"
                         ]
                     },
+                    {
+                        "name": staticI18n.$t("可见范围"),
+                        "destRoute": {
+                          "name": "pluginVisibleRange"
+                        }
+                    },
                     {
                         "name": staticI18n.$t("成员管理"),
                         "destRoute": {

From 7d79ac61a96742d22352551ab5ee4134bcfd2edd Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Wed, 7 Aug 2024 11:46:57 +0800
Subject: [PATCH 02/17] =?UTF-8?q?feat:=20Codecc=E7=89=88=E6=9C=AC=E5=8F=91?=
 =?UTF-8?q?=E5=B8=83=E6=96=B0=E5=BB=BA=E7=89=88=E6=9C=ACv1.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package_vue/src/components/card/card.vue  |  51 ++
 webfe/package_vue/src/router/plugin.js        |   2 +-
 .../{ => create-version}/editor-version.vue   | 479 ++++++++----------
 .../version-manager/create-version/index.vue  |  90 ++++
 .../create-version/new-version/index.vue      | 152 ++++++
 .../new-version/release-content.vue           | 272 ++++++++++
 .../new-version/release-strategy.vue          | 231 +++++++++
 .../create-version/new-version/view-mode.vue  |  44 ++
 8 files changed, 1066 insertions(+), 255 deletions(-)
 create mode 100644 webfe/package_vue/src/components/card/card.vue
 rename webfe/package_vue/src/views/plugin-center/plugin/version-manager/{ => create-version}/editor-version.vue (55%)
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue

diff --git a/webfe/package_vue/src/components/card/card.vue b/webfe/package_vue/src/components/card/card.vue
new file mode 100644
index 0000000000..9c368656c2
--- /dev/null
+++ b/webfe/package_vue/src/components/card/card.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="card-wrapper card-style">
+    <!-- 基于卡片组件，改造样式 -->
+    <bk-card
+      ref="card"
+      v-bind="$attrs"
+      :collapse-icons="icons"
+    >
+      <template v-for="(value, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData || {}"></slot>
+      </template>
+    </bk-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PaasCard',
+  props: {
+    icons: {
+      type: Array,
+      default: (() => ['icon-right-shape', 'icon-down-shape']),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card-wrapper /deep/ .bk-card {
+  border: none;
+  cursor: unset;
+  &:hover {
+    box-shadow: unset;
+  }
+  .bk-card-head {
+    border: none;
+    cursor: pointer;
+    .title {
+      color: #313238;
+      font-weight: 700;
+      user-select: none;
+    }
+    i {
+      color: #63656E;
+    }
+  }
+  .bk-card-body {
+    padding: 16px 20px 24px;
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/router/plugin.js b/webfe/package_vue/src/router/plugin.js
index 719d860ade..d8b7da7456 100644
--- a/webfe/package_vue/src/router/plugin.js
+++ b/webfe/package_vue/src/router/plugin.js
@@ -29,7 +29,7 @@ const pluginVersionRelease = () => import(/* webpackChunkName: 'plugin-version'
   window.showDeployTip(error);
 });
 
-const pluginVersionEditor = () => import(/* webpackChunkName: 'plugin-version' */'@/views/plugin-center/plugin/version-manager/editor-version').then(module => module).catch((error) => {
+const pluginVersionEditor = () => import(/* webpackChunkName: 'plugin-version' */'@/views/plugin-center/plugin/version-manager/create-version').then(module => module).catch((error) => {
   window.showDeployTip(error);
 });
 
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/editor-version.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue
similarity index 55%
rename from webfe/package_vue/src/views/plugin-center/plugin/version-manager/editor-version.vue
rename to webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue
index 30f9fb2c7b..2aea2600f9 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/editor-version.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue
@@ -1,196 +1,192 @@
 <template lang="html">
-  <div class="container biz-create-success">
-    <paas-plugin-title :name="isOfficialVersion ? $t('新建版本') : $t('新建测试')" />
-    <paas-content-loader
-      :is-loading="isLoading"
-      placeholder="plugin-new-version-loading"
-      class="app-container middle"
-    >
-      <div class="new-version">
-        <div class="summary-box status">
-          <div class="wrapper default-box">
-            <template v-if="curVersion.current_release">
-              <div class="fl mr25">{{ $t('当前版本：') }} {{ curVersion.current_release.version || '--' }}</div>
-              <div class="fl mr25">
-                {{ $t('代码分支：') }} {{ curVersion.current_release.source_version_name || '--' }}
-              </div>
-              <div class="fl mr25">{{ $t('CommitID：') }} {{ curVersion.current_release.source_hash || '--' }}</div>
-              <div class="fl">
-                {{ $t('由') }} {{ curVersion.current_release.creator || '--' }} {{ $t(' 于 ') }}
-                {{ curVersion.current_release.created }} {{ $t('发布') }}
-              </div>
-            </template>
-            <div class="fl mr25" v-else>{{ $t('暂无已发布成功的版本') }}</div>
-          </div>
+  <div class="biz-create-success">
+    <!-- 旧版ui -->
+    <div class="new-version">
+      <div class="summary-box status">
+        <div class="wrapper default-box">
+          <template v-if="curVersion.current_release">
+            <div class="fl mr25">{{ $t('当前版本：') }} {{ curVersion.current_release.version || '--' }}</div>
+            <div class="fl mr25">
+              {{ $t('代码分支：') }} {{ curVersion.current_release.source_version_name || '--' }}
+            </div>
+            <div class="fl mr25">{{ $t('CommitID：') }} {{ curVersion.current_release.source_hash || '--' }}</div>
+            <div class="fl">
+              {{ $t('由') }} {{ curVersion.current_release.creator || '--' }} {{ $t(' 于 ') }}
+              {{ curVersion.current_release.created }} {{ $t('发布') }}
+            </div>
+          </template>
+          <div class="fl mr25" v-else>{{ $t('暂无已发布成功的版本') }}</div>
         </div>
+      </div>
 
-        <!-- 表单 -->
-        <div class="form-box">
-          <bk-form
-            ref="versionForm"
-            class="create-version-form-cls"
-            :label-width="120"
-            :model="curVersion"
-            :rules="rules"
+      <!-- 表单 -->
+      <div class="form-box">
+        <bk-form
+          ref="versionForm"
+          class="create-version-form-cls"
+          :label-width="120"
+          :model="curVersion"
+          :rules="rules"
+        >
+          <bk-form-item
+            :label="$t('代码仓库')"
+            class="code-warehouse"
           >
-            <bk-form-item
-              :label="$t('代码仓库')"
-              class="code-warehouse"
-            >
-              <bk-input
-                v-model="curVersion.repository"
-                :placeholder="$t('仓库地址')"
-                readonly
+            <bk-input
+              v-model="curVersion.repository"
+              :placeholder="$t('仓库地址')"
+              readonly
+            />
+            <div class="icon-wrapper">
+              <a
+                :href="curVersion.repository"
+                target="_blank"
+                style="color: #979ba5"
+              >
+                <i class="paasng-icon paasng-jump-link icon-cls-link mr5" />
+              </a>
+              <i
+                v-copy="curVersion.repository"
+                class="paasng-icon paasng-general-copy icon-cls-copy"
               />
-              <div class="icon-wrapper">
-                <a
-                  :href="curVersion.repository"
-                  target="_blank"
-                  style="color: #979ba5"
-                >
-                  <i class="paasng-icon paasng-jump-link icon-cls-link mr5" />
-                </a>
-                <i
-                  v-copy="curVersion.repository"
-                  class="paasng-icon paasng-general-copy icon-cls-copy"
+            </div>
+          </bk-form-item>
+          <bk-form-item
+            :label="curVersionData.version_type === 'tag' ? $t('代码 Tag') : $t('代码分支')"
+            :required="true"
+            :icon-offset="118"
+            :property="'source_versions'"
+          >
+            <div class="source-versions-wrapper">
+              <bk-select
+                v-model="curVersion.source_versions"
+                :disabled="false"
+                ext-cls="select-custom-cls"
+                :placeholder="codeBranchPlaceholder"
+                searchable
+                :loading="loading"
+                @change="handleSourceVersionChange"
+              >
+                <!-- curVersionData.allow_duplicate_source_version为false，不能选择released_source_versions中的值 -->
+                <bk-option
+                  v-for="option in sourceVersions"
+                  :id="option.name"
+                  :key="option.name"
+                  :name="option.name"
+                  :disabled="isOptionDisabled(option)"
+                  v-bk-tooltips="{
+                    content: $t('当前分支正在测试中，请先终止测试才能新建版本'),
+                    disabled: isOfficialVersion || !isOptionDisabled(option)
+                  }"
                 />
-              </div>
-            </bk-form-item>
-            <bk-form-item
-              :label="curVersionData.version_type === 'tag' ? $t('代码 Tag') : $t('代码分支')"
-              :required="true"
-              :property="'source_versions'"
-            >
-              <div class="source-versions-wrapper">
-                <bk-select
-                  v-model="curVersion.source_versions"
-                  :disabled="false"
-                  ext-cls="select-custom-cls"
-                  :placeholder="codeBranchPlaceholder"
-                  searchable
-                  :loading="isBranchLoading"
-                  @change="handleSourceVersionChange"
+                <div
+                  v-if="curVersionData.version_type === 'tag'"
+                  slot="extension"
+                  style="cursor: pointer;text-align: center"
+                  @click="handleAddTag"
                 >
-                  <!-- curVersionData.allow_duplicate_source_version为false，不能选择released_source_versions中的值 -->
-                  <bk-option
-                    v-for="option in sourceVersions"
-                    :id="option.name"
-                    :key="option.name"
-                    :name="option.name"
-                    :disabled="isOptionDisabled(option)"
-                    v-bk-tooltips="{
-                      content: $t('当前分支正在测试中，请先终止测试才能新建版本'),
-                      disabled: isOfficialVersion || !isOptionDisabled(option)
-                    }"
-                  />
-                  <div
-                    v-if="curVersionData.version_type === 'tag'"
-                    slot="extension"
-                    style="cursor: pointer;text-align: center"
-                    @click="handleAddTag"
-                  >
-                    <i class="bk-icon icon-plus-circle mr5" />
-                    {{ $t('新建 Tag') }}
-                  </div>
-                </bk-select>
-                <span v-bk-tooltips="{ content: $t('暂无可对比的代码版本'), disabled: curVersion.current_release }">
-                  <bk-button
-                    class="code-differences"
-                    :theme="'default'"
-                    type="submit"
-                    :disabled="!curVersion.current_release"
-                    @click="handleShowCommits">
-                    <i class="paasng-icon paasng-diff-4"></i>
-                    {{ $t('代码差异') }}
-                  </bk-button>
-                </span>
-              </div>
-              <div
-                class="ribbon"
-                :style="{ 'right': -offset + 'px' }"
-              >
-                <bk-button :text="true" :title="$t('刷新')" class="mr15" @click="getNewVersionFormat('refresh')">
-                  {{ $t('刷新') }}
+                  <i class="bk-icon icon-plus-circle mr5" />
+                  {{ $t('新建 Tag') }}
+                </div>
+              </bk-select>
+              <span v-bk-tooltips="{ content: $t('暂无可对比的代码版本'), disabled: curVersion.current_release }">
+                <bk-button
+                  class="code-differences"
+                  :theme="'default'"
+                  type="submit"
+                  :disabled="!curVersion.current_release"
+                  @click="handleShowCommits">
+                  <i class="paasng-icon paasng-diff-4"></i>
+                  {{ $t('代码差异') }}
                 </bk-button>
-              </div>
-            </bk-form-item>
-            <bk-form-item
-              v-if="curVersion.version_no === 'automatic'"
-              :label="$t('版本类型')"
-              :required="true"
-              :property="'version'"
-              :error-display-type="'normal'"
+              </span>
+            </div>
+            <div
+              class="ribbon"
+              :style="{ 'right': -offset + 'px' }"
             >
-              <bk-radio-group
-                v-model="curVersion.version"
-                @change="changeVersionType"
-              >
-                <bk-radio
-                  v-bk-tooltips.top="$t('非兼容式升级时使用')"
-                  :value="curVersion.semver_choices.major"
-                >
-                  <span v-dashed="12">{{ $t('重大版本') }}</span>
-                </bk-radio>
-                <bk-radio
-                  v-bk-tooltips.top="$t('兼容式功能更新时使用')"
-                  :value="curVersion.semver_choices.minor"
-                >
-                  <span v-dashed="12">{{ $t('次版本') }}</span>
-                </bk-radio>
-                <bk-radio
-                  v-bk-tooltips.top="$t('兼容式问题修正时使用')"
-                  :value="curVersion.semver_choices.patch"
-                >
-                  <span v-dashed="12">{{ $t('修正版本') }}</span>
-                </bk-radio>
-              </bk-radio-group>
-            </bk-form-item>
-            <bk-form-item
-              :label="isOfficialVersion ? $t('版本号') : $t('测试号')"
-              :required="true"
-              :property="'version'"
+              <bk-button :text="true" :title="$t('刷新')" class="mr15" @click="refresh">
+                {{ $t('刷新') }}
+              </bk-button>
+            </div>
+          </bk-form-item>
+          <bk-form-item
+            v-if="curVersion.version_no === 'automatic'"
+            :label="$t('版本类型')"
+            :required="true"
+            :property="'version'"
+            :error-display-type="'normal'"
+          >
+            <bk-radio-group
+              v-model="curVersion.version"
+              @change="changeVersionType"
             >
-              <bk-input
-                v-model="curVersion.version"
-                :placeholder="isOfficialVersion ? $t('版本号') : $t('测试号')"
-                :disabled="curVersion.version_no !== 'self-fill'"
-              />
-            </bk-form-item>
-            <bk-form-item label="CommitID">
-              {{ commitId }}
-            </bk-form-item>
-            <bk-form-item
-              :label="$t('版本日志-label')"
-              :required="true"
-              :property="'comment'"
+              <!-- 示例 -->
+              <bk-radio
+                v-bk-tooltips.top="$t('非兼容式升级时使用')"
+                :value="curVersion.semver_choices.major"
+              >
+                <span v-dashed="12">{{ $t('重大版本') }}</span>
+              </bk-radio>
+              <bk-radio
+                v-bk-tooltips.top="$t('兼容式功能更新时使用')"
+                :value="curVersion.semver_choices.minor"
+              >
+                <span v-dashed="12">{{ $t('次版本') }}</span>
+              </bk-radio>
+              <bk-radio
+                v-bk-tooltips.top="$t('兼容式问题修正时使用')"
+                :value="curVersion.semver_choices.patch"
+              >
+                <span v-dashed="12">{{ $t('修正版本') }}</span>
+              </bk-radio>
+            </bk-radio-group>
+          </bk-form-item>
+          <bk-form-item
+            :label="isOfficialVersion ? $t('版本号') : $t('测试号')"
+            :required="true"
+            :property="'version'"
+          >
+            <bk-input
+              v-model="curVersion.version"
+              :placeholder="isOfficialVersion ? $t('版本号') : $t('测试号')"
+              :disabled="curVersion.version_no !== 'self-fill'"
+            />
+          </bk-form-item>
+          <bk-form-item label="CommitID">
+            {{ commitId }}
+          </bk-form-item>
+          <bk-form-item
+            :label="$t('版本日志-label')"
+            :required="true"
+            :property="'comment'"
+          >
+            <bk-input
+              v-model="curVersion.comment"
+              :rows="5"
+              type="textarea"
+              :spellcheck="false"
+            />
+          </bk-form-item>
+          <bk-form-item label="">
+            <div
+              v-bk-tooltips.top="{ content: $t('已有发布任务进行中'), disabled: !isReleaseDisabled }"
+              style="display: inline-block"
             >
-              <bk-input
-                v-model="curVersion.comment"
-                :rows="5"
-                type="textarea"
-                :spellcheck="false"
-              />
-            </bk-form-item>
-            <bk-form-item label="">
-              <div
-                v-bk-tooltips.top="{ content: $t('已有发布任务进行中'), disabled: !isReleaseDisabled }"
-                style="display: inline-block"
+              <!-- 测试无需限制 -->
+              <bk-button
+                theme="primary"
+                :loading="isSubmitLoading"
+                :disabled="isReleaseDisabled"
+                @click="submitVersionForm"
               >
-                <!-- 测试无需限制 -->
-                <bk-button
-                  theme="primary"
-                  :loading="isSubmitLoading"
-                  :disabled="isReleaseDisabled"
-                  @click="submitVersionForm"
-                >
-                  {{ isOfficialVersion ? $t('提交并发布') : $t('提交并开始测试') }}
-                </bk-button>
-              </div>
-            </bk-form-item>
-          </bk-form>
-        </div>
+                {{ isOfficialVersion ? $t('提交并发布') : $t('提交并开始测试') }}
+              </bk-button>
+            </div>
+          </bk-form-item>
+        </bk-form>
       </div>
-    </paas-content-loader>
+    </div>
 
     <!-- 详情 -->
     <bk-sideslider
@@ -255,20 +251,25 @@
   </div>
 </template>
 
-<script>import pluginBaseMixin from '@/mixins/plugin-base-mixin';
-import paasPluginTitle from '@/components/pass-plugin-title';
+<script>
+import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 import { formatTime } from '@/common/tools';
 import dayjs from 'dayjs';
 
 export default {
-  components: {
-    paasPluginTitle,
-  },
   mixins: [pluginBaseMixin],
+  props: {
+    scheme: {
+      type: Object,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
-      isLoading: false,
-      isBranchLoading: false,
       versionDetail: {
         isShow: false,
       },
@@ -362,70 +363,51 @@ export default {
         }
       }
     },
+    loading(newVal) {
+      if (!newVal) {
+        this.$nextTick(() => {
+          this.offset = document.querySelector('.ribbon')?.offsetWidth + 10 || 138;
+        });
+      }
+    },
   },
   created() {
     this.init();
   },
   methods: {
     init() {
-      this.getNewVersionFormat();
+      this.formatScheme(this.scheme);
       this.curVersion.repository = this.curPluginInfo.repository;
     },
 
-    // 获取新建版本表单格式
-    async getNewVersionFormat(type) {
-      type === 'refresh' ? this.isBranchLoading = true : this.isLoading = true;
-      const data = {
-        pdId: this.pdId,
-        pluginId: this.pluginId,
-        type: this.versionType,
-      };
-      try {
-        const res = await this.$store.dispatch('plugin/getNewVersionFormat', data);
-        this.sourceVersions = res.source_versions;
-        // 刷新操作，只重新获取代码分支
-        if (type === 'refresh') {
-          return;
-        }
-        this.curVersionData = res;
-        this.curVersion.doc = res.doc;
-        this.curVersion.current_release = res.current_release;
-        // version_no 版本号生成规则, 自动生成(automatic),与代码版本一致(revision),与提交哈希一致(commit-hash),用户自助填写(self-fill)
-        this.curVersion.semver_choices = res.semver_choices;
-        // source_versions 会存在 [] 情况
-        if (res.revision_policy === null) {
-          this.curVersion.source_versions = res.source_versions[0]?.name || '';
-          this.curVersion.comment = res.source_versions[0]?.message || '';
-        } else {
-          this.curVersion.source_versions = '';
-        }
-        if (res.version_no === 'revision') {
-          // 与代码版本一致(revision)
-          this.curVersion.version = res.source_versions[0]?.name || '';
-        } else if (res.version_no === 'commit-hash') {
-          // 提交哈希一致(commit-hash)
-          this.curVersion.version = res.source_versions[0]?.revision || '';
-        } else if (res.version_no === 'automatic') {
-          // 自动生成(automatic), 版本类型用户自行选择
-          this.curVersion.version = '';
-        } else if (res.version_no === 'self-fill') {
-          // 用户自助填写(self-fill)
-          this.curVersion.version = '';
-        }
-        this.curVersion.version_no = res.version_no;
-      } catch (e) {
-        this.$bkMessage({
-          theme: 'error',
-          message: e.detail || e.message || this.$t('接口异常'),
-        });
-      } finally {
-        this.isLoading = false;
-        this.isBranchLoading = false;
-
-        this.$nextTick(() => {
-          this.offset = document.querySelector('.ribbon')?.offsetWidth + 10 || 138;
-        });
+    // 处理 scheme
+    formatScheme(res) {
+      this.curVersionData = res;
+      this.curVersion.doc = res.doc;
+      this.sourceVersions = res.source_versions;
+      this.curVersion.current_release = res.current_release;
+      // version_no 版本号生成规则, 自动生成(automatic),与代码版本一致(revision),与提交哈希一致(commit-hash),用户自助填写(self-fill)
+      this.curVersion.semver_choices = res.semver_choices;
+      const firstSourceVersion = res.source_versions[0] || {};
+      // source_versions 会存在 [] 情况
+      if (res.revision_policy === null) {
+        this.curVersion.source_versions = firstSourceVersion?.name || '';
+        this.curVersion.comment = firstSourceVersion?.message || '';
+      } else {
+        this.curVersion.source_versions = '';
       }
+      // 版本号映射
+      const versionMapping = {
+        revision: firstSourceVersion.name || '', // 与代码版本一致(revision)
+        'commit-hash': firstSourceVersion.revision || '', // 提交哈希一致(commit-hash)
+        automatic: '', // 自动生成(automatic), 版本类型用户自行选择
+        'self-fill': '', // 用户自助填写(self-fill)
+      };
+      this.curVersion.version = versionMapping[res.version_no] || '';
+      this.curVersion.version_no = res.version_no;
+    },
+    refresh() {
+      this.$emit('refresh');
     },
 
     submitVersionForm() {
@@ -436,24 +418,13 @@ export default {
       });
     },
 
-    bkInfoRander() {
-      const h = this.$createElement;
-      const typeLabel = this.curVersionData.version_type === 'tag' ? this.$t('代码 Tag') : this.$t('代码分支');
-      return h('div', {
-        class: 'version-info-wrapper',
-      }, [
-        h('div', {}, `${typeLabel}：${this.curVersion.source_versions || '--'}`),
-        h('div', {}, `${this.$t('代码更新时间：')}${this.formatTime(this.curVersionData.source_versions[0]?.last_update) || '--'}`),
-        h('div', {}, `Commit Message: ${this.curVersionData.source_versions[0]?.message || '--'}`),
-      ]);
-    },
-
     // 新建版本并发布
     async createVersion() {
       this.isSubmitLoading = true;
       // 当前选中分支的数据
       const versionData = this.sourceVersions.filter(item => item.name === this.curVersion.source_versions);
 
+      // 数据
       const data = {
         source_version_type: versionData[0].type,
         source_version_name: versionData[0].name,
@@ -476,6 +447,7 @@ export default {
         pluginId: this.pluginId,
         data,
       };
+
       try {
         const res = await this.$store.dispatch('plugin/createVersion', params);
         this.$bkMessage({
@@ -578,7 +550,6 @@ export default {
 
 <style lang="scss" scoped>
 .new-version {
-  margin-top: 24px;
   padding: 24px;
   background: #fff;
   box-shadow: 0 2px 4px 0 #1919290d;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
new file mode 100644
index 0000000000..542ebb5135
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <paas-plugin-title :name="isVersionRelease ? $t('新建版本') : $t('新建测试')" />
+    <paas-content-loader
+      :is-loading="isLoading"
+      placeholder="plugin-new-version-loading"
+      class="app-container middle"
+    >
+      <!-- 防止高度塌陷 -->
+      <div class="version-loading-placeholder" v-if="!scheme"></div>
+      <template v-else>
+        <!-- 新版ui -->
+        <new-version
+          v-if="scheme.version_type === 'tested_version' && isVersionRelease"
+          :scheme="scheme"
+        />
+        <!-- 新建版本 -->
+        <editor-version
+          v-else
+          :scheme="scheme"
+          :loading="schemeLoading"
+          @refresh="getNewVersionFormat"
+        />
+      </template>
+    </paas-content-loader>
+  </div>
+</template>
+
+<script>
+import paasPluginTitle from '@/components/pass-plugin-title';
+import editorVersion from './editor-version.vue';
+import newVersion from './new-version/index.vue';
+import pluginBaseMixin from '@/mixins/plugin-base-mixin';
+
+export default {
+  components: {
+    paasPluginTitle,
+    editorVersion,
+    newVersion,
+  },
+  mixins: [pluginBaseMixin],
+  data() {
+    return {
+      isLoading: true,
+      scheme: null,
+      schemeLoading: false,
+    };
+  },
+  computed: {
+    isVersionRelease() {
+      return this.$route.query.type === 'prod';
+    },
+  },
+  created() {
+    this.getNewVersionFormat();
+  },
+  methods: {
+    // 获取新建版本表单格式 - 是否需要请求
+    async getNewVersionFormat() {
+      this.schemeLoading = true;
+      const params = {
+        pdId: this.pdId,
+        pluginId: this.pluginId,
+        type: 'prod',
+      };
+      try {
+        // 多次请求？
+        const res = await this.$store.dispatch('plugin/getNewVersionFormat', params);
+        this.scheme = res;
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      } finally {
+        setTimeout(() => {
+          this.isLoading = false;
+          this.schemeLoading = false;
+        }, 200);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.version-loading-placeholder {
+    height: 500px;
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
new file mode 100644
index 0000000000..048ecf2166
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="plugin-new-version">
+    <div class="new-version-container">
+      <!-- 发布内容 -->
+      <release-content ref="releaseContent" :scheme="scheme" />
+      <!-- 发布策略 -->
+      <release-strategy ref="releaseStrategy" :scheme="scheme" />
+    </div>
+    <section class="version-tools">
+      <div class="button-warpper">
+        <bk-button
+          :theme="'primary'"
+          class="mr8"
+          :lodaing="isSubmitLoading"
+          @click="handleSubmit"
+        >
+          {{ $t('申请灰度发布') }}
+        </bk-button>
+        <bk-button
+          :theme="'default'"
+          type="submit"
+          @click="handleBack('prod')"
+        >
+          {{ $t('取消') }}
+        </bk-button>
+      </div>
+      <p class="release-tips" v-html="releaseTips"></p>
+    </section>
+  </div>
+</template>
+<script>
+import pluginBaseMixin from '@/mixins/plugin-base-mixin';
+import releaseContent from './release-content.vue';
+import releaseStrategy from './release-strategy.vue';
+
+export default {
+  name: 'PluginNewVersion',
+  components: {
+    releaseContent,
+    releaseStrategy,
+  },
+  mixins: [pluginBaseMixin],
+  props: {
+    scheme: {
+      type: Object,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // 灰度 - 灰度发布审批中 - 灰度中 (审批通过) - 灰度中 (发布完成)
+      releaseStep: '',
+      isSubmitLoading: false,
+    };
+  },
+  computed: {
+    releaseTips() {
+      return this.$t('灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。');
+    },
+  },
+  created() {
+    console.log('scheme', this.scheme);
+  },
+  methods: {
+    // 新建正式版本
+    async handleSubmit() {
+      try {
+        await Promise.all([this.$refs.releaseContent.validate(), this.$refs.releaseStrategy.validate()]);
+
+        // 获取子组件数据
+        const content = this.$refs.releaseContent.getFormData();
+        const strategy = this.$refs.releaseStrategy.getFormData();
+        const params = {
+          ...content,
+          release_strategy: {
+            ...strategy,
+          },
+        };
+        // 提交
+        this.createVersion(params);
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    // 新建版本
+    async createVersion(data) {
+      this.isSubmitLoading = true;
+      try {
+        await this.$store.dispatch('plugin/createVersion', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          data,
+        });
+        this.$bkMessage({
+          theme: 'success',
+          message: this.$t('新建成功!'),
+        });
+        // 版本管理
+        this.$router.push({
+          name: 'pluginVersionManager',
+          query: {
+            type: 'prod',
+          },
+        });
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      } finally {
+        this.isSubmitLoading = false;
+      }
+    },
+    handleBack(type) {
+      this.$router.push({
+        name: 'pluginVersionManager',
+        query: { type },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.plugin-new-version {
+  .version-tools {
+    position: fixed;
+    padding-left: 264px;
+    display: flex;
+    align-items: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 48px;
+    background: #fafbfd;
+    box-shadow: 0 -1px 0 0 #dcdee5;
+  }
+
+  .release-tips {
+    color: #979ba5;
+    font-size: 12px;
+    margin-left: 16px;
+    /deep/ em {
+      font-weight: 700;
+    }
+  }
+  }
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
new file mode 100644
index 0000000000..a9d6555ad2
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="release-content-container">
+    <card
+      :title="$t('发布内容')"
+      :is-collapse="true"
+    >
+      <!-- 编辑模式 -->
+      <bk-form
+        v-if="isEdit"
+        :model="releaseContent"
+        :rules="rules"
+        :label-width="120"
+        ref="releaseContentForm"
+        ext-cls="gray-range-form-cls"
+      >
+        <bk-form-item
+          :label="$t('已测试版本')"
+          :required="true"
+          :property="'id'"
+          :error-display-type="'normal'"
+        >
+          <bk-select
+            :disabled="false"
+            v-model="releaseContent.source_versions"
+            searchable>
+            <bk-option
+              v-for="option in sourceVersions"
+              :key="option.name"
+              :id="option.name"
+              :name="option.name">
+            </bk-option>
+          </bk-select>
+          <p slot="tip">
+            <bk-button
+              :text="true"
+              title="primary"
+            >
+              <i class="paasng-icon paasng-jump-link icon-cls-link" />
+              {{ $t('查看测试数据') }}
+            </bk-button>
+          </p>
+        </bk-form-item>
+        <bk-form-item
+          :label="$t('版本类型')"
+          :required="true"
+          :property="'version'"
+          :error-display-type="'normal'"
+        >
+          <bk-radio-group
+            v-model="releaseContent.version"
+            @change="changeVersionType"
+          >
+            <bk-radio
+              v-for="item in versionTypes"
+              v-bk-tooltips.top="item.tips"
+              :value="item.value"
+              :key="item.key"
+            >
+              <span v-dashed="12">{{ item.name }}</span>
+            </bk-radio>
+          </bk-radio-group>
+        </bk-form-item>
+        <!-- 回显 -->
+        <bk-form-item
+          :label="$t('版本号')"
+          :required="true"
+          :property="'version'"
+          :error-display-type="'normal'"
+        >
+          <bk-input v-model="releaseContent.versionDisplay" :disabled="true"></bk-input>
+        </bk-form-item>
+        <bk-form-item
+          :label="$t('版本日志')"
+          :required="true"
+          :property="'comment'"
+          :error-display-type="'normal'"
+        >
+          <bk-input
+            v-model="releaseContent.comment"
+            :type="'textarea'"
+          ></bk-input>
+        </bk-form-item>
+      </bk-form>
+
+      <!-- 查看模式 -->
+      <section
+        class="view-mode"
+        v-else
+      >
+        <view-mode>
+          <ul>
+            <li class="item">
+              <div class="label">{{ $t('已测试版本') }}：</div>
+              <div class="value">
+                <p>--</p>
+                <p>
+                  <bk-button
+                    :text="true"
+                    title="primary"
+                  >
+                    <i class="paasng-icon paasng-jump-link icon-cls-link" />
+                    {{ $t('查看测试数据') }}
+                  </bk-button>
+                </p>
+              </div>
+            </li>
+            <li class="item">
+              <div class="label">{{ $t('版本类型') }}：</div>
+              <div class="value">--</div>
+            </li>
+            <li class="item">
+              <div class="label">{{ $t('版本号') }}：</div>
+              <div class="value">--</div>
+            </li>
+            <li class="item">
+              <div class="label">{{ $t('版本日志') }}：</div>
+              <div class="value">--</div>
+            </li>
+          </ul>
+        </view-mode>
+      </section>
+    </card>
+  </div>
+</template>
+
+<script>
+import card from '@/components/card/card.vue';
+import viewMode from './view-mode.vue';
+
+export default {
+  name: 'ReleaseContent',
+  components: {
+    card,
+    viewMode,
+  },
+  props: {
+    mode: {
+      type: String,
+      default: 'edit',
+    },
+    scheme: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 发布内容
+      releaseContent: {
+        type: 'prod',
+        // 代码分支
+        source_versions: '',
+        // 版本类型
+        semver_type: '',
+        // 版本号
+        version: '',
+        comment: '',
+        versionDisplay: '',
+      },
+      // 接口数据字段
+      interface: {
+        type: 'prod',
+        source_version_type: 'tested_version',
+        source_version_name: 'test-xxxxx',
+        release_id: 'test_release.id',
+        version: 'new_version',
+        comment: '...',
+        // 版本类型
+        semver_type: 'patch',
+      },
+      sourceVersions: [],
+      versionTypes: [
+        { name: this.$t('重大版本'), key: 'major', value: '1.0.0', tips: this.$t('非兼容式升级时使用') },
+        { name: this.$t('次版本'), key: 'minor', value: '0.1.0', tips: this.$t('兼容式功能更新时使用') },
+        { name: this.$t('修正版本'), key: 'patch', value: '0.0.1', tips: this.$t('兼容式问题修正时使用') },
+      ],
+      rules: {
+        version: [
+          {
+            required: true,
+            message: '必填项',
+            trigger: 'blur',
+          },
+        ],
+        comment: [
+          {
+            required: true,
+            message: '必填项',
+            trigger: 'blur',
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isEdit() {
+      return this.mode === 'edit';
+    },
+    curVersionData() {
+      return this.sourceVersions.find(item => item.name === this.releaseContent.source_versions) || {};
+    },
+  },
+  watch: {
+    scheme: {
+      handler(newValue) {
+        this.formatData(newValue);
+      },
+      immediate: true,
+      deep: true,
+    },
+    'releaseContent.version'(newVal) {
+      this.releaseContent.versionDisplay = `${newVal} (主版本号、次版本号、修正版本号)`;
+    },
+    'releaseContent.source_versions'() {
+      this.releaseContent.comment = this.curVersionData.message;
+      if (this.releaseContent.version_no === 'revision' || this.releaseContent.version_no === 'commit-hash') {
+        this.releaseContent.version = this.releaseContent.version_no === 'revision' ? this.curVersionData.name : this.curVersionData.revision;
+      }
+    },
+  },
+  methods: {
+    // 版本类型切换
+    changeVersionType(value) {
+      this.releaseContent.semver_type = this.versionTypes.find(v => v.value === value).key;
+      // 版本类型切换重新校验，解决依赖性错误提示问题
+      this.$refs.releaseContentForm.validate().catch((e) => {
+        console.error(e);
+      });
+    },
+    // 数据格式化
+    formatData(data) {
+      this.versionTypes.forEach((v) => {
+        v.value = data.semver_choices[v.key];
+      });
+      this.sourceVersions = data.source_versions;
+      this.releaseContent.version_no = data.version_no;
+      // 设置
+      if (data.revision_policy === null) {
+        this.releaseContent.source_versions = data.source_versions[0]?.name || '';
+        this.releaseContent.comment = data.source_versions[0]?.message || '';
+      } else {
+        this.releaseContent.source_versions = '';
+      }
+      const versionMapping = {
+        revision: data.source_versions[0]?.name || '',
+        'commit-hash': data.source_versions[0]?.revision || '',
+        automatic: '',
+        'self-fill': '',
+      };
+      this.releaseContent.version = versionMapping[data.version_no] || '';
+    },
+    // 表单校验
+    validate() {
+      return this.$refs.releaseContentForm.validate();
+    },
+    // 向外抛出当前表单数据
+    getFormData() {
+      const { version, comment, semver_type } = this.releaseContent;
+      const params = {
+        type: 'prod',
+        source_version_type: this.curVersionData.type,
+        source_version_name: this.curVersionData.name,
+        release_id: this.curVersionData.extra.release_id,
+        version,
+        comment,
+        semver_type,
+      };
+      return params;
+    },
+  },
+};
+</script>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
new file mode 100644
index 0000000000..7dba12bd31
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="release-strategy-container">
+    <card
+      class="mt16"
+      :title="$t('发布策略')"
+      :is-collapse="true"
+    >
+      <bk-form
+        v-if="isEdit"
+        :label-width="120"
+        :model="releaseStrategy"
+        ref="releaseStrategyForm"
+      >
+        <bk-form-item
+          label="发布策略"
+          :required="true"
+          :property="'strategy'"
+          :error-display-type="'normal'"
+          :rules="rules.strategy"
+        >
+          <bk-radio-group v-model="releaseStrategy.strategy">
+            <bk-radio :value="'gray'">{{ $t('先灰度后全量发布') }}</bk-radio>
+            <bk-radio :value="'full'">{{ $t('直接全量发布') }}</bk-radio>
+          </bk-radio-group>
+        </bk-form-item>
+        <bk-form-item
+          v-if="!isFullRelease"
+          label="灰度范围"
+          :required="true"
+          :property="'project'"
+          :error-display-type="'normal'"
+        >
+          <div class="gray-range">
+            <bk-form
+              :model="releaseStrategy"
+              ref="childForm"
+              form-type="vertical"
+              ext-cls="gray-range-form-cls"
+            >
+              <bk-form-item
+                :label="$t('蓝盾项目 ID')"
+                :required="true"
+                :property="'bkci_project'"
+                :error-display-type="'normal'"
+                :rules="rules.bkci_project"
+              >
+                <bk-tag-input
+                  v-model="releaseStrategy.bkci_project"
+                  :placeholder="$t('请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID')"
+                  :has-delete-icon="true"
+                  :allow-create="true"
+                  ext-cls="projec-id-tag-cls">
+                </bk-tag-input>
+              </bk-form-item>
+              <bk-form-item
+                :label="$t('组织')"
+                :required="true"
+                :property="'organization'"
+                :error-display-type="'normal'"
+                :rules="rules.organization"
+              >
+                <!-- <bk-input v-model="releaseStrategy.organization"></bk-input> -->
+                <bk-button :theme="'default'" @click="handleSelectOrganization">{{ $t('选择组织') }}</bk-button>
+                <div class="render-member-wrapper" v-if="departments.length > 0">
+                  <render-member-list
+                    type="department"
+                    :data="departments"
+                  />
+                </div>
+                <p
+                  class="f12 from-tip"
+                  style="margin-top: 2px"
+                  slot="tip"
+                >
+                  {{ $t('最小范围可以选择中心') }}
+                </p>
+              </bk-form-item>
+            </bk-form>
+          </div>
+        </bk-form-item>
+      </bk-form>
+
+      <view-mode v-else>
+        <ul>
+          <li class="item">
+            <div class="label">{{ $t('发布策略') }}：</div>
+            <div class="value">--</div>
+          </li>
+          <li class="item">
+            <div class="label">{{ $t('灰度范围') }}：</div>
+            <div class="value">--</div>
+          </li>
+        </ul>
+      </view-mode>
+    </card>
+
+
+    <user-selector-dialog
+      ref="userSelectorDialogRef"
+      title="选择组织"
+      placeholder="组织"
+      :show.sync="isShow"
+      :departments="departments"
+      :api-host="apiHost"
+      :custom-close="true"
+      :range="'departments'"
+      @sumbit="handleSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import userSelectorDialog from '@/components/user-selector';
+import renderMemberList from '@/views/dev-center/app/market/render-member-list';
+import card from '@/components/card/card.vue';
+import viewMode from './view-mode.vue';
+
+export default {
+  name: 'ReleaseStrategy',
+  components: {
+    userSelectorDialog,
+    renderMemberList,
+    card,
+    viewMode,
+  },
+  props: {
+    mode: {
+      type: String,
+      default: 'edit',
+    },
+  },
+  data() {
+    return {
+      // 发布策略
+      releaseStrategy: {
+        strategy: 'gray',
+        bkci_project: [],
+        organization: [],
+      },
+      isShow: false,
+      apiHost: window.BK_COMPONENT_API_URL,
+      departments: [],
+      rules: {
+        strategy: [
+          {
+            required: true,
+            message: '必填项',
+            trigger: 'blur',
+          },
+        ],
+        bkci_project: [
+          {
+            required: true,
+            message: '必填项',
+            trigger: 'blur',
+          },
+        ],
+        organization: [
+          {
+            required: true,
+            message: '必填项',
+            trigger: 'blur',
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isEdit() {
+      return this.mode === 'edit';
+    },
+    // 全量发布
+    isFullRelease() {
+      return this.releaseStrategy.strategy === 'full';
+    },
+  },
+  methods: {
+    // 表单校验
+    validate() {
+      return Promise.all([this.$refs.releaseStrategyForm.validate(), this.$refs.childForm.validate()]);
+    },
+    // 向外抛出当前表单数据
+    getFormData() {
+      return this.releaseStrategy;
+    },
+    // 组织弹窗
+    handleSelectOrganization() {
+      this.isShow = true;
+    },
+    async handleSubmit(payload) {
+      this.releaseStrategy.organization = payload;
+      this.departments = payload;
+      this.isShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.release-strategy-container {
+  .mt16 {
+    margin-top: 16px;
+  }
+  .gray-range {
+    padding: 12px 16px;
+    background: #f5f7fa;
+    border-radius: 2px;
+    .gray-range-form-cls {
+      /deep/ .bk-form-item {
+        &::before,
+        &::after {
+          display: unset;
+        }
+      }
+      .from-tip {
+        color: #979ba5;
+      }
+      .projec-id-tag-cls {
+        /deep/ .tag-list .key-node {
+          background-color: #FAFBFD;
+          border: 1px solid #DCDEE5;
+          border-radius: 2px;
+          .tag {
+            background-color: #FAFBFD;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue
new file mode 100644
index 0000000000..f7b110dc86
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="view-mode-container">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ViewMode',
+  props: {
+    labelWidth: {
+      type: String | Number,
+      default: 120,
+    },
+  },
+  mounted() {
+    this.$el.style.setProperty('--custom-label-width', `${this.labelWidth}px`);
+  },
+  beforeDestroy() {
+    this.$el.style.removeProperty('--custom-label-width');
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.view-mode-container {
+  .item {
+    display: flex;
+    min-height: 32px;
+    line-height: 32px;
+    margin-bottom: 6px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .label {
+      width: var(--custom-label-width);
+      text-align: right;
+    }
+    .value {
+      margin-left: 8px;
+    }
+  }
+}
+</style>

From be7057d84c424c20cc76050ba32ed95346eae3cb Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Tue, 13 Aug 2024 10:14:05 +0800
Subject: [PATCH 03/17] =?UTF-8?q?fix:=20=E5=8F=AF=E8=A7=81=E8=8C=83?=
 =?UTF-8?q?=E5=9B=B4=E4=BD=93=E9=AA=8C=E4=BF=AE=E5=A4=8D=EF=BC=8C=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E7=BC=A9=E5=B0=8F=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/user-selector/index.vue    | 19 +++++-
 .../plugin/base-config/visible-range.vue      | 67 ++++++++++++++++---
 2 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/webfe/package_vue/src/components/user-selector/index.vue b/webfe/package_vue/src/components/user-selector/index.vue
index 9f9b3fd00a..c727c71c3b 100644
--- a/webfe/package_vue/src/components/user-selector/index.vue
+++ b/webfe/package_vue/src/components/user-selector/index.vue
@@ -193,6 +193,13 @@ export default {
       type: String,
       default: 'all',
     },
+    departmentsType: {
+      type: String,
+      default: 'all',
+    },
+    departmentsFn: {
+      type: Function,
+    },
   },
   data() {
     return {
@@ -265,6 +272,9 @@ export default {
     isUsingDefaultRule() {
       return this.range === 'all';
     },
+    isForAllDepartments() {
+      return this.departmentsType === 'all';
+    },
   },
   watch: {
     show: {
@@ -342,7 +352,8 @@ export default {
       };
       try {
         const res = await this.fetchDepartment(params);
-        const categories = [...res];
+        // 默认为所有部门，特殊情况为指定部门
+        const categories = this.isForAllDepartments ? [...res] : this.departmentsFn(res);
         categories.forEach((item) => {
           item.visiable = true;
           item.showRadio = true;
@@ -471,8 +482,10 @@ export default {
           fetchList.push(this.fetchSearchUser(requestUserParams));
         }
         const res = await Promise.all(fetchList);
-        const departments = unique(res[0], 'id');
-        const users = unique(res[1], 'id');
+        // 默认搜索所有部门，特殊情况过滤其他部门
+        const filterResult = this.isForAllDepartments ? res : this.departmentsFn(res[0], 'search');
+        const departments = unique(filterResult[0], 'id');
+        const users = unique(filterResult[1], 'id');
         departments.forEach((depart) => {
           depart.showRadio = true;
           depart.type = 'department';
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index c57c23d61e..11a7be06c8 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -7,6 +7,25 @@
       placeholder="visible-range-loading"
       :is-transform="false"
     >
+      <bk-alert
+        v-if="visibleRangeData.is_in_approval"
+        class="warning-alert-cls mb16"
+        type="warning"
+        :show-icon="false"
+      >
+        <div slot="title">
+          <i class="paasng-icon paasng-remind"></i>
+          {{ $t('修改的可见范围已提交审批，尚未生效') }}
+          <bk-button
+            size="small"
+            text
+            class="ml10"
+            @click="viewApprovalDetails"
+          >
+            {{ $t('查看审批详情') }}
+          </bk-button>
+        </div>
+      </bk-alert>
       <!-- 无数据状态 -->
       <section class="exception-wrapper" v-if="!isEdit">
         <bk-exception class="exception-wrap-item exception-part" type="empty" scene="part">
@@ -27,7 +46,6 @@
           <bk-form style="width: 800px" :label-width="150" :model="formData" ref="visibleRangeForm">
             <bk-form-item
               :label="$t('蓝盾项目')"
-              :required="true"
               :property="'projectIds'"
               :error-display-type="'normal'"
               :rules="rules.projectIds">
@@ -68,6 +86,8 @@
       :api-host="apiHost"
       :custom-close="true"
       :range="'departments'"
+      :departments-fn="handleDepartments"
+      departments-type="tc"
       @sumbit="handleSubmit"
     />
   </div>
@@ -101,13 +121,8 @@ export default {
       rules: {
         projectIds: [
           {
-            required: true,
-            message: this.$t('必填项'),
-            trigger: 'blur',
-          },
-          {
-            regex: /^([a-z][a-z0-9-]{0,31})(;[a-z][a-z0-9-]{0,31})*;?$/,
-            message: this.$t('请用英文分号分隔'),
+            regex: /^([a-z][a-zA-Z0-9-]+)(,[a-z][a-zA-Z0-9-]+)*$/,
+            message: this.$t('Project ID是字符+数字组成，并以小写字母开头，Project ID之间用英文分号分隔'),
             trigger: 'blur',
           },
         ],
@@ -217,6 +232,23 @@ export default {
         });
       }
     },
+    // 过滤出指定部门
+    handleDepartments(data, type) {
+      const TCID = 2874;
+      const prefix = '腾讯公司/';
+
+      if (type === 'search') {
+        // 搜索过滤出指定部门数据
+        return [data.filter(v => v.full_name.startsWith(prefix))];
+      }
+      const tc = data.find(v => v.id === TCID);
+      return tc ? [tc] : [];
+    },
+    // 查看申请详情
+    viewApprovalDetails() {
+      const url = this.visibleRangeData.itsm_detail?.ticket_url;
+      window.open(url, '_blank');
+    },
   },
 };
 </script>
@@ -252,5 +284,24 @@ export default {
   .text-btn {
     margin-bottom: 8px;
   }
+  .mb16  {
+    margin-bottom: 16px;
+  }
+  .warning-alert-cls {
+    i {
+      font-size: 14px;
+      color: #ff9c01;
+      transform: translateY(0px);
+    }
+    /deep/ .bk-alert-wraper {
+      height: 32px;
+      align-items: center;
+      font-size: 12px;
+      color: #63656e;
+    }
+    /deep/ .bk-button-text.bk-button-small {
+      padding: 0;
+    }
+  }
 }
 </style>

From a5c01f5a9b2fdb56126d6b8c4121622db9afa4f8 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Tue, 13 Aug 2024 10:14:27 +0800
Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=E7=89=88=E6=9C=AC=E7=81=B0?=
 =?UTF-8?q?=E5=BA=A6=E5=8F=91=E5=B8=83v1.0=20#=20Reviewed,=20transaction?=
 =?UTF-8?q?=20id:=2015076?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/common/constants.js     |  10 +
 .../src/components/paas-plugin-nav.vue        |   2 +
 .../src/components/pass-plugin-title.vue      |   7 +-
 webfe/package_vue/src/router/plugin.js        |  14 +
 webfe/package_vue/src/store/modules/plugin.js |   9 +
 .../src/views/plugin-center/plugin/index.vue  |  13 +
 .../create-version/editor-version.vue         |   4 +-
 .../version-manager/create-version/index.vue  |  33 +-
 .../create-version/new-version/index.vue      |  64 ++-
 .../new-version/release-content.vue           |  74 +++-
 .../new-version/release-strategy.vue          | 144 ++++++-
 .../create-version/new-version/view-mode.vue  |   2 +
 .../new-version/visible-range.vue             |  64 +++
 .../plugin/version-manager/index.vue          | 139 +++++--
 .../version-manager/version-details/index.vue | 383 ++++++++++++++++++
 .../version-manager/version-release.vue       |   4 +-
 16 files changed, 874 insertions(+), 92 deletions(-)
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue

diff --git a/webfe/package_vue/src/common/constants.js b/webfe/package_vue/src/common/constants.js
index fa794780f0..2d4d7aa9b1 100644
--- a/webfe/package_vue/src/common/constants.js
+++ b/webfe/package_vue/src/common/constants.js
@@ -275,3 +275,13 @@ export const CIRCLED_NUMBERS = [
   '①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩',
   '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳',
 ];
+
+/**
+ * Codecc 版本发布状态
+ */
+export const CODECC_RELEASE_STATUS = {
+  pending: '灰度中',
+  successful: '已全量发布',
+  interrupted: '发布异常',
+  failed: '发布异常',
+};
diff --git a/webfe/package_vue/src/components/paas-plugin-nav.vue b/webfe/package_vue/src/components/paas-plugin-nav.vue
index ccdc93f6da..16fe9997dc 100644
--- a/webfe/package_vue/src/components/paas-plugin-nav.vue
+++ b/webfe/package_vue/src/components/paas-plugin-nav.vue
@@ -77,6 +77,7 @@ export default {
       allowedRouterName: [
         'pluginVersionRelease',
         'pluginVersionEditor',
+        'pluginReleaseDetails',
         'pluginTestReport',
         'marketInfoEdit',
         'moreInfoEdit',
@@ -183,6 +184,7 @@ export default {
       this.allowedRouterName = [
         'pluginVersionRelease',
         'pluginVersionEditor',
+        'pluginReleaseDetails',
         'pluginTestReport',
         'marketInfoEdit',
         'moreInfoEdit',
diff --git a/webfe/package_vue/src/components/pass-plugin-title.vue b/webfe/package_vue/src/components/pass-plugin-title.vue
index b60413cbb0..4df8c96c3a 100644
--- a/webfe/package_vue/src/components/pass-plugin-title.vue
+++ b/webfe/package_vue/src/components/pass-plugin-title.vue
@@ -28,7 +28,7 @@
               v-else
               :class="['dot', versionData.status]"
             />
-            <span class="pl5">{{ PLUGIN_TEST_VERSION_STATUS[versionData.status] }}</span>
+            <span class="pl5">{{ statusMap[versionData.status] }}</span>
           </div>
         </template>
         <a
@@ -47,7 +47,6 @@
 </template>
 <script>
 import { bus } from '@/common/bus';
-import { PLUGIN_TEST_VERSION_STATUS } from '@/common/constants';
 
 export default {
   props: {
@@ -79,11 +78,13 @@ export default {
       type: String,
       default: '',
     },
+    statusMap: {
+      type: Object,
+    },
   },
   data() {
     return {
       showBackIcon: false,
-      PLUGIN_TEST_VERSION_STATUS,
     };
   },
   watch: {
diff --git a/webfe/package_vue/src/router/plugin.js b/webfe/package_vue/src/router/plugin.js
index d8b7da7456..e4a07ff11b 100644
--- a/webfe/package_vue/src/router/plugin.js
+++ b/webfe/package_vue/src/router/plugin.js
@@ -33,6 +33,10 @@ const pluginVersionEditor = () => import(/* webpackChunkName: 'plugin-version' *
   window.showDeployTip(error);
 });
 
+const pluginReleaseDetails = () => import(/* webpackChunkName: 'plugin-version' */'@/views/plugin-center/plugin/version-manager/version-details').then(module => module).catch((error) => {
+  window.showDeployTip(error);
+});
+
 const pluginLog = () => import(/* webpackChunkName: 'plugin-version' */'@/views/plugin-center/plugin/log/index').then(module => module).catch((error) => {
   window.showDeployTip(error);
 });
@@ -178,6 +182,16 @@ export const pluginRouter = [
           supportBack: true,
         },
       },
+      {
+        path: ':pluginTypeId/:id/version-details',
+        component: pluginReleaseDetails,
+        name: 'pluginReleaseDetails',
+        meta: {
+          pathName: i18n.t('版本发布'),
+          capture403Error: false,
+          supportBack: true,
+        },
+      },
       {
         path: ':pluginTypeId/:id/log',
         component: pluginLog,
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index f26a3b9d1c..9c0ff28e6b 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -603,5 +603,14 @@ export default {
       const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/visible_range/`;
       return http.post(url, data, config);
     },
+
+    /**
+     * 扩大灰度范围
+     * @param {Object} params 请求参数：pdId, pluginId, id, data
+     */
+    expandGrayScope({}, { pdId, pluginId, id, data }, config) {
+      const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/releases/${id}/strategy/`;
+      return http.post(url, data, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/index.vue
index 5882408ab8..0db83203b0 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/index.vue
@@ -314,4 +314,17 @@ export default {
 .plugiun-highly-adaptive {
   min-width: 0;
 }
+.overview-fright-plugin {
+  /deep/ .bk-form {
+    .bk-label {
+      font-size: 12px !important;
+    }
+    .bk-form-content {
+      font-size: 12px !important;
+      .bk-form-control {
+        font-size: 12px !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue
index 2aea2600f9..df34f2735f 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/editor-version.vue
@@ -54,8 +54,8 @@
           <bk-form-item
             :label="curVersionData.version_type === 'tag' ? $t('代码 Tag') : $t('代码分支')"
             :required="true"
-            :icon-offset="118"
             :property="'source_versions'"
+            :error-display-type="'normal'"
           >
             <div class="source-versions-wrapper">
               <bk-select
@@ -146,6 +146,7 @@
             :label="isOfficialVersion ? $t('版本号') : $t('测试号')"
             :required="true"
             :property="'version'"
+            :error-display-type="'normal'"
           >
             <bk-input
               v-model="curVersion.version"
@@ -160,6 +161,7 @@
             :label="$t('版本日志-label')"
             :required="true"
             :property="'comment'"
+            :error-display-type="'normal'"
           >
             <bk-input
               v-model="curVersion.comment"
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
index 542ebb5135..f18c1bc9c5 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
@@ -1,23 +1,25 @@
 <template>
   <div>
-    <paas-plugin-title :name="isVersionRelease ? $t('新建版本') : $t('新建测试')" />
+    <paas-plugin-title :name="isVersionRelease ? $t('新建版本发布') : $t('新建测试')" />
     <paas-content-loader
       :is-loading="isLoading"
       placeholder="plugin-new-version-loading"
       class="app-container middle"
     >
       <!-- 防止高度塌陷 -->
-      <div class="version-loading-placeholder" v-if="!scheme"></div>
+      <div class="version-loading-placeholder" v-if="!Object.keys(scheme).length"></div>
       <template v-else>
         <!-- 新版ui -->
         <new-version
           v-if="scheme.version_type === 'tested_version' && isVersionRelease"
           :scheme="scheme"
+          :version-data="versionData"
         />
         <!-- 新建版本 -->
         <editor-version
           v-else
           :scheme="scheme"
+          :version-data="versionData"
           :loading="schemeLoading"
           @refresh="getNewVersionFormat"
         />
@@ -42,16 +44,23 @@ export default {
   data() {
     return {
       isLoading: true,
-      scheme: null,
+      scheme: {},
       schemeLoading: false,
+      versionData: {},
     };
   },
   computed: {
     isVersionRelease() {
       return this.$route.query.type === 'prod';
     },
+    versionId() {
+      return this.$route.query.versionId;
+    },
   },
-  created() {
+  async created() {
+    if (this.versionId) {
+      await this.getReleaseDetail();
+    }
     this.getNewVersionFormat();
   },
   methods: {
@@ -79,6 +88,22 @@ export default {
         }, 200);
       }
     },
+    // 获取版本详情
+    async getReleaseDetail() {
+      try {
+        const res = await this.$store.dispatch('plugin/getReleaseDetail', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          releaseId: this.versionId,
+        });
+        this.versionData = res;
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
index 048ecf2166..a0297c094d 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
@@ -2,16 +2,24 @@
   <div class="plugin-new-version">
     <div class="new-version-container">
       <!-- 发布内容 -->
-      <release-content ref="releaseContent" :scheme="scheme" />
+      <release-content
+        v-bind="$attrs"
+        ref="releaseContent"
+      />
+      <!-- 可见范围 -->
+      <visible-range :data="visibleRangeData" />
       <!-- 发布策略 -->
-      <release-strategy ref="releaseStrategy" :scheme="scheme" />
+      <release-strategy
+        v-bind="$attrs"
+        ref="releaseStrategy"
+      />
     </div>
     <section class="version-tools">
       <div class="button-warpper">
         <bk-button
           :theme="'primary'"
           class="mr8"
-          :lodaing="isSubmitLoading"
+          :loading="isSubmitLoading"
           @click="handleSubmit"
         >
           {{ $t('申请灰度发布') }}
@@ -24,27 +32,28 @@
           {{ $t('取消') }}
         </bk-button>
       </div>
-      <p class="release-tips" v-html="releaseTips"></p>
+      <p
+        class="release-tips"
+        v-html="releaseTips"
+      ></p>
     </section>
   </div>
 </template>
 <script>
 import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 import releaseContent from './release-content.vue';
+import visibleRange from './visible-range.vue';
 import releaseStrategy from './release-strategy.vue';
 
 export default {
   name: 'PluginNewVersion',
   components: {
     releaseContent,
+    visibleRange,
     releaseStrategy,
   },
   mixins: [pluginBaseMixin],
   props: {
-    scheme: {
-      type: Object,
-      default: () => {},
-    },
     loading: {
       type: Boolean,
       default: false,
@@ -55,6 +64,10 @@ export default {
       // 灰度 - 灰度发布审批中 - 灰度中 (审批通过) - 灰度中 (发布完成)
       releaseStep: '',
       isSubmitLoading: false,
+      visibleRangeData: {
+        bkci_project: [],
+        organization: [],
+      },
     };
   },
   computed: {
@@ -63,7 +76,7 @@ export default {
     },
   },
   created() {
-    console.log('scheme', this.scheme);
+    this.getVisibleRange();
   },
   methods: {
     // 新建正式版本
@@ -90,7 +103,7 @@ export default {
     async createVersion(data) {
       this.isSubmitLoading = true;
       try {
-        await this.$store.dispatch('plugin/createVersion', {
+        const res = await this.$store.dispatch('plugin/createVersion', {
           pdId: this.pdId,
           pluginId: this.pluginId,
           data,
@@ -99,11 +112,15 @@ export default {
           theme: 'success',
           message: this.$t('新建成功!'),
         });
-        // 版本管理
+        // 版本详情
         this.$router.push({
-          name: 'pluginVersionManager',
+          name: 'pluginReleaseDetails',
+          params: {
+            pluginTypeId: this.pdId,
+            id: this.pluginId,
+          },
           query: {
-            type: 'prod',
+            versionId: res.id,
           },
         });
       } catch (e) {
@@ -115,6 +132,25 @@ export default {
         this.isSubmitLoading = false;
       }
     },
+    // 获取可见范围数据
+    async getVisibleRange() {
+      try {
+        const res = await this.$store.dispatch('plugin/getVisibleRange', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+        });
+        this.visibleRangeData = res;
+      } catch (e) {
+        // 404 就说明没有数据
+        if (e.status === 404) {
+          return;
+        }
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
     handleBack(type) {
       this.$router.push({
         name: 'pluginVersionManager',
@@ -148,5 +184,5 @@ export default {
       font-weight: 700;
     }
   }
-  }
+}
 </style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
index a9d6555ad2..e24f620a36 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
@@ -30,10 +30,11 @@
               :name="option.name">
             </bk-option>
           </bk-select>
-          <p slot="tip">
+          <p slot="tip" class="tips">
             <bk-button
               :text="true"
               title="primary"
+              size="small"
             >
               <i class="paasng-icon paasng-jump-link icon-cls-link" />
               {{ $t('查看测试数据') }}
@@ -92,29 +93,29 @@
             <li class="item">
               <div class="label">{{ $t('已测试版本') }}：</div>
               <div class="value">
-                <p>--</p>
+                <p>{{ data.source_version_name }}</p>
                 <p>
                   <bk-button
                     :text="true"
                     title="primary"
                   >
-                    <i class="paasng-icon paasng-jump-link icon-cls-link" />
-                    {{ $t('查看测试数据') }}
+                    <i class="paasng-icon paasng-jump-link icon-cls-link mr5" />
+                    <span class="f12">{{ $t('查看测试数据') }}</span>
                   </bk-button>
                 </p>
               </div>
             </li>
             <li class="item">
               <div class="label">{{ $t('版本类型') }}：</div>
-              <div class="value">--</div>
+              <div class="value">{{ versionTypes.find(v => v.key === data.semver_type)?.name }}</div>
             </li>
             <li class="item">
               <div class="label">{{ $t('版本号') }}：</div>
-              <div class="value">--</div>
+              <div class="value">{{ data.version }}</div>
             </li>
             <li class="item">
               <div class="label">{{ $t('版本日志') }}：</div>
-              <div class="value">--</div>
+              <div class="value">{{ data.comment }}</div>
             </li>
           </ul>
         </view-mode>
@@ -142,6 +143,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    versionData: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -157,17 +166,6 @@ export default {
         comment: '',
         versionDisplay: '',
       },
-      // 接口数据字段
-      interface: {
-        type: 'prod',
-        source_version_type: 'tested_version',
-        source_version_name: 'test-xxxxx',
-        release_id: 'test_release.id',
-        version: 'new_version',
-        comment: '...',
-        // 版本类型
-        semver_type: 'patch',
-      },
       sourceVersions: [],
       versionTypes: [
         { name: this.$t('重大版本'), key: 'major', value: '1.0.0', tips: this.$t('非兼容式升级时使用') },
@@ -199,11 +197,16 @@ export default {
     curVersionData() {
       return this.sourceVersions.find(item => item.name === this.releaseContent.source_versions) || {};
     },
+    versionId() {
+      return this.$route.query.versionId;
+    },
   },
   watch: {
     scheme: {
       handler(newValue) {
-        this.formatData(newValue);
+        if (this.isEdit) {
+          this.formatData(newValue);
+        }
       },
       immediate: true,
       deep: true,
@@ -223,7 +226,7 @@ export default {
     changeVersionType(value) {
       this.releaseContent.semver_type = this.versionTypes.find(v => v.value === value).key;
       // 版本类型切换重新校验，解决依赖性错误提示问题
-      this.$refs.releaseContentForm.validate().catch((e) => {
+      this.$refs.releaseContentForm && this.$refs.releaseContentForm.validate().catch((e) => {
         console.error(e);
       });
     },
@@ -248,6 +251,24 @@ export default {
         'self-fill': '',
       };
       this.releaseContent.version = versionMapping[data.version_no] || '';
+      // 重新申请默认值
+      if (this.versionId) {
+        this.setVersionDefaultValue(data);
+      }
+    },
+    // 重新申请设置默认值
+    setVersionDefaultValue() {
+      const { source_version_name, semver_type, comment } = this.versionData;
+      const version = this.versionTypes.find(v => v.key === semver_type).value;
+      const versionDisplay = `${version} (主版本号、次版本号、修正版本号)`;
+      this.releaseContent = {
+        ...this.releaseContent,
+        source_versions: source_version_name,
+        version,
+        versionDisplay,
+        comment,
+        semver_type,
+      };
     },
     // 表单校验
     validate() {
@@ -270,3 +291,16 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.release-content-container {
+  .tips {
+    .bk-button-text.bk-button-small {
+      padding: 0;
+      i {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index 7dba12bd31..a47f325595 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -19,8 +19,13 @@
           :rules="rules.strategy"
         >
           <bk-radio-group v-model="releaseStrategy.strategy">
-            <bk-radio :value="'gray'">{{ $t('先灰度后全量发布') }}</bk-radio>
-            <bk-radio :value="'full'">{{ $t('直接全量发布') }}</bk-radio>
+            <bk-radio
+              v-for="item in releaseStrategyMap"
+              :value="item.value"
+              :key="item.value"
+            >
+              {{ item.name }}
+            </bk-radio>
           </bk-radio-group>
         </bk-form-item>
         <bk-form-item
@@ -49,8 +54,8 @@
                   :placeholder="$t('请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID')"
                   :has-delete-icon="true"
                   :allow-create="true"
-                  ext-cls="projec-id-tag-cls">
-                </bk-tag-input>
+                  ext-cls="projec-id-tag-cls"
+                ></bk-tag-input>
               </bk-form-item>
               <bk-form-item
                 :label="$t('组织')"
@@ -59,9 +64,16 @@
                 :error-display-type="'normal'"
                 :rules="rules.organization"
               >
-                <!-- <bk-input v-model="releaseStrategy.organization"></bk-input> -->
-                <bk-button :theme="'default'" @click="handleSelectOrganization">{{ $t('选择组织') }}</bk-button>
-                <div class="render-member-wrapper" v-if="departments.length > 0">
+                <bk-button
+                  :theme="'default'"
+                  @click="handleSelectOrganization"
+                >
+                  {{ $t('选择组织') }}
+                </bk-button>
+                <div
+                  class="render-member-wrapper"
+                  v-if="departments.length > 0"
+                >
                   <render-member-list
                     type="department"
                     :data="departments"
@@ -81,20 +93,32 @@
       </bk-form>
 
       <view-mode v-else>
-        <ul>
+        <ul class="release-strategy-cls" v-if="data?.latest_release_strategy">
           <li class="item">
             <div class="label">{{ $t('发布策略') }}：</div>
-            <div class="value">--</div>
+            <div class="value">
+              {{ releaseStrategyMap.find(v => v.value === data.latest_release_strategy.strategy)?.name }}
+            </div>
           </li>
-          <li class="item">
+          <li class="item" v-if="data.latest_release_strategy.strategy === 'gray'">
             <div class="label">{{ $t('灰度范围') }}：</div>
-            <div class="value">--</div>
+            <div class="value range">
+              <div class="c-item">
+                <p class="c-title">{{ $t('蓝盾项目') }}：</p>
+                <p class="c-value">{{ data.latest_release_strategy.bkci_project.join() }}</p>
+              </div>
+              <div class="c-item">
+                <p class="c-title">{{ $t('组织') }}：</p>
+                <ul class="c-value">
+                  <li v-for="item in data.latest_release_strategy.organization" :key="item.id">{{ item.name }}</li>
+                </ul>
+              </div>
+            </div>
           </li>
         </ul>
       </view-mode>
     </card>
 
-
     <user-selector-dialog
       ref="userSelectorDialogRef"
       title="选择组织"
@@ -104,6 +128,8 @@
       :api-host="apiHost"
       :custom-close="true"
       :range="'departments'"
+      :departments-fn="handleDepartments"
+      departments-type="tc"
       @sumbit="handleSubmit"
     />
   </div>
@@ -128,6 +154,18 @@ export default {
       type: String,
       default: 'edit',
     },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    step: {
+      type: String,
+      default: 'create',
+    },
+    versionData: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -140,6 +178,10 @@ export default {
       isShow: false,
       apiHost: window.BK_COMPONENT_API_URL,
       departments: [],
+      releaseStrategyMap: [
+        { value: 'gray', name: this.$t('先灰度后全量发布') },
+        { value: 'full', name: this.$t('直接全量发布') },
+      ],
       rules: {
         strategy: [
           {
@@ -173,11 +215,44 @@ export default {
     isFullRelease() {
       return this.releaseStrategy.strategy === 'full';
     },
+    versionId() {
+      return this.$route.query.versionId;
+    },
+  },
+  watch: {
+    data: {
+      handler(newValue) {
+        if (this.step === 'release') {
+          this.releaseStrategy = newValue?.latest_release_strategy || {};
+          this.departments = newValue.latest_release_strategy?.organization || [];
+        }
+        if (this.versionId) {
+          this.setVersionDefaultValue();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   methods: {
+    // 重新申请设置默认值
+    setVersionDefaultValue() {
+      if (!this.versionData) return;
+      const { latest_release_strategy: { strategy, bkci_project, organization } } = this.versionData;
+      this.releaseStrategy = {
+        strategy,
+        bkci_project,
+        organization,
+      };
+      this.departments = organization || [];
+    },
     // 表单校验
     validate() {
-      return Promise.all([this.$refs.releaseStrategyForm.validate(), this.$refs.childForm.validate()]);
+      const validateForm = [this.$refs.releaseStrategyForm.validate()];
+      if (!this.isFullRelease) {
+        validateForm.push(this.$refs.childForm.validate());
+      }
+      return Promise.all(validateForm);
     },
     // 向外抛出当前表单数据
     getFormData() {
@@ -192,6 +267,18 @@ export default {
       this.departments = payload;
       this.isShow = false;
     },
+    // 过滤出指定部门
+    handleDepartments(data, type) {
+      const TCID = 2874;
+      const prefix = '腾讯公司/';
+
+      if (type === 'search') {
+        // 搜索过滤出指定部门数据
+        return [data.filter(v => v.full_name.startsWith(prefix))];
+      }
+      const tc = data.find(v => v.id === TCID);
+      return tc ? [tc] : [];
+    },
   },
 };
 </script>
@@ -201,6 +288,31 @@ export default {
   .mt16 {
     margin-top: 16px;
   }
+  .release-strategy-cls {
+    .range {
+      min-width: 323px;
+      padding: 12px 16px;
+      background: #F5F7FA;
+      border-radius: 2px;
+      font-size: 12px;
+      color: #979BA5;
+
+      .c-item {
+        margin-bottom: 16px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .c-title,
+        .c-value {
+          line-height: 20px;
+        }
+        .c-value {
+          margin-top: 4px;
+          color: #313238;
+        }
+      }
+    }
+  }
   .gray-range {
     padding: 12px 16px;
     background: #f5f7fa;
@@ -217,11 +329,11 @@ export default {
       }
       .projec-id-tag-cls {
         /deep/ .tag-list .key-node {
-          background-color: #FAFBFD;
-          border: 1px solid #DCDEE5;
+          background-color: #fafbfd;
+          border: 1px solid #dcdee5;
           border-radius: 2px;
           .tag {
-            background-color: #FAFBFD;
+            background-color: #fafbfd;
           }
         }
       }
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue
index f7b110dc86..7ffbb337c7 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/view-mode.vue
@@ -29,6 +29,7 @@ export default {
     min-height: 32px;
     line-height: 32px;
     margin-bottom: 6px;
+    font-size: 12px;
     &:last-child {
       margin-bottom: 0px;
     }
@@ -38,6 +39,7 @@ export default {
     }
     .value {
       margin-left: 8px;
+      color: #313238;
     }
   }
 }
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
new file mode 100644
index 0000000000..7884976971
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="release-visible-range-container">
+    <card
+      class="mt16"
+      :title="$t('可见范围')"
+      :is-collapse="true"
+    >
+      <!-- 默认为只读 -->
+      <view-mode>
+        <ul class="visible-range-cls">
+          <li class="item">
+            <div class="label">{{ $t('蓝盾项目') }}：</div>
+            <div class="value">{{ data.bkci_project.length ? data.bkci_project.join(',') : '--' }}</div>
+          </li>
+          <li class="item">
+            <div class="label">{{ $t('组织') }}：</div>
+            <div class="value organization" v-if="data.organization.length">
+              <p v-for="item in data.organization" :key="item.id">
+                {{ item.name }}
+              </p>
+            </div>
+            <div class="value" v-else>--</div>
+          </li>
+        </ul>
+      </view-mode>
+    </card>
+  </div>
+</template>
+
+<script>
+import card from '@/components/card/card.vue';
+import viewMode from './view-mode.vue';
+
+export default {
+  name: 'ReleaseVisibleRange',
+  components: {
+    card,
+    viewMode,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.release-visible-range-container {
+  .mt16 {
+    margin-top: 16px;
+  }
+  .visible-range-cls {
+    .organization {
+      min-width: 323px;
+      padding: 12px 16px;
+      background: #F5F7FA;
+      border-radius: 2px;
+      color: #313238;
+    }
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index 211606a103..9d8bd47c0b 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -75,7 +75,25 @@
         </section>
       </div>
 
+      <section v-if="isCodeccEmpty">
+        <bk-exception class="exception-wrap-cls" type="empty" scene="part">
+          <div class="exception-wrapper">
+            <p class="title">{{ $t('暂无版本发布') }}</p>
+            <p class="tips">{{ $t('请先完成对默认分支的测试') }}</p>
+            <bk-button
+              :text="true"
+              title="primary"
+              size="small"
+              @click="handlerChangeRouter('test')"
+            >
+              {{ $t('前往测试') }}
+            </bk-button>
+          </div>
+        </bk-exception>
+      </section>
+
       <bk-table
+        v-else
         ref="versionTable"
         v-bkloading="{ isLoading: isTableLoading }"
         class="pugin-version-list"
@@ -158,7 +176,7 @@
               v-else
               :class="['dot', row.status]"
             />
-            <span>{{ $t(curVersionStatus[row.status]) || '--' }}</span>
+            <span class="status-text">{{ $t(curVersionStatus[row.status]) || '--' }}</span>
           </template>
         </bk-table-column>
         <bk-table-column
@@ -166,50 +184,63 @@
           :width="localLanguage === 'en' ? 320 : 240"
         >
           <template slot-scope="{ row }">
-            <template v-if="isOfficialVersion">
+            <!-- Codecc 灰度审批详情 -->
+            <template v-if="row.source_version_type === 'tested_version' && isOfficialVersion">
               <bk-button
                 theme="primary"
                 text
                 class="mr10"
-                @click="handleDetail(row)"
+                @click="handleCodeccReleaseDetails(row)"
               >
-                {{ $t('详情') }}
+                {{ $t('版本详情') }}
               </bk-button>
+            </template>
+            <div v-else>
+              <template v-if="isOfficialVersion">
+                <bk-button
+                  theme="primary"
+                  text
+                  class="mr10"
+                  @click="handleDetail(row)"
+                >
+                  {{ $t('详情') }}
+                </bk-button>
+                <bk-button
+                  theme="primary"
+                  text
+                  class="mr10"
+                  @click="handleRelease(row)"
+                >
+                  {{ $t('发布进度') }}
+                </bk-button>
+              </template>
               <bk-button
+                v-else
                 theme="primary"
                 text
                 class="mr10"
                 @click="handleRelease(row)"
               >
-                {{ $t('发布进度') }}
+                {{ $t('详情') }}
               </bk-button>
-            </template>
-            <bk-button
-              v-else
-              theme="primary"
-              text
-              class="mr10"
-              @click="handleRelease(row)"
-            >
-              {{ $t('详情') }}
-            </bk-button>
-            <bk-button
-              v-if="(row.retryable && row.status === 'interrupted') || row.status === 'failed'"
-              theme="primary"
-              class="mr10"
-              text
-              @click="handleRelease(row, 'reset')"
-            >
-              {{ isOfficialVersion ? $t('重新发布') : $t('重新测试') }}
-            </bk-button>
-            <bk-button
-              v-if="row.report_url"
-              theme="primary"
-              text
-              @click="toTestReportPage(row)"
-            >
-              {{ $t('测试报告') }}
-            </bk-button>
+              <bk-button
+                v-if="(row.retryable && row.status === 'interrupted') || row.status === 'failed'"
+                theme="primary"
+                class="mr10"
+                text
+                @click="handleRelease(row, 'reset')"
+              >
+                {{ isOfficialVersion ? $t('重新发布') : $t('重新测试') }}
+              </bk-button>
+              <bk-button
+                v-if="row.report_url"
+                theme="primary"
+                text
+                @click="toTestReportPage(row)"
+              >
+                {{ $t('测试报告') }}
+              </bk-button>
+            </div>
           </template>
         </bk-table-column>
       </bk-table>
@@ -321,7 +352,8 @@
   </div>
 </template>
 
-<script>import pluginBaseMixin from '@/mixins/plugin-base-mixin';
+<script>
+import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 import versionManageTitle from './comps/version-manage-title.vue';
 import { PLUGIN_VERSION_STATUS, VERSION_NUMBER_TYPE, PLUGIN_TEST_VERSION_STATUS } from '@/common/constants';
 import { formatDate } from '@/common/tools';
@@ -397,6 +429,11 @@ export default {
     curVersionStatus() {
       return this.isOfficialVersion ? PLUGIN_VERSION_STATUS : PLUGIN_TEST_VERSION_STATUS;
     },
+    // Codecc 空状态
+    isCodeccEmpty() {
+      if (!this.versionList.length && this.curPluginInfo.has_test_version && this.isOfficialVersion) return true;
+      return false;
+    },
   },
   watch: {
     $route() {
@@ -704,6 +741,20 @@ export default {
         },
       });
     },
+
+    // Codecc 版本发布详情
+    handleCodeccReleaseDetails(row) {
+      this.$router.push({
+        name: 'pluginReleaseDetails',
+        params: {
+          pluginTypeId: this.pdId,
+          id: this.pluginId,
+        },
+        query: {
+          versionId: row.id,
+        },
+      });
+    },
   },
 };
 </script>
@@ -740,6 +791,9 @@ export default {
     color: #3a84ff;
     font-weight: 700;
   }
+  .status-text {
+    margin-left: 5px;
+  }
 }
 
 .dot {
@@ -879,6 +933,25 @@ export default {
     margin: 0 auto !important;
     padding-top: 16px !important;
   }
+  .exception-wrap-cls {
+    margin-top: 100px;
+    /deep/ .bk-exception-img.part-img .exception-image {
+      height: 180px;
+    }
+    .exception-wrapper {
+      .title {
+        font-size: 24px;
+        color: #63656E;
+        margin-bottom: 16px;
+      }
+      .tips {
+        font-size: 14px;
+        color: #979BA5;
+        margin-bottom: 8px;
+      }
+    }
+  }
+
 }
 </style>
 
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
new file mode 100644
index 0000000000..253de356da
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="version-details-container">
+    <paas-plugin-title
+      :name="$t('版本发布')"
+      :version-data="versionData"
+      :status-map="CODECC_RELEASE_STATUS"
+    />
+    <!-- 版本发布 -->
+    <paas-content-loader
+      :is-loading="isLoading"
+      placeholder="plugin-new-version-loading"
+      class="app-container middle"
+    >
+      <!-- 未通过 -->
+      <bk-alert
+        v-if="isApprovalFailed"
+        class="warning-alert-cls mb16"
+        type="error"
+        :show-icon="false"
+      >
+        <div slot="title">
+          <i class="paasng-icon paasng-remind"></i>
+          {{ $t('审批未通过，请修改发布信息后重新申请') }}
+          <bk-button
+            size="small"
+            text
+            class="ml10"
+            @click="viewApprovalDetails"
+          >
+            {{ $t('查看审批详情') }}
+          </bk-button>
+        </div>
+      </bk-alert>
+      <!-- 审批中 -->
+      <bk-alert
+        v-else-if="isUnderReview"
+        class="warning-alert-cls mb16"
+        type="warning"
+        :show-icon="false"
+      >
+        <div slot="title">
+          <i class="paasng-icon paasng-remind"></i>
+          {{ $t('灰度发布审批中，请耐心等待') }}
+          <bk-button
+            size="small"
+            text
+            class="ml10"
+            @click="viewApprovalDetails"
+          >
+            {{ $t('查看审批详情') }}
+          </bk-button>
+          <bk-button
+            size="small"
+            text
+            class="ml10"
+          >
+            {{ $t('撤销提单') }}
+          </bk-button>
+        </div>
+      </bk-alert>
+      <!-- 防止高度塌陷 -->
+      <release-content
+        ref="releaseContent"
+        :mode="'view'"
+        :data="versionData"
+      />
+      <!-- 可见范围 -->
+      <visible-range :data="visibleRangeData" />
+      <release-strategy
+        ref="releaseStrategy"
+        :mode="releaseStrategyMode"
+        :data="versionData"
+        step="release"
+      />
+      <section class="version-tools" v-if="!isFullReleaseSuccessful">
+        <div class="button-warpper" v-if="!isRequestGrayRelease">
+          <!-- 审批失败，拒绝 -->
+          <bk-button
+            v-if="isApprovalFailed"
+            :theme="'primary'"
+            class="mr8"
+            @click="handleReapply"
+          >
+            {{ $t('重新申请') }}
+          </bk-button>
+          <!-- 审批中 -->
+          <bk-button
+            v-else-if="isUnderReview"
+            :theme="'default'"
+            type="submit"
+            :disabled="!versionData.latest_release_strategy?.ticket_info?.can_withdraw"
+          >
+            {{ $t('撤销提单') }}
+          </bk-button>
+          <!-- 扩大灰度范围时，之前已选的项目/组织范围不可删除，只能增加 -->
+          <template v-else>
+            <bk-button
+              :theme="'primary'"
+              type="submit"
+              @click="handleGrayscaleRange('full')"
+            >
+              {{ $t('申请全量发布') }}
+            </bk-button>
+            <bk-button
+              :theme="'default'"
+              type="submit"
+              class="ml8"
+              @click="handleGrayscaleRange('gray')"
+            >
+              {{ $t('扩大灰度范围') }}
+            </bk-button>
+          </template>
+        </div>
+        <template v-else>
+          <div class="button-warpper">
+            <bk-button
+              :theme="'primary'"
+              class="mr8"
+              :loading="isApplyLoading"
+              @click="handleSubmit"
+            >
+              {{ $t('申请灰度发布') }}
+            </bk-button>
+            <bk-button
+              :theme="'default'"
+              type="submit"
+              @click="handleCancel"
+            >
+              {{ $t('取消') }}
+            </bk-button>
+          </div>
+          <p class="release-tips" v-html="releaseTips"></p>
+        </template>
+      </section>
+    </paas-content-loader>
+  </div>
+</template>
+
+<script>
+import paasPluginTitle from '@/components/pass-plugin-title';
+import pluginBaseMixin from '@/mixins/plugin-base-mixin';
+import releaseContent from '../create-version/new-version/release-content.vue';
+import visibleRange from '../create-version/new-version/visible-range.vue';
+import releaseStrategy from '../create-version/new-version/release-strategy.vue';
+import { CODECC_RELEASE_STATUS } from '@/common/constants';
+
+export default {
+  name: 'VersionDetails',
+  components: {
+    paasPluginTitle,
+    releaseContent,
+    visibleRange,
+    releaseStrategy,
+  },
+  mixins: [pluginBaseMixin],
+  data() {
+    return {
+      isLoading: true,
+      versionData: {
+        latest_release_strategy: {},
+      },
+      releaseStrategyMode: 'view',
+      isRequestGrayRelease: false,
+      isApplyLoading: false,
+      CODECC_RELEASE_STATUS,
+      visibleRangeData: {
+        bkci_project: [],
+        organization: [],
+      },
+    };
+  },
+  computed: {
+    titleConfig() {
+      return {};
+    },
+    versionId() {
+      return this.$route.query.versionId;
+    },
+    releaseTips() {
+      return this.$t('灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。');
+    },
+    // 审批失败要用 release 的 status 来判断
+    releaseStatus() {
+      return this.versionData.status;
+    },
+    approvalStatus() {
+      return this.versionData.latest_release_strategy?.ticket_info?.current_status;
+    },
+    // 审批中
+    isUnderReview() {
+      return ['RUNNING', 'SUSPENDED'].includes(this.approvalStatus);
+    },
+    // 审批失败|中断
+    isApprovalFailed() {
+      return ['failed', 'interrupted'].includes(this.releaseStatus);
+    },
+    // 全量发布成功
+    isFullReleaseSuccessful() {
+      return this.releaseStatus === 'successful' && this.approvalStatus === 'FINISHED';
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      Promise.all([this.getReleaseDetail(), this.getVisibleRange()]).finally(() => {
+        this.isLoading = false;
+      });
+    },
+
+    // 获取版本详情
+    async getReleaseDetail(closeLoading = false) {
+      this.isLoading = true;
+      try {
+        const res = await this.$store.dispatch('plugin/getReleaseDetail', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          releaseId: this.versionId,
+        });
+        this.versionData = res;
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      } finally {
+        if (closeLoading) {
+          this.isLoading = false;
+        }
+      }
+    },
+
+    // 查看申请详情
+    viewApprovalDetails() {
+      const url = this.versionData.latest_release_strategy?.ticket_info?.ticket_url;
+      window.open(url, '_blank');
+    },
+
+    handleGrayscaleRange(type) {
+      // 只允许扩大灰度范围
+      this.releaseStrategyMode = 'edit';
+      this.isRequestGrayRelease = true;
+      if (type === 'full') { // 全量
+        this.versionData.latest_release_strategy.strategy = 'full';
+      } else { // 扩大灰度范围
+        this.versionData.latest_release_strategy.strategy = 'gray';
+      }
+    },
+
+    handleCancel() {
+      this.releaseStrategyMode = 'view';
+      this.isRequestGrayRelease = false;
+    },
+
+    // 申请灰度发布
+    async handleSubmit() {
+      try {
+        await this.$refs.releaseStrategy.validate();
+
+        // 获取子组件数据
+        const formData = this.$refs.releaseStrategy.getFormData();
+        const params = {
+          strategy: formData.strategy,
+          ...formData.strategy === 'gray' && { // 仅在灰度
+            bkci_project: formData.bkci_project,
+            organization: formData.organization,
+          },
+        };
+        // 提交
+        this.applyGrayRelease(params);
+      } catch (e) {
+        console.error(e);
+      }
+    },
+
+    // 申请灰度发布（扩大灰度范围）
+    async applyGrayRelease(data) {
+      this.isApplyLoading = true;
+      try {
+        await this.$store.dispatch('plugin/expandGrayScope', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          id: this.versionId,
+          data,
+        });
+        // 重新请求当前详情-全量发布（成功）流程结束
+        await this.getReleaseDetail(true);
+        this.handleCancel();
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      } finally {
+        this.isApplyLoading = false;
+      }
+    },
+
+    // 获取可见范围数据
+    async getVisibleRange() {
+      try {
+        const res = await this.$store.dispatch('plugin/getVisibleRange', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+        });
+        this.visibleRangeData = res;
+      } catch (e) {
+        // 404 就说明没有数据
+        if (e.status === 404) {
+          return;
+        }
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
+
+    // 重新申请
+    handleReapply() {
+      this.$router.push({
+        name: 'pluginVersionEditor',
+        params: {
+          pluginTypeId: this.pdId,
+          id: this.pluginId,
+        },
+        query: {
+          type: 'prod',
+          versionId: this.versionId,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.version-details-container {
+  .version-tools {
+    position: fixed;
+    padding-left: 264px;
+    display: flex;
+    align-items: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 48px;
+    background: #fafbfd;
+    box-shadow: 0 -1px 0 0 #dcdee5;
+  }
+  .release-tips {
+    color: #979ba5;
+    font-size: 12px;
+    margin-left: 16px;
+    /deep/ em {
+      font-weight: 700;
+    }
+  }
+  .mb16 {
+    margin-bottom: 16px;
+  }
+  .ml8 {
+    margin-left: 8px;
+  }
+  .warning-alert-cls {
+    i {
+      font-size: 14px;
+      color: #ff9c01;
+      transform: translateY(0px);
+    }
+    /deep/ .bk-alert-wraper {
+      height: 32px;
+      align-items: center;
+      font-size: 12px;
+      color: #63656e;
+    }
+    /deep/ .bk-button-text.bk-button-small {
+      padding: 0;
+    }
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-release.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-release.vue
index cd3b6d5ad0..aced89c6ca 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-release.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-release.vue
@@ -19,6 +19,7 @@
             :name="isOfficialVersion ? $t('发布') : $t('测试')"
             :no-shadow="true"
             :version-data="curRelease"
+            :status-map="PLUGIN_TEST_VERSION_STATUS"
           />
           <!-- 结束发布流程禁用终止发布 -->
           <span
@@ -112,7 +113,7 @@ import itsmStage from './release-stages/itsm';
 import approvalStage from './release-stages/itsm';
 import buildStage from './release-stages/build';
 import testStage from './release-stages/test';
-import { PLUGIN_VERSION_MAP, PLUGIN_VERSION_STATUS } from '@/common/constants';
+import { PLUGIN_VERSION_MAP, PLUGIN_VERSION_STATUS, PLUGIN_TEST_VERSION_STATUS } from '@/common/constants';
 import versionSteps from './version-steps/index.vue';
 
 export default {
@@ -157,6 +158,7 @@ export default {
       excludeCardStyleList: ['deploy', 'itsm', 'test'],
       isWebPolling: true,
       messageStatus: '',
+      PLUGIN_TEST_VERSION_STATUS,
     };
   },
   computed: {

From 624c3cc15862ee280c6988ec66dcaea6d5af7ea8 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Wed, 14 Aug 2024 16:44:00 +0800
Subject: [PATCH 05/17] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=85=E7=81=B0?=
 =?UTF-8?q?=E5=BA=A6=E5=8F=91=E5=B8=83=E7=BB=86=E8=8A=82(=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E8=B7=B3=E8=BD=AC=E9=93=BE=E6=8E=A5=EF=BC=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5=E9=97=AE=E9=A2=98)=20#=20R?=
 =?UTF-8?q?eviewed,=20transaction=20id:=2015278?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package_vue/src/components/card/card.vue  |  1 +
 .../plugin/base-config/visible-range.vue      | 41 ++++++++++--
 .../version-manager/create-version/index.vue  |  3 +-
 .../create-version/new-version/index.vue      | 10 +++
 .../new-version/release-content.vue           | 18 ++++++
 .../new-version/release-strategy.vue          | 57 +++++++++--------
 .../version-manager/version-details/index.vue | 64 ++++++++++++++++---
 7 files changed, 152 insertions(+), 42 deletions(-)

diff --git a/webfe/package_vue/src/components/card/card.vue b/webfe/package_vue/src/components/card/card.vue
index 9c368656c2..5fe5ee5688 100644
--- a/webfe/package_vue/src/components/card/card.vue
+++ b/webfe/package_vue/src/components/card/card.vue
@@ -16,6 +16,7 @@
 <script>
 export default {
   name: 'PaasCard',
+  inheritAttrs: false,
   props: {
     icons: {
       type: Array,
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index 11a7be06c8..16f99b85e4 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -43,15 +43,26 @@
       <!-- 编辑态 -->
       <template v-else>
         <section class="visible-range-form card-style">
-          <bk-form style="width: 800px" :label-width="150" :model="formData" ref="visibleRangeForm">
+          <bk-form
+            style="width: 800px"
+            :label-width="150"
+            :model="formData"
+            ext-cls="visible-range-form-cls"
+            ref="visibleRangeForm">
             <bk-form-item
               :label="$t('蓝盾项目')"
               :property="'projectIds'"
               :error-display-type="'normal'"
-              :rules="rules.projectIds">
+              :rules="rules.projectIds"
+            >
               <bk-input v-model="formData.projectIds" :placeholder="$t('请输入蓝盾项目 Project ID，并用英文分号分隔')"></bk-input>
             </bk-form-item>
-            <bk-form-item :label="$t('组织')">
+            <bk-form-item
+              :label="$t('组织')"
+              :required="true"
+              :error-display-type="'normal'"
+              :rules="rules.organization"
+            >
               <bk-button :theme="'default'" @click="handleSelectOrganization">{{ $t('选择组织') }}</bk-button>
               <div class="render-member-wrapper" v-if="departments.length > 0">
                 <render-member-list
@@ -121,11 +132,18 @@ export default {
       rules: {
         projectIds: [
           {
-            regex: /^([a-z][a-zA-Z0-9-]+)(,[a-z][a-zA-Z0-9-]+)*$/,
+            regex: /^([a-z][a-zA-Z0-9-]+)(;[a-z][a-zA-Z0-9-]+)*;?$/,
             message: this.$t('Project ID是字符+数字组成，并以小写字母开头，Project ID之间用英文分号分隔'),
             trigger: 'blur',
           },
         ],
+        organization: [
+          {
+            validator: () => this.departments.length,
+            message: '必填项',
+            trigger: 'blur',
+          },
+        ],
       },
     };
   },
@@ -158,6 +176,9 @@ export default {
       },
       deep: true,
     },
+    'departments.length'() {
+      this.triggerValidate();
+    },
   },
   created() {
     this.getVisibleRange();
@@ -249,6 +270,12 @@ export default {
       const url = this.visibleRangeData.itsm_detail?.ticket_url;
       window.open(url, '_blank');
     },
+    // 手动触发校验
+    triggerValidate() {
+      this.$refs.visibleRangeForm?.validate().then(() => {}, (validator) => {
+        console.warn(validator);
+      });;
+    },
   },
 };
 </script>
@@ -259,6 +286,12 @@ export default {
   }
   .visible-range-form {
     padding: 24px 0;
+    .visible-range-form-cls {
+      /deep/ .bk-form-item.is-error .bk-button {
+        border-color: #ea3636;
+        color: #ea3636;
+      }
+    }
     .render-member-wrapper {
       margin-top: 12px;
       padding: 12px 12px 12px 36px;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
index f18c1bc9c5..5557a053a6 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
@@ -64,7 +64,7 @@ export default {
     this.getNewVersionFormat();
   },
   methods: {
-    // 获取新建版本表单格式 - 是否需要请求
+    // 获取新建版本表单格式
     async getNewVersionFormat() {
       this.schemeLoading = true;
       const params = {
@@ -73,7 +73,6 @@ export default {
         type: 'prod',
       };
       try {
-        // 多次请求？
         const res = await this.$store.dispatch('plugin/getNewVersionFormat', params);
         this.scheme = res;
       } catch (e) {
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
index a0297c094d..2547ce7d83 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
@@ -34,6 +34,7 @@
       </div>
       <p
         class="release-tips"
+        v-bk-overflow-tips
         v-html="releaseTips"
       ></p>
     </section>
@@ -168,18 +169,27 @@ export default {
     padding-left: 264px;
     display: flex;
     align-items: center;
+    flex-wrap: nowrap;
     left: 0;
     right: 0;
     bottom: 0;
     height: 48px;
+    z-index: 9;
     background: #fafbfd;
     box-shadow: 0 -1px 0 0 #dcdee5;
+    .button-warpper {
+      display: flex;
+      flex-grow: 0;
+    }
   }
 
   .release-tips {
     color: #979ba5;
     font-size: 12px;
     margin-left: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     /deep/ em {
       font-weight: 700;
     }
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
index e24f620a36..457c6ca671 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
@@ -35,6 +35,7 @@
               :text="true"
               title="primary"
               size="small"
+              @click="toTestDetails"
             >
               <i class="paasng-icon paasng-jump-link icon-cls-link" />
               {{ $t('查看测试数据') }}
@@ -98,6 +99,7 @@
                   <bk-button
                     :text="true"
                     title="primary"
+                    @click="toTestDetails"
                   >
                     <i class="paasng-icon paasng-jump-link icon-cls-link mr5" />
                     <span class="f12">{{ $t('查看测试数据') }}</span>
@@ -151,6 +153,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    versionInfo: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -288,6 +294,18 @@ export default {
       };
       return params;
     },
+    // 测试详情
+    toTestDetails() {
+      const url = this.isEdit ? this.curVersionData.url : this.versionInfo.url;
+      const id = url.split('=')[1];
+      this.$router.push({
+        name: 'pluginVersionRelease',
+        query: {
+          release_id: id,
+          type: 'test',
+        },
+      });
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index a47f325595..ade1115f43 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -10,6 +10,7 @@
         :label-width="120"
         :model="releaseStrategy"
         ref="releaseStrategyForm"
+        ext-cls="release-strategy-form-cls"
       >
         <bk-form-item
           label="发布策略"
@@ -32,23 +33,17 @@
           v-if="!isFullRelease"
           label="灰度范围"
           :required="true"
-          :property="'project'"
+          ref="grayscaleRangeForm"
           :error-display-type="'normal'"
+          :rules="rules.grayscaleRange"
         >
           <div class="gray-range">
             <bk-form
               :model="releaseStrategy"
-              ref="childForm"
               form-type="vertical"
               ext-cls="gray-range-form-cls"
             >
-              <bk-form-item
-                :label="$t('蓝盾项目 ID')"
-                :required="true"
-                :property="'bkci_project'"
-                :error-display-type="'normal'"
-                :rules="rules.bkci_project"
-              >
+              <bk-form-item :label="$t('蓝盾项目 ID')">
                 <bk-tag-input
                   v-model="releaseStrategy.bkci_project"
                   :placeholder="$t('请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID')"
@@ -57,13 +52,7 @@
                   ext-cls="projec-id-tag-cls"
                 ></bk-tag-input>
               </bk-form-item>
-              <bk-form-item
-                :label="$t('组织')"
-                :required="true"
-                :property="'organization'"
-                :error-display-type="'normal'"
-                :rules="rules.organization"
-              >
+              <bk-form-item :label="$t('组织')">
                 <bk-button
                   :theme="'default'"
                   @click="handleSelectOrganization"
@@ -190,17 +179,10 @@ export default {
             trigger: 'blur',
           },
         ],
-        bkci_project: [
+        grayscaleRange: [
           {
-            required: true,
-            message: '必填项',
-            trigger: 'blur',
-          },
-        ],
-        organization: [
-          {
-            required: true,
-            message: '必填项',
+            validator: () => this.releaseStrategy.bkci_project?.length || this.departments.length,
+            message: this.$t('蓝盾项目 ID 和 组织至少填写一个'),
             trigger: 'blur',
           },
         ],
@@ -233,6 +215,12 @@ export default {
       immediate: true,
       deep: true,
     },
+    'releaseStrategy.bkci_project.length'() {
+      this.triggerValidate();
+    },
+    'departments.length'() {
+      this.triggerValidate();
+    },
   },
   methods: {
     // 重新申请设置默认值
@@ -250,10 +238,14 @@ export default {
     validate() {
       const validateForm = [this.$refs.releaseStrategyForm.validate()];
       if (!this.isFullRelease) {
-        validateForm.push(this.$refs.childForm.validate());
+        validateForm.push(this.$refs.grayscaleRangeForm.validate());
       }
       return Promise.all(validateForm);
     },
+    // 手动触发校验
+    triggerValidate() {
+      this.$refs.grayscaleRangeForm?.validate();
+    },
     // 向外抛出当前表单数据
     getFormData() {
       return this.releaseStrategy;
@@ -288,6 +280,14 @@ export default {
   .mt16 {
     margin-top: 16px;
   }
+  .release-strategy-form-cls {
+    /deep/ .bk-form-item.is-error {
+      .gray-range .bk-button {
+        border-color: #ea3636;
+        color: #ea3636;
+      }
+    }
+  }
   .release-strategy-cls {
     .range {
       min-width: 323px;
@@ -323,6 +323,9 @@ export default {
         &::after {
           display: unset;
         }
+        .bk-label::after {
+          display: none;
+        }
       }
       .from-tip {
         color: #979ba5;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index 253de356da..5ff2202bab 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -53,16 +53,17 @@
             size="small"
             text
             class="ml10"
+            @click="viewApprovalDetails"
           >
             {{ $t('撤销提单') }}
           </bk-button>
         </div>
       </bk-alert>
-      <!-- 防止高度塌陷 -->
       <release-content
         ref="releaseContent"
         :mode="'view'"
         :data="versionData"
+        :version-info="curVersionData"
       />
       <!-- 可见范围 -->
       <visible-range :data="visibleRangeData" />
@@ -72,8 +73,14 @@
         :data="versionData"
         step="release"
       />
-      <section class="version-tools" v-if="!isFullReleaseSuccessful">
-        <div class="button-warpper" v-if="!isRequestGrayRelease">
+      <section
+        class="version-tools"
+        v-if="!isFullReleaseSuccessful"
+      >
+        <div
+          class="button-warpper"
+          v-if="!isRequestGrayRelease"
+        >
           <!-- 审批失败，拒绝 -->
           <bk-button
             v-if="isApprovalFailed"
@@ -129,7 +136,11 @@
               {{ $t('取消') }}
             </bk-button>
           </div>
-          <p class="release-tips" v-html="releaseTips"></p>
+          <p
+            class="release-tips"
+            v-bk-overflow-tips
+            v-html="releaseTips"
+          ></p>
         </template>
       </section>
     </paas-content-loader>
@@ -167,6 +178,9 @@ export default {
         bkci_project: [],
         organization: [],
       },
+      scheme: {
+        source_versions: [],
+      },
     };
   },
   computed: {
@@ -198,13 +212,16 @@ export default {
     isFullReleaseSuccessful() {
       return this.releaseStatus === 'successful' && this.approvalStatus === 'FINISHED';
     },
+    curVersionData() {
+      return this.scheme.source_versions.find(v => v.name === this.versionData.source_version_name);
+    },
   },
   created() {
     this.init();
   },
   methods: {
     init() {
-      Promise.all([this.getReleaseDetail(), this.getVisibleRange()]).finally(() => {
+      Promise.all([this.getReleaseDetail(), this.getVisibleRange(), this.getNewVersionFormat()]).finally(() => {
         this.isLoading = false;
       });
     },
@@ -241,9 +258,11 @@ export default {
       // 只允许扩大灰度范围
       this.releaseStrategyMode = 'edit';
       this.isRequestGrayRelease = true;
-      if (type === 'full') { // 全量
+      if (type === 'full') {
+        // 全量
         this.versionData.latest_release_strategy.strategy = 'full';
-      } else { // 扩大灰度范围
+      } else {
+        // 扩大灰度范围
         this.versionData.latest_release_strategy.strategy = 'gray';
       }
     },
@@ -262,10 +281,11 @@ export default {
         const formData = this.$refs.releaseStrategy.getFormData();
         const params = {
           strategy: formData.strategy,
-          ...formData.strategy === 'gray' && { // 仅在灰度
+          ...(formData.strategy === 'gray' && {
+            // 仅在灰度
             bkci_project: formData.bkci_project,
             organization: formData.organization,
-          },
+          }),
         };
         // 提交
         this.applyGrayRelease(params);
@@ -317,6 +337,23 @@ export default {
       }
     },
 
+    // 获取schema
+    async getNewVersionFormat() {
+      try {
+        const res = await this.$store.dispatch('plugin/getNewVersionFormat', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          type: 'prod',
+        });
+        this.scheme = res;
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
+
     // 重新申请
     handleReapply() {
       this.$router.push({
@@ -342,17 +379,26 @@ export default {
     padding-left: 264px;
     display: flex;
     align-items: center;
+    flex-wrap: nowrap;
     left: 0;
     right: 0;
     bottom: 0;
     height: 48px;
+    z-index: 9;
     background: #fafbfd;
     box-shadow: 0 -1px 0 0 #dcdee5;
+    .button-warpper {
+      display: flex;
+      flex-shrink: 0;
+    }
   }
   .release-tips {
     color: #979ba5;
     font-size: 12px;
     margin-left: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     /deep/ em {
       font-weight: 700;
     }

From 27c95345a7ed47812d46de62c28629277ed2903f Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Thu, 15 Aug 2024 15:31:16 +0800
Subject: [PATCH 06/17] =?UTF-8?q?fix:=20Codecc=E7=8A=B6=E6=80=81=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E3=80=81=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96=E9=A1=B9?=
 =?UTF-8?q?=20#=20Reviewed,=20transaction=20id:=2015405?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/common/constants.js     | 11 ++-
 .../src/components/paas-plugin-nav.vue        | 16 +++-
 .../src/components/pass-plugin-title.vue      | 35 ++++++--
 .../plugin/base-config/visible-range.vue      |  2 +-
 .../new-version/release-strategy.vue          | 41 +++++++--
 .../plugin/version-manager/index.vue          | 86 ++++++++++++++-----
 .../version-manager/version-details/index.vue |  2 +
 7 files changed, 151 insertions(+), 42 deletions(-)

diff --git a/webfe/package_vue/src/common/constants.js b/webfe/package_vue/src/common/constants.js
index 2d4d7aa9b1..5f21c8761b 100644
--- a/webfe/package_vue/src/common/constants.js
+++ b/webfe/package_vue/src/common/constants.js
@@ -280,8 +280,11 @@ export const CIRCLED_NUMBERS = [
  * Codecc 版本发布状态
  */
 export const CODECC_RELEASE_STATUS = {
-  pending: '灰度中',
-  successful: '已全量发布',
-  interrupted: '发布异常',
-  failed: '发布异常',
+  gray_approval_in_progress: '灰度发布审批中',
+  in_gray: '灰度中',
+  gray_approval_failed: '灰度审批失败',
+  full_approval_in_progress: '全量发布审批中',
+  fully_released: '已全量发布',
+  full_approval_failed: '全量发布审批失败',
+  rolled_back: '已回滚',
 };
diff --git a/webfe/package_vue/src/components/paas-plugin-nav.vue b/webfe/package_vue/src/components/paas-plugin-nav.vue
index 16fe9997dc..3f421eed0c 100644
--- a/webfe/package_vue/src/components/paas-plugin-nav.vue
+++ b/webfe/package_vue/src/components/paas-plugin-nav.vue
@@ -68,6 +68,7 @@ const PLUGIN_NAV_MAP = {
   PROCESS_MANAGE: 'pluginProcess',
   STRUCTURE_LOG: 'pluginLog',
   CONFIGURATION_MANAGE: 'pluginDeployEnv',
+  VISIBLE_RANGE_MANAGE: 'pluginVisibleRange',
 };
 
 export default {
@@ -139,7 +140,7 @@ export default {
         this.navTree = await this.initNavByRegion(appNav.pluginList);
         // 根据接口返回开关控制是否显示当前菜单项
         if (hideNavMap.length) {
-          this.navTree = this.navTree.filter(nav => !hideNavMap.includes(nav.name));
+          this.navTree = this.filterMenu(this.navTree, hideNavMap);
         }
         await this.initRouterPermission();
       }
@@ -147,6 +148,19 @@ export default {
       await this.selectRouterByName(this.curRouteName);
     },
 
+    // 根据接口返回开关控制是否显示当前菜单项
+    filterMenu(tree, hideNav) {
+      return tree.filter((item) => {
+        const nameToCheck = item.destRoute?.name || item.name;
+        if (hideNav.includes(nameToCheck)) return false;
+        // 如果有 children，递归过滤 children
+        if (item.children?.length) {
+          item.children = this.filterMenu(item.children, hideNav);
+        }
+        return true;
+      });
+    },
+
     /**
      * 根据接口来展示对应的导航项
      */
diff --git a/webfe/package_vue/src/components/pass-plugin-title.vue b/webfe/package_vue/src/components/pass-plugin-title.vue
index 4df8c96c3a..415bf195dc 100644
--- a/webfe/package_vue/src/components/pass-plugin-title.vue
+++ b/webfe/package_vue/src/components/pass-plugin-title.vue
@@ -23,12 +23,12 @@
             </div>
           </div>
           <div class="status-wrapper">
-            <round-loading v-if="versionData.status === 'pending' || versionData.status === 'initial'" />
+            <round-loading v-if="!isCodecc && ['pending', 'initial'].includes(versionData.status)" />
             <div
               v-else
-              :class="['dot', versionData.status]"
+              :class="['dot', versionData[statusKey]]"
             />
-            <span class="pl5">{{ statusMap[versionData.status] }}</span>
+            <span class="pl5">{{ statusMap[versionData[statusKey]] }}</span>
           </div>
         </template>
         <a
@@ -81,12 +81,21 @@ export default {
     statusMap: {
       type: Object,
     },
+    isCodecc: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       showBackIcon: false,
     };
   },
+  computed: {
+    statusKey() {
+      return this.isCodecc ? 'display_status' : 'status';
+    },
+  },
   watch: {
     $route: {
       handler(value) {
@@ -194,15 +203,31 @@ export default {
         display: inline-block;
         margin-right: 3px;
       }
-      .successful {
+      .successful,
+      .fully_released {
         background: #e5f6ea;
         border: 1px solid #3fc06d;
       }
       .failed,
-      .interrupted {
+      .interrupted,
+      .full_approval_failed,
+      .gray_approval_failed {
         background: #ffe6e6;
         border: 1px solid #ea3636;
       }
+      .full_approval_in_progress,
+      .gray_approval_in_progress {
+        background: #FFE8C3;
+        border: 1px solid #FF9C01;
+      }
+      .in_gray {
+        background: #E1ECFF;
+        border: 1px solid #699DF4;
+      }
+      .rolled_back {
+        background: #F0F1F5;
+        border: 1px solid #DCDEE5;
+      }
     }
     .icon-cls-back {
       color: #3a84ff;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index 16f99b85e4..c420ce5e3f 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -132,7 +132,7 @@ export default {
       rules: {
         projectIds: [
           {
-            regex: /^([a-z][a-zA-Z0-9-]+)(;[a-z][a-zA-Z0-9-]+)*;?$/,
+            regex: /^([a-z][a-zA-Z0-9-]+)(;[a-z][a-zA-Z0-9-]+)*;?$|^$/,
             message: this.$t('Project ID是字符+数字组成，并以小写字母开头，Project ID之间用英文分号分隔'),
             trigger: 'blur',
           },
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index ade1115f43..c431781450 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -82,25 +82,48 @@
       </bk-form>
 
       <view-mode v-else>
-        <ul class="release-strategy-cls" v-if="data?.latest_release_strategy">
+        <ul
+          class="release-strategy-cls"
+          v-if="data?.latest_release_strategy"
+        >
           <li class="item">
             <div class="label">{{ $t('发布策略') }}：</div>
             <div class="value">
               {{ releaseStrategyMap.find(v => v.value === data.latest_release_strategy.strategy)?.name }}
             </div>
           </li>
-          <li class="item" v-if="data.latest_release_strategy.strategy === 'gray'">
+          <li
+            class="item"
+            v-if="data.latest_release_strategy.strategy === 'gray'"
+          >
             <div class="label">{{ $t('灰度范围') }}：</div>
             <div class="value range">
               <div class="c-item">
                 <p class="c-title">{{ $t('蓝盾项目') }}：</p>
-                <p class="c-value">{{ data.latest_release_strategy.bkci_project.join() }}</p>
+                <p
+                  class="c-value"
+                >
+                  {{
+                    data.latest_release_strategy.bkci_project?.length
+                      ? data.latest_release_strategy.bkci_project.join()
+                      : '--'
+                  }}
+                </p>
               </div>
               <div class="c-item">
                 <p class="c-title">{{ $t('组织') }}：</p>
-                <ul class="c-value">
-                  <li v-for="item in data.latest_release_strategy.organization" :key="item.id">{{ item.name }}</li>
+                <ul
+                  class="c-value"
+                  v-if="data.latest_release_strategy.organization?.length"
+                >
+                  <li
+                    v-for="item in data.latest_release_strategy.organization"
+                    :key="item.id"
+                  >
+                    {{ item.name }}
+                  </li>
                 </ul>
+                <p v-else class="c-value">--</p>
               </div>
             </div>
           </li>
@@ -226,7 +249,9 @@ export default {
     // 重新申请设置默认值
     setVersionDefaultValue() {
       if (!this.versionData) return;
-      const { latest_release_strategy: { strategy, bkci_project, organization } } = this.versionData;
+      const {
+        latest_release_strategy: { strategy, bkci_project, organization },
+      } = this.versionData;
       this.releaseStrategy = {
         strategy,
         bkci_project,
@@ -292,10 +317,10 @@ export default {
     .range {
       min-width: 323px;
       padding: 12px 16px;
-      background: #F5F7FA;
+      background: #f5f7fa;
       border-radius: 2px;
       font-size: 12px;
-      color: #979BA5;
+      color: #979ba5;
 
       .c-item {
         margin-bottom: 16px;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index 9d8bd47c0b..0fc9063b0a 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -95,6 +95,7 @@
       <bk-table
         v-else
         ref="versionTable"
+        :key="curVersionType"
         v-bkloading="{ isLoading: isTableLoading }"
         class="pugin-version-list"
         :data="versionList"
@@ -163,7 +164,22 @@
             <span>{{ row.created || '--' }}</span>
           </template>
         </bk-table-column>
+        <!-- Codecc -->
         <bk-table-column
+          v-if="isCodecc"
+          :label="$t('发布状态')"
+          prop="status"
+          column-key="status"
+          :filters="codeccFilters"
+          :filter-multiple="true"
+        >
+          <template slot-scope="{ row }">
+            <div :class="['dot', row.display_status]" />
+            <span class="status-text">{{ $t(CODECC_RELEASE_STATUS[row.display_status]) || '--' }}</span>
+          </template>
+        </bk-table-column>
+        <bk-table-column
+          v-else
           :label="$t('状态')"
           prop="status"
           column-key="status"
@@ -355,7 +371,7 @@
 <script>
 import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 import versionManageTitle from './comps/version-manage-title.vue';
-import { PLUGIN_VERSION_STATUS, VERSION_NUMBER_TYPE, PLUGIN_TEST_VERSION_STATUS } from '@/common/constants';
+import { PLUGIN_VERSION_STATUS, VERSION_NUMBER_TYPE, PLUGIN_TEST_VERSION_STATUS, CODECC_RELEASE_STATUS } from '@/common/constants';
 import { formatDate } from '@/common/tools';
 import { clearFilter } from '@/common/utils';
 import auth from '@/auth';
@@ -399,18 +415,13 @@ export default {
       accessDisabledTips: '',
       curVersionType: 'test',
       user: {},
+      codeccFilters: this.formatStatusFilters(CODECC_RELEASE_STATUS),
+      CODECC_RELEASE_STATUS,
     };
   },
   computed: {
     statusFilters() {
-      const statusList = [];
-      for (const key in this.curVersionStatus) {
-        statusList.push({
-          value: key,
-          text: this.$t(this.curVersionStatus[key]),
-        });
-      }
-      return statusList;
+      return this.formatStatusFilters(this.curVersionStatus);
     },
     localLanguage() {
       return this.$store.state.localLanguage;
@@ -431,9 +442,13 @@ export default {
     },
     // Codecc 空状态
     isCodeccEmpty() {
+      if (this.filterStatus.length) return false;
       if (!this.versionList.length && this.curPluginInfo.has_test_version && this.isOfficialVersion) return true;
       return false;
     },
+    isCodecc() {
+      return this.curPluginInfo.has_test_version && this.isOfficialVersion;
+    },
   },
   watch: {
     $route() {
@@ -488,6 +503,18 @@ export default {
       this.getVersionList(newPage);
     },
 
+    // 格式化当前插件状态
+    formatStatusFilters(data) {
+      const statusList = [];
+      for (const key in data) {
+        statusList.push({
+          value: key,
+          text: this.$t(data[key]),
+        });
+      }
+      return statusList;
+    },
+
     formatPageParams(page) {
       const curPage = page || this.pagination.current;
       const params = {
@@ -504,17 +531,18 @@ export default {
       return params;
     },
 
+    // 格式化状态
     formatStatusParams() {
-      // 状态
       let statusParams = '';
       if (this.filterStatus.length) {
+        const key = this.isCodecc ? 'display_status' : 'status';
         let paramsText = '';
         this.filterStatus.forEach((item) => {
           // 选择发布中直接传递 status=pending&status=inital
           if (item === 'pending') {
-            paramsText += 'status=pending&status=initial&';
+            paramsText += `${key}=pending&${key}=initial&`;
           } else {
-            paramsText += `status=${item}&`;
+            paramsText += `${key}=${item}&`;
           }
         });
         statusParams = paramsText.substring(0, paramsText.length - 1);
@@ -802,21 +830,33 @@ export default {
   border-radius: 50%;
   display: inline-block;
   margin-right: 3px;
-}
-// .successful {
-//     background: #E5F6EA;
-//     border: 1px solid #3FC06D;
-// }
 
-.successful {
+  &.successful,
+  &.fully_released {
   background: #e5f6ea;
   border: 1px solid #3fc06d;
-}
+  }
 
-.failed,
-.interrupted {
-  background: #ffe6e6;
-  border: 1px solid #ea3636;
+  &.failed,
+  &.interrupted,
+  &.full_approval_failed,
+  &.gray_approval_failed {
+    background: #ffe6e6;
+    border: 1px solid #ea3636;
+  }
+  &.full_approval_in_progress,
+  &.gray_approval_in_progress {
+    background: #FFE8C3;
+    border: 1px solid #FF9C01;
+  }
+  &.in_gray {
+    background: #E1ECFF;
+    border: 1px solid #699DF4;
+  }
+  &.rolled_back {
+    background: #F0F1F5;
+    border: 1px solid #DCDEE5;
+  }
 }
 
 .tag {
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index 5ff2202bab..b959bf40ee 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -4,6 +4,7 @@
       :name="$t('版本发布')"
       :version-data="versionData"
       :status-map="CODECC_RELEASE_STATUS"
+      :is-codecc="true"
     />
     <!-- 版本发布 -->
     <paas-content-loader
@@ -96,6 +97,7 @@
             :theme="'default'"
             type="submit"
             :disabled="!versionData.latest_release_strategy?.ticket_info?.can_withdraw"
+            @click="viewApprovalDetails"
           >
             {{ $t('撤销提单') }}
           </bk-button>

From 9d5a30a36709e08b8358f0c204f483d4241e1956 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Fri, 16 Aug 2024 11:27:42 +0800
Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=E7=89=88=E6=9C=AC=E5=9B=9E?=
 =?UTF-8?q?=E6=BB=9A=20#=20Reviewed,=20transaction=20id:=2015539?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js     |   4 +
 webfe/package_vue/src/language/lang/zh.js     |   4 +
 webfe/package_vue/src/store/modules/plugin.js |   9 ++
 .../version-manager/create-version/index.vue  |  14 +-
 .../plugin/version-manager/index.vue          | 133 ++++++++++++++++--
 5 files changed, 149 insertions(+), 15 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index cef7f95761..4b01a1ce40 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2765,4 +2765,8 @@ export default {
   暂未设置可见范围: 'Visibility range not yet set',
   '请输入蓝盾项目 Project ID，并用英文分号分隔': 'Please enter the Blue Shield Project ID and separate them with English semicolons',
   '修改可见范围需由<i class="bold">平台管理员</i>进行审批': 'Changes to the visibility range require approval from the <i class="bold">platform administrator</i>',
+  回滚版本: 'Rollback Version',
+  回滚至版本: 'Rollback to Version',
+  '当前版本已回滚，不可再次回滚': 'The current version has already been rolled back and cannot be rolled back again',
+  '确认回滚至上一版本？': 'Confirm rollback to the previous version?',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 080f8e7a63..c91cbec863 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2902,4 +2902,8 @@ export default {
   暂未设置可见范围: '暂未设置可见范围',
   '请输入蓝盾项目 Project ID，并用英文分号分隔': '请输入蓝盾项目 Project ID，并用英文分号分隔',
   '修改可见范围需由<i class="bold">平台管理员</i>进行审批': '修改可见范围需由<i class="bold">平台管理员</i>进行审批',
+  回滚版本: '回滚版本',
+  回滚至版本: '回滚至版本',
+  '当前版本已回滚，不可再次回滚': '当前版本已回滚，不可再次回滚',
+  '确认回滚至上一版本？': '确认回滚至上一版本？',
 };
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index 9c0ff28e6b..8a6de14cea 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -612,5 +612,14 @@ export default {
       const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/releases/${id}/strategy/`;
       return http.post(url, data, config);
     },
+
+    /**
+     * 版本回滚
+     * @param {Object} params 请求参数：pdId, pluginId, releaseId
+     */
+    versionRollback({}, { pdId, pluginId, releaseId }, config) {
+      const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/releases/${releaseId}/rollback/`;
+      return http.post(url, {}, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
index 5557a053a6..95186c9de2 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/index.vue
@@ -56,6 +56,9 @@ export default {
     versionId() {
       return this.$route.query.versionId;
     },
+    schemeType() {
+      return this.$route.query.type;
+    },
   },
   async created() {
     if (this.versionId) {
@@ -67,13 +70,12 @@ export default {
     // 获取新建版本表单格式
     async getNewVersionFormat() {
       this.schemeLoading = true;
-      const params = {
-        pdId: this.pdId,
-        pluginId: this.pluginId,
-        type: 'prod',
-      };
       try {
-        const res = await this.$store.dispatch('plugin/getNewVersionFormat', params);
+        const res = await this.$store.dispatch('plugin/getNewVersionFormat', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          type: this.schemeType,
+        });
         this.scheme = res;
       } catch (e) {
         this.$bkMessage({
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index 0fc9063b0a..e3e59516ae 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -145,7 +145,7 @@
           :render-header="$renderHeader"
         >
           <template slot-scope="{ row }">
-            <span>{{ row.source_hash || '--' }}</span>
+            <span>{{ row.source_hash.slice(0, 8) || '--' }}</span>
           </template>
         </bk-table-column>
         <bk-table-column
@@ -170,8 +170,6 @@
           :label="$t('发布状态')"
           prop="status"
           column-key="status"
-          :filters="codeccFilters"
-          :filter-multiple="true"
         >
           <template slot-scope="{ row }">
             <div :class="['dot', row.display_status]" />
@@ -210,9 +208,23 @@
               >
                 {{ $t('版本详情') }}
               </bk-button>
+              <!-- is_rolled_back = true 表示已回滚 -->
+              <span
+                v-if="row.id === rollbacks[0]?.id"
+                v-bk-tooltips="{ content: $t('当前版本已回滚，不可再次回滚'), disabled: !row.is_rolled_back }"
+              >
+                <bk-button
+                  theme="primary"
+                  text
+                  :disabled="row.is_rolled_back"
+                  @click="showRollbackPopup(row)"
+                >
+                  {{ $t('回滚版本') }}
+                </bk-button>
+              </span>
             </template>
-            <div v-else>
-              <template v-if="isOfficialVersion">
+            <template v-else>
+              <div v-if="isOfficialVersion">
                 <bk-button
                   theme="primary"
                   text
@@ -229,7 +241,7 @@
                 >
                   {{ $t('发布进度') }}
                 </bk-button>
-              </template>
+              </div>
               <bk-button
                 v-else
                 theme="primary"
@@ -256,7 +268,7 @@
               >
                 {{ $t('测试报告') }}
               </bk-button>
-            </div>
+            </template>
           </template>
         </bk-table-column>
       </bk-table>
@@ -415,8 +427,8 @@ export default {
       accessDisabledTips: '',
       curVersionType: 'test',
       user: {},
-      codeccFilters: this.formatStatusFilters(CODECC_RELEASE_STATUS),
       CODECC_RELEASE_STATUS,
+      rollbacks: [],
     };
   },
   computed: {
@@ -481,6 +493,9 @@ export default {
         this.curVersionType = this.$route.query.type || 'test';
       }
       this.getVersionList();
+      if (this.isCodecc) {
+        this.getRollbackVersion();
+      }
       // 获取当前用户信息
       if (this.curVersionType === 'test' && !this.curUserInfo.username) {
         this.getCurrentUser();
@@ -585,6 +600,35 @@ export default {
       }
     },
 
+    // 获取回滚版本
+    async getRollbackVersion() {
+      try {
+        const res = await this.$store.dispatch('plugin/getVersionsManagerList', {
+          data: {
+            pdId: this.pdId,
+            pluginId: this.pluginId,
+          },
+          pageParams: {
+            order_by: '-created',
+            limit: 2,
+            offset: 0,
+            status: 'successful',
+            is_rolled_back: false,
+            type: this.curVersionType,
+          },
+        });
+        const { results } = res;
+        // 不符合回滚条件
+        if (results.length < 2) return;
+        this.rollbacks = results;
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
+
     // 获取当前用户信息
     getCurrentUser() {
       auth.requestCurrentUser().then((user) => {
@@ -634,7 +678,7 @@ export default {
           id: this.pluginId,
         },
         query: {
-          isPending: this.curIsPending,
+          isPending: !!this.curIsPending,
           type,
         },
       });
@@ -783,6 +827,77 @@ export default {
         },
       });
     },
+
+    // 回滚
+    showRollbackPopup(row) {
+      if (!this.rollbacks.length) return;
+      const h = this.$createElement;
+      const rollback = this.rollbacks[1];
+      const location = row.source_location.replace(/\.git$/, '');
+
+      this.$bkInfo({
+        type: 'warning',
+        title: this.$t('确认回滚至上一版本？'),
+        subHeader: h('div', [
+          this.createVersionInfo(
+            this.$t('当前版本'),
+            row.version,
+            row.source_hash.slice(0, 8),
+            `${location}/commit/${row.source_hash}`,
+          ),
+          this.createVersionInfo(
+            this.$t('回滚至版本'),
+            rollback.version,
+            rollback.source_hash.slice(0, 8),
+            `${location}/commit/${rollback.source_hash}`,
+          ),
+        ]),
+        okText: this.$t('回滚'),
+        confirmFn: () => {
+          this.handleRollbackVersion(row.id);
+        },
+      });
+    },
+
+    createVersionInfo(label, version, hash, url) {
+      const h = this.$createElement;
+      const fn = () => {
+        window.open(url, '_blank');
+      };
+      return h('p', [
+        h('span', `${label}：`),
+        h('span', [
+          h('span', { style: { color: '#313238' } }, version),
+          h(
+            'span', {
+              class: ['ml8'],
+              style: { color: '#3A84FF', cursor: 'pointer' },
+              on: {
+                click: fn,
+              },
+            },
+            hash,
+          ),
+        ]),
+      ]);
+    },
+
+    // 回滚版本
+    async handleRollbackVersion(id) {
+      try {
+        await this.$store.dispatch('plugin/versionRollback', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+          releaseId: id,
+        });
+        this.getVersionList();
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
   },
 };
 </script>

From 1a0ec127739df226ca7512a2c32394da81e1c7ad Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Fri, 16 Aug 2024 14:44:51 +0800
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=E5=8F=AF=E8=A7=81=E8=8C=83?=
 =?UTF-8?q?=E5=9B=B4=E6=B7=BB=E5=8A=A0=E7=BB=84=E7=BB=87=E5=B1=82=E7=BA=A7?=
 =?UTF-8?q?=20#=20Reviewed,=20transaction=20id:=2015577?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/common/tools.js         | 18 +++++++++
 webfe/package_vue/src/store/modules/plugin.js |  9 +++++
 .../plugin/base-config/visible-range.vue      | 31 +++++++++++++--
 .../new-version/visible-range.vue             | 39 ++++++++++++++++++-
 4 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/webfe/package_vue/src/common/tools.js b/webfe/package_vue/src/common/tools.js
index 4c38f45289..7ed48ae5c3 100644
--- a/webfe/package_vue/src/common/tools.js
+++ b/webfe/package_vue/src/common/tools.js
@@ -599,3 +599,21 @@ export function downloadTxt(content, fileName) {
   URL.revokeObjectURL(link.href);
   document.body.removeChild(link);
 }
+
+
+/**
+ * 将数据转为对应的层级路径
+ * @param {data} Arrar 层级数据
+ */
+export function buildPath(data) {
+  const path = [];
+
+  // 按顺序遍历数组，将每个节点的名称添加到路径中
+  data.reverse().forEach((node) => {
+    const name = node.find(([key]) => key === 'name')[1];
+    path.push(name);
+  });
+
+  // 返回由斜杠分隔的路径
+  return path.join('/');
+}
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index 8a6de14cea..f08d38c36e 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -621,5 +621,14 @@ export default {
       const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/releases/${releaseId}/rollback/`;
       return http.post(url, {}, config);
     },
+
+    /**
+     * 获取组织层级
+     * @param {Object} params 请求参数：id
+     */
+    getOrganizationLevel({}, { id }, config) {
+      const url = `${BACKEND_URL}/api/usermanage/departments/${id}/`;
+      return http.get(url, {}, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index c420ce5e3f..32188c5adb 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -67,7 +67,7 @@
               <div class="render-member-wrapper" v-if="departments.length > 0">
                 <render-member-list
                   type="department"
-                  :data="departments"
+                  :data="organizationLevel"
                 />
               </div>
             </bk-form-item>
@@ -107,6 +107,7 @@
 import paasPluginTitle from '@/components/pass-plugin-title';
 import userSelectorDialog from '@/components/user-selector';
 import renderMemberList from '@/views/dev-center/app/market/render-member-list';
+import { buildPath } from '@/common/tools';
 
 export default {
   components: {
@@ -129,6 +130,9 @@ export default {
       visibleRangeData: {},
       isEditingFormData: true,
       submitBtnTips: '',
+      // 用于缓存上一次请求的结果
+      cachePool: new Map(),
+      organizationLevel: [],
       rules: {
         projectIds: [
           {
@@ -188,7 +192,7 @@ export default {
     submitReview() {
       this.$refs.visibleRangeForm.validate().then(() => {
         const params = {
-          bkci_project: this.formData.projectIds.split(';'),
+          bkci_project: this.formData.projectIds.length ? this.formData.projectIds.split(';') : [],
           organization: this.formData.organization,
         };
         this.updateVisibleRange(params);
@@ -207,6 +211,7 @@ export default {
     async handleSubmit(payload) {
       this.formData.organization = payload;
       this.departments = payload;
+      await this.requestAllOrganization(payload);
       this.isShow = false;
     },
     // 获取可见范围数据
@@ -221,8 +226,8 @@ export default {
         this.formData.projectIds = res.bkci_project.join(';');
         this.formData.organization = res.organization || [];
         this.departments = this.formData.organization;
-
         this.isEdit = true;
+        await this.requestAllOrganization(res.organization);
       } catch (e) {
         // 404 就说明没有数据
         if (e.status === 404) {
@@ -253,6 +258,26 @@ export default {
         });
       }
     },
+    // 请求组织的层级结构
+    async requestAllOrganization(data) {
+      if (!data.length) return;
+
+      // 过滤出需要请求的新数据
+      const newData = data.filter(item => !this.cachePool.has(item.id));
+
+      // 对新数据发送请求
+      const requests = newData.map(item => this.$store.dispatch('plugin/getOrganizationLevel', { id: item.id }));
+      const res = await Promise.all(requests);
+
+      // 处理返回的数据
+      res.forEach((item, index) => {
+        const name = buildPath(item);
+        const { id } = newData[index];  // 对应的 id
+        this.cachePool.set(id, { name, id });  // 缓存处理后的结果
+      });
+
+      this.organizationLevel = data.map(item => this.cachePool.get(item.id));
+    },
     // 过滤出指定部门
     handleDepartments(data, type) {
       const TCID = 2874;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
index 7884976971..48947ddb69 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
@@ -14,8 +14,8 @@
           </li>
           <li class="item">
             <div class="label">{{ $t('组织') }}：</div>
-            <div class="value organization" v-if="data.organization.length">
-              <p v-for="item in data.organization" :key="item.id">
+            <div class="value organization" v-if="organizationLevel.length">
+              <p v-for="item in organizationLevel" :key="item.id">
                 {{ item.name }}
               </p>
             </div>
@@ -30,6 +30,7 @@
 <script>
 import card from '@/components/card/card.vue';
 import viewMode from './view-mode.vue';
+import { buildPath } from '@/common/tools';
 
 export default {
   name: 'ReleaseVisibleRange',
@@ -43,6 +44,40 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      // 缓存池
+      cachePool: new Map(),
+      organizationLevel: [],
+    };
+  },
+  watch: {
+    'data.organization'(newValue) {
+      this.requestAllOrganization(newValue);
+    },
+  },
+  methods: {
+    // 请求组织的层级结构
+    async requestAllOrganization(data) {
+      if (!data.length) return;
+
+      // 过滤出需要请求的新数据
+      const newData = data.filter(item => !this.cachePool.has(item.id));
+
+      // 对新数据发送请求
+      const requests = newData.map(item => this.$store.dispatch('plugin/getOrganizationLevel', { id: item.id }));
+      const res = await Promise.all(requests);
+
+      // 处理返回的数据
+      res.forEach((item, index) => {
+        const name = buildPath(item);
+        const { id } = newData[index];  // 对应的 id
+        this.cachePool.set(id, { name, id });  // 缓存处理后的结果
+      });
+
+      this.organizationLevel = data.map(item => this.cachePool.get(item.id));
+    },
+  },
 };
 </script>
 

From c365a05396df69dbb7bb126f0fe7769dd01b1549 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Fri, 16 Aug 2024 18:13:12 +0800
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20codecc=20=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=20#=20Reviewed,=20transaction=20id:=2015657?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js     |  10 +
 webfe/package_vue/src/language/lang/zh.js     |  10 +
 webfe/package_vue/src/store/modules/plugin.js |   9 +
 .../app/market/render-member-list.vue         |  18 +-
 .../plugin/base-config/base-info.vue          |  24 ++-
 .../base-config/comps/codecc-base-info.vue    | 175 ++++++++++++++++++
 .../plugin/base-config/visible-range.vue      |   7 -
 7 files changed, 231 insertions(+), 22 deletions(-)
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 4b01a1ce40..a88861dd09 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2769,4 +2769,14 @@ export default {
   回滚至版本: 'Rollback to Version',
   '当前版本已回滚，不可再次回滚': 'The current version has already been rolled back and cannot be rolled back again',
   '确认回滚至上一版本？': 'Confirm rollback to the previous version?',
+  'CodeCC 工具信息从代码仓库的配置文件中获取，': 'CodeCC tool information is retrieved from the configuration files in the code repository,',
+  '可前往 tool.json 和 checkers.json 修改': 'You can go to tool.json and checkers.json to make modifications',
+  工具类别: 'Tool Category',
+  开发工具: 'Development Tools',
+  业务编译脚本: 'Business Compilation Script',
+  规则数: 'Number of Rules',
+  工具描述: 'Tool Description',
+  不可修改: 'Cannot be Modified',
+  '不可删除语言，可新增语言': 'Languages cannot be deleted, but new languages can be added',
+  '不可将「不需要」编译修改为「需要」编译': 'Cannot change 「Not Required」 compilation to 「Required」 compilation',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index c91cbec863..5ff3f7b777 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2906,4 +2906,14 @@ export default {
   回滚至版本: '回滚至版本',
   '当前版本已回滚，不可再次回滚': '当前版本已回滚，不可再次回滚',
   '确认回滚至上一版本？': '确认回滚至上一版本？',
+  'CodeCC 工具信息从代码仓库的配置文件中获取，': 'CodeCC 工具信息从代码仓库的配置文件中获取，',
+  '可前往 tool.json 和 checkers.json 修改': '可前往 tool.json 和 checkers.json 修改',
+  工具类别: '工具类别',
+  开发工具: '开发工具',
+  业务编译脚本: '业务编译脚本',
+  规则数: '规则数',
+  工具描述: '工具描述',
+  不可修改: '不可修改',
+  '不可删除语言，可新增语言': '不可删除语言，可新增语言',
+  '不可将「不需要」编译修改为「需要」编译': '不可将「不需要」编译修改为「需要」编译',
 };
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index f08d38c36e..926e737189 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -630,5 +630,14 @@ export default {
       const url = `${BACKEND_URL}/api/usermanage/departments/${id}/`;
       return http.get(url, {}, config);
     },
+
+    /**
+     * 获取Codecc基本信息
+     * @param {Object} params 请求参数：id
+     */
+    getCodeccBasicInfo({}, { pdId, pluginId }, config) {
+      const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/basic_info/`;
+      return http.get(url, {}, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue b/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue
index 1565a056a4..70c601b192 100644
--- a/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue
+++ b/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue
@@ -43,6 +43,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 .render-member-list-wrapper {
+  margin-top: 12px;
+  font-size: 12px;
+  padding: 12px 12px 12px 36px;
+  background: #f5f7fa;
+  border-radius: 2px;
   color: #63656e;
   .content {
     .icon {
@@ -53,20 +58,21 @@ export default {
     }
     .member-name {
       margin-left: 10px;
-      font-size: 14px;
+      font-size: 12px;
       display: inline-block;
       vertical-align: middle;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
     .folder-icon {
       width: 16px;
       vertical-align: middle;
     }
     .member-item {
-      height: 36px;
-      line-height: 36px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      display: flex;
+      height: 32px;
+      line-height: 32px;
 
       .left-icon {
         display: inline-block;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue
index d4d92842b7..fa592b85b5 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue
@@ -7,8 +7,12 @@
       placeholder="plugin-base-info-loading"
     >
       <section class="basic-info-container">
+        <!-- Codecc 基本信息 -->
+        <codecc-base-info v-if="isCodecc" />
+
         <!-- 基本信息 -->
         <plugin-base-info
+          v-else
           :plugin-info="pluginInfo"
           @get-base-info="getPluginBaseInfo"
           @updata-log="handleUpdataLog"
@@ -211,6 +215,7 @@ import MoreInfo from './comps/more-info.vue';
 import pluginBaseInfo from './comps/base-info-item.vue';
 import pluginMarketInfo from './comps/market-info-item.vue';
 import publisherInfo from './comps/publisher-info.vue';
+import codeccBaseInfo from './comps/codecc-base-info.vue';
 // import 'BKSelectMinCss';
 export default {
   components: {
@@ -220,6 +225,7 @@ export default {
     pluginBaseInfo,
     pluginMarketInfo,
     publisherInfo,
+    codeccBaseInfo,
   },
   mixins: [pluginBaseMixin],
   data() {
@@ -279,6 +285,9 @@ export default {
     offlineStatus() {
       return this.curPluginInfo.can_reactivate;
     },
+    isCodecc() {
+      return this.curPluginInfo.has_test_version;
+    },
   },
   async created() {
     await this.init();
@@ -286,7 +295,11 @@ export default {
   },
   methods: {
     async init() {
-      await Promise.all([this.getPluginBaseInfo(), this.getMarketInfo()]);
+      const ininRequest = [this.getMarketInfo()];
+      if (!this.isCodecc) {
+        ininRequest.push(this.getPluginBaseInfo());
+      }
+      await Promise.all(ininRequest);
       if (this.pluginFeatureFlags.PLUGIN_DISTRIBUTER) {
         this.getPluginAll();
         this.getAuthorizedUse();
@@ -295,6 +308,7 @@ export default {
       if (this.pluginFeatureFlags.APP_SECRETS) {
         await this.$store.dispatch('plugin/getPluginAppInfo', { pluginId: this.pluginId, pdId: this.pdId });
       }
+      this.isLoading = false;
     },
 
     formattParams() {
@@ -318,10 +332,6 @@ export default {
           theme: 'error',
           message: e.detail || e.message || this.$t('接口异常'),
         });
-      } finally {
-        setTimeout(() => {
-          this.isLoading = false;
-        }, 200);
       }
     },
 
@@ -338,10 +348,6 @@ export default {
           theme: 'error',
           message: e.detail || e.message || this.$t('接口异常'),
         });
-      } finally {
-        setTimeout(() => {
-          this.isLoading = false;
-        }, 200);
       }
     },
 
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue
new file mode 100644
index 0000000000..c176280293
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="codecc-base-info-container card-style mt16" v-bkloading="{ isLoading: basicLoading, zIndex: 10 }">
+    <bk-alert
+      type="info"
+      :show-icon="false"
+    >
+      <div
+        slot="title"
+        class="codecc-base-alert-cls"
+      >
+        <i class="bk-icon icon-info"></i>
+        <p>{{ $t('CodeCC 工具信息从代码仓库的配置文件中获取，') }}</p>
+        <span class="link" @click="handleToConfig">{{ $t('可前往 tool.json 和 checkers.json 修改') }}</span>
+        <div class="line"></div>
+        <i class="paasng-icon paasng-refresh-line link" @click="getCodeccBasicInfo"></i>
+      </div>
+    </bk-alert>
+    <ul class="info">
+      <li
+        class="item"
+        v-for="(key, value) in BASICINFOMAP"
+        :key="key"
+      >
+        <div class="label">{{ key }}</div>
+        <div :class="['value', { num: value === 'checkerNum' }]">
+          {{ basicInfo[value] || '--' }}
+          <span class="tag ml15" v-if="tags[value]">{{ tags[value] }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeccBaseInfo',
+  data() {
+    return {
+      basicLoading: true,
+      basicInfo: {},
+      BASICINFOMAP: {
+        type: this.$t('插件类型'),
+        name: this.$t('插件标识'),
+        displayName: this.$t('插件名称'),
+        devLanguage: this.$t('开发工具'),
+        toolCnTypes: this.$t('工具类别'),
+        langList: this.$t('适用语言'),
+        needBuildScript: this.$t('业务编译脚本'),
+        checkerNum: this.$t('规则数'),
+        description: this.$t('工具描述'),
+      },
+      tags: {
+        type: this.$t('不可修改'),
+        displayName: this.$t('不可修改'),
+        langList: this.$t('不可删除语言，可新增语言'),
+        needBuildScript: this.$t('不可将「不需要」编译修改为「需要」编译'),
+      },
+    };
+  },
+  computed: {
+    pdId() {
+      return this.$route.params.pluginTypeId;
+    },
+    pluginId() {
+      return this.$route.params.id;
+    },
+    curPluginInfo() {
+      return this.$store.state.plugin.curPluginInfo;
+    },
+  },
+  created() {
+    this.getCodeccBasicInfo();
+  },
+  methods: {
+    handleToConfig() {
+      const { repository } = this.curPluginInfo;
+      const url = repository.replace(/\.git$/, '/blob/master/tool.json');
+      window.open(url, '_blank');
+    },
+    async getCodeccBasicInfo() {
+      this.basicLoading = true;
+      try {
+        const res = await this.$store.dispatch('plugin/getCodeccBasicInfo', {
+          pdId: this.pdId,
+          pluginId: this.pluginId,
+        });
+        this.basicInfo = {
+          ...res,
+          type: 'CodeCC 工具',
+          toolCnTypes: res.toolCnTypes.join('、'),
+          langList: res.langList.length ? res.langList.join('、') : '--',
+          needBuildScript: res.needBuildScript ? this.$t('需要业务提供') : this.$t('不需要业务提供'),
+        };
+      } catch (e) {
+        this.$bkMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      } finally {
+        this.basicLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.codecc-base-info-container {
+  @mixin flex-center {
+    display: flex;
+    align-items: center;
+  }
+  padding: 16px 24px;
+  .info {
+    margin-top: 16px;
+    .item {
+      @include flex-center;
+      height: 42px;
+      border: 1px solid #dcdee5;
+      border-top: none;
+      font-size: 12px;
+      color: #313238;
+      &:first-child {
+        border-top: 1px solid #dcdee5;
+      }
+      .label,
+      .value {
+        height: 100%;
+        padding: 0 16px;
+        &.num {
+          color: #3a84ff;
+        }
+        .tag {
+          display: inline-block;
+          font-size: 10px;
+          color: #63656E;
+          line-height: 16px;
+          height: 16px;
+          padding: 0 5px;
+          background: #F0F1F5;
+          border-radius: 2px;
+          white-space: nowrap;
+        }
+      }
+      .label {
+        @include flex-center;
+        width: 152px;
+        flex-shrink: 1;
+        background: #fafbfd;
+        border-right: 1px solid #dcdee5;
+      }
+      .value {
+        @include flex-center;
+        flex: 1;
+        color: #63656e;
+      }
+    }
+  }
+  .codecc-base-alert-cls {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    .line {
+      margin: 0 8px;
+      width: 1px;
+      height: 16px;
+      background: #c4c6cc;
+    }
+    .link {
+      color: #3a84ff;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index 32188c5adb..d4cd8f8a4f 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -317,13 +317,6 @@ export default {
         color: #ea3636;
       }
     }
-    .render-member-wrapper {
-      margin-top: 12px;
-      padding: 12px 12px 12px 36px;
-      width: 320px;
-      background: #f5f7fa;
-      border-radius: 2px;
-    }
   }
   .footer-btn {
     margin-top: 24px;

From d972a444c1cb19d6f37aba5529dd41ff5217efd4 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Mon, 19 Aug 2024 14:39:57 +0800
Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85=20#=20Reviewed,=20transaction=20id:=2015741?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pass-plugin-title.vue      |  2 +-
 webfe/package_vue/src/language/lang/en.js     | 26 +++++++++++++++++++
 webfe/package_vue/src/language/lang/zh.js     | 26 +++++++++++++++++++
 .../new-version/release-strategy.vue          |  4 +--
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/webfe/package_vue/src/components/pass-plugin-title.vue b/webfe/package_vue/src/components/pass-plugin-title.vue
index 415bf195dc..cbd92258f9 100644
--- a/webfe/package_vue/src/components/pass-plugin-title.vue
+++ b/webfe/package_vue/src/components/pass-plugin-title.vue
@@ -28,7 +28,7 @@
               v-else
               :class="['dot', versionData[statusKey]]"
             />
-            <span class="pl5">{{ statusMap[versionData[statusKey]] }}</span>
+            <span class="pl5">{{ $t(statusMap[versionData[statusKey]]) }}</span>
           </div>
         </template>
         <a
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index a88861dd09..e8e3d0bcd3 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2779,4 +2779,30 @@ export default {
   不可修改: 'Cannot be Modified',
   '不可删除语言，可新增语言': 'Languages cannot be deleted, but new languages can be added',
   '不可将「不需要」编译修改为「需要」编译': 'Cannot change 「Not Required」 compilation to 「Required」 compilation',
+  测试: 'Test',
+  灰度发布审批中: 'Gray approval in progress',
+  灰度中: 'In gray',
+  灰度审批失败: 'Gray approval failed',
+  全量发布审批中: 'Full approval in progress',
+  已全量发布: 'Fully released',
+  全量发布审批失败: 'Full approval failed',
+  已回滚: 'Rolled back',
+  新建版本发布: 'New Version Release',
+  查看测试数据: 'View Test Data',
+  发布内容: 'Release Content',
+  发布策略: 'Release Strategy',
+  灰度范围: 'Gray Release Scope',
+  先灰度后全量发布: 'Gray Release First, Full Release Later',
+  直接全量发布: 'Direct Full Release',
+  '蓝盾项目 ID': 'Blue Shield Project ID',
+  申请灰度发布: 'Apply for Gray Release',
+  扩大灰度范围: 'Expand Gray Release Scope',
+  申请全量发布: 'Apply for Full Release',
+  重新申请: 'Reapply',
+  已测试版本: 'Tested Version',
+  最小范围可以选择中心: 'Minimum Scope Can Select Center',
+  '灰度发布审批中，请耐心等待': 'Gray release approval in progress, please wait patiently',
+  '审批未通过，请修改发布信息后重新申请': 'Approval not passed, please modify the release information and reapply',
+  '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': 'Please enter Blue Shield Project IDs, separate multiple IDs with English semicolons, up to 10 IDs',
+  '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': 'Gray release needs to be approved by the <em>tool administrator</em>; if a gray organization scope is selected, it also needs to be approved by the <em>team leader of the tool publisher</em>.',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 5ff3f7b777..f1b3fd9a33 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2916,4 +2916,30 @@ export default {
   不可修改: '不可修改',
   '不可删除语言，可新增语言': '不可删除语言，可新增语言',
   '不可将「不需要」编译修改为「需要」编译': '不可将「不需要」编译修改为「需要」编译',
+  测试: '测试',
+  灰度发布审批中: '灰度发布审批中',
+  灰度中: '灰度中',
+  灰度审批失败: '灰度审批失败',
+  全量发布审批中: '全量发布审批中',
+  已全量发布: '已全量发布',
+  全量发布审批失败: '全量发布审批失败',
+  已回滚: '已回滚',
+  新建版本发布: '新建版本发布',
+  查看测试数据: '查看测试数据',
+  发布内容: '发布内容',
+  发布策略: '发布策略',
+  灰度范围: '灰度范围',
+  先灰度后全量发布: '先灰度后全量发布',
+  直接全量发布: '直接全量发布',
+  '蓝盾项目 ID': '蓝盾项目 ID',
+  申请灰度发布: '申请灰度发布',
+  扩大灰度范围: '扩大灰度范围',
+  申请全量发布: '申请全量发布',
+  重新申请: '重新申请',
+  已测试版本: '已测试版本',
+  最小范围可以选择中心: '最小范围可以选择中心',
+  '灰度发布审批中，请耐心等待': '灰度发布审批中，请耐心等待',
+  '审批未通过，请修改发布信息后重新申请': '审批未通过，请修改发布信息后重新申请',
+  '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID',
+  '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。',
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index c431781450..3ad1584f9b 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -13,7 +13,7 @@
         ext-cls="release-strategy-form-cls"
       >
         <bk-form-item
-          label="发布策略"
+          :label="$t('发布策略')"
           :required="true"
           :property="'strategy'"
           :error-display-type="'normal'"
@@ -31,7 +31,7 @@
         </bk-form-item>
         <bk-form-item
           v-if="!isFullRelease"
-          label="灰度范围"
+          :label="$t('灰度范围')"
           :required="true"
           ref="grayscaleRangeForm"
           :error-display-type="'normal'"

From 60d8159cb2efad6cc9239824cb11dd6a2f8a842f Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Thu, 22 Aug 2024 14:52:51 +0800
Subject: [PATCH 11/17] =?UTF-8?q?fix:=20=E4=BD=93=E9=AA=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20&=20=E8=8E=B7=E5=8F=96=E7=BB=84=E7=BB=87=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=E5=89=8D=E7=BC=80=E7=BC=93=E5=AD=98=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20#=20Reviewed,=20transaction=20id:=2016180?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js     |  6 +--
 webfe/package_vue/src/language/lang/zh.js     |  6 +--
 webfe/package_vue/src/store/modules/plugin.js | 33 +++++++++++++++-
 .../plugin/base-config/base-info.vue          |  2 +-
 .../base-config/comps/codecc-base-info.vue    | 15 ++------
 .../plugin/base-config/visible-range.vue      | 38 +++++++++----------
 .../new-version/release-strategy.vue          | 24 +++++++++++-
 .../new-version/visible-range.vue             | 26 ++++---------
 .../plugin/version-manager/index.vue          |  2 +-
 9 files changed, 91 insertions(+), 61 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index e8e3d0bcd3..4c00675cc2 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2769,10 +2769,10 @@ export default {
   回滚至版本: 'Rollback to Version',
   '当前版本已回滚，不可再次回滚': 'The current version has already been rolled back and cannot be rolled back again',
   '确认回滚至上一版本？': 'Confirm rollback to the previous version?',
-  'CodeCC 工具信息从代码仓库的配置文件中获取，': 'CodeCC tool information is retrieved from the configuration files in the code repository,',
-  '可前往 tool.json 和 checkers.json 修改': 'You can go to tool.json and checkers.json to make modifications',
+  'CodeCC 工具信息展示的是最新的测试版本，如需修改': 'The CodeCC tool information shows the latest test version. If modifications are needed, please',
+  '可前往 tool.json 和 checkers.json': 'go to tool.json and checkers.json',
+  修改后重新测试: 'to make changes and retest',
   工具类别: 'Tool Category',
-  开发工具: 'Development Tools',
   业务编译脚本: 'Business Compilation Script',
   规则数: 'Number of Rules',
   工具描述: 'Tool Description',
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index f1b3fd9a33..ec863e96ce 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2906,10 +2906,10 @@ export default {
   回滚至版本: '回滚至版本',
   '当前版本已回滚，不可再次回滚': '当前版本已回滚，不可再次回滚',
   '确认回滚至上一版本？': '确认回滚至上一版本？',
-  'CodeCC 工具信息从代码仓库的配置文件中获取，': 'CodeCC 工具信息从代码仓库的配置文件中获取，',
-  '可前往 tool.json 和 checkers.json 修改': '可前往 tool.json 和 checkers.json 修改',
+  'CodeCC 工具信息展示的是最新的测试版本，如需修改': 'CodeCC 工具信息展示的是最新的测试版本，如需修改',
+  '可前往 tool.json 和 checkers.json 修改': '可前往 tool.json 和 checkers.json',
+  修改后重新测试: '修改后重新测试',
   工具类别: '工具类别',
-  开发工具: '开发工具',
   业务编译脚本: '业务编译脚本',
   规则数: '规则数',
   工具描述: '工具描述',
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index 926e737189..89408cd684 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -22,7 +22,7 @@
     云API相关数据
 */
 import http from '@/api';
-import { json2Query } from '@/common/tools';
+import { json2Query, buildPath } from '@/common/tools';
 import bartOptions from '@/json/bar_chart_default';
 import moment from 'moment';
 
@@ -36,9 +36,12 @@ export default {
     // 当前插件的当前发布版本
     curRelease: {},
     pluginApplyUrl: '',
+    // 组织层级缓存池
+    cachePool: new Map(),
   },
   getters: {
     chartData: state => state.chartData,
+    getCachePool: state => state.cachePool,
   },
   mutations: {
     /**
@@ -85,8 +88,36 @@ export default {
     updatePluginApplyUrl(state, url) {
       state.pluginApplyUrl = url;
     },
+    setCachePool(state, { id, data }) {
+      state.cachePool.set(id, data);
+    },
   },
   actions: {
+    /**
+     * 获取组织层级前缀
+     * @param {Object} params 请求参数：data
+     */
+    async requestAllOrganization({ commit, state }, data) {
+      if (!data.length) return [];
+
+      // 过滤出需要请求的新数据
+      const newData = data.filter(item => !state.cachePool.has(item.id));
+
+      // 对新数据发送请求
+      const requests = newData.map(item => this.dispatch('plugin/getOrganizationLevel', { id: item.id }));
+      const res = await Promise.all(requests);
+
+      // 处理返回的数据
+      res.forEach((item, index) => {
+        console.log('rr', item, index);
+
+        const name = buildPath(item);
+        const { id } = newData[index];  // 对应的 id
+        commit('setCachePool', { id, data: { name, id } });  // 缓存处理后的结果
+      });
+
+      return data.map(item => state.cachePool.get(item.id));
+    },
     /**
      * --
      * @param {Object} params 请求参数：无
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue
index fa592b85b5..83f29c15d4 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/base-info.vue
@@ -19,7 +19,7 @@
         />
 
         <!-- 更多信息 -->
-        <div class="basic-info-item mt16 card-style" v-if="isMoreInfo">
+        <div class="basic-info-item mt16 card-style" v-if="isMoreInfo && !isCodecc">
           <div class="title">
             {{ $t('更多信息') }}
             <span
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue
index c176280293..26587b9d95 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/comps/codecc-base-info.vue
@@ -9,10 +9,9 @@
         class="codecc-base-alert-cls"
       >
         <i class="bk-icon icon-info"></i>
-        <p>{{ $t('CodeCC 工具信息从代码仓库的配置文件中获取，') }}</p>
-        <span class="link" @click="handleToConfig">{{ $t('可前往 tool.json 和 checkers.json 修改') }}</span>
-        <div class="line"></div>
-        <i class="paasng-icon paasng-refresh-line link" @click="getCodeccBasicInfo"></i>
+        {{ $t('CodeCC 工具信息展示的是最新的测试版本，如需修改') }}&nbsp;
+        <span class="link" @click="handleToConfig">{{ $t('可前往 tool.json 和 checkers.json') }}</span>
+        &nbsp;{{ $t('修改后重新测试') }}
       </div>
     </bk-alert>
     <ul class="info">
@@ -42,7 +41,7 @@ export default {
         type: this.$t('插件类型'),
         name: this.$t('插件标识'),
         displayName: this.$t('插件名称'),
-        devLanguage: this.$t('开发工具'),
+        devLanguage: this.$t('开发语言'),
         toolCnTypes: this.$t('工具类别'),
         langList: this.$t('适用语言'),
         needBuildScript: this.$t('业务编译脚本'),
@@ -160,12 +159,6 @@ export default {
     display: flex;
     align-items: center;
     font-size: 12px;
-    .line {
-      margin: 0 8px;
-      width: 1px;
-      height: 16px;
-      background: #c4c6cc;
-    }
     .link {
       color: #3a84ff;
       cursor: pointer;
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index d4cd8f8a4f..94ea482105 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -24,6 +24,7 @@
           >
             {{ $t('查看审批详情') }}
           </bk-button>
+          <i class="paasng-icon paasng-refresh-line refresh" @click="getVisibleRange" />
         </div>
       </bk-alert>
       <!-- 无数据状态 -->
@@ -107,7 +108,6 @@
 import paasPluginTitle from '@/components/pass-plugin-title';
 import userSelectorDialog from '@/components/user-selector';
 import renderMemberList from '@/views/dev-center/app/market/render-member-list';
-import { buildPath } from '@/common/tools';
 
 export default {
   components: {
@@ -130,8 +130,6 @@ export default {
       visibleRangeData: {},
       isEditingFormData: true,
       submitBtnTips: '',
-      // 用于缓存上一次请求的结果
-      cachePool: new Map(),
       organizationLevel: [],
       rules: {
         projectIds: [
@@ -172,6 +170,9 @@ export default {
       }
       return false;
     },
+    cachePool() {
+      return this.$store.getters['plugin/getCachePool'];
+    },
   },
   watch: {
     formData: {
@@ -180,6 +181,9 @@ export default {
       },
       deep: true,
     },
+    initStatus(newValue) {
+      this.isEditingFormData = newValue === JSON.stringify(this.formData);
+    },
     'departments.length'() {
       this.triggerValidate();
     },
@@ -258,25 +262,10 @@ export default {
         });
       }
     },
-    // 请求组织的层级结构
     async requestAllOrganization(data) {
       if (!data.length) return;
-
-      // 过滤出需要请求的新数据
-      const newData = data.filter(item => !this.cachePool.has(item.id));
-
-      // 对新数据发送请求
-      const requests = newData.map(item => this.$store.dispatch('plugin/getOrganizationLevel', { id: item.id }));
-      const res = await Promise.all(requests);
-
-      // 处理返回的数据
-      res.forEach((item, index) => {
-        const name = buildPath(item);
-        const { id } = newData[index];  // 对应的 id
-        this.cachePool.set(id, { name, id });  // 缓存处理后的结果
-      });
-
-      this.organizationLevel = data.map(item => this.cachePool.get(item.id));
+      const organizationLevel = await this.$store.dispatch('plugin/requestAllOrganization', data);
+      this.organizationLevel = organizationLevel;
     },
     // 过滤出指定部门
     handleDepartments(data, type) {
@@ -339,6 +328,7 @@ export default {
     margin-bottom: 16px;
   }
   .warning-alert-cls {
+    position: relative;
     i {
       font-size: 14px;
       color: #ff9c01;
@@ -353,6 +343,14 @@ export default {
     /deep/ .bk-button-text.bk-button-small {
       padding: 0;
     }
+    .refresh {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+      color: #3a84ff;
+    }
   }
 }
 </style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index 3ad1584f9b..bcaa551a13 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -65,7 +65,7 @@
                 >
                   <render-member-list
                     type="department"
-                    :data="departments"
+                    :data="organizationLevel"
                   />
                 </div>
                 <p
@@ -117,7 +117,7 @@
                   v-if="data.latest_release_strategy.organization?.length"
                 >
                   <li
-                    v-for="item in data.latest_release_strategy.organization"
+                    v-for="item in organizationLevel"
                     :key="item.id"
                   >
                     {{ item.name }}
@@ -194,6 +194,7 @@ export default {
         { value: 'gray', name: this.$t('先灰度后全量发布') },
         { value: 'full', name: this.$t('直接全量发布') },
       ],
+      organizationLevel: [],
       rules: {
         strategy: [
           {
@@ -223,6 +224,9 @@ export default {
     versionId() {
       return this.$route.query.versionId;
     },
+    cachePool() {
+      return this.$store.getters['plugin/getCachePool'];
+    },
   },
   watch: {
     data: {
@@ -230,6 +234,9 @@ export default {
         if (this.step === 'release') {
           this.releaseStrategy = newValue?.latest_release_strategy || {};
           this.departments = newValue.latest_release_strategy?.organization || [];
+          if (this.departments.length) {
+            this.requestAllOrganization(this.departments);
+          }
         }
         if (this.versionId) {
           this.setVersionDefaultValue();
@@ -258,6 +265,9 @@ export default {
         organization,
       };
       this.departments = organization || [];
+      if (this.departments.length) {
+        this.requestAllOrganization(this.departments);
+      }
     },
     // 表单校验
     validate() {
@@ -282,8 +292,15 @@ export default {
     async handleSubmit(payload) {
       this.releaseStrategy.organization = payload;
       this.departments = payload;
+      await this.requestAllOrganization(payload);
       this.isShow = false;
     },
+    // 请求组织的层级结构
+    async requestAllOrganization(data) {
+      if (!data.length) return;
+      const organizationLevel = await this.$store.dispatch('plugin/requestAllOrganization', data);
+      this.organizationLevel = organizationLevel;
+    },
     // 过滤出指定部门
     handleDepartments(data, type) {
       const TCID = 2874;
@@ -367,5 +384,8 @@ export default {
       }
     }
   }
+  .render-member-wrapper .render-member-list-wrapper {
+    padding: 0 12px 12px 12px;
+  }
 }
 </style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
index 48947ddb69..cda00bf648 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/visible-range.vue
@@ -30,7 +30,6 @@
 <script>
 import card from '@/components/card/card.vue';
 import viewMode from './view-mode.vue';
-import { buildPath } from '@/common/tools';
 
 export default {
   name: 'ReleaseVisibleRange',
@@ -46,11 +45,14 @@ export default {
   },
   data() {
     return {
-      // 缓存池
-      cachePool: new Map(),
       organizationLevel: [],
     };
   },
+  computed: {
+    cachePool() {
+      return this.$store.getters['plugin/getCachePool'];
+    },
+  },
   watch: {
     'data.organization'(newValue) {
       this.requestAllOrganization(newValue);
@@ -60,22 +62,8 @@ export default {
     // 请求组织的层级结构
     async requestAllOrganization(data) {
       if (!data.length) return;
-
-      // 过滤出需要请求的新数据
-      const newData = data.filter(item => !this.cachePool.has(item.id));
-
-      // 对新数据发送请求
-      const requests = newData.map(item => this.$store.dispatch('plugin/getOrganizationLevel', { id: item.id }));
-      const res = await Promise.all(requests);
-
-      // 处理返回的数据
-      res.forEach((item, index) => {
-        const name = buildPath(item);
-        const { id } = newData[index];  // 对应的 id
-        this.cachePool.set(id, { name, id });  // 缓存处理后的结果
-      });
-
-      this.organizationLevel = data.map(item => this.cachePool.get(item.id));
+      const organizationLevel = await this.$store.dispatch('plugin/requestAllOrganization', data);
+      this.organizationLevel = organizationLevel;
     },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index e3e59516ae..d26cc80208 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -206,7 +206,7 @@
                 class="mr10"
                 @click="handleCodeccReleaseDetails(row)"
               >
-                {{ $t('版本详情') }}
+                {{ $t('详情') }}
               </bk-button>
               <!-- is_rolled_back = true 表示已回滚 -->
               <span

From b799447ef77f69e4ee255f6041b1644152607f19 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Fri, 23 Aug 2024 11:32:41 +0800
Subject: [PATCH 12/17] =?UTF-8?q?fix:=20=E5=8F=91=E5=B8=83=E7=AD=96?=
 =?UTF-8?q?=E7=95=A5=E8=BE=B9=E7=95=8C=E5=A4=84=E7=90=86=20#=20Reviewed,?=
 =?UTF-8?q?=20transaction=20id:=2016308?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/store/modules/plugin.js |  2 -
 .../new-version/release-strategy.vue          | 61 ++++++++++++++++---
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index 89408cd684..80431fe655 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -109,8 +109,6 @@ export default {
 
       // 处理返回的数据
       res.forEach((item, index) => {
-        console.log('rr', item, index);
-
         const name = buildPath(item);
         const { id } = newData[index];  // 对应的 id
         commit('setCachePool', { id, data: { name, id } });  // 缓存处理后的结果
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index bcaa551a13..116c9b9f68 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -49,6 +49,10 @@
                   :placeholder="$t('请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID')"
                   :has-delete-icon="true"
                   :allow-create="true"
+                  :paste-fn="customCopyRules"
+                  :clearable="!isDetailStep"
+                  :tag-tpl="renderMemberTag"
+                  @blur="handleBlur"
                   ext-cls="projec-id-tag-cls"
                 ></bk-tag-input>
               </bk-form-item>
@@ -89,7 +93,7 @@
           <li class="item">
             <div class="label">{{ $t('发布策略') }}：</div>
             <div class="value">
-              {{ releaseStrategyMap.find(v => v.value === data.latest_release_strategy.strategy)?.name }}
+              {{ releaseStrategyMap.find((v) => v.value === data.latest_release_strategy.strategy)?.name }}
             </div>
           </li>
           <li
@@ -100,9 +104,7 @@
             <div class="value range">
               <div class="c-item">
                 <p class="c-title">{{ $t('蓝盾项目') }}：</p>
-                <p
-                  class="c-value"
-                >
+                <p class="c-value">
                   {{
                     data.latest_release_strategy.bkci_project?.length
                       ? data.latest_release_strategy.bkci_project.join()
@@ -123,7 +125,12 @@
                     {{ item.name }}
                   </li>
                 </ul>
-                <p v-else class="c-value">--</p>
+                <p
+                  v-else
+                  class="c-value"
+                >
+                  --
+                </p>
               </div>
             </div>
           </li>
@@ -152,6 +159,7 @@ import userSelectorDialog from '@/components/user-selector';
 import renderMemberList from '@/views/dev-center/app/market/render-member-list';
 import card from '@/components/card/card.vue';
 import viewMode from './view-mode.vue';
+import { cloneDeep } from 'lodash';
 
 export default {
   name: 'ReleaseStrategy',
@@ -195,6 +203,7 @@ export default {
         { value: 'full', name: this.$t('直接全量发布') },
       ],
       organizationLevel: [],
+      disableDeletionMapping: {},
       rules: {
         strategy: [
           {
@@ -227,16 +236,24 @@ export default {
     cachePool() {
       return this.$store.getters['plugin/getCachePool'];
     },
+    isDetailStep() {
+      return this.step === 'release';
+    },
   },
   watch: {
     data: {
       handler(newValue) {
-        if (this.step === 'release') {
-          this.releaseStrategy = newValue?.latest_release_strategy || {};
+        if (this.isDetailStep) {
+          this.releaseStrategy = cloneDeep(newValue?.latest_release_strategy || {});
           this.departments = newValue.latest_release_strategy?.organization || [];
           if (this.departments.length) {
             this.requestAllOrganization(this.departments);
           }
+          if (this.releaseStrategy?.bkci_project?.length) {
+            this.releaseStrategy.bkci_project.forEach((v) => {
+              this.disableDeletionMapping[v] = true;
+            });
+          }
         }
         if (this.versionId) {
           this.setVersionDefaultValue();
@@ -313,6 +330,33 @@ export default {
       const tc = data.find(v => v.id === TCID);
       return tc ? [tc] : [];
     },
+    // 自定义粘贴规则
+    customCopyRules(val) {
+      const value = String(val).trim();
+      if (!value) {
+        this.$bkMessage({ theme: 'error', message: this.$t('粘贴内容不能为空'), delay: 2000, dismissable: false });
+        return [];
+      }
+      const commandArr = value.split(',');
+      commandArr.forEach((item) => {
+        if (!this.releaseStrategy.bkci_project.includes(item)) {
+          this.releaseStrategy.bkci_project.push(item);
+        }
+      });
+      return this.releaseStrategy.bkci_project;
+    },
+    renderMemberTag(node) {
+      const h = this.$createElement;
+
+      return h('div', { class: ['tag', { 'hide-delete-icon': this.disableDeletionMapping[node.id] }] }, [
+        h('span', { class: ['text'], attrs: { tabIndex: 0 } }, node.id),
+      ]);
+    },
+    handleBlur(input) {
+      if (input !== '') {
+        this.releaseStrategy.bkci_project.push(input);
+      }
+    },
   },
 };
 </script>
@@ -380,6 +424,9 @@ export default {
           .tag {
             background-color: #fafbfd;
           }
+          .hide-delete-icon + .icon-close {
+            display: none;
+          }
         }
       }
     }

From acf2aa35501b2a530421a1a5927f220b5494e400 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Wed, 28 Aug 2024 12:05:58 +0800
Subject: [PATCH 13/17] =?UTF-8?q?fix:=20=20=E6=88=90=E5=91=98=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=AE=A1=E7=90=86=E5=91=98=E6=93=8D=E4=BD=9Cbug?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20&=20=E7=BB=88=E6=AD=A2=E5=8F=91=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/common/constants.js     |  1 +
 .../src/components/pass-plugin-title.vue      |  6 ++
 webfe/package_vue/src/language/lang/en.js     |  1 +
 webfe/package_vue/src/language/lang/zh.js     |  1 +
 webfe/package_vue/src/store/modules/plugin.js |  9 +++
 .../plugin/base-config/members.vue            | 55 +++++++----------
 .../plugin-center/plugin/summary/index.vue    |  2 +-
 .../plugin/version-manager/index.vue          | 60 ++++++++++++++++---
 .../plugin/version-manager/test-report.vue    |  9 ++-
 .../version-manager/version-details/index.vue | 41 ++++++++++++-
 10 files changed, 141 insertions(+), 44 deletions(-)

diff --git a/webfe/package_vue/src/common/constants.js b/webfe/package_vue/src/common/constants.js
index 5f21c8761b..f7e483f1f3 100644
--- a/webfe/package_vue/src/common/constants.js
+++ b/webfe/package_vue/src/common/constants.js
@@ -287,4 +287,5 @@ export const CODECC_RELEASE_STATUS = {
   fully_released: '已全量发布',
   full_approval_failed: '全量发布审批失败',
   rolled_back: '已回滚',
+  interrupted: '已终止',
 };
diff --git a/webfe/package_vue/src/components/pass-plugin-title.vue b/webfe/package_vue/src/components/pass-plugin-title.vue
index cbd92258f9..b4a77ff352 100644
--- a/webfe/package_vue/src/components/pass-plugin-title.vue
+++ b/webfe/package_vue/src/components/pass-plugin-title.vue
@@ -43,6 +43,9 @@
       </div>
       <span v-if="tips" class="tips">{{ tips }}</span>
     </div>
+    <div class="right-tool flex-row align-items-center">
+      <slot name="right"></slot>
+    </div>
   </div>
 </template>
 <script>
@@ -131,6 +134,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .plugin-top-title {
+  display: flex;
+  justify-content: space-between;
   i {
     transform: translateY(0px);
   }
@@ -153,6 +158,7 @@ export default {
     }
   }
   .title-container {
+    flex: 1;
     .title {
       display: flex;
       align-items: center;
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 4c00675cc2..cbdf8e0a7c 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2805,4 +2805,5 @@ export default {
   '审批未通过，请修改发布信息后重新申请': 'Approval not passed, please modify the release information and reapply',
   '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': 'Please enter Blue Shield Project IDs, separate multiple IDs with English semicolons, up to 10 IDs',
   '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': 'Gray release needs to be approved by the <em>tool administrator</em>; if a gray organization scope is selected, it also needs to be approved by the <em>team leader of the tool publisher</em>.',
+  已终止当前的发布版本: 'The current release version has been terminated',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index ec863e96ce..2b6a8a69a6 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2942,4 +2942,5 @@ export default {
   '审批未通过，请修改发布信息后重新申请': '审批未通过，请修改发布信息后重新申请',
   '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID',
   '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。',
+  已终止当前的发布版本: '已终止当前的发布版本',
 };
diff --git a/webfe/package_vue/src/store/modules/plugin.js b/webfe/package_vue/src/store/modules/plugin.js
index 80431fe655..dc70a171e4 100644
--- a/webfe/package_vue/src/store/modules/plugin.js
+++ b/webfe/package_vue/src/store/modules/plugin.js
@@ -668,5 +668,14 @@ export default {
       const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/basic_info/`;
       return http.get(url, {}, config);
     },
+
+    /**
+     * Codecc 终止发布
+     * @param {Object} params 请求参数：id
+     */
+    codeccCancelReleases({}, { pdId, pluginId, releaseId }, config) {
+      const url = `${BACKEND_URL}/api/bkplugins/${pdId}/plugins/${pluginId}/releases/${releaseId}/cancel/`;
+      return http.post(url, {}, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/members.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/members.vue
index 31be1c8bfe..7edb43eda8 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/members.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/members.vue
@@ -214,10 +214,12 @@
   </div>
 </template>
 
-<script>import auth from '@/auth';
+<script>
+import auth from '@/auth';
 import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 import user from '@/components/user';
 import paasPluginTitle from '@/components/pass-plugin-title';
+import { paginationFun } from '@/common/utils';
 
 const ROLE_BACKEND_IDS = {
   administrator: 2,
@@ -292,10 +294,7 @@ export default {
         count: 0,
         limit: 10,
       },
-      currentBackup: 1,
-      enableToAddRole: false,
       keyword: '',
-      memberListClone: [],
       isTableLoading: false,
       isDelLoading: false,
       tableEmptyConf: {
@@ -306,7 +305,7 @@ export default {
   },
   computed: {
     curUserInfo() {
-      return this.memberListShow.find(item => item.username === this.currentUser) || {};
+      return this.memberList.find(item => item.username === this.currentUser) || {};
     },
     // 当前用户是否为当前插件的管理员
     isPluginAdmin() {
@@ -315,7 +314,7 @@ export default {
     isExitDisabled() {
       if (this.curUserInfo.role.roleName === 'developer') return false; // 开发者允许退出
       // 当前插件如果只剩下一个管理员，不允许退出
-      const adminUsers = this.memberListShow.filter(user => user.role.roleName === 'administrator');
+      const adminUsers = this.memberList.filter(user => user.role.roleName === 'administrator');
       return adminUsers.length <= 1;
     },
     localLanguage() {
@@ -327,14 +326,16 @@ export default {
       }
       return this.localLanguage === 'en' ? 'en-icon-left' : '';
     },
+    filterMemberList() {
+      return this.keyword
+        ? this.memberList.filter(v => v.username.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1)
+        : this.memberList;
+    },
   },
   watch: {
     $route() {
       this.init();
     },
-    'pagination.current'(value) {
-      this.currentBackup = value;
-    },
     keyword(val) {
       if (!val) {
         this.handleSearch();
@@ -346,14 +347,11 @@ export default {
   },
   methods: {
     pageChange(page) {
-      if (this.currentBackup === page) {
-        return;
-      }
       this.pagination.current = page;
-      this.handleSearch();
+      this.setTableData(this.filterMemberList, page, this.pagination.limit);
     },
 
-    limitChange(currentLimit, prevLimit) {
+    limitChange(currentLimit) {
       this.pagination.limit = currentLimit;
       this.pagination.current = 1;
       this.handleSearch();
@@ -364,7 +362,6 @@ export default {
     },
 
     init() {
-      this.enableToAddRole = this.curPluginInfo && this.curPluginInfo.role && this.curPluginInfo.role.id === ROLE_BACKEND_IDS.administrator;
       this.fetchMemberList();
     },
 
@@ -379,10 +376,8 @@ export default {
         res.forEach((element) => {
           this.$set(element.role, 'roleName', ROLE_ID_TO_NAME[element.role.id]);
         });
-        const start = this.pagination.limit * (this.pagination.current - 1);
-        const end = start + this.pagination.limit;
-        this.memberList.splice(0, this.memberList.length, ...(res || []));
-        this.memberListShow.splice(0, this.memberListShow.length, ...this.memberList.slice(start, end));
+        this.memberList = res || [];
+        this.setTableData(this.memberList, this.pagination.current, this.pagination.limit);
         this.updateTableEmptyConfig();
         this.tableEmptyConf.isAbnormal = false;
       } catch (e) {
@@ -600,21 +595,15 @@ export default {
     isCurrentUser(memberInfo) {
       return memberInfo.username === this.currentUser;
     },
-
+    setTableData(data, page, limit) {
+      const result = paginationFun(data, page, limit);
+      this.memberListShow = result.pageData;
+    },
+    // 成员名称搜索
     handleSearch() {
-      if (this.keyword) {
-        this.memberListShow = this.memberList.filter(apigw => apigw.username.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1);
-        this.memberListClone = [...this.memberListShow];
-        this.pagination.count = this.memberListClone.length;
-        if (this.memberListClone.length > 10) {
-          const start = this.pagination.limit * (this.pagination.current - 1);
-          const end = start + this.pagination.limit;
-          this.memberListShow.splice(0, this.memberListShow.length, ...this.memberListClone.slice(start, end));
-        }
-        this.updateTableEmptyConfig();
-      } else {
-        this.fetchMemberList();
-      }
+      this.pagination.current = 1;
+      this.pagination.count = this.filterMemberList.length;
+      this.setTableData(this.filterMemberList, this.pagination.current, this.pagination.limit);
     },
     clearFilterKey() {
       this.keyword = '';
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue
index 1c88c6aa09..dafbb30d46 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/summary/index.vue
@@ -130,7 +130,7 @@
                   <span>{{ curPluginInfo.language }}</span>
                 </p>
                 <p class="repos">
-                  <span>{{ $t('代码仓库：') }}</span>
+                  {{ $t('代码仓库：') }}
                   <span
                     v-bk-tooltips.top-end="curPluginInfo.repository"
                     class="repository-tooltips"
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index d26cc80208..14a8781499 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -170,10 +170,12 @@
           :label="$t('发布状态')"
           prop="status"
           column-key="status"
+          :filters="codeccStatusFilters"
+          :filter-multiple="true"
         >
           <template slot-scope="{ row }">
-            <div :class="['dot', row.display_status]" />
-            <span class="status-text">{{ $t(CODECC_RELEASE_STATUS[row.display_status]) || '--' }}</span>
+            <div :class="['dot', row.gray_status]" />
+            <span class="status-text">{{ $t(CODECC_RELEASE_STATUS[row.gray_status]) || '--' }}</span>
           </template>
         </bk-table-column>
         <bk-table-column
@@ -197,7 +199,7 @@
           :label="$t('操作')"
           :width="localLanguage === 'en' ? 320 : 240"
         >
-          <template slot-scope="{ row }">
+          <div slot-scope="{ row }">
             <!-- Codecc 灰度审批详情 -->
             <template v-if="row.source_version_type === 'tested_version' && isOfficialVersion">
               <bk-button
@@ -208,6 +210,15 @@
               >
                 {{ $t('详情') }}
               </bk-button>
+              <bk-button
+                v-if="canTerminateStatus.includes(row.gray_status)"
+                theme="primary"
+                text
+                class="mr10"
+                @click="handleCodeccCancelReleases(row)"
+              >
+                {{ $t('终止发布') }}
+              </bk-button>
               <!-- is_rolled_back = true 表示已回滚 -->
               <span
                 v-if="row.id === rollbacks[0]?.id"
@@ -224,7 +235,7 @@
               </span>
             </template>
             <template v-else>
-              <div v-if="isOfficialVersion">
+              <span v-if="isOfficialVersion">
                 <bk-button
                   theme="primary"
                   text
@@ -241,7 +252,7 @@
                 >
                   {{ $t('发布进度') }}
                 </bk-button>
-              </div>
+              </span>
               <bk-button
                 v-else
                 theme="primary"
@@ -269,7 +280,7 @@
                 {{ $t('测试报告') }}
               </bk-button>
             </template>
-          </template>
+          </div>
         </bk-table-column>
       </bk-table>
     </paas-content-loader>
@@ -429,12 +440,16 @@ export default {
       user: {},
       CODECC_RELEASE_STATUS,
       rollbacks: [],
+      canTerminateStatus: ['gray_approval_in_progress', 'full_approval_in_progress', 'in_gray'],
     };
   },
   computed: {
     statusFilters() {
       return this.formatStatusFilters(this.curVersionStatus);
     },
+    codeccStatusFilters() {
+      return this.formatStatusFilters(CODECC_RELEASE_STATUS);
+    },
     localLanguage() {
       return this.$store.state.localLanguage;
     },
@@ -550,7 +565,7 @@ export default {
     formatStatusParams() {
       let statusParams = '';
       if (this.filterStatus.length) {
-        const key = this.isCodecc ? 'display_status' : 'status';
+        const key = this.isCodecc ? 'gray_status' : 'status';
         let paramsText = '';
         this.filterStatus.forEach((item) => {
           // 选择发布中直接传递 status=pending&status=inital
@@ -898,6 +913,37 @@ export default {
         });
       }
     },
+
+    // 终止发布弹窗
+    handleCodeccCancelReleases(row) {
+      this.$bkInfo({
+        title: `${this.$t('确认终止发布版本')}${row.source_version_name} ？`,
+        width: 540,
+        maskClose: true,
+        confirmLoading: true,
+        confirmFn: async () => {
+          try {
+            await this.$store.dispatch('plugin/codeccCancelReleases', {
+              pdId: this.pdId,
+              pluginId: this.pluginId,
+              releaseId: row.id,
+            });
+            this.$bkMessage({
+              theme: 'success',
+              message: this.$t('已终止当前的发布版本'),
+            });
+            this.getVersionList();
+          } catch (e) {
+            this.$bkMessage({
+              theme: 'error',
+              message: e.detail || e.message || this.$t('接口异常'),
+            });
+          } finally {
+            return true;
+          }
+        },
+      });
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/test-report.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/test-report.vue
index e43fab3c2e..892f65cbec 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/test-report.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/test-report.vue
@@ -3,7 +3,7 @@
     <paas-plugin-title />
     <paas-content-loader
       :is-loading="isLoading"
-      placeholder="summary-plugin-loading"
+      placeholder="roles-loading"
       :offset-top="20"
       class="app-container overview-middle test-container"
     >
@@ -28,7 +28,7 @@ export default {
   },
   data() {
     return {
-      isLoading: false,
+      isLoading: true,
     };
   },
   computed: {
@@ -36,6 +36,11 @@ export default {
       return this.$route.query.url;
     },
   },
+  mounted() {
+    setTimeout(() => {
+      this.isLoading = false;
+    }, 1000);
+  },
 };
 </script>
 
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index b959bf40ee..dc7b51a8a1 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -5,7 +5,14 @@
       :version-data="versionData"
       :status-map="CODECC_RELEASE_STATUS"
       :is-codecc="true"
-    />
+    >
+      <template slot="right" v-if="canTerminateStatus.includes(versionData.gray_status)">
+        <bk-button @click="handleCodeccCancelReleases">
+          <i class="paasng-icon paasng-minus-circle" />
+          {{ $t('终止发布') }}
+        </bk-button>
+      </template>
+    </paas-plugin-title>
     <!-- 版本发布 -->
     <paas-content-loader
       :is-loading="isLoading"
@@ -183,6 +190,7 @@ export default {
       scheme: {
         source_versions: [],
       },
+      canTerminateStatus: ['gray_approval_in_progress', 'full_approval_in_progress', 'in_gray'],
     };
   },
   computed: {
@@ -370,6 +378,37 @@ export default {
         },
       });
     },
+
+    // 终止发布版本
+    handleCodeccCancelReleases() {
+      this.$bkInfo({
+        title: `${this.$t('确认终止发布版本')}${this.versionData.source_version_name} ？`,
+        width: 540,
+        maskClose: true,
+        confirmLoading: true,
+        confirmFn: async () => {
+          try {
+            await this.$store.dispatch('plugin/codeccCancelReleases', {
+              pdId: this.pdId,
+              pluginId: this.pluginId,
+              releaseId: this.versionData.id,
+            });
+            this.$bkMessage({
+              theme: 'success',
+              message: this.$t('已终止当前的发布版本'),
+            });
+            this.$router.go(-1);
+          } catch (e) {
+            this.$bkMessage({
+              theme: 'error',
+              message: e.detail || e.message || this.$t('接口异常'),
+            });
+          } finally {
+            return true;
+          }
+        },
+      });
+    },
   },
 };
 </script>

From f160e6336557facd816457cfea4480a7d9cfc05d Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Thu, 29 Aug 2024 10:58:39 +0800
Subject: [PATCH 14/17] =?UTF-8?q?feat=EF=BC=9A=E5=B5=8C=E5=85=A5=E5=8F=91?=
 =?UTF-8?q?=E5=B8=83=E7=BB=93=E6=9E=9C=20#=20Reviewed,=20transaction=20id:?=
 =?UTF-8?q?=2016792?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../new-version/release-result.vue            | 56 +++++++++++++++++++
 .../version-manager/version-details/index.vue |  4 ++
 2 files changed, 60 insertions(+)
 create mode 100644 webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-result.vue

diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-result.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-result.vue
new file mode 100644
index 0000000000..56887e6823
--- /dev/null
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-result.vue
@@ -0,0 +1,56 @@
+<template>
+  <section class="iframe-container" :style="{ height: iframeHeight + 'px' }">
+    <iframe
+      id="iframe-embed"
+      :src="url"
+      scrolling="no"
+      frameborder="0"
+    />
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: 'ReleaseResult',
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      iframeHeight: 100,
+    };
+  },
+  created() {
+    window.addEventListener('message', this.messageEvent);
+  },
+  beforeDestroy() {
+    window.removeEventListener('message', this.messageEvent);
+  },
+  methods: {
+    messageEvent(event) {
+      if (!event.data || event.data?.type !== 'gray-result-height') return;
+      this.iframeHeight = event.data.data;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.iframe-container {
+  margin-top: 16px;
+  width: 100%;
+  height: 100%;
+  iframe#iframe-embed {
+    width: 100%;
+    height: 100%;
+    /* resize seems to inherit in at least Firefox */
+    -webkit-resize: none;
+    -moz-resize: none;
+    resize: none;
+  }
+}
+</style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index dc7b51a8a1..ff9ff1586b 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -81,6 +81,8 @@
         :data="versionData"
         step="release"
       />
+      <!-- 发布结果 -->
+      <release-result :url="versionData.report_url" />
       <section
         class="version-tools"
         v-if="!isFullReleaseSuccessful"
@@ -162,6 +164,7 @@ import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 import releaseContent from '../create-version/new-version/release-content.vue';
 import visibleRange from '../create-version/new-version/visible-range.vue';
 import releaseStrategy from '../create-version/new-version/release-strategy.vue';
+import releaseResult from '../create-version/new-version/release-result.vue';
 import { CODECC_RELEASE_STATUS } from '@/common/constants';
 
 export default {
@@ -171,6 +174,7 @@ export default {
     releaseContent,
     visibleRange,
     releaseStrategy,
+    releaseResult,
   },
   mixins: [pluginBaseMixin],
   data() {

From 4041bea1c0dcb643f28382e37d59f2709e32041a Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Wed, 11 Sep 2024 17:08:28 +0800
Subject: [PATCH 15/17] =?UTF-8?q?fix:=20=E5=8F=AF=E8=A7=81=E8=8C=83?=
 =?UTF-8?q?=E5=9B=B4/=E7=81=B0=E5=BA=A6=E7=9A=84=E7=BB=84=E7=BB=87?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20tof=5Fid=20=E5=AD=97=E6=AE=B5=20&=20?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/user-selector/index.scss   | 10 ++++--
 .../src/components/user-selector/index.vue    | 32 +++++++++++++++++--
 webfe/package_vue/src/language/lang/en.js     |  1 +
 webfe/package_vue/src/language/lang/zh.js     |  1 +
 .../plugin/base-config/visible-range.vue      |  2 +-
 .../new-version/release-content.vue           | 11 +++----
 .../new-version/release-strategy.vue          | 11 ++++++-
 .../version-manager/version-details/index.vue |  2 +-
 8 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/webfe/package_vue/src/components/user-selector/index.scss b/webfe/package_vue/src/components/user-selector/index.scss
index 8ef621b922..f6a109b709 100644
--- a/webfe/package_vue/src/components/user-selector/index.scss
+++ b/webfe/package_vue/src/components/user-selector/index.scss
@@ -126,13 +126,19 @@
                             white-space: nowrap;
                             vertical-align: top;
                         }
-                        .delete-depart-icon {
+                        .delete-depart-icon,
+                        .disabled-del {
                             display: block;
                             width: 16px;
-                            margin: 4px 6px 0 0;
+                            margin-right: 6px;
                             cursor: pointer;
                             float: right;
                         }
+                        .disabled-del {
+                            cursor: not-allowed;
+                            color: #e3e3e3;
+                            transform: rotate(45deg);
+                        }
                     }
                     .folder-icon {
                         position: relative;
diff --git a/webfe/package_vue/src/components/user-selector/index.vue b/webfe/package_vue/src/components/user-selector/index.vue
index c727c71c3b..5674978933 100644
--- a/webfe/package_vue/src/components/user-selector/index.vue
+++ b/webfe/package_vue/src/components/user-selector/index.vue
@@ -89,14 +89,32 @@
                 <span class="user-count">0</span>
               </template>
             </div>
-            <bk-button theme="primary" text :disabled="!isShowSelectedText" @click="handleDeleteAll"> {{ $t('清空') }} </bk-button>
+            <!-- 是否允许清空 -->
+            <bk-button
+              theme="primary"
+              text
+              :disabled="clearable || !isShowSelectedText"
+              @click="handleDeleteAll">
+              {{ $t('清空') }}
+            </bk-button>
           </div>
           <div class="content">
             <div class="organization-content" v-if="isDepartSelectedEmpty">
               <div class="organization-item" v-for="item in hasSelectedDepartments" :key="item.id">
                 <img class="folder-icon" src="./images/file-close.svg" alt="">
                 <span class="organization-name" :title="item.name">{{ item.name }}</span>
-                <img class="delete-depart-icon" src="./images/delete-fill.svg" alt="" @click="handleDelete(item, 'organization')">
+                <!-- 禁用删除icon -->
+                <i
+                  v-if="organizeDisableIconFn(item.id)"
+                  class="paasng-icon paasng-plus-circle-shape disabled-del"
+                  v-bk-tooltips="$t('扩大灰度范围不允许删除已经灰度过的组织')"
+                />
+                <img
+                  v-else
+                  class="delete-depart-icon"
+                  src="./images/delete-fill.svg"
+                  @click="handleDelete(item, 'organization')"
+                />
               </div>
             </div>
             <div class="user-content" v-if="isUserSelectedEmpty">
@@ -200,6 +218,14 @@ export default {
     departmentsFn: {
       type: Function,
     },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    organizeDisableIconFn: {
+      type: Function,
+      default: () => false,
+    },
   },
   data() {
     return {
@@ -709,6 +735,8 @@ export default {
           name: item.name,
           id: item.id,
           type: 'department',
+          // 兼容插件
+          ...(this.departmentsType === 'tc' && { tof_id: item.extras?.code || '' }),
         });
       });
       if (!this.customClose) {
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index cbdf8e0a7c..df6f20238d 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2806,4 +2806,5 @@ export default {
   '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': 'Please enter Blue Shield Project IDs, separate multiple IDs with English semicolons, up to 10 IDs',
   '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': 'Gray release needs to be approved by the <em>tool administrator</em>; if a gray organization scope is selected, it also needs to be approved by the <em>team leader of the tool publisher</em>.',
   已终止当前的发布版本: 'The current release version has been terminated',
+  扩大灰度范围不允许删除已经灰度过的组织: 'Expanding the gray range does not allow deleting organizations that have already been grayed out',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 2b6a8a69a6..52b552c5fa 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2943,4 +2943,5 @@ export default {
   '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID',
   '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。',
   已终止当前的发布版本: '已终止当前的发布版本',
+  扩大灰度范围不允许删除已经灰度过的组织: '扩大灰度范围不允许删除已经灰度过的组织',
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
index 94ea482105..8c98d3f9b5 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/base-config/visible-range.vue
@@ -2,7 +2,7 @@
   <div class="visible-range">
     <paas-plugin-title :tips="$t('仅可见范围内的组织、用户可在研发商店查看并使用该插件')" />
     <paas-content-loader
-      class="app-container middle"
+      class="app-container"
       :is-loading="isContentLoading"
       placeholder="visible-range-loading"
       :is-transform="false"
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
index 457c6ca671..5ae102722d 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
@@ -129,6 +129,7 @@
 <script>
 import card from '@/components/card/card.vue';
 import viewMode from './view-mode.vue';
+import pluginBaseMixin from '@/mixins/plugin-base-mixin';
 
 export default {
   name: 'ReleaseContent',
@@ -136,6 +137,7 @@ export default {
     card,
     viewMode,
   },
+  mixins: [pluginBaseMixin],
   props: {
     mode: {
       type: String,
@@ -298,13 +300,8 @@ export default {
     toTestDetails() {
       const url = this.isEdit ? this.curVersionData.url : this.versionInfo.url;
       const id = url.split('=')[1];
-      this.$router.push({
-        name: 'pluginVersionRelease',
-        query: {
-          release_id: id,
-          type: 'test',
-        },
-      });
+      const newTabUrl = `${location.origin}/plugin-center/plugin/${this.pdId}/${this.pluginId}/version-release?release_id=${id}&type=test`;
+      window.open(newTabUrl, '_blank');
     },
   },
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index 116c9b9f68..d32242a8db 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -148,6 +148,8 @@
       :custom-close="true"
       :range="'departments'"
       :departments-fn="handleDepartments"
+      :clearable="isDetailStep"
+      :organize-disable-icon-fn="handleDisableIconFn"
       departments-type="tc"
       @sumbit="handleSubmit"
     />
@@ -198,6 +200,7 @@ export default {
       isShow: false,
       apiHost: window.BK_COMPONENT_API_URL,
       departments: [],
+      initDepartments: [],
       releaseStrategyMap: [
         { value: 'gray', name: this.$t('先灰度后全量发布') },
         { value: 'full', name: this.$t('直接全量发布') },
@@ -246,6 +249,7 @@ export default {
         if (this.isDetailStep) {
           this.releaseStrategy = cloneDeep(newValue?.latest_release_strategy || {});
           this.departments = newValue.latest_release_strategy?.organization || [];
+          this.initDepartments = cloneDeep(this.departments);
           if (this.departments.length) {
             this.requestAllOrganization(this.departments);
           }
@@ -307,9 +311,9 @@ export default {
       this.isShow = true;
     },
     async handleSubmit(payload) {
+      await this.requestAllOrganization(payload);
       this.releaseStrategy.organization = payload;
       this.departments = payload;
-      await this.requestAllOrganization(payload);
       this.isShow = false;
     },
     // 请求组织的层级结构
@@ -357,6 +361,11 @@ export default {
         this.releaseStrategy.bkci_project.push(input);
       }
     },
+    // 是否允许删除已勾选的组织
+    handleDisableIconFn(id) {
+      if (!this.isDetailStep) return false;
+      return this.initDepartments.findIndex(v => v.id === id) !== -1;
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index ff9ff1586b..61f2233836 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -137,7 +137,7 @@
               :loading="isApplyLoading"
               @click="handleSubmit"
             >
-              {{ $t('申请灰度发布') }}
+              {{ $t('申请扩大灰度范围') }}
             </bk-button>
             <bk-button
               :theme="'default'"

From 250e743db7c24f72ce89655c229c7f22c201d58f Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Wed, 11 Sep 2024 18:38:35 +0800
Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=E6=96=87=E6=A1=88=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20&=20=E7=89=88=E6=9C=AC=E5=8F=91=E5=B8=83-=E6=96=B0?=
 =?UTF-8?q?=E5=BB=BA=E7=89=88=E6=9C=AC=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E6=9C=89=E4=BB=BB=E5=8A=A1=E6=AD=A3=E5=9C=A8=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20#=20Reviewed,=20transaction=20id:=2018158?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js     |  5 +++-
 webfe/package_vue/src/language/lang/zh.js     |  5 +++-
 .../new-version/release-content.vue           | 12 +++++-----
 .../new-version/release-strategy.vue          |  7 ++++--
 .../plugin/version-manager/index.vue          | 23 +++++++++++++++++--
 .../version-manager/version-details/index.vue | 13 ++++++++---
 6 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index df6f20238d..8a92635f45 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2798,7 +2798,7 @@ export default {
   申请灰度发布: 'Apply for Gray Release',
   扩大灰度范围: 'Expand Gray Release Scope',
   申请全量发布: 'Apply for Full Release',
-  重新申请: 'Reapply',
+  申请扩大灰度范围: 'Apply to expand the gray range',
   已测试版本: 'Tested Version',
   最小范围可以选择中心: 'Minimum Scope Can Select Center',
   '灰度发布审批中，请耐心等待': 'Gray release approval in progress, please wait patiently',
@@ -2807,4 +2807,7 @@ export default {
   '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': 'Gray release needs to be approved by the <em>tool administrator</em>; if a gray organization scope is selected, it also needs to be approved by the <em>team leader of the tool publisher</em>.',
   已终止当前的发布版本: 'The current release version has been terminated',
   扩大灰度范围不允许删除已经灰度过的组织: 'Expanding the gray range does not allow deleting organizations that have already been grayed out',
+  测试号: 'Test number',
+  已终止: 'Terminated',
+  '主版本号、次版本号、修正版本号': 'Major version number, minor version number, patch version number',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 52b552c5fa..e3dda73449 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2935,7 +2935,7 @@ export default {
   申请灰度发布: '申请灰度发布',
   扩大灰度范围: '扩大灰度范围',
   申请全量发布: '申请全量发布',
-  重新申请: '重新申请',
+  申请扩大灰度范围: '申请扩大灰度范围',
   已测试版本: '已测试版本',
   最小范围可以选择中心: '最小范围可以选择中心',
   '灰度发布审批中，请耐心等待': '灰度发布审批中，请耐心等待',
@@ -2944,4 +2944,7 @@ export default {
   '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。',
   已终止当前的发布版本: '已终止当前的发布版本',
   扩大灰度范围不允许删除已经灰度过的组织: '扩大灰度范围不允许删除已经灰度过的组织',
+  测试号: '测试号',
+  已终止: '已终止',
+  '主版本号、次版本号、修正版本号': '主版本号、次版本号、修正版本号',
 };
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
index 5ae102722d..f3338f2b14 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-content.vue
@@ -184,14 +184,14 @@ export default {
         version: [
           {
             required: true,
-            message: '必填项',
+            message: this.$t('必填项'),
             trigger: 'blur',
           },
         ],
         comment: [
           {
             required: true,
-            message: '必填项',
+            message: this.$t('必填项'),
             trigger: 'blur',
           },
         ],
@@ -220,7 +220,7 @@ export default {
       deep: true,
     },
     'releaseContent.version'(newVal) {
-      this.releaseContent.versionDisplay = `${newVal} (主版本号、次版本号、修正版本号)`;
+      this.releaseContent.versionDisplay = `${newVal} (${this.$t('主版本号、次版本号、修正版本号')})`;
     },
     'releaseContent.source_versions'() {
       this.releaseContent.comment = this.curVersionData.message;
@@ -259,16 +259,16 @@ export default {
         'self-fill': '',
       };
       this.releaseContent.version = versionMapping[data.version_no] || '';
-      // 重新申请默认值
+      // 重新发布默认值
       if (this.versionId) {
         this.setVersionDefaultValue(data);
       }
     },
-    // 重新申请设置默认值
+    // 重新发布设置默认值
     setVersionDefaultValue() {
       const { source_version_name, semver_type, comment } = this.versionData;
       const version = this.versionTypes.find(v => v.key === semver_type).value;
-      const versionDisplay = `${version} (主版本号、次版本号、修正版本号)`;
+      const versionDisplay = `${version} (${this.$t('主版本号、次版本号、修正版本号')})`;
       this.releaseContent = {
         ...this.releaseContent,
         source_versions: source_version_name,
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index d32242a8db..8a6d49dece 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -19,7 +19,7 @@
           :error-display-type="'normal'"
           :rules="rules.strategy"
         >
-          <bk-radio-group v-model="releaseStrategy.strategy">
+          <bk-radio-group v-model="releaseStrategy.strategy" @change="handleChange">
             <bk-radio
               v-for="item in releaseStrategyMap"
               :value="item.value"
@@ -211,7 +211,7 @@ export default {
         strategy: [
           {
             required: true,
-            message: '必填项',
+            message: this.$t('必填项'),
             trigger: 'blur',
           },
         ],
@@ -366,6 +366,9 @@ export default {
       if (!this.isDetailStep) return false;
       return this.initDepartments.findIndex(v => v.id === id) !== -1;
     },
+    handleChange(value) {
+      this.$emit('strategy-change', value);
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index 14a8781499..faf4d9b728 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -508,6 +508,7 @@ export default {
         this.curVersionType = this.$route.query.type || 'test';
       }
       this.getVersionList();
+      this.getReleasedVersion();
       if (this.isCodecc) {
         this.getRollbackVersion();
       }
@@ -580,6 +581,25 @@ export default {
       return statusParams;
     },
 
+    // 获取指定状态版本，判断是否有版本正在灰度或者发布中
+    async getReleasedVersion() {
+      if (!this.isOfficialVersion) return;
+      try {
+        const res = await this.$store.dispatch('plugin/getVersionsManagerList', {
+          data: {
+            pdId: this.pdId,
+            pluginId: this.pluginId,
+          },
+          pageParams: { type: 'prod' },
+          statusParams: 'status=pending&status=initial',
+        });
+        // 当前是否已有任务进行中
+        this.curIsPending = !!res.results.length;
+      } catch (e) {
+        console.error(e);
+      }
+    },
+
     // 获取版本列表
     async getVersionList(page = 1) {
       this.isTableLoading = true;
@@ -597,8 +617,6 @@ export default {
         });
         this.versionList = res.results;
         this.pagination.count = res.count;
-        // 当前是否已有任务进行中
-        this.curIsPending = this.versionList.find(item => item.status === 'pending');
         this.updateTableEmptyConfig();
         this.tableEmptyConf.isAbnormal = false;
       } catch (e) {
@@ -933,6 +951,7 @@ export default {
               message: this.$t('已终止当前的发布版本'),
             });
             this.getVersionList();
+            this.getReleasedVersion();
           } catch (e) {
             this.$bkMessage({
               theme: 'error',
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index 61f2233836..8f53aad114 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -80,6 +80,7 @@
         :mode="releaseStrategyMode"
         :data="versionData"
         step="release"
+        @strategy-change="handleStrategyChange"
       />
       <!-- 发布结果 -->
       <release-result :url="versionData.report_url" />
@@ -98,7 +99,7 @@
             class="mr8"
             @click="handleReapply"
           >
-            {{ $t('重新申请') }}
+            {{ $t('重新发布') }}
           </bk-button>
           <!-- 审批中 -->
           <bk-button
@@ -137,7 +138,7 @@
               :loading="isApplyLoading"
               @click="handleSubmit"
             >
-              {{ $t('申请扩大灰度范围') }}
+              {{ $t(submitText) }}
             </bk-button>
             <bk-button
               :theme="'default'"
@@ -195,6 +196,7 @@ export default {
         source_versions: [],
       },
       canTerminateStatus: ['gray_approval_in_progress', 'full_approval_in_progress', 'in_gray'],
+      submitText: '申请扩大灰度范围',
     };
   },
   computed: {
@@ -272,6 +274,7 @@ export default {
       // 只允许扩大灰度范围
       this.releaseStrategyMode = 'edit';
       this.isRequestGrayRelease = true;
+      this.submitText = type === 'full' ? '申请全量发布' : '申请扩大灰度范围';
       if (type === 'full') {
         // 全量
         this.versionData.latest_release_strategy.strategy = 'full';
@@ -368,7 +371,7 @@ export default {
       }
     },
 
-    // 重新申请
+    // 重新发布
     handleReapply() {
       this.$router.push({
         name: 'pluginVersionEditor',
@@ -413,6 +416,10 @@ export default {
         },
       });
     },
+
+    handleStrategyChange(type) {
+      this.submitText = type === 'full' ? '申请全量发布' : '申请扩大灰度范围';
+    },
   },
 };
 </script>

From 58be94bfc5e91042e8f6030c5766d635aafebb31 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Thu, 12 Sep 2024 12:21:47 +0800
Subject: [PATCH 17/17] =?UTF-8?q?fix:=20=E7=81=B0=E5=BA=A6=E5=8F=91?=
 =?UTF-8?q?=E5=B8=83-=E5=B7=B2=E7=81=B0=E5=BA=A6=E7=9A=84=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AEid=E4=B8=8D=E8=83=BD=E9=80=9A=E8=BF=87backspace?=
 =?UTF-8?q?=E9=94=AE=E5=88=A0=E9=99=A4=20&=20=E6=96=87=E6=A1=88=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20#=20Reviewed,=20transaction=20id:=2018240?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js       |  2 +-
 webfe/package_vue/src/language/lang/zh.js       |  2 +-
 .../create-version/new-version/index.vue        |  5 ++++-
 .../new-version/release-strategy.vue            | 17 ++++++++++++++++-
 .../plugin/version-manager/index.vue            |  2 +-
 .../version-manager/version-details/index.vue   |  5 ++++-
 6 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 8a92635f45..1e39872976 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2804,7 +2804,7 @@ export default {
   '灰度发布审批中，请耐心等待': 'Gray release approval in progress, please wait patiently',
   '审批未通过，请修改发布信息后重新申请': 'Approval not passed, please modify the release information and reapply',
   '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': 'Please enter Blue Shield Project IDs, separate multiple IDs with English semicolons, up to 10 IDs',
-  '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': 'Gray release needs to be approved by the <em>tool administrator</em>; if a gray organization scope is selected, it also needs to be approved by the <em>team leader of the tool publisher</em>.',
+  '灰度发布需由<em>工具管理员</em>进行审批；<span>若选择了灰度组织范围，还需要由<em>工具发布者的直属Leader</em>同时进行审批。</span>': 'Gray release requires approval from the <em>tool administrator</em>; <span>if a gray organization range is selected, approval from the <em>tool publishers immediate leader</em> is also required.</span>',
   已终止当前的发布版本: 'The current release version has been terminated',
   扩大灰度范围不允许删除已经灰度过的组织: 'Expanding the gray range does not allow deleting organizations that have already been grayed out',
   测试号: 'Test number',
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index e3dda73449..26001524cc 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2941,7 +2941,7 @@ export default {
   '灰度发布审批中，请耐心等待': '灰度发布审批中，请耐心等待',
   '审批未通过，请修改发布信息后重新申请': '审批未通过，请修改发布信息后重新申请',
   '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID': '请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID',
-  '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。': '灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。',
+  '灰度发布需由<em>工具管理员</em>进行审批；<span>若选择了灰度组织范围，还需要由<em>工具发布者的直属Leader</em>同时进行审批。</span>': '灰度发布需由<em>工具管理员</em>进行审批；<span>若选择了灰度组织范围，还需要由<em>工具发布者的直属Leader</em>同时进行审批。</span>',
   已终止当前的发布版本: '已终止当前的发布版本',
   扩大灰度范围不允许删除已经灰度过的组织: '扩大灰度范围不允许删除已经灰度过的组织',
   测试号: '测试号',
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
index 2547ce7d83..f802603920 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/index.vue
@@ -73,7 +73,7 @@ export default {
   },
   computed: {
     releaseTips() {
-      return this.$t('灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。');
+      return this.$t('灰度发布需由<em>工具管理员</em>进行审批；<span>若选择了灰度组织范围，还需要由<em>工具发布者的直属Leader</em>同时进行审批。</span>');
     },
   },
   created() {
@@ -193,6 +193,9 @@ export default {
     /deep/ em {
       font-weight: 700;
     }
+    /deep/ span {
+      color: #ea3636;
+    }
   }
 }
 </style>
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
index 8a6d49dece..ba8bdfff5f 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/create-version/new-version/release-strategy.vue
@@ -45,6 +45,7 @@
             >
               <bk-form-item :label="$t('蓝盾项目 ID')">
                 <bk-tag-input
+                  ref="tagInputRef"
                   v-model="releaseStrategy.bkci_project"
                   :placeholder="$t('请输入蓝盾项目 ID，多个 ID 以英文分号分隔，最多可输入 10 个 ID')"
                   :has-delete-icon="true"
@@ -52,8 +53,10 @@
                   :paste-fn="customCopyRules"
                   :clearable="!isDetailStep"
                   :tag-tpl="renderMemberTag"
-                  @blur="handleBlur"
                   ext-cls="projec-id-tag-cls"
+                  @focus="handleFocus"
+                  @blur="handleBlur"
+                  @keydown.capture.native="handleKeyDown"
                 ></bk-tag-input>
               </bk-form-item>
               <bk-form-item :label="$t('组织')">
@@ -207,6 +210,7 @@ export default {
       ],
       organizationLevel: [],
       disableDeletionMapping: {},
+      focusLastTag: '',
       rules: {
         strategy: [
           {
@@ -356,6 +360,17 @@ export default {
         h('span', { class: ['text'], attrs: { tabIndex: 0 } }, node.id),
       ]);
     },
+    handleKeyDown(event) {
+      // 已经灰度的项目id不能通过 backspace 键删除
+      if (event.key === 'Backspace' && this.disableDeletionMapping[this.focusLastTag]) {
+        this.$refs.tagInputRef.isCanRemoveTag = false;
+      }
+    },
+    handleFocus(values) {
+      if (values.length) {
+        this.focusLastTag = values[values.length - 1];
+      }
+    },
     handleBlur(input) {
       if (input !== '') {
         this.releaseStrategy.bkci_project.push(input);
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
index faf4d9b728..c5f611c55d 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/index.vue
@@ -470,7 +470,7 @@ export default {
     // Codecc 空状态
     isCodeccEmpty() {
       if (this.filterStatus.length) return false;
-      if (!this.versionList.length && this.curPluginInfo.has_test_version && this.isOfficialVersion) return true;
+      if (!this.versionList.length && this.isCodecc) return true;
       return false;
     },
     isCodecc() {
diff --git a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
index 8f53aad114..dd1ffd4080 100644
--- a/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
+++ b/webfe/package_vue/src/views/plugin-center/plugin/version-manager/version-details/index.vue
@@ -207,7 +207,7 @@ export default {
       return this.$route.query.versionId;
     },
     releaseTips() {
-      return this.$t('灰度发布需由<em>工具管理员</em>进行审批；若选择了灰度组织范围，还需要由<em>工具发布者的组长</em>同时进行审批。');
+      return this.$t('灰度发布需由<em>工具管理员</em>进行审批；<span>若选择了灰度组织范围，还需要由<em>工具发布者的直属Leader</em>同时进行审批。</span>');
     },
     // 审批失败要用 release 的 status 来判断
     releaseStatus() {
@@ -454,6 +454,9 @@ export default {
     /deep/ em {
       font-weight: 700;
     }
+    /deep/ span {
+      color: #ea3636;
+    }
   }
   .mb16 {
     margin-bottom: 16px;