<template>
	<el-main class="layout-main">
		<div class="layout-body">
			<div class="layout-card">
				<!--<router-view v-slot="{ Component, route }">
					<keep-alive v-if="theme.isTabsCache" :include="[...tabsStore.cachedViews]">
						<component :is="Component" :key="route.fullPath" />
					</keep-alive>
					<component :is="Component" v-else :key="route.name" />
				</router-view> -->
				<router-view v-slot="{ Component, route }">
					<keep-alive>
						<component :is="Component" :key="route.path" class="main-body-container" />
					</keep-alive>
				</router-view>
			</div>
		</div>
	</el-main>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useTabsStore } from '@/store/modules/tabs'

const appStore = useAppStore()
const tabsStore = useTabsStore()
const theme = computed(() => appStore.theme)
</script>
