From c16c138c978463227ff9e35d0456f1589bcb8e8c Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Fri, 3 May 2024 16:00:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/modules/enUS.ts               |  1 +
 src/lang/modules/zhCN.ts               |  1 +
 src/layout/components/Header/index.vue | 22 +++++++++++++++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lang/modules/enUS.ts b/src/lang/modules/enUS.ts
index 6975735..f21ab9a 100644
--- a/src/lang/modules/enUS.ts
+++ b/src/lang/modules/enUS.ts
@@ -32,6 +32,7 @@ export default {
     ["switch-to-night-mode"]: "switch to night mode",
     ["switch-to-daytime-mode"]: "switch to daytime mode",
     ["full-screen"]: "full screen",
+    ["exit-full-screen"]: "exit full screen",
     ["system-settings"]: "system settings",
     ["theme-settings"]: "theme settings",
     ["personal-information"]: "personal information",
diff --git a/src/lang/modules/zhCN.ts b/src/lang/modules/zhCN.ts
index 528dd4e..ec99abf 100644
--- a/src/lang/modules/zhCN.ts
+++ b/src/lang/modules/zhCN.ts
@@ -32,6 +32,7 @@ export default {
     ["switch-to-night-mode"]: "切换黑夜模式",
     ["switch-to-daytime-mode"]: "切换白天模式",
     ["full-screen"]: "全屏",
+    ["exit-full-screen"]: "退出全屏",
     ["system-settings"]: "系统设置",
     ["theme-settings"]: "主题设置",
     ["personal-information"]: "个人信息",
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 381261f..428c0bb 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -45,10 +45,11 @@
         <template #content><Notice /></template>
       </a-popover>
       <!-- 全屏 -->
-      <a-tooltip :content="$t(`language.full-screen`)">
-        <a-button size="mini" type="text" class="icon_btn">
+      <a-tooltip :content="$t(`language.${fullScreen ? 'full-screen' : 'exit-full-screen'}`)">
+        <a-button size="mini" type="text" class="icon_btn" @click="onFullScreen">
           <template #icon>
-            <icon-fullscreen :size="18" />
+            <icon-fullscreen :size="18" v-if="fullScreen" />
+            <icon-fullscreen-exit :size="18" v-else />
           </template>
         </a-button>
       </a-tooltip>
@@ -127,10 +128,25 @@ const router = useRouter();
 const themeStore = useThemeConfig();
 const { collapsed, language, darkMode } = storeToRefs(themeStore);
 
+// 折叠
 const onCollapsed = () => {
   themeStore.setCollapsed(!collapsed.value);
 };
 
+// 全屏
+const fullScreen = ref(true);
+const onFullScreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+    fullScreen.value = false;
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+      fullScreen.value = true;
+    }
+  }
+};
+
 // 黑暗模式
 const onNightMode = () => {
   darkMode.value = !darkMode.value;