<!-- 全屏科技风布局 -->
<script lang="ts" setup>
  defineProps({
    collapse: {
      type: Boolean,
      default() {
        return false
      },
    },
    hasMenu: {
      type: Boolean,
      default() {
        return true
      },
    },
    fixedHeader: {
      type: Boolean,
      default() {
        return true
      },
    },
    showTabs: {
      type: Boolean,
      default() {
        return false
      },
    },
    device: {
      type: String,
      default() {
        return 'desktop'
      },
    },
  })
</script>

<template>
  <div class="vab-layout-fullscreen">
    <vab-top-bar />
    <div class="vab-main-fullscreen">
      <vab-app-main />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .vab-layout-fullscreen {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #0a1929 0%, #1a2332 50%, #0a1929 100%);
    position: relative;

    .vab-main-fullscreen {
      flex: 1;
      width: 100%;
      min-height: 100vh;
      padding-top: 70px;
      position: relative;
      transition: padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      :deep(.app-main-container) {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      :deep(.vab-app-main) {
        min-height: calc(100vh - 70px);
      }
    }

    // 当顶部栏收起时，取消上边距
    &:has(.vab-top-bar.is-collapsed) {
      .vab-main-fullscreen {
        padding-top: 0;

        :deep(.vab-app-main) {
          min-height: 100vh;
        }
      }
    }
  }
</style>

