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

un-pany · Mar 22, 2024 · 952b327 · 952b327
1 parent b798721
commit 952b327
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}