首页飞线地图

src/views/Home/index3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-map-page">
+  <div class="home-map-page" :class="{ 'is-fullscreen': isFullscreen }">
     <canvas id="map" ref="mapEl"></canvas>
 
     <div class="corner tl"></div>
@@ -12,6 +12,13 @@
         <div class="title">全球项目部态势图</div>
         <div class="subtitle">GLOBAL PROJECT NETWORK · BEIJING HQ</div>
       </div>
+      <button
+        class="btn fullscreen-btn"
+        type="button"
+        :aria-label="isFullscreen ? '退出全屏' : '进入全屏'"
+        @click="toggleFullscreen">
+        {{ isFullscreen ? '退出全屏' : '进入全屏' }}
+      </button>
     </div>
 
     <div id="stats" class="panel">
@@ -64,13 +71,27 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import worldPage from './index.html?raw'
 
 const mapEl = ref(null)
+const isFullscreen = ref(false)
 
 const setAppShellFullscreen = (fullscreen: boolean) => {
   document.documentElement.classList.toggle('app-fullscreen', fullscreen)
 }
 
 const syncFullscreenState = () => {
-  setAppShellFullscreen(Boolean(document.fullscreenElement))
+  isFullscreen.value = Boolean(document.fullscreenElement)
+  setAppShellFullscreen(isFullscreen.value)
+}
+
+const toggleFullscreen = async () => {
+  try {
+    if (document.fullscreenElement) {
+      await document.exitFullscreen?.()
+    } else if (document.documentElement.requestFullscreen) {
+      await document.documentElement.requestFullscreen()
+    }
+  } catch (error) {
+    console.warn('Fullscreen toggle was blocked on this page:', error)
+  }
 }
 
 const handleEscExit = (event: KeyboardEvent) => {
@@ -108,7 +129,7 @@ const parseWorldData = () => {
 let renderCleanup = null
 
 onMounted(async () => {
-  setAppShellFullscreen(true)
+  syncFullscreenState()
   document.addEventListener('fullscreenchange', syncFullscreenState)
   document.addEventListener('keydown', handleEscExit)
 
@@ -939,6 +960,14 @@ onBeforeUnmount(() => {
   -webkit-font-smoothing: antialiased;
 }
 
+.home-map-page.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -952,7 +981,7 @@ body {
 }
 
 canvas#map {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -967,7 +996,7 @@ canvas#map.drag {
 }
 
 .topbar {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   top: 0;
@@ -980,6 +1009,13 @@ canvas#map.drag {
   background: linear-gradient(180deg, rgba(4, 10, 20, 0.92), rgba(4, 10, 20, 0));
 }
 
+.fullscreen-btn {
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  pointer-events: auto;
+}
+
 .title {
   font-size: 22px;
   font-weight: 700;
@@ -1046,7 +1082,7 @@ canvas#map.drag {
 }
 
 #stats {
-  position: fixed;
+  position: absolute;
   left: 18px;
   top: 78px;
   width: 212px;
@@ -1081,7 +1117,7 @@ canvas#map.drag {
 }
 
 #list {
-  position: fixed;
+  position: absolute;
   left: 18px;
   top: calc(78px + var(--statsH, 260px));
   width: 212px;
@@ -1158,7 +1194,7 @@ canvas#map.drag {
 }
 
 #clockBox {
-  position: fixed;
+  position: absolute;
   right: 18px;
   top: 78px;
   z-index: 6;
@@ -1212,7 +1248,7 @@ canvas#map.drag {
 }
 
 #legend {
-  position: fixed;
+  position: absolute;
   right: 18px;
   bottom: 18px;
   z-index: 6;
@@ -1263,7 +1299,7 @@ canvas#map.drag {
 }
 
 #hint {
-  position: fixed;
+  position: absolute;
   left: 50%;
   bottom: 16px;
   transform: translateX(-50%);
@@ -1285,7 +1321,7 @@ canvas#map.drag {
 }
 
 .corner {
-  position: fixed;
+  position: absolute;
   width: 22px;
   height: 22px;
   border: 2px solid rgba(56, 225, 255, 0.45);
@@ -1355,7 +1391,7 @@ canvas#map.drag {
 }
 
 #btns {
-  position: fixed;
+  position: absolute;
   right: 18px;
   top: 142px;
   z-index: 6;
@@ -1386,7 +1422,7 @@ canvas#map.drag {
 }
 
 #mask {
-  position: fixed;
+  position: absolute;
   inset: 0;
   z-index: 20;
   background: #04080f;