<script setup lang="ts">
import { appName } from '~/constants'

import LoginModal from '~/components/LoginModal.vue'
import { useModalStore } from '~/stores/modal'
const loginModalRef = ref<InstanceType<typeof LoginModal> | null>(null)
const modalStore = useModalStore()

// 监听 ref 变化
watch(loginModalRef, (newRef) => {
  if (newRef) {
    modalStore.setLoginModal(newRef)
  }
}, { immediate: true })

useHead({
  title: appName,
})
</script>

<template>
  <VitePwaManifest />
  <NuxtLayout>
    <GlobalConfig>
      <NuxtPage />
    </GlobalConfig>
  </NuxtLayout>

  <LoginModal ref="loginModalRef" />
</template>

<style>
html,
body,
#__nuxt {
  height: 100vh;
  margin: 0;
  padding: 0;
}

html.dark {
  background: #222;
  color: white;
}


</style>