调整

src/components/FullscreenToggle/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div ref="fullscreenContainer">
+    <slot :toggle="toggleFullscreen" :isFullscreen="isFullscreen"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FullscreenToggle',
+  data () {
+    return {
+      isFullscreen: false
+    }
+  },
+  mounted () {
+    this.initFullscreenListeners()
+  },
+  beforeDestroy () {
+    this.removeFullscreenListeners()
+  },
+  methods: {
+    // 检查是否全屏
+    checkFullscreen () {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement
+      )
+    },
+
+    // 进入全屏
+    enterFullscreen () {
+      const container = this.$refs.fullscreenContainer
+      if (!container) return
+
+      if (container.requestFullscreen) {
+        container.requestFullscreen().catch((err) => console.error(err))
+      } else if (container.webkitRequestFullscreen) {
+        container.webkitRequestFullscreen()
+      } else if (container.msRequestFullscreen) {
+        container.msRequestFullscreen()
+      }
+    },
+
+    // 退出全屏
+    exitFullscreen () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch((err) => console.error(err))
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+    },
+
+    // 切换全屏
+    toggleFullscreen () {
+      if (this.checkFullscreen()) {
+        this.exitFullscreen()
+      } else {
+        this.enterFullscreen()
+      }
+    },
+
+    // 监听全屏变化
+    handleFullscreenChange () {
+      this.isFullscreen = this.checkFullscreen()
+    },
+
+    // 监听 ESC 键
+    handleKeyDown (e) {
+      if (e.key === 'Escape' && this.isFullscreen) {
+        this.exitFullscreen()
+      }
+    },
+
+    // 初始化监听
+    initFullscreenListeners () {
+      document.addEventListener('fullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('msfullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('keydown', this.handleKeyDown)
+    },
+
+    // 移除监听
+    removeFullscreenListeners () {
+      document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('msfullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('keydown', this.handleKeyDown)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/utils/fullscreen.js

@@ -1,30 +0,0 @@
-// 进入全屏
-export const requestFullscreen = (element) => {
-  if (element.requestFullscreen) {
-    element.requestFullscreen()
-  } else if (element.webkitRequestFullscreen) {
-    element.webkitRequestFullscreen()
-  } else if (element.msRequestFullscreen) {
-    element.msRequestFullscreen()
-  }
-}
-
-// 退出全屏
-export const exitFullscreen = () => {
-  if (document.exitFullscreen) {
-    document.exitFullscreen()
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen()
-  } else if (document.msExitFullscreen) {
-    document.msExitFullscreen()
-  }
-}
-
-// 检测全屏状态
-export const isFullscreen = () => {
-  return !!(
-    document.fullscreenElement ||
-    document.webkitFullscreenElement ||
-    document.msFullscreenElement
-  )
-}

src/utils/request.js

@@ -127,9 +127,8 @@ service.interceptors.response.use(
     return res
   },
   error => {
-    // console.error(error)
     // error = error.message || error
-    return Promise.reject(error)
+    return Promise.reject(error.message || error)
   }
 )
 

src/views/dataChart/privateChart/privateChartEdit.vue

@@ -17,14 +17,19 @@
               </div>
             </m-card>
             <m-card ref="privateChartEditShowCardsRefs" shadow="never" class="box-main-bottom" :bodyStyle="{ height: '100%', 'box-sizing': 'border-box', position: 'relative' }">
-              <m-empty v-if="empty"></m-empty>
-              <div v-else class="box-main-bottom-tool">
-                <span :class="`mdi mdi-fullscreen${tool.fullscreen ? '-exit' : ''}`" @click="onSetFullscreen"></span>
-              </div>
-              <PrivateChartEditShow
-                ref="privateChartEditShowRefs"
-                class="fullscreen"
-              ></PrivateChartEditShow>
+              <FullscreenToggle class="fullscreen white">
+                <template v-slot="{ toggle, isFullscreen }">
+                  <m-empty v-if="empty"></m-empty>
+                  <div v-else class="box-main-bottom-tool">
+                    <span :class="`mdi mdi-fullscreen${isFullscreen ? '-exit' : ''}`" @click="toggle"></span>
+                  </div>
+                  <PrivateChartEditShow
+                    ref="privateChartEditShowRefs"
+                    class="fullscreen"
+                  ></PrivateChartEditShow>
+                </template>
+              </FullscreenToggle>
+
             </m-card>
           </div>
           <div class="box-right">
@@ -44,10 +49,8 @@
 import PrivateChartEditShow from './privateChartEditShow.vue'
 import PrivateChartEditType from './privateChartEditType.vue'
 import PrivateChartEditParams from './privateChartEditParams.vue'
-import {
-  requestFullscreen,
-  exitFullscreen
-} from '@/utils/fullscreen'
+import FullscreenToggle from '@/components/FullscreenToggle'
+
 import {
   getWebSetting,
   saveWebSetting
@@ -57,13 +60,11 @@ export default {
   components: {
     PrivateChartEditShow,
     PrivateChartEditType,
-    PrivateChartEditParams
+    PrivateChartEditParams,
+    FullscreenToggle
   },
   data () {
     return {
-      tool: {
-        fullscreen: false
-      },
       loading: false,
       empty: false,
       key: null,
@@ -107,14 +108,6 @@ export default {
         this.loading = false
       }
     },
-    onSetFullscreen () {
-      this.tool.fullscreen = !this.tool.fullscreen
-      const $el = this.$refs.privateChartEditShowCardsRefs.$el
-      if (this.tool.fullscreen) {
-        return requestFullscreen($el)
-      }
-      exitFullscreen($el)
-    },
     setData () {
       this.empty = false
       this.$refs.privateChartEditShowRefs.setData(this.data, this.key, this.option)

src/views/dataChart/privateChart/privateChartEditParams.vue

@@ -22,7 +22,7 @@
               <div class="box-msg-items-item">
                 <div class="box-msg-items-item-title d-flex align-center">
                   <div class="font-w">{{ item.type === 1 ? '我' : '图表助手' }}</div>
-                  <div v-if="item.type === 2 && item.content.sql" class="ml-3">
+                  <div v-if="item.type === 2 && item.content?.sql" class="ml-3">
                     <el-tag
                       @click="item.showSql = !item.showSql"
                       type="info"
@@ -177,7 +177,6 @@ export default {
         })
       } catch (error) {
         ask.content = error
-        // this.$message.error(error)
       } finally {
         this.isAlready = true
       }