feat: 添加页脚 (#758)

feat: 添加页脚

src/layout/components/appMain.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Footer from "./footer/index.vue";
 import { useGlobal } from "@pureadmin/utils";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { h, computed, Transition, defineComponent } from "vue";
@@ -24,6 +25,10 @@ const hideTabs = computed(() => {
   return $storage?.configure.hideTabs;
 });
 
+const hideFooter = computed(() => {
+  return $storage?.configure.hideFooter;
+});
+
 const layout = computed(() => {
   return $storage?.layout.layout === "vertical";
 });
@@ -32,9 +37,15 @@ const getSectionStyle = computed(() => {
   return [
     hideTabs.value && layout ? "padding-top: 48px;" : "",
     !hideTabs.value && layout ? "padding-top: 85px;" : "",
-    hideTabs.value && !layout.value ? "padding-top: 48px" : "",
+    hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
     !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
-    props.fixedHeader ? "" : "padding-top: 0;"
+    props.fixedHeader
+      ? ""
+      : `padding-top: 0;${
+          hideTabs.value
+            ? "min-height: calc(100vh - 48px);"
+            : "min-height: calc(100vh - 86px);"
+        }`
   ];
 });
 
@@ -78,30 +89,44 @@ const transitionMain = defineComponent({
   >
     <router-view>
       <template #default="{ Component, route }">
-        <el-scrollbar v-if="props.fixedHeader">
+        <el-scrollbar
+          v-if="props.fixedHeader"
+          :wrap-style="{
+            display: 'flex'
+          }"
+          :view-style="{
+            display: 'flex',
+            flex: 'auto',
+            overflow: 'auto',
+            'flex-direction': 'column'
+          }"
+        >
           <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
             <backTop />
           </el-backtop>
-          <transitionMain :route="route">
-            <keep-alive
-              v-if="isKeepAlive"
-              :include="usePermissionStoreHook().cachePageList"
-            >
+          <div class="grow">
+            <transitionMain :route="route">
+              <keep-alive
+                v-if="isKeepAlive"
+                :include="usePermissionStoreHook().cachePageList"
+              >
+                <component
+                  :is="Component"
+                  :key="route.fullPath"
+                  class="main-content"
+                />
+              </keep-alive>
               <component
+                v-else
                 :is="Component"
                 :key="route.fullPath"
                 class="main-content"
               />
-            </keep-alive>
-            <component
-              v-else
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
+            </transitionMain>
+          </div>
+          <Footer v-if="!hideFooter" />
         </el-scrollbar>
-        <div v-else>
+        <div v-else class="grow">
           <transitionMain :route="route">
             <keep-alive
               v-if="isKeepAlive"
@@ -123,6 +148,9 @@ const transitionMain = defineComponent({
         </div>
       </template>
     </router-view>
+
+    <!-- 页脚 -->
+    <Footer v-if="!hideFooter && !props.fixedHeader" />
   </section>
 </template>
 
@@ -136,8 +164,9 @@ const transitionMain = defineComponent({
 
 .app-main-nofixed-header {
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  min-height: 100vh;
 }
 
 .main-content {