<template>
  <router-view />
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
    
    // 移除 Loading 动画并显示 App
    const loader = document.querySelector('.app-loading')
    const app = document.getElementById('app')
    
    if (loader) {
      // 强制延迟 1.5s 再开始淡出，让用户看清星空
      setTimeout(() => {
        loader.style.opacity = '0'
        loader.style.visibility = 'hidden'
        
        // 停止星空动画，释放性能
        if (window.stopLoadingAnimation) {
          window.stopLoadingAnimation()
        }
        
        // 动画结束后移除节点
        setTimeout(() => {
          loader.remove()
        }, 1200) // 对应 CSS 中的 1.2s transition
        
        if (app) {
          app.classList.add('app-loaded')
        }
      }, 1500)
    } else {
      // 如果没有 loader（比如热更新），直接显示 app
      if (app) {
        app.classList.add('app-loaded')
      }
    }
  })
})
</script>
