sugarBecomer
50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { useAppStore } from '@/stores/app'
|
||
import AppHeader from './AppHeader.vue'
|
||
import AppSidebar from './AppSidebar.vue'
|
||
import MobileNav from './MobileNav.vue'
|
||
|
||
const route = useRoute()
|
||
const appStore = useAppStore()
|
||
|
||
const keepAliveInclude = computed(() => {
|
||
// 收集所有需要缓存的路由组件名
|
||
const names: string[] = []
|
||
if (route.matched) {
|
||
route.matched.forEach(r => {
|
||
if (r.meta?.keepAlive && r.name) {
|
||
names.push(r.name as string)
|
||
}
|
||
})
|
||
}
|
||
return names
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex h-screen overflow-hidden bg-background">
|
||
<!-- PC 端侧边栏 -->
|
||
<AppSidebar v-if="!appStore.isMobile" />
|
||
|
||
<!-- 右侧主区域 -->
|
||
<div class="flex flex-1 flex-col min-w-0 overflow-hidden">
|
||
<!-- 顶部栏 -->
|
||
<AppHeader />
|
||
|
||
<!-- 内容区 -->
|
||
<main class="flex-1 overflow-y-auto p-4">
|
||
<router-view v-slot="{ Component }">
|
||
<KeepAlive :include="keepAliveInclude">
|
||
<component :is="Component" />
|
||
</KeepAlive>
|
||
</router-view>
|
||
</main>
|
||
|
||
<!-- 移动端底部导航（在 flex 列内，不用 fixed） -->
|
||
<MobileNav v-if="appStore.isMobile" />
|
||
</div>
|
||
</div>
|
||
</template>
|