<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <Header @open-menu="handleOpenMenu" />
    
    <!-- 侧边栏 -->
    <Sidebar v-model="isMenuOpen" />
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from './Header.vue'
import Sidebar from './Sidebar.vue'

// 侧边栏显示状态（手机端）
const isMenuOpen = ref(false)

// Header 触发：打开抽屉菜单（手机端）
const handleOpenMenu = () => {
  isMenuOpen.value = true
}
</script>

<style scoped lang="scss">
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--background-color);
}

.main-content {
  flex: 1;
  margin-top: 64px;
  margin-left: 250px;
  padding: 24px;
  overflow-y: auto;
  transition: all 0.3s ease;
  
  /* 响应式布局 */
  @media (max-width: 1023px) {
    margin-left: 200px;
  }
  
  @media (max-width: 767px) {
    margin-left: 0;
    padding: 6px;
  }
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* 平板端调整 */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-content {
    margin-left: 200px;
  }
}

/* 手机端调整 */
@media (max-width: 767px) {
  .main-content {
    margin-left: 0;
    padding: 6px;
  }
}
</style>
