新增全屏操作按钮

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

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