From 7bfacf333ab4ae7a0aac04ea12a9e18f1a8683d2 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 5 Sep 2023 18:03:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A1=B5=E8=84=9A=20?=
 =?UTF-8?q?Footer=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/layouts.ts                     |  3 +++
 src/layouts/components/AppMain.vue        | 14 +++++++++++---
 src/layouts/components/Footer/index.vue   | 18 ++++++++++++++++++
 src/layouts/components/Settings/index.vue |  2 ++
 src/views/unocss/index.vue                |  5 +----
 5 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/layouts/components/Footer/index.vue

diff --git a/src/config/layouts.ts b/src/config/layouts.ts
index 044ef17..2d0fc48 100644
--- a/src/config/layouts.ts
+++ b/src/config/layouts.ts
@@ -12,6 +12,8 @@ export interface LayoutSettings {
   showLogo: boolean
   /** 是否固定 Header */
   fixedHeader: boolean
+  /** 是否显示页脚 Footer */
+  showFooter: boolean
   /** 是否显示消息通知 */
   showNotify: boolean
   /** 是否显示切换主题按钮 */
@@ -36,6 +38,7 @@ const defaultSettings: LayoutSettings = {
   showSettings: true,
   showTagsView: true,
   fixedHeader: true,
+  showFooter: true,
   showLogo: true,
   showNotify: true,
   showThemeSwitch: true,
diff --git a/src/layouts/components/AppMain.vue b/src/layouts/components/AppMain.vue
index 33d50ab..ddab612 100644
--- a/src/layouts/components/AppMain.vue
+++ b/src/layouts/components/AppMain.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { useTagsViewStore } from "@/store/modules/tags-view"
-// import { CompConsumer } from "./CompConsumer"
+import { useSettingsStore } from "@/store/modules/settings"
+import Footer from "./Footer/index.vue"
 
 const tagsViewStore = useTagsViewStore()
+const settingsStore = useSettingsStore()
 </script>
 
 <template>
@@ -12,11 +14,12 @@ const tagsViewStore = useTagsViewStore()
       <router-view v-slot="{ Component, route }">
         <transition name="el-fade-in" mode="out-in">
           <keep-alive :include="tagsViewStore.cachedViews">
-            <component :is="Component" :key="route.path" />
+            <component :is="Component" :key="route.path" class="app-container-grow" />
           </keep-alive>
-          <!-- <CompConsumer :component="Component" /> -->
         </transition>
       </router-view>
+      <!-- 页脚 -->
+      <Footer v-if="settingsStore.showFooter" />
     </div>
     <!-- 返回顶部 -->
     <el-backtop />
@@ -38,5 +41,10 @@ const tagsViewStore = useTagsViewStore()
   flex-grow: 1;
   overflow: auto;
   @include scrollbar;
+  display: flex;
+  flex-direction: column;
+  .app-container-grow {
+    flex-grow: 1;
+  }
 }
 </style>
diff --git a/src/layouts/components/Footer/index.vue b/src/layouts/components/Footer/index.vue
new file mode 100644
index 0000000..c0ac6a3
--- /dev/null
+++ b/src/layouts/components/Footer/index.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE
+</script>
+
+<template>
+  <footer class="layout-footer">MIT © 2021-PRESENT {{ VITE_APP_TITLE }}</footer>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer {
+  width: 100%;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #c0c4cc;
+}
+</style>
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index 55f11fb..1ba1b28 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -14,6 +14,7 @@ const {
   showTagsView,
   showLogo,
   fixedHeader,
+  showFooter,
   showNotify,
   showThemeSwitch,
   showScreenfull,
@@ -29,6 +30,7 @@ const switchSettings = {
   显示标签栏: showTagsView,
   "显示 Logo": showLogo,
   "固定 Header": fixedHeader,
+  "显示页脚 Footer": showFooter,
   显示消息通知: showNotify,
   显示切换主题按钮: showThemeSwitch,
   显示全屏按钮: showScreenfull,
diff --git a/src/views/unocss/index.vue b/src/views/unocss/index.vue
index 6a8dec0..9859ecb 100644
--- a/src/views/unocss/index.vue
+++ b/src/views/unocss/index.vue
@@ -3,14 +3,11 @@
     <div h-full text-center flex select-none all:transition-400>
       <div ma>
         <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-1s>UnoCSS</div>
-        <div op30 dark:op60 text-lg fw300 m1>具有高性能且极具灵活性的即时原子化 CSS 引擎</div>
+        <div op30 dark:op60 text-lg fw300 m1>该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss</div>
         <div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
           <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">推荐阅读：重新构想原子化 CSS</a>
         </div>
       </div>
     </div>
-    <div absolute bottom-5 right-0 left-0 text-center op30 dark:op60 fw300>
-      该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
-    </div>
   </div>
 </template>