screen/src/layout/index.vue

<template>
  <div class="app-wrapper">
    <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>
.app-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;

  &.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
  }
}

:deep(.sidebar-container) {
  flex-shrink: 0;
  width: 200px;
  transition: width 0.28s ease;

  &.is-collapse {
    width: 54px;
  }
}
</style>