From ccf13b9e508554ef937983ea7a847c99194ad99f Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 4 Jun 2021 11:19:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=201.=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E8=B0=83=E6=95=B4=20=E9=A2=84=E8=A7=88=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E9=A2=84=E8=A7=88=202.=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E4=B8=BB=E7=95=8C=E9=9D=A2=E8=B0=83=E6=95=B4=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=8F=E9=A2=84=E8=A7=88=EF=BC=8C?= =?UTF-8?q?=E6=96=B0tab=E9=A1=B5=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 1 + .../components/Editor/PreviewFullScreen.vue | 24 ++++++++++++------- .../components/canvas/components/Toolbar.vue | 2 +- frontend/src/lang/en.js | 2 ++ frontend/src/lang/tw.js | 2 ++ frontend/src/lang/zh.js | 2 ++ frontend/src/main.js | 4 ++++ frontend/src/views/panel/edit/index.vue | 2 +- .../src/views/panel/list/PanelViewShow.vue | 22 +++++++++++++---- 9 files changed, 46 insertions(+), 15 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 284ab8cb6b..abaab1bdb3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,6 +38,7 @@ "vue-axios": "3.2.4", "vue-clipboard2": "0.3.1", "vue-codemirror": "^4.0.6", + "vue-fullscreen": "^2.5.1", "vue-i18n": "7.3.2", "vue-router": "3.0.6", "vue-uuid": "2.0.2", diff --git a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue index 2f72f7a33d..de99c92323 100644 --- a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue +++ b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue @@ -1,11 +1,8 @@ @@ -16,10 +13,21 @@ import bus from '@/utils/bus' export default { components: { Preview }, + data() { + return { + fullscreen: false + } + }, + mounted() { + this.fullscreen = false + this.$nextTick(() => (this.fullscreen = true)) + }, methods: { - close() { - bus.$emit('previewFullScreenClose') + fullscreenChange(fullscreen) { + if (!fullscreen) { + bus.$emit('previewFullScreenClose') + } } } } diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue index 306fd10128..4679c963ba 100644 --- a/frontend/src/components/canvas/components/Toolbar.vue +++ b/frontend/src/components/canvas/components/Toolbar.vue @@ -43,7 +43,7 @@ - + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index be2fd0c6f7..c7ef5f8a48 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -899,6 +899,8 @@ export default { save_to_panel: 'Save to template', export_to_panel: 'Export to template', preview: 'Preview', + fullscreen_preview: 'Fullscreen Preview', + new_tab_preview: 'New Tab Preview', select_panel_from_left: 'Please select Dashboard from left', template_nale: 'Template name', template: 'Template', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 0cab493eb2..4be5a3479b 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -899,6 +899,8 @@ export default { save_to_panel: '保存為模板', export_to_panel: '導出為模板', preview: '預覽', + fullscreen_preview: '全屏预览', + new_tab_preview: '新Tab页预览', select_panel_from_left: '請從左側選擇儀表板', template_nale: '模板名稱', template: '模板', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 1ee7c1759d..2df010b3b7 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -899,6 +899,8 @@ export default { save_to_panel: '保存为模板', export_to_panel: '导出为模板', preview: '预览', + fullscreen_preview: '全屏预览', + new_tab_preview: '新Tab页预览', select_panel_from_left: '请从左侧选择仪表板', template_nale: '模板名称', template: '模板', diff --git a/frontend/src/main.js b/frontend/src/main.js index 5b5b1f4277..2bef70b47d 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -37,6 +37,10 @@ Vue.use(UmyUi) import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker) +// 全屏插件 +import fullscreen from 'vue-fullscreen' +Vue.use(fullscreen) + /** * If you don't want to use mock-server * you want to use MockJs for mock api diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 31ffdab3af..f697075755 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -141,7 +141,7 @@ :fullscreen="true" custom-class="preview-dialog" > - + diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index 909e16caea..944a572ff5 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -19,8 +19,14 @@ - - + + + + + + + + @@ -41,7 +47,9 @@
- + + +
@@ -78,7 +86,8 @@ export default { templateInfo: {}, templateSaveTitle: '保存为模板', templateSaveShow: false, - hasStar: false + hasStar: false, + fullscreen: false } }, computed: { @@ -103,7 +112,10 @@ export default { mounted() { }, methods: { - clickPreview() { + clickFullscreen() { + this.fullscreen = true + }, + newTab() { const url = '#/preview/' + this.$store.state.panel.panelInfo.id window.open(url, '_blank') },