From 952b327261c83b799104f5a31cba8124061aafe1 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 22 Mar 2024 18:58:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=8C=BA=E5=85=A8=E5=B1=8F=E6=97=B6=E9=A1=B6=E9=83=A8=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E7=9A=84=E9=97=B4=E9=9A=99=E4=BB=A5=E5=8F=8A=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=A8=A1=E6=80=81=E6=A1=86=E4=B8=8D=E8=83=BD=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Screenfull/index.vue            | 17 ++++++++++++++---
 src/layouts/components/TagsView/ScrollPane.vue |  2 +-
 src/layouts/components/TagsView/index.vue      |  1 +
 src/styles/variables.css                       | 13 +++++++++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 9259a2f..af5147a 100644
--- a/src/components/Screenfull/index.vue
+++ b/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>
diff --git a/src/layouts/components/TagsView/ScrollPane.vue b/src/layouts/components/TagsView/ScrollPane.vue
index 71a18dc..e7167f4 100644
--- a/src/layouts/components/TagsView/ScrollPane.vue
+++ b/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>
 
diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
index a088baf..62a6fe4 100644
--- a/src/layouts/components/TagsView/index.vue
+++ b/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;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index fae92c1..b769e6d 100644
--- a/src/styles/variables.css
+++ b/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;
+}