diff --git a/core/frontend/src/components/canvas/components/editor/Preview.vue b/core/frontend/src/components/canvas/components/editor/Preview.vue index e95a517e29..6669efb492 100644 --- a/core/frontend/src/components/canvas/components/editor/Preview.vue +++ b/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 diff --git a/core/frontend/src/components/canvas/utils/utils.js b/core/frontend/src/components/canvas/utils/utils.js index 60fea8b7f7..79fea5122c 100644 --- a/core/frontend/src/components/canvas/utils/utils.js +++ b/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) } diff --git a/core/frontend/src/store/index.js b/core/frontend/src/store/index.js index 077498ebfe..e16296b2a8 100644 --- a/core/frontend/src/store/index.js +++ b/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) },