<template>
    <el-main>
        <router-view v-slot="{ Component }">
            <transition name="route-fade" mode="out-in" appear>
                <keep-alive :include="cachedViews">
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
    </el-main>
</template>
<script setup lang="ts">
import { useCacheStore } from '@/stores/cache';
// 绑定动态缓存列表
const cacheStore = useCacheStore()
const cachedViews = cacheStore.cachedViews
</script>
<style scoped lang="scss">
/* 过渡动画的 CSS 类（前缀和 Transition 的 name 一致） */
/* 进入动画开始 */
.route-fade-enter-from {
    opacity: 0;
    transform: translateX(20px);
    /* 可选：从右侧滑入 */
}

/* 进入动画结束 */
.route-fade-enter-active {
    transition: all 0.3s ease;
}

.route-fade-enter-to {
    opacity: 1;
    transform: translateX(0);
}

/* 退出动画开始 */
.route-fade-leave-from {
    opacity: 1;
    transform: translateX(0);
}

/* 退出动画结束 */
.route-fade-leave-active {
    transition: all 0.3s ease;
}

.route-fade-leave-to {
    opacity: 0;
    transform: translateX(-20px);
    /* 可选：向左侧滑出 */
}
</style>
