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
     },