refactor(仪表板): 优化全屏组件

core/core-frontend/src/components/dashboard/DbToolbar.vue

@@ -47,6 +47,7 @@ const {
 } = storeToRefs(dvMainStore)
 const dvModel = 'dashboard'
 const multiplexingRef = ref(null)
+const fullScreeRef = ref(null)
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -97,7 +98,7 @@ const redo = () => {
 }
 
 const previewInner = () => {
-  dvMainStore.setEditMode('preview')
+  fullScreeRef.value.toggleFullscreen()
 }
 
 const previewOuter = () => {
@@ -522,7 +523,12 @@ const initOpenHandler = newWindow => {
           </el-button>
           <template #dropdown>
             <el-dropdown-menu class="drop-style">
-              <de-fullscreen :show-position="'edit'"></de-fullscreen>
+              <el-dropdown-item @click="previewInner">
+                <el-icon style="margin-right: 8px; font-size: 16px">
+                  <Icon name="icon_pc_fullscreen" />
+                </el-icon>
+                全屏预览
+              </el-dropdown-item>
               <el-dropdown-item @click="previewOuter()">
                 <el-icon style="margin-right: 8px; font-size: 16px">
                   <Icon name="dv-preview-outer" />
@@ -615,6 +621,7 @@ const initOpenHandler = newWindow => {
     />
     <outer-params-set ref="outerParamsSetRef"> </outer-params-set>
   </div>
+  <de-fullscreen show-position="edit" ref="fullScreeRef"></de-fullscreen>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 

core/core-frontend/src/components/visualization/common/DeFullscreen.vue

@@ -25,6 +25,14 @@ const { themes, componentType } = toRefs(props)
 const fullscreenChange = () => {
   if (screenfull.isEnabled) {
     dvMainStore.setFullscreenFlag(screenfull.isFullscreen)
+    // 编辑界面使用
+    if (props.showPosition === 'edit') {
+      if (screenfull.isFullscreen) {
+        dvMainStore.setEditMode('preview')
+      } else {
+        dvMainStore.setEditMode('edit')
+      }
+    }
   }
 }
 
@@ -35,11 +43,6 @@ const toggleFullscreen = () => {
   }
 }
 
-const editToggleFullscreen = () => {
-  dvMainStore.setEditMode('preview')
-  toggleFullscreen()
-}
-
 onMounted(() => {
   if (screenfull.isEnabled) {
     screenfull.on('change', fullscreenChange)
@@ -49,21 +52,12 @@ onMounted(() => {
 onBeforeUnmount(() => {
   screenfull.off('change', fullscreenChange)
 })
+
+defineExpose({
+  toggleFullscreen
+})
 </script>
 
-<template>
-  <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>
+<template><span></span></template>
 
 <style lang="less" scoped></style>

core/core-frontend/src/views/dashboard/index.vue

@@ -43,6 +43,7 @@ const eventCheck = e => {
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const {
+  fullscreenFlag,
   componentData,
   curComponent,
   canvasStyleData,
@@ -234,7 +235,7 @@ onUnmounted(() => {
       :class="{ 'preview-content': editMode === 'preview' }"
     >
       <!-- 中间画布 -->
-      <main class="center">
+      <main class="center" :class="{ 'de-screen-full': fullscreenFlag }">
         <de-canvas
           style="overflow-x: hidden"
           v-if="dataInitState"
@@ -257,7 +258,6 @@ onUnmounted(() => {
         :side-name="'componentProp'"
         :aside-position="'right'"
         class="left-sidebar"
-        :class="{ 'preview-aside': editMode === 'preview' }"
       >
         <component :is="findComponent(curComponent['component'] + 'Attr')" :themes="'light'" />
       </dv-sidebar>
@@ -268,15 +268,10 @@ onUnmounted(() => {
         :width="420"
         aside-position="right"
         class="left-sidebar"
-        :class="{ 'preview-aside': editMode === 'preview' }"
       >
         <DbCanvasAttr></DbCanvasAttr>
       </dv-sidebar>
-      <div
-        v-show="viewEditorShow"
-        style="height: 100%"
-        :class="{ 'preview-aside': editMode === 'preview' }"
-      >
+      <div v-show="viewEditorShow" style="height: 100%">
         <view-editor
           :themes="'light'"
           :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
@@ -291,7 +286,6 @@ onUnmounted(() => {
         aside-position="right"
         class="left-sidebar"
         :side-name="'batchOpt'"
-        :class="{ 'preview-aside': editMode === 'preview' }"
       >
         <chart-style-batch-set></chart-style-batch-set>
       </dv-sidebar>

core/core-frontend/src/views/data-visualization/PreviewHead.vue

@@ -16,6 +16,7 @@ const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate'])
 const { t } = useI18n()
 
 const favorited = ref(false)
+const fullScreeRef = ref(null)
 const preview = () => {
   const url = '#/preview?dvId=' + dvInfo.value.id
   const newWindow = window.open(url, '_blank')
@@ -103,7 +104,13 @@ const initOpenHandler = newWindow => {
       </el-popover>
     </div>
     <div class="canvas-opt-button">
-      <de-fullscreen v-if="!isDataEaseBi"></de-fullscreen>
+      <de-fullscreen ref="fullScreeRef"></de-fullscreen>
+      <el-button v-if="!isDataEaseBi" secondary @click="() => fullScreeRef.toggleFullscreen()">
+        <template #icon>
+          <icon name="icon_pc_fullscreen"></icon>
+        </template>
+        全屏</el-button
+      >
       <el-button secondary v-if="!isDataEaseBi" @click="preview()">
         <template #icon>
           <icon name="icon_pc_outlined"></icon>