From 9557c5679ee634a22f64e37d6b854d10d0ddad6b Mon Sep 17 00:00:00 2001
From: Sunny-117 <73089592+Sunny-117@users.noreply.github.com>
Date: Sat, 12 Nov 2022 10:17:05 +0800
Subject: [PATCH] feat: add full screen in area feature (#30)

---
 src/components/Screenfull/index.vue           | 10 ++++++-
 src/layout/components/TagsView/ScrollPane.vue | 28 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index ad315c9..5f3a92a 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -3,17 +3,25 @@ import { ref, onUnmounted } from "vue"
 import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
+const props = defineProps({
+  areaScreenFull: {
+    type: Boolean,
+    required: false
+  }
+})
+
 type contentType = "全屏" | "退出全屏"
 
 const content = ref<contentType>("全屏")
 const isFullscreen = ref(false)
 
 const click = () => {
+  const element = document.querySelector(".app-container") || undefined
   if (!screenfull.isEnabled) {
     ElMessage.warning("您的浏览器无法工作")
     return
   }
-  screenfull.toggle()
+  screenfull.toggle(props.areaScreenFull ? element : undefined)
 }
 
 const change = () => {
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 438f4af..d616e0e 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { ElScrollbar } from "element-plus"
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
+import { useSettingsStore } from "@/store/modules/settings"
+import Screenfull from "@/components/Screenfull/index.vue"
+
+const settingsStore = useSettingsStore()
 
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
 const scrollbarContentRef = ref<HTMLDivElement>()
@@ -34,6 +38,9 @@ const scrollTo = (direction: "left" | "right") => {
   }
   scrollbarRef.value!.setScrollLeft(scrollLeft)
 }
+const showScreenfull = computed(() => {
+  return settingsStore.showScreenfull
+})
 </script>
 
 <template>
@@ -49,6 +56,7 @@ const scrollTo = (direction: "left" | "right") => {
     <el-icon class="arrow right" @click="scrollTo('right')">
       <ArrowRight />
     </el-icon>
+    <Screenfull :areaScreenFull="true" v-if="showScreenfull" class="right-menu-item" />
   </div>
 </template>
 
@@ -77,5 +85,23 @@ const scrollTo = (direction: "left" | "right") => {
       display: inline-block;
     }
   }
+
+  .right-menu-item {
+    padding: 0 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    .right-menu-avatar {
+      display: flex;
+      align-items: center;
+      .el-avatar {
+        margin-right: 10px;
+      }
+      span {
+        font-size: 16px;
+      }
+    }
+  }
 }
 </style>