feat: 拓展全屏组件，支持内容区放大和内容区全屏两种模式

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>
 

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>
 

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;
+}