<script setup lang="ts"></script>

<template>
  <div class="layout">
    <router-view v-slot="{ Component, route }">
      <transition name="fade" appear>
        <keep-alive :include="['RunTesting']">
          <component
            :is="Component"
            :key="route.path + (route?.query?._refresh || '')"
          />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
.layout {
  position: relative;
  height: calc(100vh - $main-header-height);
  flex: 1;
  background-color: var(--gray-bg-1);
}

.fade-leave-active,
.fade-enter-active {
  transition: all 0.3s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
