feat: 全屏切换组件

components.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     Role: typeof import('./src/views/system/role/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScreenFull: typeof import('./src/components/ScreenFull/index.vue')['default']
     Sidebar: typeof import('./src/layout/components/Sidebar/index.vue')['default']
     SidebarItem: typeof import('./src/layout/components/Sidebar/SidebarItem.vue')['default']
     SidebarItemLink: typeof import('./src/layout/components/Sidebar/SidebarItemLink.vue')['default']

package.json

@@ -22,6 +22,7 @@
     "path-to-regexp": "^8.2.0",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.3.0",
+    "screenfull": "^6.0.2",
     "unplugin-element-plus": "^0.9.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

pnpm-lock.yaml

@@ -28,6 +28,9 @@ dependencies:
   pinia-plugin-persistedstate:
     specifier: ^4.3.0
     version: 4.3.0(pinia@3.0.1)
+  screenfull:
+    specifier: ^6.0.2
+    version: 6.0.2
   unplugin-element-plus:
     specifier: ^0.9.1
     version: 0.9.1
@@ -3456,6 +3459,11 @@ packages:
       '@parcel/watcher': 2.5.1
     dev: true
 
+  /screenfull@6.0.2:
+    resolution: {integrity: sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: false
+
   /scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 

src/components/ScreenFull/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg-icon
+    custom-class="w-2em h-2em"
+    :icon-name="
+      isFullScreen
+        ? 'ant-design:fullscreen-exit-outlined'
+        : 'ant-design:fullscreen-outlined'
+    "
+    @click="handleClick"
+  ></svg-icon>
+</template>
+<script lang="ts" setup>
+import screenfull from "screenfull";
+
+const isFullScreen = ref(false);
+const { proxy } = getCurrentInstance()!;
+
+function handleClick() {
+  // 检查浏览器是否支持全屏 API
+  if (!screenfull.isEnabled) {
+    proxy!.$message("浏览器不支持全屏 API");
+    return;
+  }
+  screenfull.toggle();
+}
+
+function updateFullscreenStatus() {
+  isFullScreen.value = screenfull.isFullscreen;
+}
+
+// 组件挂载完成后执行的生命周期钩子函数
+onMounted(() => {
+  if (screenfull.isEnabled) {
+    // 监听全屏状态变化事件
+    screenfull.on("change", updateFullscreenStatus);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (screenfull.isEnabled) {
+    // 移除全屏状态变化事件的监听器
+    screenfull.off("change", updateFullscreenStatus);
+  }
+});
+</script>

src/layout/components/Navbar.vue

@@ -7,6 +7,10 @@
     ></hamburger>
     <!-- 面包屑导航组件 -->
     <bread-crumb></bread-crumb>
+    <!-- 全屏切换组件 -->
+    <div flex justify-end flex-1 items-center mr-20px>
+      <screen-full mx-5px></screen-full>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>