4251a5a451
- 扩展 Icon.vue 组件，新增 60+ 图标路径 - 导航类: arrowRight, arrowLeft, arrowUp, arrowDown, chevronUp, externalLink - 状态类: checkCircle, xCircle, exclamationCircle, exclamationTriangle, infoCircle - 用户类: user, userCircle, userPlus, users - 文档类: document, clipboard, copy, inbox - 操作类: download, upload, filter, sort - 安全类: key, lock, shield - UI类: menu, calendar, home, terminal, gift, creditCard, mail - 数据类: chartBar, trendingUp, database, cube - 其他: bolt, sparkles, cloud, server, sun, moon, book 等 - 重构 56 个 Vue 组件，用 Icon 组件替换内联 SVG - 净减少约 2200 行代码 - 提升代码可维护性和一致性 - 统一图标样式和尺寸管理
92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 px-4 dark:bg-dark-950"
|
|
>
|
|
<!-- Background Decoration -->
|
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div
|
|
class="absolute -right-40 -top-40 h-80 w-80 rounded-full bg-primary-400/10 blur-3xl"
|
|
></div>
|
|
<div
|
|
class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary-500/10 blur-3xl"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 w-full max-w-md text-center">
|
|
<!-- 404 Display -->
|
|
<div class="mb-8">
|
|
<div class="relative inline-block">
|
|
<span class="text-[12rem] font-bold leading-none text-gray-100 dark:text-dark-800"
|
|
>404</span
|
|
>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div
|
|
class="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30"
|
|
>
|
|
<svg
|
|
class="h-12 w-12 text-white"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Content -->
|
|
<div class="mb-8">
|
|
<h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
|
|
{{ t('errors.pageNotFound') }}
|
|
</h1>
|
|
<p class="text-gray-500 dark:text-dark-400">
|
|
The page you are looking for doesn't exist or has been moved.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col justify-center gap-3 sm:flex-row">
|
|
<button @click="goBack" class="btn btn-secondary">
|
|
<Icon name="arrowLeft" size="md" class="mr-2" />
|
|
Go Back
|
|
</button>
|
|
<router-link to="/dashboard" class="btn btn-primary">
|
|
<Icon name="home" size="md" class="mr-2" />
|
|
Go to Dashboard
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- Help Link -->
|
|
<p class="mt-8 text-sm text-gray-400 dark:text-dark-500">
|
|
Need help?
|
|
<a
|
|
href="#"
|
|
class="text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
|
|
>
|
|
Contact support
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
import Icon from '@/components/icons/Icon.vue'
|
|
|
|
const { t } = useI18n()
|
|
const router = useRouter()
|
|
|
|
function goBack(): void {
|
|
router.back()
|
|
}
|
|
</script>
|