<template>
  <div class="main-layout" :class="{ collapsed: appStore.sidebarCollapsed }">
    <!-- 侧边栏 -->
    <SideMenu />
    <!-- 右侧主体 -->
    <div class="main-container">
      <TopNavbar />
      <div class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade-slide" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useAppStore } from '@/stores/app'
import SideMenu from '@/components/SideMenu.vue'
import TopNavbar from '@/components/TopNavbar.vue'

const appStore = useAppStore()
</script>

<style lang="scss" scoped>
.main-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;

  &.collapsed {
    .main-container {
      margin-left: 64px;
    }
  }
}

.main-container {
  flex: 1;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  background: #f5f7fa;
  padding: 20px;
}

// 路由过渡动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(12px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-12px);
}
</style>
