Merge pull request #7220 from dataease/pr@dev@feat_public-link

feat(仪表板): 仪表板公共链接支持全屏切换

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' })

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>

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>

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',

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: '模闆名稱',

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: '模板名称',