68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { NuxtError } from '#app'
|
|
import { setMobileTopColor } from '~/composables/function'
|
|
|
|
const props = defineProps({
|
|
error: Object as () => NuxtError
|
|
})
|
|
|
|
const {$mitt} = useNuxtApp()
|
|
|
|
const 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: '请求在穿越洋葱星球时迷路了，请返回首页重新探索！',
|
|
},
|
|
};
|
|
|
|
const 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> |