<!--这个是前台的框架，由头部和内容组成-->
<script setup lang="ts">
import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import ForegroundHeader from '@/layouts/modules/global-foreground/foreground-header.vue';
import ForegroundContent from '@/layouts/modules/global-foreground/foreground-content.vue';

defineOptions({
  name: 'ForegroundLayout'
});
const appStore = useAppStore();
const themeStore = useThemeStore();
</script>

<template>
  <AdminLayout
    v-model:sider-collapse="appStore.siderCollapse"
    mode="vertical"
    :scroll-el-id="LAYOUT_SCROLL_EL_ID"
    :scroll-mode="themeStore.layout.scrollMode"
    :is-mobile="appStore.isMobile"
    :full-content="appStore.fullContent"
    :fixed-top="themeStore.fixedHeaderAndTab"
    :header-height="80"
    :content-class="appStore.contentXScrollable ? 'overflow-x-hidden' : ''"
    :sider-visible="false"
    :footer-visible="themeStore.footer.visible"
    :footer-height="themeStore.footer.height"
    :fixed-footer="themeStore.footer.fixed"
    :right-footer="themeStore.footer.right"
  >
    <template #header>
      <ForegroundHeader />
    </template>
    <ForegroundContent />
  </AdminLayout>
</template>

<style scoped>
#__SCROLL_EL_ID__ {
  @include scrollbar();
}
</style>
