fix(仪表板): 修复含有首选项的组件在tab页面中容易显示错位问题#8569

core/frontend/src/components/canvas/components/editor/Preview.vue

@@ -260,7 +260,7 @@ export default {
     showPosition: {
       type: String,
       required: false,
-      default: 'NotProvided'
+      default: 'preview'
     },
     panelInfo: {
       type: Object,
@@ -828,26 +828,21 @@ export default {
       if (this.componentData) {
         const componentData = deepCopy(this.componentData)
         componentData.forEach(component => {
-          if (!this.isMainCanvas() && component.type === 'custom' && component.options?.attrs?.selectFirst && this.format(component.style.width, this.scaleWidth) < 80) {
-            // do continue
-          } else {
-            Object.keys(component.style).forEach(key => {
-              if (this.needToChangeHeight.includes(key)) {
-                component.style[key] = this.format(component.style[key], this.scaleHeight)
+          Object.keys(component.style).forEach(key => {
+            if (this.needToChangeHeight.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleHeight)
+            }
+            if (this.needToChangeWidth.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleWidth)
+            }
+            if (this.needToChangeInnerWidth.includes(key)) {
+              if ((key === 'fontSize' || key === 'activeFontSize') && (this.terminal === 'mobile' || ['custom'].includes(component.type))) {
+                // do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件)
+              } else {
+                component.style[key] = this.formatPoint(component.style[key], this.previewCanvasScale.scalePointWidth)
               }
-              if (this.needToChangeWidth.includes(key)) {
-                component.style[key] = this.format(component.style[key], this.scaleWidth)
-              }
-              if (this.needToChangeInnerWidth.includes(key)) {
-                if ((key === 'fontSize' || key === 'activeFontSize') && (this.terminal === 'mobile' || ['custom'].includes(component.type))) {
-                  // do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件)
-                } else {
-                  component.style[key] = this.formatPoint(component.style[key], this.previewCanvasScale.scalePointWidth)
-                }
-              }
-            })
-          }
-
+            }
+          })
           const maxWidth = this.canvasStyleData.width * this.scaleWidth / 100
           if (component.style['width'] > maxWidth) {
             component.style['width'] = maxWidth

core/frontend/src/components/canvas/utils/utils.js

@@ -179,10 +179,12 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
   })
   // 初始化密度为最高密度
   componentStyle.aidedDesign.matrixBase = 4
-  callback({
+  const result = {
     'componentData': resetID(componentData),
     'componentStyle': componentStyle
-  })
+  }
+  store.state.sourceComponentData = deepCopy(result.componentData)
+  callback(result)
 }
 
 export function resetID(data) {
@@ -307,6 +309,9 @@ export function imgUrlTrans(url) {
 export function getNowCanvasComponentData(canvasId, showPosition) {
   if (showPosition && (showPosition.includes('email-task') || showPosition.includes('multiplexing'))) {
     return store.state.previewComponentData.filter(item => item.canvasId === canvasId)
+  } else if (showPosition === 'preview') {
+    console.log('test===' + JSON.stringify(deepCopy(store.state.sourceComponentData.filter(item => item.canvasId === canvasId))))
+    return deepCopy(store.state.sourceComponentData.filter(item => item.canvasId === canvasId))
   } else {
     return store.state.componentData.filter(item => item.canvasId === canvasId)
   }

core/frontend/src/store/index.js

@@ -154,6 +154,7 @@ const data = {
     },
     previewVisible: false,
     previewComponentData: [],
+    sourceComponentData: [],
     currentCanvasNewId: [],
     lastViewRequestInfo: {},
     multiplexingStyleAdapt: true, // 复用样式跟随主题
@@ -261,6 +262,9 @@ const data = {
     setPreviewComponentData(state, previewComponentData = []) {
       Vue.set(state, 'previewComponentData', previewComponentData)
     },
+    setSourceComponentData(state, sourceComponentData = []) {
+      Vue.set(state, 'sourceComponentData', sourceComponentData)
+    },
     setComponentViewsData(state, componentViewsData = {}) {
       Vue.set(state, 'componentViewsData', componentViewsData)
     },