177 lines
3.4 KiB
Vue
177 lines
3.4 KiB
Vue
<template>
|
|
<div class="error-page">
|
|
<div class="error-container">
|
|
<div class="error-icon">
|
|
<el-icon :size="80" color="#F56C6C">
|
|
<WarningFilled />
|
|
</el-icon>
|
|
</div>
|
|
<h1 class="error-title">{{ title }}</h1>
|
|
<p class="error-message">{{ message }}</p>
|
|
<div class="error-actions">
|
|
<el-button type="primary" @click="goHome">返回首页</el-button>
|
|
<el-button @click="refresh">刷新页面</el-button>
|
|
<el-button v-if="showDetails" @click="toggleDetails">
|
|
{{ showErrorDetails ? '隐藏详情' : '显示详情' }}
|
|
</el-button>
|
|
</div>
|
|
<div v-if="showErrorDetails && errorDetails" class="error-details">
|
|
<el-collapse>
|
|
<el-collapse-item title="错误详情" name="details">
|
|
<pre>{{ errorDetails }}</pre>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { WarningFilled } from '@element-plus/icons-vue'
|
|
|
|
const props = defineProps({
|
|
errorCode: {
|
|
type: Number,
|
|
default: 500
|
|
},
|
|
errorMessage: {
|
|
type: String,
|
|
default: '服务器错误'
|
|
},
|
|
errorDetails: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const router = useRouter()
|
|
const showErrorDetails = ref(false)
|
|
|
|
const title = computed(() => {
|
|
switch (props.errorCode) {
|
|
case 404:
|
|
return '页面未找到'
|
|
case 403:
|
|
return '访问被拒绝'
|
|
case 500:
|
|
return '服务器错误'
|
|
default:
|
|
return '发生错误'
|
|
}
|
|
})
|
|
|
|
const message = computed(() => {
|
|
if (props.errorMessage) {
|
|
return props.errorMessage
|
|
}
|
|
|
|
switch (props.errorCode) {
|
|
case 404:
|
|
return '抱歉，您访问的页面不存在或已被移除'
|
|
case 403:
|
|
return '抱歉，您没有权限访问此页面'
|
|
case 500:
|
|
return '抱歉，服务器遇到了问题，请稍后再试'
|
|
default:
|
|
return '抱歉，应用遇到了未知错误'
|
|
}
|
|
})
|
|
|
|
const showDetails = computed(() => {
|
|
return props.errorDetails && process.env.NODE_ENV === 'development'
|
|
})
|
|
|
|
const goHome = () => {
|
|
router.push('/')
|
|
}
|
|
|
|
const refresh = () => {
|
|
window.location.reload()
|
|
}
|
|
|
|
const toggleDetails = () => {
|
|
showErrorDetails.value = !showErrorDetails.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.error-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background-color: #f5f7fa;
|
|
padding: 20px;
|
|
}
|
|
|
|
.error-container {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
background-color: #fff;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.error-icon {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 28px;
|
|
color: #303133;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.error-message {
|
|
font-size: 16px;
|
|
color: #606266;
|
|
margin-bottom: 30px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.error-actions {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.error-actions .el-button {
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
|
|
.error-details {
|
|
margin-top: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.error-details pre {
|
|
background-color: #f5f7fa;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: #606266;
|
|
overflow-x: auto;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.error-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.error-message {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.error-actions .el-button {
|
|
margin: 0 5px 10px 0;
|
|
}
|
|
}
|
|
</style> |