From 67385719b62278086c83367e4c28387447daed9f Mon Sep 17 00:00:00 2001 From: fit2cloudrd Date: Fri, 12 Aug 2022 14:16:32 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E8=BE=B9=E6=A1=86=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=20(#2837)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(仪表板): 组件样式边框支持自定义颜色 * feat(仪表板): 组件样式边框支持自定义颜色 Co-authored-by: wangjiahao <1522128093@qq.com> --- .../main/resources/db/migration/V39__1.14.sql | 6 +++- frontend/src/components/DeDrag/index.vue | 30 +++++++++++++++++-- .../components/Editor/ComponentWrapper.vue | 28 ++++++++++++----- .../canvas/custom-component/component-list.js | 2 ++ frontend/src/components/canvas/utils/utils.js | 1 + frontend/src/icons/svg/blue_1.svg | 2 ++ frontend/src/icons/svg/blue_2.svg | 2 ++ frontend/src/icons/svg/blue_3.svg | 2 ++ frontend/src/icons/svg/blue_4.svg | 2 ++ frontend/src/icons/svg/blue_5.svg | 2 ++ frontend/src/icons/svg/blue_6.svg | 2 ++ frontend/src/icons/svg/blue_7.svg | 2 ++ frontend/src/icons/svg/blue_8.svg | 2 ++ frontend/src/icons/svg/blue_9.svg | 2 ++ frontend/src/icons/svg/dark_1.svg | 2 ++ .../src/views/background/BackgroundItem.vue | 16 ++++++++-- frontend/src/views/background/index.vue | 13 ++++---- 17 files changed, 97 insertions(+), 19 deletions(-) create mode 100644 frontend/src/icons/svg/blue_1.svg create mode 100644 frontend/src/icons/svg/blue_2.svg create mode 100644 frontend/src/icons/svg/blue_3.svg create mode 100644 frontend/src/icons/svg/blue_4.svg create mode 100644 frontend/src/icons/svg/blue_5.svg create mode 100644 frontend/src/icons/svg/blue_6.svg create mode 100644 frontend/src/icons/svg/blue_7.svg create mode 100644 frontend/src/icons/svg/blue_8.svg create mode 100644 frontend/src/icons/svg/blue_9.svg create mode 100644 frontend/src/icons/svg/dark_1.svg diff --git a/backend/src/main/resources/db/migration/V39__1.14.sql b/backend/src/main/resources/db/migration/V39__1.14.sql index 1046f11bf4..24dfb50ad4 100644 --- a/backend/src/main/resources/db/migration/V39__1.14.sql +++ b/backend/src/main/resources/db/migration/V39__1.14.sql @@ -6,7 +6,11 @@ UPDATE `sys_menu` set pid = 700, menu_sort = 1 where menu_id = 6 and `name` = 's -ALTER TABLE `sys_theme` +ALTER TABLE `sys_theme` DROP COLUMN `img`, DROP COLUMN `img_id`, ADD COLUMN `senior` TINYINT(1) NULL DEFAULT NULL AFTER `status`; + + +update sys_background_image set classification ='商务'; +update sys_background_image set name ='边框10' where id ='dark_1'; diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index aed6e0e39e..4641aae1be 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -61,6 +61,7 @@
+
@@ -402,6 +403,12 @@ export default { } }, computed: { + svgBg() { + return { + width: this.width + 'px!important', + height: this.height + 'px!important' + } + }, componentCanvasId() { if (this.element.type === 'view') { return 'user-view-' + this.element.propValue.viewId @@ -566,6 +573,16 @@ export default { } return style }, + svgInnerEnable() { + return this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string' + }, + mainSlotSvgInner() { + if (this.svgInnerEnable) { + return this.element.commonBackground.innerImage.replace('board/', '').replace('.svg', '') + } else { + return null + } + }, mainSlotStyleInner() { const style = {} if (this.element.commonBackground) { @@ -576,9 +593,7 @@ export default { 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' && 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') { + 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 @@ -1911,9 +1926,18 @@ export default { } .main-background { + position: relative; overflow: hidden; width: 100%; height: 100%; background-size: 100% 100% !important; } + +.svg-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 61c2bae5bc..d73511e460 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -7,6 +7,7 @@ >
+ diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index b66a1de213..ce155e30b3 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -31,6 +31,7 @@ export const COMMON_BACKGROUND = { enable: false, backgroundType: 'innerImage', innerImage: 'board/blue_1.svg', + innerImageColor: '#1094E5', outerImage: null } @@ -41,6 +42,7 @@ export const COMMON_BACKGROUND_NONE = { backgroundType: 'innerImage', color: '#FFFFFF', innerImage: 'board/blue_1.svg', + innerImageColor: '#1094E5', 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 afff73316d..aa539fd6ed 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -122,6 +122,7 @@ 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) + item.commonBackground['innerImageColor'] = item.commonBackground['innerImageColor'] || '#1094E5' // Multi choice of colors and pictures if (item.commonBackground.backgroundType === 'color') { item.commonBackground['backgroundColorSelect'] = item.commonBackground.enable diff --git a/frontend/src/icons/svg/blue_1.svg b/frontend/src/icons/svg/blue_1.svg new file mode 100644 index 0000000000..dcebec7363 --- /dev/null +++ b/frontend/src/icons/svg/blue_1.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_2.svg b/frontend/src/icons/svg/blue_2.svg new file mode 100644 index 0000000000..7f5c8911fd --- /dev/null +++ b/frontend/src/icons/svg/blue_2.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_3.svg b/frontend/src/icons/svg/blue_3.svg new file mode 100644 index 0000000000..2494c18fef --- /dev/null +++ b/frontend/src/icons/svg/blue_3.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_4.svg b/frontend/src/icons/svg/blue_4.svg new file mode 100644 index 0000000000..8be5a1538b --- /dev/null +++ b/frontend/src/icons/svg/blue_4.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_5.svg b/frontend/src/icons/svg/blue_5.svg new file mode 100644 index 0000000000..accf549a4f --- /dev/null +++ b/frontend/src/icons/svg/blue_5.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_6.svg b/frontend/src/icons/svg/blue_6.svg new file mode 100644 index 0000000000..dda98857ef --- /dev/null +++ b/frontend/src/icons/svg/blue_6.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_7.svg b/frontend/src/icons/svg/blue_7.svg new file mode 100644 index 0000000000..9faddc12c9 --- /dev/null +++ b/frontend/src/icons/svg/blue_7.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_8.svg b/frontend/src/icons/svg/blue_8.svg new file mode 100644 index 0000000000..463773985b --- /dev/null +++ b/frontend/src/icons/svg/blue_8.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/blue_9.svg b/frontend/src/icons/svg/blue_9.svg new file mode 100644 index 0000000000..3dab48290b --- /dev/null +++ b/frontend/src/icons/svg/blue_9.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/icons/svg/dark_1.svg b/frontend/src/icons/svg/dark_1.svg new file mode 100644 index 0000000000..be47b1af17 --- /dev/null +++ b/frontend/src/icons/svg/dark_1.svg @@ -0,0 +1,2 @@ + diff --git a/frontend/src/views/background/BackgroundItem.vue b/frontend/src/views/background/BackgroundItem.vue index 8acecde821..b90b658aab 100644 --- a/frontend/src/views/background/BackgroundItem.vue +++ b/frontend/src/views/background/BackgroundItem.vue @@ -7,9 +7,10 @@ }, 'template-img' ]" - :style="classBackground" @click.stop="setBoard" - /> + > + +
{{ template.name }} @@ -28,6 +29,9 @@ export default { } }, computed: { + mainIconClass() { + return this.template.url.replace('board/', '').replace('.svg', '') + }, itemActive() { return this.curComponent && this.curComponent.commonBackground && this.curComponent.commonBackground.innerImage === this.template.url }, @@ -74,6 +78,7 @@ export default { } .template-img { + position: relative; height: 80px; width: 130px; margin: 0 auto; @@ -114,5 +119,12 @@ export default { border-radius: 3px; color: deepskyblue; } + .svg-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue index c16c4cde9c..fb078f4449 100644 --- a/frontend/src/views/background/index.vue +++ b/frontend/src/views/background/index.vue @@ -49,9 +49,9 @@ - + - + {{ $t('panel.photo') }} @@ -74,12 +74,13 @@ - + 边框 + - + - {{ key }} +