From 0e561f8ed23f715af67b0de97b0d57e0f8cbc6fe Mon Sep 17 00:00:00 2001
From: SunWuyuan <sun@wuyuan.dev>
Date: Wed, 8 Oct 2025 12:15:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0404=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E4=BE=9B=E5=8F=8B=E5=A5=BD=E7=9A=84=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E6=8F=90=E7=A4=BA=E5=92=8C=E5=AF=BC=E8=88=AA=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/[...path].vue | 78 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/pages/[...path].vue

diff --git a/src/pages/[...path].vue b/src/pages/[...path].vue
new file mode 100644
index 0000000..e7a0b64
--- /dev/null
+++ b/src/pages/[...path].vue
@@ -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>