<template>
  <div class="main-layout">
    <!-- <Sidebar class="sidebar" /> -->
    <main class="content-area">
      <!-- 路由视图将渲染在这里 -->
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import Sidebar from './Sidebar.vue'
</script>

<style scoped>
.main-layout {
  display: flex;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  /* min-width: 640px; */
  overflow: hidden; /* 防止内部滚动影响布局 */
}

.content-area {
  flex-grow: 1;
  /* display: flex; /* 如果内容区内部还需要左右布局，可以打开 */
  /* flex-direction: row; /* 配合上面 */
  overflow-y: auto; /* 如果内容区需要滚动 */
  background-color: #ffffff; /* 示例背景色 */
}

.sidebar {
  transition: all 0.3s ease;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
  
  .content-area {
    width: 100%;
  }
}

/* 简单的侧边栏列表样式 */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.sidebar li {
  padding: 15px 0;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #e0e0e0;
}
</style> 