From 1c64abd5d1cae84fd400ddbe6fd388842573b2b3 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 27 Oct 2022 16:00:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=AE=BE=E8=AE=A1=E6=96=B0=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Editor/ComponentWrapper.vue    |  2 +-
 .../src/components/widget/DeWidget/DeTabs.vue | 19 +++++++++++++------
 .../src/views/panel/edit/ComponentWait.vue    |  2 +-
 frontend/src/views/panel/edit/index.vue       |  1 +
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index cf18c101c3..50407a9c93 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -195,7 +195,7 @@ export default {
       return style
     },
     componentActiveFlag() {
-      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
+      return !this.mobileLayoutStatus && ((this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing'))
     },
     curGap() {
       return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index edb11049dd..b97cd577fd 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -56,7 +56,7 @@
           </el-dropdown>
         </span>
         <de-canvas-tab
-          v-if="item.content && item.content.type==='canvas' && isEdit"
+          v-if="item.content && item.content.type==='canvas' && isEdit && !mobileLayoutStatus"
           :ref="'canvasTabRef-'+item.name"
           :parent-forbid="true"
           :canvas-style-data="canvasStyleData"
@@ -66,9 +66,11 @@
           :class="moveActive ? 'canvas_move_in':''"
           @canvasScroll="canvasScroll"
         />
-        <div style="width: 100%;height:100%">
+        <div
+          v-if="item.content && item.content.type==='canvas' && (!isEdit || mobileLayoutStatus)"
+          style="width: 100%;height:100%"
+        >
           <Preview
-            v-if="item.content && item.content.type==='canvas' && !isEdit"
             :component-data="tabCanvasComponentData(item.name)"
             :canvas-style-data="canvasStyleData"
             :canvas-id="element.id+'-'+item.name"
@@ -330,7 +332,8 @@ export default {
       'mobileLayoutStatus',
       'canvasStyleData',
       'tabMoveInActiveId',
-      'curCanvasScaleMap'
+      'curCanvasScaleMap',
+      'pcComponentData'
     ]),
     fontColor() {
       return this.element && this.element.style && this.element.style.headFontColor || 'none'
@@ -416,8 +419,12 @@ export default {
       bus.$emit('onScroll')
     },
     tabCanvasComponentData(tabName) {
-      const result = getNowCanvasComponentData(this.element.id + '-' + tabName)
-      return result
+      const tabCanvasId = this.element.id + '-' + tabName
+      if (this.mobileLayoutStatus) {
+        return this.pcComponentData.filter(item => item.canvasId === tabCanvasId)
+      } else {
+        return getNowCanvasComponentData(tabCanvasId)
+      }
     },
     setContentThemeStyle() {
       this.element.options.tabList.forEach(tab => {
diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue
index cc7ace5ece..3434a4b07a 100644
--- a/frontend/src/views/panel/edit/ComponentWait.vue
+++ b/frontend/src/views/panel/edit/ComponentWait.vue
@@ -6,7 +6,7 @@
     <el-row class="component-wait-main">
       <el-col
         v-for="(config) in pcComponentData"
-        v-if="!config.mobileSelected"
+        v-if="!config.mobileSelected && config.canvasId === 'canvas-main'"
         :id="'wait' + config.id"
         :key="config.id"
         :span="8"
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index f4c3d7454e..511495400e 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -1511,6 +1511,7 @@ export default {
   color: gray;
   height: 30px;
   width: 100%;
+  text-align: center;
 }
 
 .this_mobile_canvas_bottom {