feat: 新增页脚 Footer 组件

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,

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>

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>

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,

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>