<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElConfigProvider } from 'element-plus'
import Sidebar from '@/components/Sidebar.vue'

const route = useRoute()
const showSidebar = computed(() => route.path !== '/')
</script>

<template>
  <ElConfigProvider :z-index="3000">
    <div class="flex min-h-screen bg-dark-900">
      <!-- 左侧侧边栏 (除了登录页) -->
      <Sidebar v-if="showSidebar" />

      <!-- 右侧内容区 -->
      <main :class="showSidebar ? 'ml-64' : ''" class="flex-1 min-h-screen">
        <router-view class="page-content" />
      </main>
    </div>
  </ElConfigProvider>
</template>

<style>
/* 页面进入动画 */
.page-content {
  animation: page-enter 0.3s ease-out;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
