feat: 全屏

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",

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"]: "个人信息",

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;