refactor: 重构全屏组件，使其更好地支持内容区全屏

src/components/Screenfull/index.vue

@@ -4,29 +4,38 @@ import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
 const props = defineProps({
-  areaScreenFull: {
+  /** 全屏的元素，默认是 html */
-    type: Boolean,
+  element: {
-    required: false
+    type: String,
+    default: "html"
+  },
+  /** 打开全屏提示语 */
+  openTips: {
+    type: String,
+    default: "全屏"
+  },
+  /** 关闭全屏提示语 */
+  exitTips: {
+    type: String,
+    default: "退出全屏"
   }
 })
 
-type contentType = "全屏" | "退出全屏"
+const tips = ref<string>(props.openTips)
-
+const isFullscreen = ref<boolean>(false)
-const content = ref<contentType>("全屏")
-const isFullscreen = ref(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>

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 {

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;
     }
   }
-
+  .screenfull {
-  .right-menu-item {
+    width: 40px;
-    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>

src/styles/theme/core/layout.scss

@@ -1,7 +1,6 @@
 /** Layout 相关 */
 
 .app-wrapper {
-  background-color: $theme-bg-color;
   color: $font-color;
 
   // 侧边栏

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%);