<template>
  <!-- <div :class="{ 'avue--collapse': isCollapse }" class="avue-contail"> -->
  <div class="avue-contail">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <topBar />
    </div>

    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sideBar />
      </div>
      <div class="avue-main">
        <!-- 主体视图层 -->
        <div class="avue_view_scroll_hidden">
          <div id="avue-view" style="height: 100%; overflow-y: auto; overflow-x: hidden">
            <router-view v-slot="{ Component, route }">
              <transition name="fade-transform" mode="out-in">
                <!-- <keep-alive> -->
                <component :is="Component" :key="route.path" />
                <!-- </keep-alive> -->
              </transition>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import topBar from "./components/topbar/index.vue";
import sideBar from "./components/sidebar/index.vue";

import { useStore } from "vuex";
import { checkToken } from "@/api/login";
const refreshTime = setInterval(() => {
  checkToken(refreshTime, false, useStore());
}, 1000 * 3);

checkToken(refreshTime, false, useStore());
</script>

<style lang="scss" scoped>
.avue_view_scroll_hidden {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  #avue-view {
    padding-right: 17px;
    margin-right: -17px;
  }
}
</style>
