fix: 上线版本页面响应慢

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs-kv.vue

@@ -24,17 +24,22 @@
           <RightShape class="arrow-icon" />
           <span class="name">{{ group.name === 'singleLine' ? t('单行配置') : t('多行配置') }}</span>
         </div>
-        <div v-if="group.expand" class="config-list">
+        <RecycleScroller
+          v-if="group.expand"
+          class="config-list"
+          :items="group.configs"
+          key-field="id"
+          :item-size="40"
+          v-slot="{ item }">
           <div
-            v-for="config in group.configs"
             v-overflow-title
-            :key="config.id"
-            :class="['config-item', { actived: props.actived && config.id === selected }]"
-            @click="handleSelectItem(config.id)">
-            <i v-if="config.diffType" :class="['status-icon', config.diffType]"></i>
-            {{ config.key }}
+            :key="item.id"
+            :class="['config-item', { actived: props.actived && item.id === selected }]"
+            @click="handleSelectItem(item.id)">
+            <i v-if="item.diffType" :class="['status-icon', item.diffType]"></i>
+            {{ item.key }}
           </div>
-        </div>
+        </RecycleScroller>
       </div>
       <tableEmpty
         v-if="groupedConfigListOnShow.length === 0"
@@ -47,7 +52,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, watch, onMounted } from 'vue';
+  import { ref, computed, watch, onMounted, nextTick } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
   import { Search, RightShape } from 'bkui-vue/lib/icon';
@@ -89,7 +94,7 @@
   const { t } = useI18n();
   const route = useRoute();
 
-  const emits = defineEmits(['selected']);
+  const emits = defineEmits(['selected', 'render']);
 
   const SINGLE_LINE_TYPE = ['string', 'number', 'password', 'secret_key', 'token'];
 
@@ -132,8 +137,9 @@
     },
   );
 
-  onMounted(() => {
-    initData(true);
+  onMounted(async () => {
+    await initData(true);
+    nextTick(() => emits('render', false));
   });
 
   // 初始化对比配置项以及设置默认选中的配置项
@@ -460,4 +466,8 @@
     font-size: 12px;
     color: #63656e;
   }
+
+  .config-list {
+    max-height: 700px;
+  }
 </style>

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue

@@ -26,25 +26,29 @@
           <RightShape class="arrow-icon" />
           <span v-overflow-title class="name">{{ group.name }}</span>
         </div>
-        <div v-if="group.expand" class="config-list">
+        <RecycleScroller
+          v-if="group.expand"
+          class="config-list"
+          :items="group.configs"
+          key-field="id"
+          :item-size="40"
+          v-slot="{ item }">
           <div
-            v-for="config in group.configs"
-            :key="config.id"
-            :class="['config-item', { actived: getItemSelectedStatus(group.id, config) }]"
+            :class="['config-item', { actived: getItemSelectedStatus(group.id, item) }]"
             @click="
               handleSelectItem({
                 pkgId: group.id,
-                id: config.id,
-                version: config.template_revision_id,
-                permission: config.permission,
+                id: item.id,
+                version: item.template_revision_id,
+                permission: item.permission,
               })
             ">
-            <i v-if="config.diffType" :class="['status-icon', config.diffType]"></i>
-            <bk-overflow-title type="tips">
-              {{ config.name }}
-            </bk-overflow-title>
+            <i v-if="item.diffType" :class="['status-icon', item.diffType]"></i>
+            <span v-overflow-title type="tips">
+              {{ item.name }}
+            </span>
           </div>
-        </div>
+        </RecycleScroller>
       </div>
       <tableEmpty
         v-if="groupedConfigListOnShow.length === 0"
@@ -57,7 +61,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, watch, onMounted } from 'vue';
+  import { ref, computed, watch, onMounted, nextTick } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
   import { storeToRefs } from 'pinia';
@@ -144,7 +148,7 @@
     },
   );
 
-  const emits = defineEmits(['selected']);
+  const emits = defineEmits(['selected', 'render']);
 
   const route = useRoute();
   const bkBizId = ref(String(route.params.spaceId));
@@ -205,8 +209,9 @@
     },
   );
 
-  onMounted(() => {
-    initData(true);
+  onMounted(async () => {
+    await initData(true);
+    nextTick(() => emits('render', false));
   });
 
   // 判断版本是否为未命名版本
@@ -754,6 +759,7 @@
     }
     .config-list {
       margin-bottom: 8px;
+      max-height: 600px;
       .config-item {
         position: relative;
         padding: 0 12px 0 32px;

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/index.vue

@@ -9,15 +9,17 @@
         :selected-config="props.selectedConfig"
         :actived="selectedType === 'config'"
         :is-publish="props.isPublish"
-        @selected="handleSelect($event, 'config')" />
+        @selected="handleSelect($event, 'config')"
+        @render="emits('render', $event)" />
       <ConfigsKv
         v-else
         :base-version-id="props.baseVersionId"
         :current-version-id="props.currentVersionId"
         :selected-id="props.selectedKvConfigId"
         :actived="selectedType === 'config'"
         :is-publish="props.isPublish"
-        @selected="handleSelect($event, 'config')" />
+        @selected="handleSelect($event, 'config')"
+        @render="emits('render', $event)" />
     </div>
     <Scripts
       v-if="isFileType"
@@ -51,7 +53,7 @@
     isPublish: boolean;
   }>();
 
-  const emits = defineEmits(['selected']);
+  const emits = defineEmits(['selected', 'render']);
 
   const selectedType = ref('config');
 

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/index.vue

@@ -14,7 +14,8 @@
           :selected-config="props.selectedConfig"
           :selected-kv-config-id="selectedKV"
           :is-publish="props.showPublishBtn"
-          @selected="handleSelectDiffItem" />
+          @selected="handleSelectDiffItem"
+          @render="publishBtnLoading = $event" />
         <div class="diff-content-area">
           <diff :diff="diffDetailData" :id="appId" :selected-kv-config-id="selectedKV" :loading="false">
             <template #leftHead>
@@ -54,7 +55,13 @@
     <template #footer>
       <div class="actions-btns">
         <slot name="footerActions">
-          <bk-button v-if="showPublishBtn" class="publish-btn" theme="primary" @click="emits('publish')">
+          <bk-button
+            v-if="showPublishBtn"
+            :loading="publishBtnLoading"
+            :disabled="publishBtnLoading"
+            class="publish-btn"
+            theme="primary"
+            @click="emits('publish')">
             {{ t('上线版本') }}
           </bk-button>
           <bk-button @click="handleClose">{{ t('关闭') }}</bk-button>
@@ -114,10 +121,12 @@
   const diffDetailData = ref<IDiffDetail>(getDefaultDiffData());
 
   const loading = computed(() => versionListLoading.value);
+  const publishBtnLoading = ref(true);
 
   watch(
     () => props.show,
     async (val) => {
+      publishBtnLoading.value = true;
       if (val) {
         await getVersionList();
         if (props.baseVersionId) {