From 57d1df3f6e7cf37917b76c9f4127757822967af5 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 29 Jun 2023 12:43:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=93=E5=B1=95=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=8C=BA=E6=94=BE=E5=A4=A7=E5=92=8C=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E4=B8=A4=E7=A7=8D=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Screenfull/index.vue           | 67 ++++++++++++++-----
 src/layout/components/TagsView/ScrollPane.vue |  2 +-
 src/styles/variables.css                      | 12 +++-
 3 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 252ff8a..9259a2f 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,51 +1,84 @@
 <script lang="ts" setup>
-import { ref, watchEffect } from "vue"
+import { computed, ref, watchEffect } from "vue"
 import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
 interface Props {
+  /** 全屏的元素，默认是 html */
   element?: string
+  /** 打开全屏提示语 */
   openTips?: string
+  /** 关闭全屏提示语 */
   exitTips?: string
+  /** 是否只针对内容区 */
+  content?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  /** 全屏的元素，默认是 html */
   element: "html",
-  /** 打开全屏提示语 */
   openTips: "全屏",
-  /** 关闭全屏提示语 */
-  exitTips: "退出全屏"
+  exitTips: "退出全屏",
+  content: false
 })
 
-const tips = ref<string>(props.openTips)
+//#region 全屏
 const isFullscreen = ref<boolean>(false)
-
-const handleClick = () => {
+const fullscreenTips = computed(() => {
+  return isFullscreen.value ? props.exitTips : props.openTips
+})
+const fullscreenSvgName = computed(() => {
+  return isFullscreen.value ? "fullscreen-exit" : "fullscreen"
+})
+const handleFullscreenClick = () => {
   const dom = document.querySelector(props.element) || undefined
   screenfull.isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
 }
-
-const handleChange = () => {
+const handleFullscreenChange = () => {
   isFullscreen.value = screenfull.isFullscreen
-  tips.value = screenfull.isFullscreen ? props.exitTips : props.openTips
 }
-
 watchEffect((onCleanup) => {
   // 挂载组件时自动执行
-  screenfull.on("change", handleChange)
+  screenfull.on("change", handleFullscreenChange)
   // 卸载组件时自动执行
   onCleanup(() => {
-    screenfull.isEnabled && screenfull.off("change", handleChange)
+    screenfull.isEnabled && screenfull.off("change", handleFullscreenChange)
   })
 })
+//#endregion
+
+//#region 内容区
+const isContentLarge = ref<boolean>(false)
+const contentLargeTips = computed(() => {
+  return isContentLarge.value ? "内容区复原" : "内容区放大"
+})
+const contentLargeSvgName = computed(() => {
+  return isContentLarge.value ? "fullscreen-exit" : "fullscreen"
+})
+const handleContentLargeClick = () => {
+  document.body.className = !isContentLarge.value ? "content-large" : ""
+  isContentLarge.value = !isContentLarge.value
+}
+//#endregion
 </script>
 
 <template>
-  <div @click="handleClick">
-    <el-tooltip effect="dark" :content="tips" placement="bottom">
-      <SvgIcon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+  <div>
+    <!-- 全屏 -->
+    <el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
+      <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
     </el-tooltip>
+    <!-- 内容区 -->
+    <el-dropdown v-else>
+      <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-menu>
+      </template>
+    </el-dropdown>
   </div>
 </template>
 
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 398acfa..9f7c8f4 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -118,7 +118,7 @@ watch(
     <el-icon class="arrow right" @click="scrollTo('right')">
       <ArrowRight />
     </el-icon>
-    <Screenfull v-if="settingsStore.showScreenfull" element=".app-main" open-tips="内容区全屏" class="screenfull" />
+    <Screenfull v-if="settingsStore.showScreenfull" element=".app-main" :content="true" class="screenfull" />
   </div>
 </template>
 
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 3e8da36..6c26a3f 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,5 +1,4 @@
 /** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
-
 :root {
   /** 全局背景色 */
   --v3-body-bg-color: #f2f3f5;
@@ -33,3 +32,14 @@
   /** RightPanel 组件  */
   --v3-rightpanel-button-bg-color: #001428;
 }
+
+/** 内容区放大时，将不需要的组件隐藏 */
+body.content-large {
+  /** Header 区域 = TagsView 组件 */
+  --v3-header-height: var(--v3-tagsview-height);
+  /** NavigationBar 组件 */
+  --v3-navigationbar-height: 0px;
+  /** Sidebar 组件 */
+  --v3-sidebar-width: 0px;
+  --v3-sidebar-hide-width: 0px;
+}