From 4ff560c883a2e9424d6311f0b1eb31fb5039341c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 14 Jun 2024 19:38:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=85=A8=E5=B1=8F=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/DbToolbar.vue    |  8 ++---
 ...eFullscreenButton.vue => DeFullscreen.vue} | 29 ++++++++++++++++---
 .../views/data-visualization/PreviewHead.vue  |  4 +--
 3 files changed, 29 insertions(+), 12 deletions(-)
 rename core/core-frontend/src/components/visualization/common/{DeFullscreenButton.vue => DeFullscreen.vue} (56%)

diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 23bb2a947a..163205832e 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -28,6 +28,7 @@ import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
 import { XpackComponent } from '@/components/plugin'
 import DbMoreComGroup from '@/custom-component/component-group/DbMoreComGroup.vue'
 import { useCache } from '@/hooks/web/useCache'
+import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@@ -521,12 +522,7 @@ const initOpenHandler = newWindow => {
           </el-button>
           <template #dropdown>
             <el-dropdown-menu class="drop-style">
-              <el-dropdown-item @click="previewInner()">
-                <el-icon style="margin-right: 8px; font-size: 16px">
-                  <Icon name="dv-preview-inner" />
-                </el-icon>
-                当前预览
-              </el-dropdown-item>
+              <de-fullscreen :show-position="'edit'"></de-fullscreen>
               <el-dropdown-item @click="previewOuter()">
                 <el-icon style="margin-right: 8px; font-size: 16px">
                   <Icon name="dv-preview-outer" />
diff --git a/core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
similarity index 56%
rename from core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue
rename to core/core-frontend/src/components/visualization/common/DeFullscreen.vue
index df3d5198fa..0cc86744e9 100644
--- a/core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue
+++ b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
@@ -3,14 +3,25 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 
 const dvMainStore = dvMainStoreWithOut()
 import screenfull from 'screenfull'
-import { onBeforeUnmount, onMounted } from 'vue'
+import { onBeforeUnmount, onMounted, toRefs } from 'vue'
 
-defineProps({
+const props = defineProps({
   themes: {
     type: String,
     default: 'light'
+  },
+  componentType: {
+    type: String,
+    default: 'button'
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
   }
 })
+const { themes, componentType } = toRefs(props)
+
 const fullscreenChange = () => {
   if (screenfull.isEnabled) {
     dvMainStore.setFullscreenFlag(screenfull.isFullscreen)
@@ -20,11 +31,15 @@ const fullscreenChange = () => {
 const toggleFullscreen = () => {
   if (screenfull.isEnabled) {
     const bodyNode = document.querySelector('body')
-    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
     screenfull.toggle(bodyNode)
   }
 }
 
+const editToggleFullscreen = () => {
+  dvMainStore.setEditMode('preview')
+  toggleFullscreen()
+}
+
 onMounted(() => {
   if (screenfull.isEnabled) {
     screenfull.on('change', fullscreenChange)
@@ -37,12 +52,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <el-button secondary @click="toggleFullscreen">
+  <el-button v-if="showPosition === 'preview'" secondary @click="toggleFullscreen">
     <template #icon>
       <icon name="icon_pc_fullscreen"></icon>
     </template>
     全屏</el-button
   >
+  <el-dropdown-item v-else @click="editToggleFullscreen()">
+    <el-icon style="margin-right: 8px; font-size: 16px">
+      <icon name="icon_pc_fullscreen"></icon>
+    </el-icon>
+    全屏预览
+  </el-dropdown-item>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewHead.vue b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
index 592f8964e6..c3691e9f89 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
@@ -8,7 +8,7 @@ import { storeApi, storeStatusApi } from '@/api/visualization/dataVisualization'
 import { ref, watch, computed } from 'vue'
 import ShareVisualHead from '@/views/share/share/ShareVisualHead.vue'
 import { XpackComponent } from '@/components/plugin'
-import DeFullscreenButton from '@/components/visualization/common/DeFullscreenButton.vue'
+import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 const dvMainStore = dvMainStoreWithOut()
 const appStore = useAppStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -103,7 +103,7 @@ const initOpenHandler = newWindow => {
       </el-popover>
     </div>
     <div class="canvas-opt-button">
-      <de-fullscreen-button v-if="!isDataEaseBi"></de-fullscreen-button>
+      <de-fullscreen v-if="!isDataEaseBi"></de-fullscreen>
       <el-button secondary v-if="!isDataEaseBi" @click="preview()">
         <template #icon>
           <icon name="icon_pc_outlined"></icon>