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>