73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
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>
|