refactor(仪表板): 优化仪表板编辑状态全屏逻辑

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" />

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>

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>