From 9dbe95ec038aabaa1fbffd5640fb16e480bb39c6 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 10 Jun 2022 15:38:25 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=83=8C=E6=99=AF=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=A2=9C=E8=89=B2=E5=9B=BE=E7=89=87=E5=90=8C=E6=97=B6?= =?UTF-8?q?=E9=80=89=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 18 ++++++---- .../components/Editor/ComponentWrapper.vue | 18 ++++++---- .../canvas/custom-component/component-list.js | 10 +++--- frontend/src/components/canvas/utils/utils.js | 6 ++++ frontend/src/views/background/index.vue | 36 +++++++++---------- 5 files changed, 53 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index 867d64dd3e..b36271c2ca 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -552,16 +552,22 @@ export default { mainSlotStyleInner() { const style = {} if (this.element.commonBackground) { + let colorRGBA = '' + if (this.element.commonBackground.backgroundColorSelect) { + colorRGBA = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha) + } style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px' style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px' if (this.element.commonBackground.enable) { - if (this.element.commonBackground.backgroundType === 'innerImage' && this.element.commonBackground.innerImage) { - style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat` - } else if (this.element.commonBackground.backgroundType === 'outerImage' && this.element.commonBackground.outerImage) { - style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat` - } else if (this.element.commonBackground.backgroundType === 'color') { - style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha) + if (this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') { + style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat ${colorRGBA}` + } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') { + style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}` + } else { + style['background-color'] = colorRGBA } + } else { + style['background-color'] = colorRGBA } } return style diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index b0b45dd7a9..112888840b 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -125,18 +125,24 @@ export default { if (this.config.commonBackground) { style['padding'] = (this.config.commonBackground.innerPadding || 0) + 'px' style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px' + let colorRGBA = '' + if (this.config.commonBackground.backgroundColorSelect) { + colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha) + } if (this.config.commonBackground.enable) { - if (this.config.commonBackground.backgroundType === 'innerImage' && this.config.commonBackground.innerImage) { + if (this.config.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') { let innerImage = this.config.commonBackground.innerImage if (this.screenShot) { innerImage = innerImage.replace('svg', 'png') } - style['background'] = `url(${innerImage}) no-repeat` - } else if (this.config.commonBackground.backgroundType === 'outerImage' && this.config.commonBackground.outerImage) { - style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat` - } else if (this.config.commonBackground.backgroundType === 'color') { - style['background-color'] = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha) + style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}` + } else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') { + style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}` + } else { + style['background-color'] = colorRGBA } + } else { + style['background-color'] = colorRGBA } style['overflow'] = 'hidden' } diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index ca788f5547..edc6ec7dda 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -19,9 +19,10 @@ export const BASE_MOBILE_STYLE = { // 组件仪表板样式 export const COMMON_BACKGROUND = { enable: true, - backgroundType: 'color', + backgroundColorSelect: false, + backgroundType: 'innerImage', color: '#FFFFFF', - innerImage: null, + innerImage: 'board/blue_1.svg', outerImage: null, alpha: 100, borderRadius: 5, @@ -31,9 +32,10 @@ export const COMMON_BACKGROUND = { // 空组件仪表板样式 export const COMMON_BACKGROUND_NONE = { enable: false, - backgroundType: 'color', + backgroundColorSelect: false, + backgroundType: 'innerImage', color: '#FFFFFF', - innerImage: null, + innerImage: 'board/blue_1.svg', outerImage: null, alpha: 100, borderRadius: 0, diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 5872783eed..fab83fde7d 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -114,6 +114,12 @@ export function panelDataPrepare(componentData, componentStyle, callback) { item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE)) item.hyperlinks = (item.hyperlinks || deepCopy(HYPERLINKS)) item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE) + // Multi choice of colors and pictures + if (item.commonBackground.backgroundType === 'color') { + item.commonBackground['backgroundColorSelect'] = item.commonBackground.enable + item.commonBackground.enable = false + item.commonBackground.backgroundType = 'innerImage' + } }) // 初始化密度为最高密度 componentStyle.aidedDesign.matrixBase = 4 diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue index 251f187ba5..d47352fb5c 100644 --- a/frontend/src/views/background/index.vue +++ b/frontend/src/views/background/index.vue @@ -24,6 +24,21 @@ + + + 颜色 + + + + + + 不透明度： + + + + + + {{ $t('panel.background') }} @@ -34,21 +49,7 @@ - - - - 颜色 - - - - - - 不透明度： - - - - - + {{ $t('panel.photo') }} @@ -169,10 +170,7 @@ export default { this.$emit('backgroundSetClose') }, commitStyle() { - const canvasStyleData = deepCopy(this.canvasStyleData) - canvasStyleData.panel = this.panel - this.$store.commit('setCanvasStyle', canvasStyleData) - this.$store.commit('recordSnapshot', 'commitStyle') + this.$store.commit('recordSnapshot') }, onChangeType() { this.commitStyle()