feat: 修改大屏样式布局

src/layout/index.vue

@@ -1,17 +1,48 @@
 <template>
   <div class="app-wrapper">
-    <sidebar />
-    <div class="main-wrapper">
-      <navbar />
+    <sidebar v-show="!isFullscreen" />
+    <div class="main-wrapper" :class="{ 'fullscreen': isFullscreen }">
+      <navbar v-show="!isFullscreen" />
       <app-main />
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
 import Sidebar from './components/Sidebar/index.vue'
 import Navbar from './components/Navbar/index.vue'
 import AppMain from './components/AppMain.vue'
+
+const isFullscreen = ref(false)
+
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
+const handleToggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().catch(err => {
+      console.error('全屏请求失败:', err)
+    })
+  } else {
+    document.exitFullscreen().catch(err => {
+      console.error('退出全屏失败:', err)
+    })
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  
+  window.addEventListener('toggle-fullscreen', handleToggleFullscreen)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  
+  window.removeEventListener('toggle-fullscreen', handleToggleFullscreen)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -29,6 +60,15 @@ import AppMain from './components/AppMain.vue'
   height: 100vh;
   overflow: hidden;
   min-width: 0;
+
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+  }
 }
 
 :deep(.sidebar-container) {
@@ -40,4 +80,4 @@ import AppMain from './components/AppMain.vue'
     width: 54px;
   }
 }
-</style>
+</style>