feat: 优化cmdb模块数据量大时页面打开慢 (#8354)

zc422 · web-flow · commit 7472cfb96676 · 2025-03-07T10:49:20.000+08:00
* feat: 优化cmdb模块数据量大时页面打开慢
--story=122100257

* 代码优化
diff --git a/src/ui/src/service/auth.js b/src/ui/src/service/auth.js
@@ -41,32 +41,15 @@ export const verifyAuth = resources => $http.post('auth/verify', {
 /**
  * 获取免查看鉴权的模型
  */
-export const getViewAuthFreeModels = () => {
-  const allModels = store.getters['objectModelClassify/models']
-  const presetModels = store.getters['objectModelClassify/presetModels']
-
-  // mainLineModel中默认没有id，在此先补充
-  const mainLineModels = store.state.objectMainLineModule.mainLineModels.map(mainItem => ({
-    id: allModels.find(preItem => preItem.bk_obj_id === mainItem.bk_obj_id)?.id,
-    bk_obj_id: mainItem.bk_obj_id,
-    bk_obj_name: mainItem.bk_obj_name
-  }))
-
-  return ([...mainLineModels, ...presetModels]).map(model => ({
-    id: model.id,
-    bk_obj_id: model.bk_obj_id,
-    bk_obj_name: model.bk_obj_name
-  }))
-}
+export const getViewAuthFreeModels = () => store.getters['objectModelClassify/viewAuthFreeModels']
 
 /**
  * 判断一个模型是否为免查看鉴权
  * @param {Object} model 单个模型
  */
 export const isViewAuthFreeModel = (model) => {
-  const authFreeModels = getViewAuthFreeModels()
   const dataKey = model.bk_obj_id ? 'bk_obj_id' : 'id'
-  return authFreeModels.some(item => item[dataKey] === model[dataKey])
+  return store.getters['objectModelClassify/viewAuthFreeModelSet'].has(model[dataKey])
 }
 
 /**
diff --git a/src/ui/src/store/modules/api/object-model-classify.js b/src/ui/src/store/modules/api/object-model-classify.js
@@ -15,24 +15,17 @@ import $http from '@/api'
 import { CONTAINER_OBJECTS, CONTAINER_OBJECT_NAMES } from '@/dictionary/container.js'
 
 const state = {
-  classifications: []
+  classifications: [],
+  models: [],
+  viewAuthFreeModels: [],
+  viewAuthFreeModelSet: new Set()
 }
 
 const getters = {
   classifications: state => state.classifications,
-  models: (state) => {
-    const models = []
-    state.classifications.forEach((classification) => {
-      (classification.bk_objects || []).forEach((model) => {
-        models.push({
-          ...model,
-          bk_classification_name: classification.bk_classification_name,
-          bk_classification_id: classification.bk_classification_id
-        })
-      })
-    })
-    return models
-  },
+  models: state => state.models,
+  viewAuthFreeModels: state => state.viewAuthFreeModels,
+  viewAuthFreeModelSet: state => state.viewAuthFreeModelSet,
   getModelById: (state, getters) => id => getters.models.find(model => model.bk_obj_id === id),
   presetModels: (state, getters) => getters.models.filter(model => model.ispre)
 }
@@ -143,6 +136,44 @@ const actions = {
 const mutations = {
   setClassificationsObjects(state, classifications) {
     state.classifications = classifications
+    this.commit('objectModelClassify/setModels')
+    this.commit('objectModelClassify/setViewAuthFreeModels')
+    this.commit('objectModelClassify/setViewAuthFreeModelSet')
+  },
+  setViewAuthFreeModelSet(state) {
+    state.viewAuthFreeModels.forEach((item)=> {
+      state.viewAuthFreeModelSet.add(item?.bk_obj_id || item?.id)
+    })
+  },
+  setViewAuthFreeModels(state) {
+    const begin = new Date().valueOf()
+    const presetModels = this.getters['objectModelClassify/presetModels']
+    const allModels = state.models
+    // mainLineModel中默认没有id，在此先补充
+    const mainLineModels = this.getters['objectMainLineModule/mainLineModels'].map(mainItem => ({
+      id: allModels.find(preItem => preItem.bk_obj_id === mainItem.bk_obj_id)?.id,
+      bk_obj_id: mainItem.bk_obj_id,
+      bk_obj_name: mainItem.bk_obj_name
+    }))
+
+    state.viewAuthFreeModels = ([...mainLineModels, ...presetModels]).map(model => ({
+      id: model.id,
+      bk_obj_id: model.bk_obj_id,
+      bk_obj_name: model.bk_obj_name
+    }))
+  },
+  setModels(state) {
+    const models = []
+    state.classifications.forEach((classification) => {
+      (classification.bk_objects || []).forEach((model) => {
+        models.push({
+          ...model,
+          bk_classification_name: classification.bk_classification_name,
+          bk_classification_id: classification.bk_classification_id
+        })
+      })
+    })
+    state.models = models
   },
   updateClassify(state, classification) {
     // eslint-disable-next-line max-len
diff --git a/src/ui/src/views/model-manage/children/collapse-group-title.vue b/src/ui/src/views/model-manage/children/collapse-group-title.vue
@@ -20,55 +20,9 @@
     <div class="drag-icon" v-if="dragIcon"></div>
     <bk-icon class="group-collapse-icon" type="down-shape" />
     <p class="group-title-text" v-bk-overflow-tips>{{title}}</p>
-    <bk-dropdown-menu
-      @click.native.stop
-      v-if="dropdownMenu"
-      class="group-dropdown-menu"
-      trigger="click"
-      align="left"
-    >
-      <template #dropdown-trigger>
-        <div class="more-operation-btn">
-          <bk-icon type="more" />
-        </div>
-      </template>
-
-      <template #dropdown-content>
-        <ul class="bk-dropdown-list" v-if="visibleCommands.length">
-          <li v-for="(cmd, cmdIndex) in visibleCommands" :key="cmdIndex">
-            <!-- 带权限的按钮 -->
-            <cmdb-auth
-              v-if="cmd.auth"
-              :auth="cmd.auth"
-              @update-auth="cmd.onUpdateAuth"
-            >
-              <template #default="{ disabled: authDisabled }">
-                <dropdown-option-button
-                  v-bk-tooltips="{
-                    content: cmd.disabledTooltips,
-                    disabled: !cmd.disabled && cmd.disabledTooltips,
-                    placement: 'right'
-                  }"
-                  :disabled="authDisabled || cmd.disabled"
-                  @click="cmd.handler"
-                >
-                  {{ cmd.text }}
-                </dropdown-option-button>
-              </template>
-            </cmdb-auth>
-
-            <!-- 无权限按钮 -->
-            <dropdown-option-button
-              v-else
-              :disabled="cmd.disabled"
-              @click="cmd.handler"
-            >
-              {{ cmd.text }}
-            </dropdown-option-button>
-          </li>
-        </ul>
-      </template>
-    </bk-dropdown-menu>
+    <div class="more-operation-btn" v-if="dropdownMenu" @click.stop="handleClick">
+      <bk-icon type="more" />
+    </div>
     <bk-tag v-if="isNewClassify" theme="success" radius="2px">{{$t('新的')}}</bk-tag>
   </div>
 </template>
@@ -127,7 +81,7 @@
         default: false
       }
     },
-    setup(props) {
+    setup(props, { emit }) {
       const isDropdownVisible = ref(false)
       const commandsRef = toRef(props, 'commands')
       const visibleCommands = computed(() => commandsRef.value.map((cmd) => {
@@ -148,9 +102,13 @@
       })
         .filter(cmd => cmd.visible))
 
+      const handleClick = (event) => {
+        emit('showOperation', event, visibleCommands.value)
+      }
       return {
         visibleCommands,
         isDropdownVisible,
+        handleClick
       }
     },
   })
diff --git a/src/ui/src/views/model-manage/children/model-operation-list.vue b/src/ui/src/views/model-manage/children/model-operation-list.vue
@@ -0,0 +1,95 @@
+<!--
+ * Tencent is pleased to support the open source community by making 蓝鲸 available.
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<script setup>
+  import { reactive, ref, watch } from 'vue'
+  import { $bkPopover } from '@/magicbox/index.js'
+  import DropdownOptionButton from './dropdown-option-button.vue'
+
+  const props = defineProps({
+    commands: {
+        type: Array,
+        default: () => ([])
+      },
+      show: Boolean,
+      target: [Element, null]
+  })
+
+  const emit = defineEmits(['hide'])
+
+  const content = ref(null)
+
+  const operateModelPopover = reactive({
+    instance: null,
+  })
+
+  const showModelOperation = () => {
+    const { target } = props
+    operateModelPopover.instance?.destroy?.()
+    operateModelPopover.instance = $bkPopover(target, {
+      content: content.value,
+      delay: 0,
+      hideOnClick: true,
+      placement: 'bottom',
+      animateFill: false,
+      sticky: true,
+      theme: 'light bound-model-popover',
+      boundary: 'window',
+      trigger: 'manual', // 'manual mouseenter',
+      arrow: true,
+      onHidden: () => {
+        emit('hide')
+      }
+    })
+
+    operateModelPopover.instance.show()
+  }
+
+  watch(()=> props.show, (val)=> {
+    if(val) showModelOperation()
+  })
+</script>
+
+<template>
+  <ul class="bk-dropdown-list" ref="content">
+    <li v-for="(cmd, cmdIndex) in props.commands" :key="cmdIndex">
+      <!-- 带权限的按钮 -->
+      <cmdb-auth
+        v-if="cmd.auth"
+        :auth="cmd.auth"
+        @update-auth="cmd.onUpdateAuth"
+      >
+        <template #default="{ disabled: authDisabled }">
+          <dropdown-option-button
+            v-bk-tooltips="{
+              content: cmd.disabledTooltips,
+              disabled: !cmd.disabled && cmd.disabledTooltips,
+              placement: 'right'
+            }"
+            :disabled="authDisabled || cmd.disabled"
+            @click="cmd.handler"
+          >
+            {{ cmd.text }}
+          </dropdown-option-button>
+        </template>
+      </cmdb-auth>
+      <!-- 无权限按钮 -->
+      <dropdown-option-button
+        v-else
+        :disabled="cmd.disabled"
+        @click="cmd.handler"
+      >
+        {{ cmd.text }}
+      </dropdown-option-button>
+    </li>
+  </ul>
+</template>
diff --git a/src/ui/src/views/model-manage/index.vue b/src/ui/src/views/model-manage/index.vue
@@ -148,9 +148,10 @@
             <collapse-group-title
               :is-new-classify="classification.isNewClassify"
               :dropdown-menu="!isModelSelectable"
-              :collapse=" classificationsCollapseState[classification.id]"
+              :collapse="classificationsCollapseState[classification.id]"
               :title="`${classification.bk_classification_name} ( ${ classification.bk_objects.length} )`"
               @click.native="toggleModelList(classification)"
+              @showOperation="handleShowOperation"
               :commands="groupCommands(classification)"
               v-bk-tooltips="{
                 disabled: !isBuiltinClass(classification),
@@ -171,7 +172,7 @@
               :class="{
                 'is-empty': isGroupEmpty(classification)
               }"
-              v-show="!classificationsCollapseState[classification.id]"
+              v-show="getShow(classification.id)"
               tag="div"
               :sort="false"
               :animation="200"
@@ -422,6 +423,14 @@
       @cancel="doubleCheckCancelImport"
       @done="doneImport">
     </model-import-pane>
+
+    <model-operation-list
+      :show="modelOperationList.show"
+      :commands="modelOperationList.commands"
+      :target="modelOperationList.target"
+      @hide="handleHide">
+    </model-operation-list>
+
   </div>
 </template>
 
@@ -435,6 +444,7 @@
   import Draggable from 'vuedraggable'
   import ModelExportPane from './children/model-import-export/model-export-pane/index.vue'
   import ModelImportPane from './children/model-import-export//model-import-pane/index.vue'
+  import ModelOperationList from './children/model-operation-list.vue'
   import {
     MENU_RESOURCE_INSTANCE,
     MENU_MODEL_DETAILS,
@@ -461,7 +471,8 @@
       CollapseGroupTitle,
       Draggable,
       ModelExportPane,
-      ModelImportPane
+      ModelImportPane,
+      ModelOperationList
     },
     data() {
       return {
@@ -524,7 +535,13 @@
           }
         },
 
-        editAuthResult: {}
+        editAuthResult: {},
+
+        modelOperationList: {
+          show: false,
+          commands: [],
+          target: null
+        }
       }
     },
     computed: {
@@ -700,6 +717,19 @@
         'deleteClassification',
       ]),
       ...mapActions('objectModel', ['createObject', 'updateObject']),
+      getShow(id) {
+        return !this.classificationsCollapseState[id]
+      },
+      handleShowOperation(event, commands) {
+        this.modelOperationList.show = true
+        this.modelOperationList.commands = commands
+        this.modelOperationList.target = event?.target
+      },
+      handleHide() {
+        this.modelOperationList.show = false
+        this.modelOperationList.commands = []
+        this.modelOperationList.target = null
+      },
       inputChange(val) {
         // 在输入过程中如果是中文输入法 不让modelSearchKey变化
         if (this.isComposition) {
