<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { NAlert } from 'naive-ui'

const offline = ref(!navigator.onLine)
function updateStatus() { offline.value = !navigator.onLine }

onMounted(() => {
  window.addEventListener('online', updateStatus)
  window.addEventListener('offline', updateStatus)
})
onUnmounted(() => {
  window.removeEventListener('online', updateStatus)
  window.removeEventListener('offline', updateStatus)
})
</script>

<template>
  <NAlert v-if="offline" type="error" :bordered="false" style="border-radius:0;text-align:center"
          title="网络连接已断开。部分功能可能不可用。" closable />
</template>
