From 954d24186f2feb964e09913c1e59a657f20d331c Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 16 Nov 2022 17:38:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E8=83=8C=E6=99=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/editor/Preview.vue | 16 +- frontend/src/components/canvas/utils/utils.js | 3 +- frontend/src/lang/en.js | 2 + frontend/src/lang/tw.js | 2 + frontend/src/lang/zh.js | 2 + .../src/views/panel/edit/ComponentWait.vue | 114 +++++--- frontend/src/views/panel/edit/index.vue | 13 +- frontend/src/views/panel/panel.js | 8 + .../panelStyle/MobileBackgroundSelector.vue | 268 ++++++++++++++++++ 9 files changed, 383 insertions(+), 45 deletions(-) create mode 100644 frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue index b4f021fb8f..25755c66f6 100644 --- a/frontend/src/components/canvas/components/editor/Preview.vue +++ b/frontend/src/components/canvas/components/editor/Preview.vue @@ -220,15 +220,19 @@ export default { width: '100%' } if (this.canvasStyleData.openCommonStyle && this.isMainCanvas()) { - if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { + const styleInfo = this.terminal === 'mobile' && this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting + ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel + if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') { style = { - background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`, - ...style + background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat` } - } else if (this.canvasStyleData.panel.backgroundType === 'color') { + } else if (styleInfo.backgroundType === 'color') { style = { - background: this.canvasStyleData.panel.color, - ...style + background: styleInfo.color + } + } else { + style = { + background: '#f7f8fa' } } } diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index a64da813e9..c81866fc7b 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -7,7 +7,7 @@ import { import { ApplicationContext } from '@/utils/ApplicationContext' import { uuid } from 'vue-uuid' import store from '@/store' -import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel' +import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel' import html2canvas from 'html2canvasde' export function deepCopy(target) { @@ -86,6 +86,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) { componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE)) componentStyle.themeId = (componentStyle.themeId || 'NO_THEME') componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light') + componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || MOBILE_SETTING) componentData.forEach((item, index) => { if (item.component && item.component === 'de-date') { const widget = ApplicationContext.getService(item.serviceName) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index cd45b23326..eabb66daf5 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1865,6 +1865,8 @@ export default { sure_bt: 'Confirm' }, panel: { + mobile_style_setting: 'Style setting', + mobile_style_setting_tips: 'Customize the mobile background', board: 'Border', text: 'Text', board_background: 'Background', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index ed02b5a363..ddd3278562 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1865,6 +1865,8 @@ export default { sure_bt: '確定' }, panel: { + mobile_style_setting: '樣式設置', + mobile_style_setting_tips: '自定義移動端背景', board: '邊框', text: '文字', board_background: '背景', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index a6e2954fc0..508b3f2dc9 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1865,6 +1865,8 @@ export default { sure_bt: '确定' }, panel: { + mobile_style_setting: '样式设置', + mobile_style_setting_tips: '自定义移动端背景', board: '边框', text: '文字', board_background: '背景', diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue index 3434a4b07a..7740c865e5 100644 --- a/frontend/src/views/panel/edit/ComponentWait.vue +++ b/frontend/src/views/panel/edit/ComponentWait.vue @@ -1,9 +1,22 @@ diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 5aa71b3586..91ac5dfb85 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -251,7 +251,6 @@ @@ -680,13 +679,15 @@ export default { mobileCanvasStyle() { let style if (this.canvasStyleData.openCommonStyle) { - if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') { + const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting + ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel + if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') { style = { - background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat` + background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat` } - } else if (this.canvasStyleData.panel.backgroundType === 'color') { + } else if (styleInfo.backgroundType === 'color') { style = { - background: this.canvasStyleData.panel.color + background: styleInfo.color } } else { style = { @@ -1537,7 +1538,7 @@ export default { .this_mobile_canvas_wait_cell { background-size: 100% 100% !important; - border: 2px solid #9ea6b2 + border: 1px solid #9ea6b2 } .canvas_main_content { diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js index 55e25fa733..f4cf0e7bc8 100644 --- a/frontend/src/views/panel/panel.js +++ b/frontend/src/views/panel/panel.js @@ -29,7 +29,15 @@ export const FILTER_COMMON_STYLE_DARK = { innerBgColor: '#131E42' } +export const MOBILE_SETTING = { + customSetting: false, + color: '#ffffff', + imageUrl: null, + backgroundType: 'image' +} + export const DEFAULT_PANEL_STYLE = { + mobileSetting: MOBILE_SETTING, themeColor: 'light', color: '#ffffff', imageUrl: null, diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue new file mode 100644 index 0000000000..1c32a570f9 --- /dev/null +++ b/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue @@ -0,0 +1,268 @@ + + + + +