From a637cd783caf03ba4dcbd152696d9e639b978d73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Thu, 29 Sep 2022 09:55:11 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=B1=82=E7=BA=A7?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA,=20=E4=BC=98=E5=8C=96=E5=A4=B1=E7=84=A6?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  | 11 +++-----
 .../components/LayersStatus/index.vue         | 25 +++++++++++--------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 41d2be22..131e8763 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/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) {
-            const chartEditStore = useChartEditStore()
-            chartEditStore.setTargetSelectChart(undefined)
-          }
+          // 隐藏添加失焦效果
+          if (status) this.setTargetSelectChart(undefined)
         }
       } catch (value) {
         loadingError()
diff --git a/src/views/chart/ContentLayers/components/LayersStatus/index.vue b/src/views/chart/ContentLayers/components/LayersStatus/index.vue
index 648d0842..e0cc2547 100644
--- a/src/views/chart/ContentLayers/components/LayersStatus/index.vue
+++ b/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,15 +68,20 @@ const lockHandle = (e: MouseEvent) => {
 <style lang="scss" scoped>
 $activeColor: v-bind('themeColor');
 
-.icon-item {
-  opacity: 0;
-  padding-top: 5px;
-  &.active,
-  &:hover {
-    color: $activeColor;
-  }
-  &.active {
-    opacity: 1 !important;
+.icon-item-box {
+  white-space: nowrap;
+
+  .icon-item {
+    opacity: 0;
+    padding-top: 5px;
+    @extend.go-transition;
+    &.active,
+    &:hover {
+      color: $activeColor;
+    }
+    &.active {
+      opacity: 1 !important;
+    }
   }
 }
 </style>