<template>
  <div id="app">
    <router-view />
    <!-- 环境信息组件（仅在非生产环境显示） -->
    <EnvInfo />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { debugLog } from '@/config/env'
import EnvInfo from '@/components/EnvInfo.vue'

const userStore = useUserStore()

onMounted(() => {
  try {
    // 初始化用户信息
    userStore.initUser()
    debugLog('App.vue loaded successfully, user:', userStore.userInfo)
  } catch (error) {
    console.error('App.vue 初始化失败:', error)
    // 确保有一个默认的访客用户状态
    userStore.setGuestMode()
  }
})
</script>

<style lang="scss">
#app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  
  &:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

// 自定义动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.slide-up-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>
