| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="ts" setup> |
| H | 2 | import pageError from '@/assets/svgs/404.svg' |
| 3 | import networkError from '@/assets/svgs/500.svg' | |
| 4 | import noPermission from '@/assets/svgs/403.svg' | |
| 5 | import { propTypes } from '@/utils/propTypes' | |
| 6 | ||
| 7 | defineOptions({ name: 'Error' }) | |
| 8 | ||
| 9 | interface ErrorMap { | |
| 10 | url: string | |
| 11 | message: string | |
| 12 | buttonText: string | |
| 13 | } | |
| 14 | ||
| 15 | const { t } = useI18n() | |
| 16 | ||
| 17 | const errorMap: { | |
| 18 | [key: string]: ErrorMap | |
| 19 | } = { | |
| 20 | '404': { | |
| 21 | url: pageError, | |
| 22 | message: t('error.pageError'), | |
| 23 | buttonText: t('error.returnToHome') | |
| 24 | }, | |
| 25 | '500': { | |
| 26 | url: networkError, | |
| 27 | message: t('error.networkError'), | |
| 28 | buttonText: t('error.returnToHome') | |
| 29 | }, | |
| 30 | '403': { | |
| 31 | url: noPermission, | |
| 32 | message: t('error.noPermission'), | |
| 33 | buttonText: t('error.returnToHome') | |
| 34 | } | |
| 35 | } | |
| 36 | ||
| 37 | const props = defineProps({ | |
| 38 | type: propTypes.string.validate((v: string) => ['404', '500', '403'].includes(v)).def('404') | |
| 39 | }) | |
| 40 | ||
| 41 | const emit = defineEmits(['errorClick']) | |
| 42 | ||
| 43 | const btnClick = () => { | |
| 44 | emit('errorClick', props.type) | |
| 45 | } | |
| 46 | </script> | |
| 47 | ||
| 48 | <template> | |
| 49 | <div class="flex justify-center"> | |
| 50 | <div class="text-center"> | |
| 51 | <img :src="errorMap[type].url" alt="" width="350" /> | |
| 52 | <div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div> | |
| 53 | <div class="mt-20px"> | |
| 54 | <ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton> | |
| 55 | </div> | |
| 56 | </div> | |
| 57 | </div> | |
| 58 | </template> | |
