From 6bc734bd8ede09b4a8e154b63998f72e3c467369 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 20 Dec 2023 11:03:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=85=A8=E5=B1=8F=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/CanvasOptBar.vue | 43 ++++++++++++++++++-
 .../src/icons/svg/public_fullscreen.svg       |  1 +
 .../src/icons/svg/public_fullscreen_exit.svg  |  1 +
 core/frontend/src/lang/en.js                  |  1 +
 core/frontend/src/lang/tw.js                  |  1 +
 core/frontend/src/lang/zh.js                  |  1 +
 6 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 core/frontend/src/icons/svg/public_fullscreen.svg
 create mode 100644 core/frontend/src/icons/svg/public_fullscreen_exit.svg

diff --git a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index 2b991acc10..ba6ef5d785 100644
--- a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div
+    id="fullscreenElement"
     :class="containerClass"
   >
 
@@ -36,6 +37,15 @@
             style="width: 12px;height: 12px"
             icon-class="link-down"
           />{{ $t('panel.down') }}</span></el-button>
+        <el-button
+          id="fullscreenElement"
+          size="mini"
+          @click="toggleFullscreen"
+        >
+          <span><svg-icon
+            style="width: 12px;height: 12px"
+            :icon-class="fullscreenState?'public_fullscreen_exit':'public_fullscreen'"
+          />{{ fullscreenState?$t('panel.fullscreen_exit'): $t('panel.fullscreen_preview') }}</span></el-button>
       </el-button-group>
     </div>
 
@@ -66,7 +76,8 @@ export default {
   },
   data() {
     return {
-
+      fullscreenElement: null,
+      fullscreenState: false
     }
   },
   computed: {
@@ -99,7 +110,37 @@ export default {
       'componentData'
     ])
   },
+
+  mounted() {
+    this.fullscreenElement = document.getElementById('fullscreenElement')
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange)
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除事件监听器
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
+  },
   methods: {
+    handleFullscreenChange() {
+      // 在全屏状态变化时触发此方法
+      if (document.fullscreenElement) {
+        this.fullscreenState = true
+      } else {
+        this.fullscreenState = false
+      }
+    },
+    toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        // 如果当前不是全屏状态，则启动全屏
+        document.documentElement.requestFullscreen().catch(error => {
+          console.error('Request fullscreen failed:', error)
+        })
+      } else {
+        // 如果当前是全屏状态，则退出全屏
+        document.exitFullscreen().catch(error => {
+          console.error('Exit fullscreen failed:', error)
+        })
+      }
+    },
     clearAllLinkage() {
       this.$store.commit('clearPanelLinkageInfo')
       bus.$emit('clear_panel_linkage', { viewId: 'all' })
diff --git a/core/frontend/src/icons/svg/public_fullscreen.svg b/core/frontend/src/icons/svg/public_fullscreen.svg
new file mode 100644
index 0000000000..bf6260acef
--- /dev/null
+++ b/core/frontend/src/icons/svg/public_fullscreen.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703040908390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6856" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" p-id="6857"></path></svg>
diff --git a/core/frontend/src/icons/svg/public_fullscreen_exit.svg b/core/frontend/src/icons/svg/public_fullscreen_exit.svg
new file mode 100644
index 0000000000..fe88a5b595
--- /dev/null
+++ b/core/frontend/src/icons/svg/public_fullscreen_exit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703040914733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6995" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z"  p-id="6996"></path></svg>
diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 22069e56a4..251004fd58 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -2240,6 +2240,7 @@ export default {
     export_to_app: 'Export to App',
     preview: 'Preview',
     fullscreen_preview: 'Fullscreen Preview',
+    fullscreen_exit: 'Fullscreen Exit',
     new_tab_preview: 'New Tab Preview',
     select_panel_from_left: 'Please select Dashboard from left',
     template_nale: 'Template name',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 73a8a431c9..c8bc177963 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -2231,6 +2231,7 @@ export default {
     export_to_app: '導出爲應用',
     preview: '預覽',
     fullscreen_preview: '全屏預覽',
+    fullscreen_exit: '退出全屏',
     new_tab_preview: '新Tab頁預覽',
     select_panel_from_left: '請從左側選擇儀表闆',
     template_name: '模闆名稱',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index 552960a415..33a97f9eb8 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -2234,6 +2234,7 @@ export default {
     export_to_app: '导出为应用',
     preview: '预览',
     fullscreen_preview: '全屏预览',
+    fullscreen_exit: '退出全屏',
     new_tab_preview: '新Tab页预览',
     select_panel_from_left: '请从左侧选择仪表板',
     template_nale: '模板名称',