<!--
 * @Description: 
 * @Author: zenghua.wang
 * @Date: 2023-06-20 14:29:45
 * @LastEditors: zenghua.wang
 * @LastEditTime: 2024-02-05 15:47:56
-->
<template>
  <div class="layout-main">
    <router-view v-slot="{ Component, route }">
      <transition name="fade-slide" mode="out-in" appear>
        <keep-alive v-if="isReload" :include="cacheRoutes">
          <component :is="useWrapComponents(Component, route)" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup name="layout-main">
import { computed } from 'vue';
import { useSettingStore } from '@/store/modules/setting';
import { usePermissionStore } from '@/store/modules/permission';
import { useWrapComponents } from '@/hooks/useWrapComponents';

const SettingStore = useSettingStore();
const PermissionStore = usePermissionStore();
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
const isReload = computed(() => SettingStore.isReload);
</script>

<style lang="scss" scoped>
.layout-main {
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;
  @include scrollable();
  box-sizing: border-box;

  &-inner {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
  }
}
</style>
