feat: fullscreen composable, roadmap update, and future plans doc

src/App.vue

@@ -8,8 +8,10 @@ import HotspotLayer from '@/components/HotspotLayer.vue'
 import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
+import { useFullscreen } from '@/composables/useFullscreen'
 
 const store = useGameStore()
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
 const videoElA = ref<HTMLVideoElement | null>(null)
 const videoElB = ref<HTMLVideoElement | null>(null)
 const loading = ref(true)
@@ -95,9 +97,12 @@ init()
           :timer-remaining="store.timerRemaining"
           @choose="onChoose"
         />
-        <button v-if="started && !store.gameEnded" class="menu-trigger" @click="toggleMenu">
-          菜单
-        </button>
+        <div v-if="started && !store.gameEnded" class="top-bar">
+          <button class="top-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
+            {{ isFullscreen ? '⛶' : '⛶' }}
+          </button>
+          <button class="top-btn" @click="toggleMenu">菜单</button>
+        </div>
       </div>
       <div v-if="!started" class="start-overlay">
         <button class="start-btn" @click="handleStart">开始游戏</button>
@@ -160,11 +165,16 @@ html, body {
   height: 100%;
 }
 
-.menu-trigger {
+.top-bar {
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 20;
+  display: flex;
+  gap: 6px;
+}
+
+.top-btn {
   padding: 8px 16px;
   font-size: 13px;
   color: #aaa;
@@ -175,7 +185,7 @@ html, body {
   transition: background 0.2s, color 0.2s;
 }
 
-.menu-trigger:hover {
+.top-btn:hover {
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
 }