mirror of
https://github.com/ZeroCatDev/ClassworksKVAdmin.git
synced 2025-10-22 12:03:10 +00:00
feat: 添加404页面，提供友好的错误提示和导航选项
This commit is contained in:
SunWuyuan
parent
2363bb3c32
commit
ef29982de7
66
public/404.html
Normal file
66
public/404.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>404 - 页面未找到</title>
|
||||||
|
<meta name="robots" content="noindex" />
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: light dark; }
|
||||||
|
html, body { height: 100%; }
|
||||||
|
body {
|
||||||
|
margin: 0; display: grid; place-items: center; font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05));
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
width: min(560px, 92vw);
|
||||||
|
border: 1px solid rgba(125,125,125,.25);
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(255,255,255,.7);
|
||||||
|
-webkit-backdrop-filter: blur(6px);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 10px 25px rgba(0,0,0,.08);
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
.row { display:flex; justify-content:center; align-items:center; gap:10px; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.card { background: rgba(24,24,27,.6); color: #e5e7eb; border-color: rgba(255,255,255,.12); }
|
||||||
|
}
|
||||||
|
.title { font-size: 22px; font-weight: 700; margin: 8px 0 4px; }
|
||||||
|
.desc { color: #6b7280; margin: 0 0 8px; }
|
||||||
|
.hint { font-size: 12px; color: #9ca3af; text-align: center; margin-top: 10px; }
|
||||||
|
.actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
|
||||||
|
.btn {
|
||||||
|
appearance: none; border: 1px solid rgba(125,125,125,.35); background: rgba(255,255,255,.9);
|
||||||
|
color: #111827; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600;
|
||||||
|
}
|
||||||
|
.btn.primary { background: #111827; color: white; border-color: #111827; }
|
||||||
|
.btn:active { transform: translateY(1px); }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.btn { background: rgba(63,63,70,.8); color: #e5e7eb; border-color: rgba(255,255,255,.14); }
|
||||||
|
.btn.primary { background: #3b82f6; border-color: #3b82f6; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="card">
|
||||||
|
<div class="row">
|
||||||
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>
|
||||||
|
<div>
|
||||||
|
<div class="title">页面未找到</div>
|
||||||
|
<div class="desc">即将为您跳转到首页。如果未跳转，请使用下面的按钮。</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="btn primary" onclick="location.assign('/')">返回首页</button>
|
||||||
|
<button class="btn" onclick="history.length>1?history.back():location.assign('/')">返回上一页</button>
|
||||||
|
</div>
|
||||||
|
<p class="hint">错误代码：404</p>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// 对于静态托管（如 GitHub Pages、Vercel 静态导出），尝试回退到 SPA 入口
|
||||||
|
setTimeout(function(){location.replace('/')}, 1500)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
78
src/pages/[...path].vue
Normal file
78
src/pages/[...path].vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { useRoute, RouterLink } from 'vue-router'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
CardFooter,
|
||||||
|
} from '@/components/ui/card'
|
||||||
|
import { AlertCircle, Home, ArrowLeft } from 'lucide-vue-next'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
if (history.length > 1) history.back()
|
||||||
|
else window.location.assign('/')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.title = '404 - 页面未找到'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main
|
||||||
|
class="relative min-h-dvh grid place-items-center px-6 py-16 bg-gradient-to-b from-background to-muted/40"
|
||||||
|
>
|
||||||
|
<!-- 背景点缀 -->
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
class="pointer-events-none absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-primary/10 to-transparent blur-2xl"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Card class="w-full max-w-xl">
|
||||||
|
<CardHeader class="text-center">
|
||||||
|
<div
|
||||||
|
class="mx-auto flex size-14 items-center justify-center rounded-full border bg-background/60 shadow-sm"
|
||||||
|
>
|
||||||
|
<AlertCircle class="size-7 text-primary" />
|
||||||
|
</div>
|
||||||
|
<CardTitle class="mt-3 text-2xl">页面未找到</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
抱歉，您访问的地址不存在或已被移动。
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent class="text-center text-sm text-muted-foreground break-words">
|
||||||
|
<p>
|
||||||
|
请求路径：
|
||||||
|
<span class="font-medium text-foreground/80">{{ route.fullPath }}</span>
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter class="flex items-center justify-center gap-3">
|
||||||
|
<RouterLink to="/">
|
||||||
|
<Button size="lg">
|
||||||
|
<Home class="size-4" />
|
||||||
|
返回首页
|
||||||
|
</Button>
|
||||||
|
</RouterLink>
|
||||||
|
<Button variant="outline" size="lg" @click="goBack">
|
||||||
|
<ArrowLeft class="size-4" />
|
||||||
|
返回上一页
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<p class="mt-6 text-center text-xs text-muted-foreground/80 select-none">
|
||||||
|
错误代码：404
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
@ -431,7 +431,7 @@ onMounted(async () => {
|
|||||||
<ChevronDown class="h-3.5 w-3.5" :class="{ 'rotate-180': open }" />
|
<ChevronDown class="h-3.5 w-3.5" :class="{ 'rotate-180': open }" />
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
<DropdownItem @click="$router.push('/device-management')" :style="{
|
<DropdownItem :href="accountStore.profile.providerInfo.website" target="_blank" :style="{
|
||||||
backgroundColor: (accountStore.profile.providerInfo.color || '#999') + '22',
|
backgroundColor: (accountStore.profile.providerInfo.color || '#999') + '22',
|
||||||
color: accountStore.profile.providerInfo.color || 'inherit',
|
color: accountStore.profile.providerInfo.color || 'inherit',
|
||||||
border: `1px solid ${(accountStore.profile.providerInfo.color || '#999')}55`
|
border: `1px solid ${(accountStore.profile.providerInfo.color || '#999')}55`
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user