添加全屏按钮到顶栏

src/views/LayoutView.vue

@@ -26,6 +26,15 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
+        <!-- 全屏按钮 -->
+        <el-button 
+          icon="FullScreen" 
+          @click="toggleFullScreen" 
+          circle 
+          title="切换全屏"
+          :icon="isFullScreen ? 'CloseFullScreen' : 'FullScreen'"
+          style="background-color: rgba(104, 201, 255, 0.3); color: #68c9ff; border: 1px solid #68c9ff;"
+        />
       </div>
     </header>
     
@@ -121,10 +130,9 @@
     <el-drawer
       v-model="drawerVisible"
       :title="currentMenu?.name || '页面内容'"
-      size="45%"
+      size="800px"
       direction="rtl"
       :with-header="true"
-      :modal="false"
       close-on-click-modal="false"
       close-on-press-escape="true"
       header-class="drawer-header-class"
@@ -142,7 +150,7 @@
  * 使用组合式API实现布局功能和交互逻辑
  * 管理侧边栏折叠状态、菜单导航和用户认证
  */
-import { ref, onMounted, computed } from 'vue' // 导入Vue组合式API
+import { ref, onMounted, computed, onUnmounted } from 'vue' // 导入Vue组合式API
 import { useRouter } from 'vue-router' // 导入路由相关函数
 import { useUserStore } from '@/stores/user' // 导入用户状态管理
 import { ElMessage, ElDrawer } from 'element-plus' // 导入Element Plus组件
@@ -242,6 +250,12 @@ const userInfo = ref({
   name: '管理员' // 默认用户名称
 })
 
+/**
+ * 全屏状态响应式数据
+ * 用于跟踪应用的全屏状态
+ */
+const isFullScreen = ref(false)
+
 /**
  * 切换侧边栏折叠状态
  * 控制侧边栏的展开和收起
@@ -286,9 +300,52 @@ const handleLogout = () => {
   router.push('/login') // 跳转到登录页面
 }
 
+/**
+ * 切换全屏功能
+ * 控制应用在全屏和非全屏状态之间切换
+ */
+const toggleFullScreen = () => {
+  // 如果当前是全屏状态，则退出全屏
+  if (isFullScreen.value) {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen()
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen()
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen()
+    }
+  } 
+  // 如果当前是非全屏状态，则进入全屏
+  else {
+    const docEl = document.documentElement
+    if (docEl.requestFullscreen) {
+      docEl.requestFullscreen()
+    } else if (docEl.mozRequestFullScreen) {
+      docEl.mozRequestFullScreen()
+    } else if (docEl.webkitRequestFullscreen) {
+      docEl.webkitRequestFullscreen()
+    } else if (docEl.msRequestFullscreen) {
+      docEl.msRequestFullscreen()
+    }
+  }
+}
+
+/**
+ * 处理全屏变化事件
+ * 更新isFullScreen状态
+ */
+const handleFullScreenChange = () => {
+  isFullScreen.value = !!(document.fullscreenElement || 
+    document.mozFullScreenElement || 
+    document.webkitFullscreenElement || 
+    document.msFullscreenElement)
+}
+
 /**
  * 组件生命周期钩子：挂载时执行
- * 初始化用户信息和菜单列表
+ * 初始化用户信息、菜单列表并添加全屏事件监听
  */
 onMounted(() => {
   // 初始化用户信息
@@ -303,6 +360,24 @@ onMounted(() => {
       menuList.value = userStore.menuList // 更新菜单列表
     }
   })
+  
+  // 添加全屏变化事件监听
+  document.addEventListener('fullscreenchange', handleFullScreenChange)
+  document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
+  document.addEventListener('mozfullscreenchange', handleFullScreenChange)
+  document.addEventListener('MSFullscreenChange', handleFullScreenChange)
+})
+
+/**
+ * 组件生命周期钩子：卸载时执行
+ * 移除全屏事件监听
+ */
+onUnmounted(() => {
+  // 移除全屏变化事件监听
+  document.removeEventListener('fullscreenchange', handleFullScreenChange)
+  document.removeEventListener('webkitfullscreenchange', handleFullScreenChange)
+  document.removeEventListener('mozfullscreenchange', handleFullScreenChange)
+  document.removeEventListener('MSFullscreenChange', handleFullScreenChange)
 })
 </script>