fix: 修复取消固定头部问题 (#75)

* fix: 修复取消固定头部问题

* perf: simplify the layout code

src/layout/components/appMain.vue

@@ -1,42 +1,72 @@
 <script setup lang="ts">
-import { ref, computed, getCurrentInstance } from "vue";
+import {
+  h,
+  ref,
+  computed,
+  Transition,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+import { RouterView } from "vue-router";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
+const props = defineProps({
+  fixedHeader: Boolean
+});
 const keepAlive: Boolean = ref(
   getCurrentInstance().appContext.config.globalProperties.$config?.KeepAlive
 );
 
-const transition = computed(() => {
+const transitions = computed(() => {
   return route => {
     return route.meta.transition;
   };
 });
+
+const transitionMain = defineComponent({
+  render() {
+    return h(
+      Transition,
+      {
+        name:
+          transitions.value(this.route) &&
+          this.route.meta.transition.enterTransition
+            ? "pure-classes-transition"
+            : (transitions.value(this.route) &&
+                this.route.meta.transition.name) ||
+              "fade-transform",
+        enterActiveClass:
+          transitions.value(this.route) &&
+          `animate__animated ${this.route.meta.transition.enterTransition}`,
+        leaveActiveClass:
+          transitions.value(this.route) &&
+          `animate__animated ${this.route.meta.transition.leaveTransition}`,
+        mode: "out-in",
+        appear: true
+      },
+      {
+        default: () => [this.$slots.default()]
+      }
+    );
+  },
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  }
+});
 </script>
 
 <template>
-  <section class="app-main">
-    <el-scrollbar>
-      <el-backtop target=".app-main .el-scrollbar__wrap"></el-backtop>
-      <router-view>
-        <template #default="{ Component, route }">
-          <transition
-            :name="
-              transition(route) && route.meta.transition.enterTransition
-                ? 'pure-classes-transition'
-                : (transition(route) && route.meta.transition.name) ||
-                  'fade-transform'
-            "
-            :enter-active-class="
-              transition(route) &&
-              `animate__animated ${route.meta.transition.enterTransition}`
-            "
-            :leave-active-class="
-              transition(route) &&
-              `animate__animated ${route.meta.transition.leaveTransition}`
-            "
-            mode="out-in"
-            appear
-          >
+  <section
+    :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+  >
+    <router-view>
+      <template #default="{ Component, route }">
+        <el-scrollbar v-if="props.fixedHeader">
+          <el-backtop target=".app-main .el-scrollbar__wrap"></el-backtop>
+          <transitionMain :route="route">
             <keep-alive
               v-if="keepAlive"
               :include="usePermissionStoreHook().cachePageList"
@@ -44,10 +74,21 @@ const transition = computed(() => {
               <component :is="Component" :key="route.fullPath" />
             </keep-alive>
             <component v-else :is="Component" :key="route.fullPath" />
-          </transition>
-        </template>
-      </router-view>
-    </el-scrollbar>
+          </transitionMain>
+        </el-scrollbar>
+        <div v-else>
+          <transitionMain :route="route">
+            <keep-alive
+              v-if="keepAlive"
+              :include="usePermissionStoreHook().cachePageList"
+            >
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+            <component v-else :is="Component" :key="route.fullPath" />
+          </transitionMain>
+        </div>
+      </template>
+    </router-view>
   </section>
 </template>
 
@@ -58,4 +99,10 @@ const transition = computed(() => {
   position: relative;
   overflow-x: hidden;
 }
+
+.app-main-nofixed-header {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+}
 </style>