From 6822a490c73af1447d4e78c8202f0b5887bc2e4f Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Tue, 28 May 2024 14:54:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F(=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain/index.vue | 65 ++++----------------
 src/layout/index.vue                    | 80 ++++---------------------
 src/styles/variables.module.scss        |  1 +
 3 files changed, 22 insertions(+), 124 deletions(-)

diff --git a/src/layout/components/AppMain/index.vue b/src/layout/components/AppMain/index.vue
index c8017b28..d480f1a3 100644
--- a/src/layout/components/AppMain/index.vue
+++ b/src/layout/components/AppMain/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main">
+  <section class="app-main" :style="{ minHeight: minHeight }">
     <router-view>
       <template #default="{ Component, route }">
         <transition
@@ -16,67 +16,22 @@
 </template>
 
 <script setup lang="ts">
-import { useTagsViewStore } from "@/store";
+import { useSettingsStore, useTagsViewStore } from "@/store";
+import variables from "@/styles/variables.module.scss";
 
 const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
+const minHeight = computed(() => {
+  if (useSettingsStore().tagsView) {
+    return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
+  } else {
+    return `calc(100vh - ${variables["navbar-height"]})`;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
 .app-main {
   position: relative;
-  width: 100%;
-  min-height: calc(100vh - $navbar-height);
-  overflow: hidden;
   background-color: var(--el-bg-color-page);
 }
-
-.hasTagsView .app-main {
-  min-height: calc(100vh - $navbar-height - $tags-view-height);
-}
-
-.fixed-header + .app-main {
-  min-height: 100vh;
-  padding-top: $navbar-height;
-}
-
-.hasTagsView .fixed-header + .app-main {
-  min-height: 100vh;
-  padding-top: $navbar-height + $tags-view-height;
-}
-
-.layout-mix,
-.layout-top {
-  .fixed-header + .app-main {
-    padding-top: 0;
-  }
-}
-
-.layout-mix {
-  .app-main {
-    height: calc(100vh - $navbar-height);
-    padding-top: 0;
-    overflow-y: auto;
-  }
-
-  .hasTagsView .app-main {
-    height: calc(100vh - $navbar-height - $tags-view-height);
-    min-height: calc(100vh - $navbar-height - $tags-view-height);
-  }
-
-  .fixed-header + .app-main {
-    min-height: calc(100vh - $navbar-height);
-  }
-
-  .hasTagsView .fixed-header + .app-main {
-    height: calc(100vh - $navbar-height);
-    min-height: calc(100vh - $navbar-height);
-    padding-top: $tags-view-height;
-  }
-}
-
-.layout-top {
-  .hasTagsView .fixed-header + .app-main {
-    padding-top: $tags-view-height;
-  }
-}
 </style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3155f1a1..ac5a3a4f 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -109,15 +109,6 @@ watch(route, () => {
 </script>
 
 <style lang="scss" scoped>
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - $sidebar-width);
-  transition: width 0.28s;
-}
-
 .sidebar-container {
   position: fixed;
   top: 0;
@@ -125,8 +116,6 @@ watch(route, () => {
   left: 0;
   z-index: 999;
   width: $sidebar-width;
-  height: 100%;
-  overflow: hidden;
   background-color: $menu-background;
   transition: width 0.28s;
 
@@ -137,18 +126,22 @@ watch(route, () => {
 
 .main-container {
   position: relative;
-  min-height: 100%;
+  height: 100%;
   margin-left: $sidebar-width;
+  overflow-y: auto;
   transition: margin-left 0.28s;
+
+  .fixed-header {
+    position: sticky;
+    top: 0;
+    z-index: 9;
+    transition: width 0.28s;
+  }
 }
 
 .layout-top {
-  .fixed-header {
-    top: $navbar-height;
-    width: 100%;
-  }
-
   .sidebar-container {
+    position: sticky;
     z-index: 999;
     display: flex;
     width: 100% !important;
@@ -172,8 +165,7 @@ watch(route, () => {
   }
 
   .main-container {
-    min-height: calc(100vh - $navbar-height);
-    padding-top: $navbar-height;
+    height: calc(100vh - $navbar-height);
     margin-left: 0;
   }
 }
@@ -240,30 +232,16 @@ watch(route, () => {
       flex: 1;
       min-width: 0;
       margin-left: 0;
-
-      .fixed-header {
-        top: $navbar-height;
-      }
     }
   }
 }
 
 .hideSidebar {
-  .fixed-header {
-    left: $sidebar-width-collapsed;
-    width: calc(100% - $sidebar-width-collapsed);
-  }
-
   .main-container {
     margin-left: $sidebar-width-collapsed;
   }
 
   &.layout-top {
-    .fixed-header {
-      left: 0;
-      width: 100%;
-    }
-
     .main-container {
       margin-left: 0;
     }
@@ -272,7 +250,6 @@ watch(route, () => {
   &.layout-mix {
     .fixed-header {
       left: $sidebar-width-collapsed;
-      width: calc(100% - $sidebar-width-collapsed);
     }
 
     .sidebar-container {
@@ -308,39 +285,4 @@ watch(route, () => {
     }
   }
 }
-
-.mobile {
-  .fixed-header {
-    left: 0;
-    width: 100%;
-  }
-
-  .main-container {
-    margin-left: 0;
-  }
-
-  &.layout-top {
-    .sidebar-container {
-      z-index: 999;
-      display: flex;
-      width: 100% !important;
-      height: $navbar-height;
-
-      :deep(.el-scrollbar) {
-        flex: 1;
-        min-width: 0;
-        height: $navbar-height;
-      }
-    }
-
-    .main-container {
-      padding-top: $navbar-height;
-      margin-left: 0;
-      overflow: hidden;
-    }
-
-    // 顶部模式全局变量修改
-    --el-menu-item-height: $navbar-height;
-  }
-}
 </style>
diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss
index 70aa10b5..20a624d7 100644
--- a/src/styles/variables.module.scss
+++ b/src/styles/variables.module.scss
@@ -2,6 +2,7 @@
 :export {
   sidebar-width: $sidebar-width;
   navbar-height: $navbar-height;
+  tags-view-height: $tags-view-height;
   menu-background: $menu-background;
   menu-text: $menu-text;
   menu-active-text: $menu-active-text;