refactor: ♻️ 重构布局样式(解决页面抖动问题)

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>