WebIndex/error.vue

<script setup lang="ts">
import type { NuxtError } from '#app'
import { setMobileTopColor } from '~/composables/function'

const props = defineProps({
    error: Object as () => NuxtError,
  }),

  { $mitt } = useNuxtApp(),

  errorMessages: Record<string, { icon: string, title: string, message: string }> = {
    400: {
      icon: '❓',
      title: '哦豁！请求有点问题',
      message: '请求似乎有点小问题，服务器君有点摸不着头脑呢！',
    },
    403: {
      icon: '🔒',
      title: '哎呀！大门被锁住了',
      message: '你没有权限访问这个角落，试试返回首页吧！',
    },
    404: {
      icon: '🌌',
      title: '哎呀！你发现了超级基地的秘密角落',
      message: '看起来你找的页面藏到了未知的时空层里！',
    },
    500: {
      icon: '🚀',
      title: '糟糕！超级基地出了一点故障',
      message: '服务器君正在努力解决问题，请稍等片刻！',
    },
    502: {
      icon: '👽',
      title: '糟糕！基地信号被外星人拦截了',
      message: '网络通道似乎遇到了问题，请稍后再试！',
    },
    default: {
      icon: '⚠️',
      title: '哦豁！此时遇到了点小麻烦',
      message: '请求在穿越洋葱星球时迷路了，请返回首页重新探索！',
    },
  },

  errorContent = computed(() => errorMessages[props.error!.statusCode] || errorMessages.default)
console.error(props.error)

onMounted(() => {
  $mitt.emit('startLoading', false)
  setMobileTopColor()
})

onUnmounted(() => {
  removeMobileTopColor()
})
</script>

<template>
  <div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
    <nav-bar :nav-color="true" />
    <alert
      :title="errorContent.title"
      :message="errorContent.message"
      :icon="errorContent.icon"
    />
    <footer-main />
    <alert-notification />
  </div>
</template>

<style scoped>

</style>