perf: 优化层级展示, 优化失焦隐藏代码

src/store/modules/chartEditStore/chartEditStore.ts

@@ -843,7 +843,8 @@ export const useChartEditStore = defineStore({
             )
           }
           this.updateComponentList(index, targetItem)
-          this.setTargetSelectChart(undefined)
+          // 锁定添加失焦效果
+          if(status) this.setTargetSelectChart(undefined)
           loadingFinish()
           return
         }
@@ -876,14 +877,10 @@ export const useChartEditStore = defineStore({
             )
           }
           this.updateComponentList(index, targetItem)
-          this.setTargetSelectChart(undefined)
           loadingFinish()
 
-          // 取消选择隐藏
+          // 隐藏添加失焦效果
-          if (status) {
+          if (status) this.setTargetSelectChart(undefined)
-            const chartEditStore = useChartEditStore()
-            chartEditStore.setTargetSelectChart(undefined)
-          }
         }
       } catch (value) {
         loadingError()

src/views/chart/ContentLayers/components/LayersStatus/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="!isGroup">
+  <div class="icon-item-box" v-show="!isGroup">
     <n-icon
       class="go-ml-1 icon-item"
       :class="{ active: status.lock }"
@@ -68,9 +68,13 @@ const lockHandle = (e: MouseEvent) => {
 <style lang="scss" scoped>
 $activeColor: v-bind('themeColor');
 
-.icon-item {
+.icon-item-box {
+  white-space: nowrap;
+
+  .icon-item {
     opacity: 0;
     padding-top: 5px;
+    @extend.go-transition;
     &.active,
     &:hover {
       color: $activeColor;
@@ -78,5 +82,6 @@ $activeColor: v-bind('themeColor');
     &.active {
       opacity: 1 !important;
     }
+  }
 }
 </style>