<script setup lang="ts">
import { onErrorCaptured, ref } from 'vue'

const hasError = ref(false)

onErrorCaptured((err) => {
  console.error('应用异常:', err)
  // 清除可能损坏的 localStorage 数据并跳转登录页
  localStorage.clear()
  window.location.href = '/login'
  return false
})
</script>

<template>
  <router-view v-if="!hasError" />
  <div v-else class="error-fallback">
    <p>页面出现错误，正在跳转登录页...</p>
  </div>
</template>

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  background: #f6f8fc;
  color: #1e293b;
}

#app {
  min-height: 100vh;
}

.error-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 16px;
  color: #6b7d94;
}
</style>