From 7f132edb72086df842952a54685a30106a245807 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 13 Sep 2023 17:57:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=8F=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/RightContent.vue | 16 +++++++---------
 src/utils/fullscreen-utils.ts           | 25 +++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/fullscreen-utils.ts

diff --git a/src/layouts/components/RightContent.vue b/src/layouts/components/RightContent.vue
index c2492fc0..8cc47fe9 100644
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
 import { useRouter } from 'vue-router';
+import { toggle, isFullscreen } from '@/utils/fullscreen-utils';
 import useI18n from '@/hooks/useI18n';
 import useUserStore from '@/store/modules/user';
 const { t, changeLocale } = useI18n();
@@ -69,18 +70,15 @@ function fnChangeLocale(e: any) {
       </a-button>
     </a-tooltip> -->
 
-    <!-- <a-tooltip>
-      <template #title>文档手册</template>
-      <a-button
-        type="text"
-        href="https://juejin.cn/column/7188761626017792056"
-        target="_blank"
-      >
+    <a-tooltip>
+      <template #title>全屏显示</template>
+      <a-button type="text" @click="toggle">
         <template #icon>
-          <QuestionCircleOutlined :style="{ fontSize: '20px' }" />
+          <FullscreenExitOutlined v-if="isFullscreen()" />
+          <FullscreenOutlined v-else />
         </template>
       </a-button>
-    </a-tooltip> -->
+    </a-tooltip>
 
     <a-dropdown :trigger="['click', 'hover']">
       <a-button size="small" type="default">
diff --git a/src/utils/fullscreen-utils.ts b/src/utils/fullscreen-utils.ts
new file mode 100644
index 00000000..801b9516
--- /dev/null
+++ b/src/utils/fullscreen-utils.ts
@@ -0,0 +1,25 @@
+/**进入全屏 */
+function enterFullscreen() {
+  const element = document.documentElement;
+
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  }
+}
+
+/**退出全屏 */
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  }
+}
+
+/**是否全屏 */
+export function isFullscreen() {
+  return !!document.fullscreenElement;
+}
+
+/**变更 */
+export function toggle() {
+  return isFullscreen() ? exitFullscreen() : enterFullscreen();
+}