增加全屏功能

src/libs/fullscreen.ts

@@ -0,0 +1,36 @@
+import screenfull from "screenfull"
+import { ref } from "vue"
+import { ElMessage } from "element-plus"
+
+export const isFullscreen = ref(false)
+/**
+ * 全屏
+ * @isScreenfull 为true的时候，是全屏的时候 不关闭
+ * @isErr 为false 不提示
+ */
+export const handleFullscreen = (isScreenfull = false, isErr = true) => {
+   if (!screenfull.isEnabled) {
+      isErr &&
+         ElMessage({
+            message: "当前浏览器不支持全屏！",
+            type: "warning"
+         })
+      return
+   }
+   if (isFullscreen.value && isScreenfull) {
+      return
+   }
+   screenfull.toggle()
+}
+
+screenfull.on("change", () => {
+   isFullscreen.value = screenfull.isFullscreen
+})
+
+// 禁用f11
+document.addEventListener("keydown", function (event) {
+   if (event.key === "F11") {
+      event.preventDefault()
+      handleFullscreen()
+   }
+})

src/viewsframe/layout/layout.vue

@@ -32,6 +32,15 @@
                </div>
             </template>
          </el-dropdown>
+         <img
+            @click="
+               () => {
+                  handleFullscreen()
+               }
+            "
+            class="fullscreen"
+            :src="isFullscreen ? require('@/img/layout/fullscreenClose.png') : require('@/img/layout/fullscreen.png')"
+         />
       </div>
       <RouterView />
    </div>
@@ -39,9 +48,9 @@
 
 <script setup lang="ts">
 import userStore from "@/store/modules/user"
-import { computed } from "vue"
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { ElMessage } from "element-plus"
+import { isFullscreen, handleFullscreen } from "@/libs/fullscreen"
 
 const userStoreHook = userStore()
 
@@ -73,7 +82,7 @@ function handleLogout() {
       padding-top: 26px;
       padding-right: 54px;
       display: flex;
-      flex-direction: row-reverse;
+      justify-content: flex-end;
       .avatar-con {
          cursor: pointer;
          padding-left: 30px;
@@ -120,6 +129,15 @@ function handleLogout() {
             }
          }
       }
+      .fullscreen {
+         margin-left: 17px;
+         width: 45px;
+         height: 45px;
+         cursor: pointer;
+         &:active {
+            opacity: $opacity-hover;
+         }
+      }
    }
 }
 .dropdown {

yarn.lock

@@ -5960,7 +5960,7 @@ schema-utils@^4.0.0:
 
 screenfull@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz"
+  resolved "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz#3dbe4b8c4f8f49fb8e33caa8f69d0bca730ab238"
   integrity sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==
 
 seemly@^0.3.6, seemly@^0.3.8: