hanye-website/error.vue

<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full text-center">
      <div class="mb-6">
        <h1 v-if="error.statusCode === 404" class="text-6xl font-extrabold text-blue-600">404</h1>
        <h1 v-else class="text-6xl font-extrabold text-red-600">{{ error.statusCode || '错误' }}</h1>
      </div>
      
      <h2 class="text-3xl font-bold text-gray-900 mb-4">
        {{ error.statusCode === 404 ? '页面未找到' : '发生错误' }}
      </h2>
      
      <p class="text-lg text-gray-600 mb-8">
        {{ error.message || '很抱歉，您请求的页面不存在或发生了错误。' }}
      </p>
      
      <div class="flex justify-center space-x-4">
        <button @click="handleError" class="btn btn-primary">
          {{ error.statusCode === 404 ? '返回首页' : '重试' }}
        </button>
        
        <button v-if="error.statusCode !== 404" @click="goBack" class="btn bg-white text-gray-800 border border-gray-300 hover:bg-gray-50">
          返回上一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 通用错误页面
 * 处理各种错误状态（404、500等）
 */
interface ErrorProps {
  error: {
    statusCode: number;
    message?: string;
  };
}

const props = defineProps<ErrorProps>();

/**
 * 处理错误
 * 如果是404错误，返回首页；否则尝试刷新
 */
function handleError() {
  if (props.error.statusCode === 404) {
    navigateTo('/');
  } else {
    window.location.reload();
  }
}

/**
 * 返回上一页
 */
function goBack() {
  window.history.back();
}

// 设置页面标题
useHead({
  title: props.error.statusCode === 404 ? '页面未找到 - Hanye' : '发生错误 - Hanye'
});
</script>