fix:excessive padding-top at the top of app-main when in fullscreen.

src/components/Screenfull/index.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watchEffect } from "vue"
 import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
+import { useAppStore } from "@/store/modules/app"
 
 interface Props {
   /** 全屏的元素，默认是 html */
@@ -21,6 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
   content: false
 })
 
+const appStore = useAppStore()
+
 //#region 全屏
 const isFullscreen = ref<boolean>(false)
 const fullscreenTips = computed(() => {
@@ -35,6 +38,7 @@ const handleFullscreenClick = () => {
 }
 const handleFullscreenChange = () => {
   isFullscreen.value = screenfull.isFullscreen
+  appStore.fullscreenStateChange(isFullscreen.value)
 }
 watchEffect((onCleanup) => {
   // 挂载组件时自动执行

src/layouts/LeftMode.vue

@@ -25,6 +25,15 @@ const layoutClasses = computed(() => {
 const handleClickOutside = () => {
   appStore.closeSidebar(false)
 }
+
+/** 用于判断app-main是否为全屏模式 */
+const appMainFullscreen = computed(() => {
+  if (appStore.isFullscreen) {
+    const classList = (document?.fullscreenElement as Element | null)?.classList || []
+    return Array.from(classList).includes("app-main")
+  }
+  return false
+})
 </script>
 
 <template>
@@ -41,7 +50,7 @@ const handleClickOutside = () => {
         <TagsView v-show="showTagsView" />
       </div>
       <!-- 页面主体内容 -->
-      <AppMain class="app-main" />
+      <AppMain class="app-main" :class="{ fullscreen: appMainFullscreen }" />
     </div>
   </div>
 </template>
@@ -111,6 +120,10 @@ $transition-time: 0.35s;
   padding-top: var(--v3-navigationbar-height);
   height: 100vh;
   overflow: auto;
+
+  &.fullscreen {
+    padding-top: 0;
+  }
 }
 
 .hasTagsView {
@@ -119,6 +132,10 @@ $transition-time: 0.35s;
   }
   .fixed-header + .app-main {
     padding-top: var(--v3-header-height);
+
+    &.fullscreen {
+      padding-top: 0;
+    }
   }
 }
 

src/store/modules/app.ts

@@ -22,6 +22,9 @@ export const useAppStore = defineStore("app", () => {
   /** 设备类型 */
   const device = ref<DeviceEnum>(DeviceEnum.Desktop)
 
+  /** 全屏 */
+  const isFullscreen = ref<boolean>(false)
+
   /** 监听侧边栏 opened 状态 */
   watch(
     () => sidebar.opened,
@@ -42,6 +45,10 @@ export const useAppStore = defineStore("app", () => {
   const toggleDevice = (value: DeviceEnum) => {
     device.value = value
   }
+  /** 全屏状态改变 */
+  const fullscreenStateChange = (state: boolean) => {
+    isFullscreen.value = state
+  }
 
-  return { device, sidebar, toggleSidebar, closeSidebar, toggleDevice }
+  return { device, sidebar, isFullscreen, toggleSidebar, closeSidebar, toggleDevice, fullscreenStateChange }
 })