dashboard调整

src/layouts/BasicLayout.vue

@@ -40,10 +40,52 @@ function onMenuClick({ key }: { key: string }) {
   if (isMobile.value) drawerOpen.value = false
 }
 
+let clickTimer: ReturnType<typeof setTimeout> | null = null
+
 function toggleFullscreen() {
-  isFullscreen.value = !isFullscreen.value
-  if (isFullscreen.value) {
+  if (clickTimer) {
+    clearTimeout(clickTimer)
+    clickTimer = null
+    return
+  }
+  clickTimer = setTimeout(() => {
+    clickTimer = null
+    isFullscreen.value = !isFullscreen.value
+    if (isFullscreen.value) {
+      message.info('双击按钮或内容区域退出全屏', 3)
+    }
+  }, 250)
+}
+
+function enterBrowserFullscreen() {
+  const el = document.documentElement
+  if (el.requestFullscreen) {
+    el.requestFullscreen()
+  } else if ((el as any).webkitRequestFullscreen) {
+    (el as any).webkitRequestFullscreen()
+  }
+}
+
+function exitBrowserFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+  } else if ((document as any).webkitExitFullscreen) {
+    (document as any).webkitExitFullscreen()
+  }
+}
+
+function handleFullscreenDblClick() {
+  if (clickTimer) {
+    clearTimeout(clickTimer)
+    clickTimer = null
+  }
+  if (!isFullscreen.value) {
+    isFullscreen.value = true
+    enterBrowserFullscreen()
     message.info('双击内容区域退出全屏', 3)
+  } else {
+    isFullscreen.value = false
+    exitBrowserFullscreen()
   }
 }
 
@@ -147,7 +189,8 @@ onUnmounted(() => window.removeEventListener('resize', onResize))
         </div>
         <div class="header-actions">
           <a-tooltip :title="isFullscreen ? '退出全屏' : '全屏显示'">
-            <a-button type="text" class="icon-btn" @click="toggleFullscreen">
+            <a-button class="icon-btn" type="text" @click="toggleFullscreen"
+                      @dblclick.prevent="handleFullscreenDblClick">
               <FullscreenExitOutlined v-if="isFullscreen" />
               <FullscreenOutlined v-else />
             </a-button>