fix: 修复内容区全屏时顶部存在的间隙以及部分模态框不能显示的问题

src/components/Screenfull/index.vue

@@ -35,6 +35,8 @@ const handleFullscreenClick = () => {
 }
 const handleFullscreenChange = () => {
   isFullscreen.value = screenfull.isFullscreen
+  // 退出全屏时清除所有的 class
+  isFullscreen.value || (document.body.className = "")
 }
 watchEffect((onCleanup) => {
   // 挂载组件时自动执行
@@ -55,8 +57,17 @@ const contentLargeSvgName = computed(() => {
   return isContentLarge.value ? "fullscreen-exit" : "fullscreen"
 })
 const handleContentLargeClick = () => {
-  document.body.className = !isContentLarge.value ? "content-large" : ""
   isContentLarge.value = !isContentLarge.value
+  // 内容区放大时，将不需要的组件隐藏
+  document.body.className = isContentLarge.value ? "content-large" : ""
+}
+const handleContentFullClick = () => {
+  // 取消内容区放大
+  isContentLarge.value && handleContentLargeClick()
+  // 内容区全屏时，将不需要的组件隐藏
+  document.body.className = "content-full"
+  // 开启全屏
+  handleFullscreenClick()
 }
 //#endregion
 </script>
@@ -68,14 +79,14 @@ const handleContentLargeClick = () => {
       <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
     </el-tooltip>
     <!-- 内容区 -->
-    <el-dropdown v-else>
+    <el-dropdown v-else :disabled="isFullscreen">
       <SvgIcon :name="contentLargeSvgName" />
       <template #dropdown>
         <el-dropdown-menu>
           <!-- 内容区放大 -->
           <el-dropdown-item @click="handleContentLargeClick">{{ contentLargeTips }}</el-dropdown-item>
           <!-- 内容区全屏 -->
-          <el-dropdown-item @click="handleFullscreenClick" :disabled="isFullscreen">内容区全屏</el-dropdown-item>
+          <el-dropdown-item @click="handleContentFullClick">内容区全屏</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>

src/layouts/components/TagsView/ScrollPane.vue

@@ -114,7 +114,7 @@ listenerRouteChange(() => {
     <el-icon class="arrow right" @click="scrollTo('right')">
       <ArrowRight />
     </el-icon>
-    <Screenfull v-if="settingsStore.showScreenfull" element=".app-main" :content="true" class="screenfull" />
+    <Screenfull v-if="settingsStore.showScreenfull" :content="true" class="screenfull" />
   </div>
 </template>
 

src/layouts/components/TagsView/index.vue

@@ -196,6 +196,7 @@ onMounted(() => {
   width: 100%;
   background-color: var(--v3-header-bg-color);
   box-shadow: 0 0 3px 0 #00000010;
+  overflow: hidden;
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;

src/styles/variables.css

@@ -42,3 +42,16 @@ body.content-large {
   --v3-sidebar-width: 0px;
   --v3-sidebar-hide-width: 0px;
 }
+
+/** 内容区全屏时，将不需要的组件隐藏 */
+body.content-full {
+  /** Header 区域 */
+  --v3-header-height: 0px;
+  /** NavigationBar 组件 */
+  --v3-navigationbar-height: 0px;
+  /** Sidebar 组件 */
+  --v3-sidebar-width: 0px;
+  --v3-sidebar-hide-width: 0px;
+  /** TagsView 组件 */
+  --v3-tagsview-height: 0px;
+}