<template>
  <div class="app-container">
    <Sidebar 
      v-if="!isFullPageRoute"
      :collapsed="sidebarCollapsed" 
      @toggle="sidebarCollapsed = !sidebarCollapsed" 
    />
    <main class="main-content" :class="{ 'full-page': isFullPageRoute }">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import Sidebar from '@/components/Sidebar.vue'

const sidebarCollapsed = ref(false)
const route = useRoute()

// 判断是否为全页面路由（不需要显示侧边栏）
const isFullPageRoute = computed(() => {
  return route.path === '/admin'
})
</script>

<style lang="scss">
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  &.full-page {
    width: 100vw;
  }
}
</style>
