<!-- layouts/default.vue -->
<template>
  <div class="layout">
    <FlashBanner />
    <!-- 左：迷你侧栏（固定 56px，粘左） -->
    <aside class="sidebar">
      <SidebarMini />
    </aside>

    <!-- 右：主列（TopNav + 页面内容） -->
    <div class="main">
      <TopNav class="TopNav-clss"/>
      <div class="page">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SidebarMini from '../components/SidebarMini.vue'
import TopNav from '../components/TopNav.vue'
import FlashBanner from '../components/FlashBanner.vue'
</script>

<style scoped>
/* ===== 基础布局 ===== */
.layout{
  display: flex;
  min-height: 100vh;
  background: #fff;
  color: #111827;
}

/* 左侧栏 */
.sidebar{
  position: sticky;
  top: 0;
  height: 66vh;
  width: 80px; /* 24px left + 80px width + 24px gap */
  flex: 0;
  /* border-right: 1px solid #eef0f3; */ /* Removed border */
  background: transparent; /* Made transparent */
  /* backdrop-filter: blur(6px); */
  /* -webkit-backdrop-filter: blur(6px); */
  z-index: 20;
}

/* 右侧主列：TopNav + 页面内容 垂直排列 */
.main{
  /* 与 TopNav 内部保持一致的导航高度变量 */
  --nav-h: 64px;

  flex: 1 1 auto;
  min-width: 0;                 /* 防止内容把布局挤炸 */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 页面内容区 */
.page{
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== 提供给页面用的通用钩子（不强制页面必须用） ===== */
.page :deep(.content-wrap){
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding: 32px 24px;
}

/* 英雄区与透明导航重叠：向上顶 nav 高度，并把内边距补回来 */
.page :deep(.hero-section){
  margin-top: calc(-1 * var(--nav-h));             /* 顶到导航背后 */
  padding: calc(56px + var(--nav-h)) 24px 56px;    /* 顶部补回导航高度 */
  border-radius: 0 0 24px 24px;
  background:
    radial-gradient(1200px 600px at 60% 10%, rgba(106,110,255,.25), transparent 60%),
    linear-gradient(180deg,#eef2ff 0%, #fff 40%);
}
.TopNav-clss{
  position: absolute;
  width: 99.5%;
}
/* 去掉页面首个标题/容器默认外边距导致的缝隙（不要覆盖 .hero-section 的负 margin） */
.page :deep(h1:first-child),
.page :deep(.content-wrap){
  margin-top: 0;
}

/* ===== 体验优化（可留可去） ===== */
/* 锚点滚动时不被导航遮住 */
:global(:root){
  scroll-padding-top: 64px; /* 与 --nav-h 保持一致 */
}
/* iOS 刘海安全区 */
.page :deep(.content-wrap){ padding-top: max(32px, env(safe-area-inset-top)); }

/* ===== 小屏优化 (Mobile Bottom Nav) ===== */
@media (max-width: 640px){
  .layout {
    flex-direction: column;
  }
  
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px; /* Bottom Nav Height */
    flex: 0 0 auto;
    border-right: none;
    border-top: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .main {
    padding-bottom: 64px; /* Space for bottom nav */
  }

  .page :deep(.content-wrap),
  .page :deep(.hero-section){
    padding-left: 16px;
    padding-right: 16px;
  }
}
</style>
