feat: 添加页脚 (#758)

feat: 添加页脚

public/platform-config.json

@@ -12,6 +12,7 @@
   "Grey": false,
   "Weak": false,
   "HideTabs": false,
+  "HideFooter": false,
   "SidebarStatus": true,
   "EpThemeColor": "#409EFF",
   "ShowLogo": true,

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">
+          <div class="grow">
-            <keep-alive
+            <transitionMain :route="route">
-              v-if="isKeepAlive"
+              <keep-alive
-              :include="usePermissionStoreHook().cachePageList"
+                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>
+            </transitionMain>
-            <component
+          </div>
-              v-else
+          <Footer v-if="!hideFooter" />
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
         </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 {

src/layout/components/footer/index.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { getConfig } from "@/config";
+
+const TITLE = getConfig("Title");
+</script>
+
+<template>
+  <footer class="layout-footer">
+    MIT © 2020-PRESENT
+    <a
+      class="ml-1 hover:text-primary"
+      href="https://github.com/pure-admin"
+      target="_blank"
+    >
+      {{ TITLE }}
+    </a>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 0 8px;
+  color: #c0c4cc;
+}
+</style>

src/layout/components/setting/index.vue

@@ -66,6 +66,7 @@ const settings = reactive({
   tabsVal: $storage.configure.hideTabs,
   showLogo: $storage.configure.showLogo,
   showModel: $storage.configure.showModel,
+  hideFooter: $storage.configure.hideFooter,
   multiTagsCache: $storage.configure.multiTagsCache
 });
 
@@ -111,12 +112,20 @@ const weekChange = (value): void => {
   storageConfigureChange("weak", value);
 };
 
+/** 隐藏标签页设置 */
 const tagsChange = () => {
   const showVal = settings.tabsVal;
   storageConfigureChange("hideTabs", showVal);
   emitter.emit("tagViewsChange", showVal as unknown as string);
 };
 
+/** 隐藏页脚设置 */
+const hideFooterChange = () => {
+  const hideFooter = settings.hideFooter;
+  storageConfigureChange("hideFooter", hideFooter);
+};
+
+/** 标签页持久化设置 */
 const multiTagsCacheChange = () => {
   const multiTagsCache = settings.multiTagsCache;
   storageConfigureChange("multiTagsCache", multiTagsCache);
@@ -218,6 +227,7 @@ onBeforeMount(() => {
     settings.weakVal &&
       document.querySelector("html")?.setAttribute("class", "html-weakness");
     settings.tabsVal && tagsChange();
+    settings.hideFooter && hideFooterChange();
   });
 });
 </script>
@@ -344,6 +354,17 @@ onBeforeMount(() => {
           @change="tagsChange"
         />
       </li>
+      <li>
+        <span class="dark:text-white">隐藏页脚</span>
+        <el-switch
+          v-model="settings.hideFooter"
+          inline-prompt
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="hideFooterChange"
+        />
+      </li>
       <li>
         <span class="dark:text-white">侧边栏Logo</span>
         <el-switch

src/layout/hooks/useLayout.ts

@@ -36,6 +36,7 @@ export function useLayout() {
         grey: $config?.Grey ?? false,
         weak: $config?.Weak ?? false,
         hideTabs: $config?.HideTabs ?? false,
+        hideFooter: $config.HideFooter ?? false,
         showLogo: $config?.ShowLogo ?? true,
         showModel: $config?.ShowModel ?? "smart",
         multiTagsCache: $config?.MultiTagsCache ?? false

src/utils/responsive.ts

@@ -24,6 +24,7 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
         grey: config.Grey ?? false,
         weak: config.Weak ?? false,
         hideTabs: config.HideTabs ?? false,
+        hideFooter: config.HideFooter ?? false,
         showLogo: config.ShowLogo ?? true,
         showModel: config.ShowModel ?? "smart",
         multiTagsCache: config.MultiTagsCache ?? false

types/global.d.ts

@@ -89,6 +89,7 @@ declare global {
     Grey?: boolean;
     Weak?: boolean;
     HideTabs?: boolean;
+    HideFooter?: boolean;
     SidebarStatus?: boolean;
     EpThemeColor?: string;
     ShowLogo?: boolean;
@@ -125,6 +126,7 @@ declare global {
     grey?: boolean;
     weak?: boolean;
     hideTabs?: boolean;
+    hideFooter?: boolean;
     sidebarStatus?: boolean;
     epThemeColor?: string;
     showLogo?: boolean;
@@ -158,6 +160,7 @@ declare global {
       grey?: boolean;
       weak?: boolean;
       hideTabs?: boolean;
+      hideFooter?: boolean;
       showLogo?: boolean;
       showModel?: string;
       multiTagsCache?: boolean;