fs-admin/src/layouts/BasicLayout.vue

<script setup lang="ts">
import { useRouterStore } from '@/stores/router'
import { useThemeStore } from '@/stores/theme'
import { isMicro } from '@/utils/micro'

const routerStore = useRouterStore()
const themeStore = useThemeStore()
</script>

<template>
  <div class="h-full" v-if="isMicro">
    <router-view v-slot="{ Component }">
      <keep-alive :include="themeStore.keepAliveTabs ? routerStore.keepAliveRouter : []">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
  <el-container class="layout-container" v-else>
    <el-header v-if="themeStore.logoInHeader">
      <global-header />
    </el-header>
    <el-container
      :style="{ height: themeStore.logoInHeader ? 'calc(100% - var(--el-menu-horizontal-height))' : '100%' }"
    >
      <el-aside>
        <global-aside />
      </el-aside>
      <el-container>
        <el-header v-if="!themeStore.logoInHeader">
          <global-header />
        </el-header>
        <el-main style="padding: 0">
          <global-tabs v-if="themeStore.showTabs"></global-tabs>
          <div
            class="overflow-auto"
            style="padding: var(--main-padding)"
            :style="{ height: themeStore.showTabs ? 'calc(100% - 41px)' : '100%' }"
          >
            <router-view v-slot="{ Component }">
              <keep-alive :include="themeStore.keepAliveTabs ? routerStore.keepAliveRouter : []">
                <component :is="Component" />
              </keep-alive>
            </router-view>
          </div>
        </el-main>
        <!-- <el-footer>
        <global-footer />
      </el-footer> -->
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container {
  height: 100%;
}
.el-header,
.el-footer {
  padding: 0;
}
.el-main {
  padding: var(--main-padding);
}
</style>