From 8d2824fe82d732cd8c2f75bb7f8d9136eb5c2ac1 Mon Sep 17 00:00:00 2001
From: lrl <742798240@qq.com>
Date: Sun, 24 Oct 2021 14:19:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=9A=90=E8=97=8F=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/setting/index.vue |  7 +----
 src/layout/components/tag/index.vue     |  4 +--
 src/style/sidebar.scss                  | 38 ++++++++++++++++++-------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 2701ecc57..157487407 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { split } from "lodash-es";
-import { nextTick } from "vue";
 import panel from "../panel/index.vue";
 import { useRouter } from "vue-router";
 import { emitter } from "/@/utils/mitt";
@@ -52,11 +51,7 @@ if (settings.tagsVal === null) {
   localOperate("tagsVal", false, "set");
   settings.tagsVal = false;
 }
-nextTick(() => {
-  window.document
-    .querySelector(".app-main")
-    ?.setAttribute("data-show-tag", settings.tagsVal);
-});
+window.document.body.setAttribute("data-show-tag", settings.tagsVal);
 
 function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
   const targetEl = target || document.body;
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index bfeee7e28..095b9918c 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -447,9 +447,7 @@ onBeforeMount(() => {
   emitter.on("tagViewsChange", key => {
     if (unref(showTags) === key) return;
     showTags.value = key;
-    window.document
-      .querySelector(".app-main")
-      ?.setAttribute("data-show-tag", key);
+    window.document.body.setAttribute("data-show-tag", key);
   });
 
   // 改变标签风格
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 81d49e146..1223bd6c6 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -533,14 +533,6 @@
 }
 
 body[data-layout="vertical"] {
-  .fixed-header + .app-main[data-show-tag="false"] {
-    padding-top: 85px;
-  }
-
-  .fixed-header + .app-main[data-show-tag="true"] {
-    padding-top: 48px;
-  }
-
   .hideSidebar {
     .fixed-header {
       width: calc(100% - 54px) !important;
@@ -596,12 +588,36 @@ body[data-layout="horizontal"] {
     width: 100% !important;
     transition: none !important;
   }
+}
 
-  .fixed-header + .app-main[data-show-tag="false"] {
-    padding-top: 100px;
+// vertical模式下不隐藏标签页
+body[data-layout="vertical"][data-show-tag="false"] {
+  .fixed-header + .app-main {
+    padding-top: 85px;
+  }
+}
+
+// vertical模式下隐藏标签页
+body[data-layout="vertical"][data-show-tag="true"] {
+  .fixed-header + .app-main {
+    padding-top: 48px;
+  }
+}
+
+// horizontal模式下不隐藏标签页
+body[data-layout="horizontal"][data-show-tag="false"] {
+  .fixed-header + .app-main {
+    padding-top: 98px;
+  }
+}
+
+// horizontal模式下隐藏标签页
+body[data-layout="horizontal"][data-show-tag="true"] {
+  .fixed-header {
+    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
   }
 
-  .fixed-header + .app-main[data-show-tag="true"] {
+  .fixed-header + .app-main {
     padding-top: 62px;
   }
 }