From 4583495aa3907bf0caa66400b6272d73ffe47088 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Mon, 22 Aug 2022 15:29:29 +0800
Subject: [PATCH] refactor: Screenfull Component

---
 src/components/Screenfull/index.vue | 35 ++++++++++++++++++++++++-----
 src/icons/svg/fullscreen-exit.svg   |  1 +
 src/icons/svg/fullscreen.svg        |  1 +
 src/styles/theme/theme.scss         |  8 +------
 4 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 src/icons/svg/fullscreen-exit.svg
 create mode 100644 src/icons/svg/fullscreen.svg

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index aa06539..ad315c9 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,8 +1,13 @@
 <script lang="ts" setup>
+import { ref, onUnmounted } from "vue"
 import { ElMessage } from "element-plus"
-import { FullScreen } from "@element-plus/icons-vue"
 import screenfull from "screenfull"
 
+type contentType = "全屏" | "退出全屏"
+
+const content = ref<contentType>("全屏")
+const isFullscreen = ref(false)
+
 const click = () => {
   if (!screenfull.isEnabled) {
     ElMessage.warning("您的浏览器无法工作")
@@ -10,14 +15,34 @@ const click = () => {
   }
   screenfull.toggle()
 }
+
+const change = () => {
+  isFullscreen.value = screenfull.isFullscreen
+  content.value = screenfull.isFullscreen ? "退出全屏" : "全屏"
+}
+
+screenfull.on("change", change)
+
+onUnmounted(() => {
+  if (screenfull.isEnabled) {
+    screenfull.off("change", change)
+  }
+})
 </script>
 
 <template>
   <div @click="click">
-    <el-tooltip effect="dark" content="全屏" placement="bottom">
-      <el-icon :size="20">
-        <FullScreen />
-      </el-icon>
+    <el-tooltip effect="dark" :content="content" placement="bottom">
+      <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
     </el-tooltip>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.svg-icon {
+  font-size: 20px;
+  &:focus {
+    outline: none;
+  }
+}
+</style>
diff --git a/src/icons/svg/fullscreen-exit.svg b/src/icons/svg/fullscreen-exit.svg
new file mode 100644
index 0000000..42aa505
--- /dev/null
+++ b/src/icons/svg/fullscreen-exit.svg
@@ -0,0 +1 @@
+<svg t="1661153147729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200"><path d="M704 864v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m-256 704v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3353"></path></svg>
diff --git a/src/icons/svg/fullscreen.svg b/src/icons/svg/fullscreen.svg
new file mode 100644
index 0000000..a97be9e
--- /dev/null
+++ b/src/icons/svg/fullscreen.svg
@@ -0,0 +1 @@
+<svg t="1661151768669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3212" width="200" height="200"><path d="M192 384v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m768-256v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3213"></path></svg>
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index ae2a06c..e1d8f66 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -30,15 +30,9 @@
     .navbar {
       background-color: $theme-bg-color;
       .right-menu {
-        .el-icon {
+        .svg-icon {
           color: $font-color;
         }
-        .el-avatar {
-          background: lighten($theme-bg-color, 20%);
-          .el-icon {
-            color: #fff;
-          }
-        }
       }
     }