feat: Codecc 插件灰度、可见范围 (#1592)

webfe/package_vue/src/common/constants.js

@@ -275,3 +275,17 @@ export const CIRCLED_NUMBERS = [
   '①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩',
   '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳',
 ];
+
+/**
+ * Codecc 版本发布状态
+ */
+export const CODECC_RELEASE_STATUS = {
+  gray_approval_in_progress: '灰度发布审批中',
+  in_gray: '灰度中',
+  gray_approval_failed: '灰度审批失败',
+  full_approval_in_progress: '全量发布审批中',
+  fully_released: '已全量发布',
+  full_approval_failed: '全量发布审批失败',
+  rolled_back: '已回滚',
+  interrupted: '已终止',
+};

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('/');
+}

webfe/package_vue/src/components/card/card.vue

@@ -0,0 +1,52 @@
+<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',
+  inheritAttrs: false,
+  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>

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: {

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>

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 {
@@ -77,6 +78,7 @@ export default {
       allowedRouterName: [
         'pluginVersionRelease',
         'pluginVersionEditor',
+        'pluginReleaseDetails',
         'pluginTestReport',
         'marketInfoEdit',
         'moreInfoEdit',
@@ -138,14 +140,27 @@ 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();
       }
 
       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;
+      });
+    },
+
     /**
      * 根据接口来展示对应的导航项
      */
@@ -183,6 +198,7 @@ export default {
       this.allowedRouterName = [
         'pluginVersionRelease',
         'pluginVersionEditor',
+        'pluginReleaseDetails',
         'pluginTestReport',
         'marketInfoEdit',
         'moreInfoEdit',

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">{{ PLUGIN_TEST_VERSION_STATUS[versionData.status] }}</span>
+            <span class="pl5">{{ $t(statusMap[versionData[statusKey]]) }}</span>
           </div>
         </template>
         <a
@@ -41,12 +41,15 @@
           {{ $t('插件文档') }}
         </a>
       </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>
 import { bus } from '@/common/bus';
-import { PLUGIN_TEST_VERSION_STATUS } from '@/common/constants';
 
 export default {
   props: {
@@ -74,13 +77,28 @@ export default {
       type: String,
       default: '',
     },
+    tips: {
+      type: String,
+      default: '',
+    },
+    statusMap: {
+      type: Object,
+    },
+    isCodecc: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       showBackIcon: false,
-      PLUGIN_TEST_VERSION_STATUS,
     };
   },
+  computed: {
+    statusKey() {
+      return this.isCodecc ? 'display_status' : 'status';
+    },
+  },
   watch: {
     $route: {
       handler(value) {
@@ -116,6 +134,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .plugin-top-title {
+  display: flex;
+  justify-content: space-between;
   i {
     transform: translateY(0px);
   }
@@ -138,6 +158,7 @@ export default {
     }
   }
   .title-container {
+    flex: 1;
     .title {
       display: flex;
       align-items: center;
@@ -188,22 +209,43 @@ 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;
       font-size: 20px;
       font-weight: bold;
       cursor: pointer;
     }
+    .tips {
+      margin-left: 16px;
+      font-size: 12px;
+      color: #979BA5;
+    }
   }
 }
 </style>

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;