36 lines
1.5 KiB
Vue
36 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { ArrowLeft, ArrowUpRight } from '@lucide/vue'
|
|
import { site } from '../site'
|
|
const route = useRoute()
|
|
const code = computed(() => String(route.params.code || '404'))
|
|
const messages: Record<string, [string, string]> = {
|
|
'400': ['请求似乎有些问题。', '请检查请求内容，或返回首页重新开始。'],
|
|
'401': ['请先登录。', '登录后再访问这个页面。'],
|
|
'403': ['暂时无法访问这里。', '当前账户没有访问此内容的权限。'],
|
|
'404': ['这一页，暂时迷路了。', '页面可能已移动，或者链接不太准确。'],
|
|
'500': ['服务正在休息一下。', '服务器遇到问题，请稍后再试。'],
|
|
'502': ['连接暂时中断。', '上游服务暂时不可用，请稍后再试。'],
|
|
'503': ['我们很快回来。', '服务暂时不可用，请稍后再试。'],
|
|
}
|
|
const message = computed(() => messages[code.value] || messages['404']!)
|
|
</script>
|
|
<template>
|
|
<section class="container error-page">
|
|
<p class="error-number">{{ code }}</p>
|
|
<h1>{{ message[0] }}</h1>
|
|
<p>{{ message[1] }}</p>
|
|
<div class="hero-actions">
|
|
<RouterLink to="/" class="button primary">
|
|
<ArrowLeft :size="17" />
|
|
返回首页
|
|
</RouterLink>
|
|
<a :href="site.issues" class="text-link" target="_blank" rel="noopener">
|
|
反馈问题
|
|
<ArrowUpRight :size="17" />
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|