51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
||
import { useTagsViewStore } from "@/store/modules/tags-view"
|
||
import { useSettingsStore } from "@/store/modules/settings"
|
||
import Footer from "./Footer/index.vue"
|
||
|
||
const tagsViewStore = useTagsViewStore()
|
||
const settingsStore = useSettingsStore()
|
||
</script>
|
||
|
||
<template>
|
||
<section class="app-main">
|
||
<div class="app-scrollbar">
|
||
<!-- key 采用 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用 -->
|
||
<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" class="app-container-grow" />
|
||
</keep-alive>
|
||
</transition>
|
||
</router-view>
|
||
<!-- 页脚 -->
|
||
<Footer v-if="settingsStore.showFooter" />
|
||
</div>
|
||
<!-- 返回顶部 -->
|
||
<el-backtop />
|
||
<!-- 返回顶部（固定 Header 情况下） -->
|
||
<el-backtop target=".app-scrollbar" />
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/styles/mixins.scss";
|
||
|
||
.app-main {
|
||
width: 100%;
|
||
background-color: var(--v3-body-bg-color);
|
||
display: flex;
|
||
}
|
||
|
||
.app-scrollbar {
|
||
flex-grow: 1;
|
||
overflow: auto;
|
||
@extend %scrollbar;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.app-container-grow {
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
</style>
|