refactor(仪表板): 移动端设计新画布适配

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

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 => {

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"

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 {