From 1af415f69bf8da020175345a769a43b9e9f9c4bc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 1 Nov 2022 21:48:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8DTab=E7=BB=84=E4=BB=B6=E7=82=B9=E5=87=BB=E6=B6=88?=
 =?UTF-8?q?=E5=A4=B1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/widget/DeWidget/DeTabs.vue | 57 ++++++++++++++++---
 frontend/src/store/index.js                   |  3 -
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 865f1e8ed8..b4f635e8ae 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -3,6 +3,8 @@
     class="de-tabs-div"
     :class="headClass"
   >
+    <div v-if="maskShow" class="frame-mask edit-mask" >
+    </div>
     <dataease-tabs
       v-model="activeTabName"
       type="card"
@@ -294,6 +296,9 @@ export default {
     }
   },
   computed: {
+    maskShow(){
+      return Boolean(this.$store.state.dragComponentInfo)
+    },
     titleStyle() {
       return {
         fontSize: (this.element.style.fontSize || 16) + 'px'
@@ -345,16 +350,32 @@ export default {
       'pcComponentData'
     ]),
     fontColor() {
-      return this.element && this.element.style && this.element.style.headFontColor || 'none'
+      if (this.element && this.element.style && this.element.style.headFontColor && typeof this.element.style.headFontColor === 'string') {
+        return this.element.style.headFontColor
+      } else {
+        return 'none'
+      }
     },
     activeColor() {
-      return this.element && this.element.style && this.element.style.headFontActiveColor || 'none'
+      if (this.element && this.element.style && this.element.style.headFontActiveColor && typeof this.element.style.headFontActiveColor === 'string') {
+        return this.element.style.headFontActiveColor
+      } else {
+        return 'none'
+      }
     },
     borderColor() {
-      return this.element && this.element.style && this.element.style.headBorderColor || 'none'
+      if (this.element && this.element.style && this.element.style.headBorderColor && typeof this.element.style.headBorderColor === 'string') {
+        return this.element.style.headBorderColor
+      } else {
+        return 'none'
+      }
     },
     borderActiveColor() {
-      return this.element && this.element.style && this.element.style.headBorderActiveColor || 'none'
+      if (this.element && this.element.style && this.element.style.headBorderActiveColor && typeof this.element.style.headBorderActiveColor === 'string') {
+        return this.element.style.headBorderActiveColor
+      } else {
+        return 'none'
+      }
     },
     titleValid() {
       return !!this.textarea && !!this.textarea.trim()
@@ -643,20 +664,40 @@ export default {
 .canvas_move_in {
   border-color: blueviolet;
 }
-::v-deep .el-tabs__nav{
+
+::v-deep .el-tabs__nav {
   width: 100%;
 }
-.tab-head-left ::v-deep .el-tabs__nav{
+
+.tab-head-left ::v-deep .el-tabs__nav {
   width: 100%;
   text-align: left;
 }
-.tab-head-right ::v-deep .el-tabs__nav{
+
+.tab-head-right ::v-deep .el-tabs__nav {
   width: 100%;
   text-align: right;
 }
-.tab-head-center ::v-deep .el-tabs__nav{
+
+.tab-head-center ::v-deep .el-tabs__nav {
   width: 100%;
   text-align: center;
 }
 
+.frame-mask {
+  display: flex;
+  opacity: 0;
+  position:absolute;
+  top:0px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.edit-mask{
+  left: 0px;
+  height: 100%!important;
+  width: 100% !important;
+}
+
 </style>
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 9396868b96..f6a2031416 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -206,9 +206,6 @@ const data = {
       }
       state.styleChangeTimes = 0
       state.curComponent = component
-      if (index !== null && !isNaN(index)) {
-        state.componentData.splice(index, 1, component)
-      }
       state.curComponentIndex = index
     },