From 08d275793b28e29e54262813d740249a47b64819 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Sat, 12 Nov 2022 13:53:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BD=BF=E5=85=B6=E6=9B=B4?=
 =?UTF-8?q?=E5=A5=BD=E5=9C=B0=E6=94=AF=E6=8C=81=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Screenfull/index.vue           | 31 ++++++++++++-------
 src/layout/components/AppMain.vue             |  1 +
 src/layout/components/TagsView/ScrollPane.vue | 17 ++--------
 src/styles/theme/core/layout.scss             |  1 -
 src/styles/theme/core/other.scss              |  1 +
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 5f3a92a..4463f92 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -4,29 +4,38 @@ import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
 const props = defineProps({
-  areaScreenFull: {
-    type: Boolean,
-    required: false
+  /** 全屏的元素，默认是 html */
+  element: {
+    type: String,
+    default: "html"
+  },
+  /** 打开全屏提示语 */
+  openTips: {
+    type: String,
+    default: "全屏"
+  },
+  /** 关闭全屏提示语 */
+  exitTips: {
+    type: String,
+    default: "退出全屏"
   }
 })
 
-type contentType = "全屏" | "退出全屏"
-
-const content = ref<contentType>("全屏")
-const isFullscreen = ref(false)
+const tips = ref<string>(props.openTips)
+const isFullscreen = ref<boolean>(false)
 
 const click = () => {
-  const element = document.querySelector(".app-container") || undefined
+  const dom = document.querySelector(props.element) || undefined
   if (!screenfull.isEnabled) {
     ElMessage.warning("您的浏览器无法工作")
     return
   }
-  screenfull.toggle(props.areaScreenFull ? element : undefined)
+  screenfull.toggle(dom)
 }
 
 const change = () => {
   isFullscreen.value = screenfull.isFullscreen
-  content.value = screenfull.isFullscreen ? "退出全屏" : "全屏"
+  tips.value = screenfull.isFullscreen ? props.exitTips : props.openTips
 }
 
 screenfull.on("change", change)
@@ -40,7 +49,7 @@ onUnmounted(() => {
 
 <template>
   <div @click="click">
-    <el-tooltip effect="dark" :content="content" placement="bottom">
+    <el-tooltip effect="dark" :content="tips" placement="bottom">
       <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
     </el-tooltip>
   </div>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 7aa487d..634e7ed 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -26,6 +26,7 @@ const key = computed(() => {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color: var(--v3-body-bg-color);
 }
 
 .fixed-header + .app-main {
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index d616e0e..247733e 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -56,7 +56,7 @@ const showScreenfull = computed(() => {
     <el-icon class="arrow right" @click="scrollTo('right')">
       <ArrowRight />
     </el-icon>
-    <Screenfull :areaScreenFull="true" v-if="showScreenfull" class="right-menu-item" />
+    <Screenfull v-if="showScreenfull" element=".app-main" openTips="内容区全屏" class="screenfull" />
   </div>
 </template>
 
@@ -85,23 +85,12 @@ const showScreenfull = computed(() => {
       display: inline-block;
     }
   }
-
-  .right-menu-item {
-    padding: 0 10px;
+  .screenfull {
+    width: 40px;
     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>
diff --git a/src/styles/theme/core/layout.scss b/src/styles/theme/core/layout.scss
index 133944d..1553550 100644
--- a/src/styles/theme/core/layout.scss
+++ b/src/styles/theme/core/layout.scss
@@ -1,7 +1,6 @@
 /** Layout 相关 */
 
 .app-wrapper {
-  background-color: $theme-bg-color;
   color: $font-color;
 
   // 侧边栏
diff --git a/src/styles/theme/core/other.scss b/src/styles/theme/core/other.scss
index cbb15b3..d32d6fe 100644
--- a/src/styles/theme/core/other.scss
+++ b/src/styles/theme/core/other.scss
@@ -1,6 +1,7 @@
 /** 这里可以写业务页面的黑暗样式 */
 
 .app-main {
+  background-color: $theme-bg-color !important;
   // 指令权限页面 @/views/permission/directive.vue
   .permission-alert {
     background-color: lighten($theme-bg-color, 8%);