diff --git a/frontend/public/board/blue_1.png b/frontend/public/board/blue_1.png new file mode 100644 index 0000000000..a24c10ded1 Binary files /dev/null and b/frontend/public/board/blue_1.png differ diff --git a/frontend/public/board/blue_2.png b/frontend/public/board/blue_2.png new file mode 100644 index 0000000000..dcafc876c0 Binary files /dev/null and b/frontend/public/board/blue_2.png differ diff --git a/frontend/public/board/blue_3.png b/frontend/public/board/blue_3.png new file mode 100644 index 0000000000..631cc35863 Binary files /dev/null and b/frontend/public/board/blue_3.png differ diff --git a/frontend/public/board/blue_4.png b/frontend/public/board/blue_4.png new file mode 100644 index 0000000000..f97516e9c1 Binary files /dev/null and b/frontend/public/board/blue_4.png differ diff --git a/frontend/public/board/blue_5.png b/frontend/public/board/blue_5.png new file mode 100644 index 0000000000..bef6fb6959 Binary files /dev/null and b/frontend/public/board/blue_5.png differ diff --git a/frontend/public/board/blue_6.png b/frontend/public/board/blue_6.png new file mode 100644 index 0000000000..0e07e75f6e Binary files /dev/null and b/frontend/public/board/blue_6.png differ diff --git a/frontend/public/board/blue_7.png b/frontend/public/board/blue_7.png new file mode 100644 index 0000000000..77e97ff156 Binary files /dev/null and b/frontend/public/board/blue_7.png differ diff --git a/frontend/public/board/blue_8.png b/frontend/public/board/blue_8.png new file mode 100644 index 0000000000..74c579f0f5 Binary files /dev/null and b/frontend/public/board/blue_8.png differ diff --git a/frontend/public/board/blue_9.png b/frontend/public/board/blue_9.png new file mode 100644 index 0000000000..b626249e2a Binary files /dev/null and b/frontend/public/board/blue_9.png differ diff --git a/frontend/public/board/dark_1.png b/frontend/public/board/dark_1.png new file mode 100644 index 0000000000..94df29ad8b Binary files /dev/null and b/frontend/public/board/dark_1.png differ diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 1eb19ae4ac..097fc9410b 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -82,6 +82,10 @@ export default { filters: { type: Array, default: () => [] + }, + screenShot: { + type: Boolean, + default: false } }, data() { @@ -100,7 +104,11 @@ export default { style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px' if (this.config.commonBackground.enable) { if (this.config.commonBackground.backgroundType === 'innerImage') { - style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat` + 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') { style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat` } else if (this.config.commonBackground.backgroundType === 'color') { diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 4e33e47bf4..167d745da7 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -21,6 +21,7 @@ :in-screen="inScreen" :terminal="terminal" :filters="filterMap[item.propValue && item.propValue.viewId]" + :screen-shot="screenShot" /> - + @@ -1025,13 +1025,13 @@ export default { _this.positionBoxInfoArray = positionBox }, 500) } - eventBus.$on('backgroundSetClose', () => { - this.boardSetVisible = false - }) }, created() { }, methods: { + backgroundSetClose() { + this.boardSetVisible = false + }, boardSet(item) { this.$emit('boardSet', item) this.boardSetVisible = true diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue index 4b7ab84803..cd5b016cbf 100644 --- a/frontend/src/views/background/index.vue +++ b/frontend/src/views/background/index.vue @@ -128,19 +128,26 @@ export default { predefineColors: COLOR_PANEL } }, + created() { + this.init() + }, mounted() { - if (this.curComponent && this.curComponent.commonBackground && this.curComponent.commonBackground.outerImage && typeof (this.curComponent.commonBackground.outerImage) === 'string') { - this.fileList.push({ url: this.curComponent.commonBackground.outerImage }) - } - this.backgroundOrigin = deepCopy(this.curComponent.commonBackground) - this.queryBackground() + }, computed: { ...mapState([ - 'curComponent' + 'curComponent', + 'componentData' ]) }, methods: { + init() { + if (this.curComponent && this.curComponent.commonBackground && this.curComponent.commonBackground.outerImage && typeof (this.curComponent.commonBackground.outerImage) === 'string') { + this.fileList.push({ url: this.curComponent.commonBackground.outerImage }) + } + this.backgroundOrigin = deepCopy(this.curComponent.commonBackground) + this.queryBackground() + }, queryBackground() { queryBackground().then(response => { this.BackgroundShowMap = response.data @@ -154,11 +161,12 @@ export default { this.curComponent.commonBackground.outerImage = this.backgroundOrigin.outerImage this.curComponent.commonBackground.alpha = this.backgroundOrigin.alpha this.curComponent.commonBackground.borderRadius = this.backgroundOrigin.borderRadius - eventBus.$emit('backgroundSetClose') + this.curComponent.commonBackground.innerPadding = this.backgroundOrigin.innerPadding + this.$emit('backgroundSetClose') }, save() { this.$store.commit('recordSnapshot') - eventBus.$emit('backgroundSetClose') + this.$emit('backgroundSetClose') }, commitStyle() { const canvasStyleData = deepCopy(this.canvasStyleData)