<template>
    <div class="app-wrapper" :style="$getters.stylesBase.value">
        <SideBar />
        <div class="main-container" :style="{ 'marginLeft': $getters.sidebarWidth.value }">
            <NavBar />
            <TagView v-if="$state.tagsView.cached.length" />
            <div class="app-main">
                <RouterView v-slot="{ Component }" v-if="$state.tagsView.cached.length">
                    <IfKeepAlive :clearCaches="$state.tagsView.clearCaches">
                            <component :is="Component" :key="$route.fullPath" />
                    </IfKeepAlive>
                </RouterView>
                <div v-else>
                    <div style="font-size: 30px; color:#ddd; display: flex; flex-direction: column; height: 100%; min-height: 200px; align-items: center; justify-items: center; place-content: center;">
                            <div>没有页面展示</div>
                            <div style="font-size:14px">IF ADMIN Layout支持</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
// import IfTransition from './if-transition.vue';
import { SideBar, NavBar, TagView } from '.'
import { getGetters, getState } from '../hooks'
import { useRoute } from 'vue-router'
const $getters = getGetters(['sidebarHeight', 'sidebarWidth', 'stylesBase', 'cachedPages'])
const $route = useRoute()
const $state = getState()

// 检测当前路由配置， 清除不必要的缓存



</script>

<style>
body {
    margin: 0;
}

.app-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

.app-sidebar .el-menu-item::selection {
    background: transparent;
}

.app-sidebar .el-menu-item.is-active {
    background: var(--el-menu-active-background-color);
    color: var(--el-menu-active-color);
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 200ms ease;
}
</style>