From f39dd260561d0155ba2fb543e0166185f4c90ab3 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 4 Mar 2025 17:30:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E9=92=89=E9=92=89?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/exit-fullscreen.svg        |  2 +-
 .../data-visualization/canvas/DePreview.vue   |  3 +
 .../visualization/CanvasExtFullscreenBar.vue  | 84 +++++++++++++++++++
 .../visualization/common/DeFullscreen.vue     |  9 ++
 .../views/data-visualization/PreviewShow.vue  |  1 -
 5 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 core/core-frontend/src/components/visualization/CanvasExtFullscreenBar.vue

diff --git a/core/core-frontend/src/assets/svg/exit-fullscreen.svg b/core/core-frontend/src/assets/svg/exit-fullscreen.svg
index 485c128b61..532662dffc 100644
--- a/core/core-frontend/src/assets/svg/exit-fullscreen.svg
+++ b/core/core-frontend/src/assets/svg/exit-fullscreen.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
\ No newline at end of file
+<?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="1741080458837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4350" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M851.42 64.58H172.58c-59.65 0-108 48.35-108 108v678.84c0 59.65 48.35 108 108 108h678.84c59.65 0 108-48.35 108-108V172.58c0-59.65-48.35-108-108-108z m47 786.84c0 25.92-21.08 47-47 47H172.58c-25.92 0-47-21.08-47-47V172.58c0-25.92 21.08-47 47-47h678.84c25.92 0 47 21.08 47 47v678.84z" p-id="4351"></path><path d="M382.64 225.23h-0.08c-16.84 0.04-30.46 13.73-30.42 30.58l0.25 97.26h-99.14c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h129.72c8.1 0 15.87-3.22 21.59-8.96a30.515 30.515 0 0 0 8.91-21.62l-0.33-127.84c-0.05-16.82-13.69-30.42-30.5-30.42zM381 608.3l-127.84 0.33c-16.84 0.04-30.46 13.73-30.42 30.58 0.04 16.82 13.69 30.42 30.5 30.42h0.08l97.26-0.25v99.14c0 16.84 13.66 30.5 30.5 30.5s30.5-13.66 30.5-30.5V638.8c0-8.1-3.22-15.87-8.96-21.59s-13.54-8.93-21.62-8.91zM765.08 353.47l-97.26 0.25v-99.14c0-16.84-13.66-30.5-30.5-30.5s-30.5 13.66-30.5 30.5V384.3c0 8.1 3.22 15.87 8.96 21.59 5.72 5.7 13.46 8.91 21.54 8.91h0.08l127.84-0.33c16.84-0.04 30.47-13.73 30.42-30.58-0.05-16.85-13.77-30.48-30.58-30.42zM765.16 609.03H635.43c-8.1 0-15.87 3.22-21.59 8.96a30.515 30.515 0 0 0-8.91 21.62l0.33 127.84c0.04 16.82 13.69 30.42 30.5 30.42h0.08c16.84-0.04 30.46-13.73 30.42-30.58l-0.25-97.26h99.14c16.84 0 30.5-13.66 30.5-30.5s-13.65-30.5-30.49-30.5z" p-id="4352"></path></svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index f43de15c96..5ad7fc8e6d 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -22,6 +22,7 @@ import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
 import LinkOptBar from '@/components/data-visualization/canvas/LinkOptBar.vue'
 import { isDesktop } from '@/utils/ModelUtil'
 import { isMobile } from '@/utils/utils'
+import CanvasExtFullscreenBar from '@/components/visualization/CanvasExtFullscreenBar.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
@@ -504,6 +505,8 @@ defineExpose({
       :canvas-style-data="canvasStyleData"
       :component-data="baseComponentData"
     ></canvas-opt-bar>
+    <canvas-ext-fullscreen-bar :canvas-id="canvasId" :show-position="showPosition">
+    </canvas-ext-fullscreen-bar>
     <template v-if="renderReady">
       <ComponentWrapper
         v-for="(item, index) in baseComponentData"
diff --git a/core/core-frontend/src/components/visualization/CanvasExtFullscreenBar.vue b/core/core-frontend/src/components/visualization/CanvasExtFullscreenBar.vue
new file mode 100644
index 0000000000..7595b8a09a
--- /dev/null
+++ b/core/core-frontend/src/components/visualization/CanvasExtFullscreenBar.vue
@@ -0,0 +1,84 @@
+<template>
+  <div
+    v-if="showButton && (!dvMainStore.mobileInPc || isMobile())"
+    class="bar-main-right"
+    @mousedown="handOptBarMousedown"
+  >
+    <el-button size="mini" type="info" @click="exitFullscreen">
+      <el-icon style="margin-right: 8px">
+        <Icon name="exit_fullscreen"
+          ><exit_fullscreen style="font-size: 16px" class="svg-icon"
+        /></Icon>
+      </el-icon>
+      {{ $t('visualization.ext_fullscreen') }}</el-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import exit_fullscreen from '@/assets/svg/exit-fullscreen.svg'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { computed } from 'vue'
+import { isMainCanvas } from '@/utils/canvasUtils'
+import { isMobile } from '@/utils/utils'
+import { storeToRefs } from 'pinia'
+import Icon from '../icon-custom/src/Icon.vue'
+import { ElIcon } from 'element-plus-secondary'
+const dvMainStore = dvMainStoreWithOut()
+
+const { fullscreenFlag } = storeToRefs(dvMainStore)
+
+const props = defineProps({
+  canvasId: {
+    type: String,
+    required: false,
+    default: 'canvas-main'
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  }
+})
+
+const handOptBarMousedown = e => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+const showButton = computed(() => {
+  if (isMainCanvas(props.canvasId)) {
+    return fullscreenFlag.value && props.showPosition === 'preview'
+  } else {
+    return false
+  }
+})
+
+const exitFullscreen = () => {
+  document.exitFullscreen()
+}
+</script>
+
+<style lang="less" scoped>
+.bar-main-right {
+  top: 2px;
+  right: 2px;
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+}
+
+.bar-main-edit-right {
+  top: 8px;
+  right: 102px !important;
+}
+
+.bar-main-left {
+  left: 0px;
+  opacity: 0;
+  height: fit-content;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
index 3860b309c1..01073edf0b 100644
--- a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
+++ b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
@@ -46,12 +46,21 @@ const toggleFullscreen = () => {
   }
 }
 
+const handleKeydown = event => {
+  console.log('FullScreen key: ' + event.key)
+  if (event.key === 'Escape') {
+    document.exitFullscreen()
+  }
+}
+
 onMounted(() => {
   document.addEventListener('fullscreenchange', fullscreenChange)
+  document.addEventListener('keydown', handleKeydown)
 })
 
 onBeforeUnmount(() => {
   document.removeEventListener('fullscreenchange', fullscreenChange)
+  document.removeEventListener('keydown', handleKeydown)
 })
 
 defineExpose({
diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
index a520f040b4..2a6c4cad5a 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
@@ -9,7 +9,6 @@ import EmptyBackground from '@/components/empty-background/src/EmptyBackground.v
 import { storeToRefs } from 'pinia'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
-import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'