86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
/**
|
||
* NotFound Page
|
||
* Cyberpunk Terminal Aesthetic
|
||
*/
|
||
|
||
import { Link } from "react-router-dom";
|
||
import PageMeta from "@/components/layout/PageMeta";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Terminal, AlertTriangle, Home } from "lucide-react";
|
||
|
||
export default function NotFound() {
|
||
return (
|
||
<>
|
||
<PageMeta title="页面未找到" description="" />
|
||
<div className="relative flex flex-col items-center justify-center min-h-screen p-6 cyber-bg-elevated font-mono overflow-hidden">
|
||
{/* Grid background */}
|
||
<div className="absolute inset-0 cyber-grid-subtle pointer-events-none" />
|
||
|
||
{/* Scanline effect */}
|
||
<div className="absolute inset-0 pointer-events-none opacity-30"
|
||
style={{
|
||
backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px)",
|
||
}}
|
||
/>
|
||
|
||
{/* Content */}
|
||
<div className="relative z-10 text-center max-w-lg mx-auto">
|
||
{/* Error Icon */}
|
||
<div className="w-24 h-24 bg-rose-500/20 border border-rose-500/40 rounded-lg flex items-center justify-center mx-auto mb-8"
|
||
style={{ boxShadow: '0 0 40px rgba(244,63,94,0.3)' }}>
|
||
<AlertTriangle className="w-12 h-12 text-rose-400" />
|
||
</div>
|
||
|
||
{/* Error Code */}
|
||
<div className="mb-6">
|
||
<span className="text-8xl font-bold text-primary"
|
||
style={{ textShadow: '0 0 30px rgba(255,107,44,0.5), 0 0 60px rgba(255,107,44,0.3)' }}>
|
||
404
|
||
</span>
|
||
</div>
|
||
|
||
{/* Terminal-style error message */}
|
||
<div className="cyber-card p-0 mb-8">
|
||
<div className="cyber-card-header">
|
||
<Terminal className="w-4 h-4 text-primary" />
|
||
<span className="text-sm font-bold uppercase tracking-wider text-foreground">ERROR_LOG</span>
|
||
</div>
|
||
<div className="p-4 text-left">
|
||
<div className="text-emerald-400 text-sm">
|
||
<span className="text-muted-foreground">[{new Date().toISOString()}]</span>
|
||
</div>
|
||
<div className="text-rose-400 text-sm mt-1">
|
||
<span className="text-muted-foreground">ERROR:</span> PAGE_NOT_FOUND
|
||
</div>
|
||
<div className="text-amber-400 text-sm mt-1">
|
||
<span className="text-muted-foreground">STATUS:</span> 404
|
||
</div>
|
||
<div className="text-muted-foreground text-sm mt-1">
|
||
<span className="text-muted-foreground">MESSAGE:</span> 请求的页面不存在或已被移除
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Description */}
|
||
<p className="text-muted-foreground mb-8 text-sm">
|
||
页面可能已被删除或不存在，请检查网址是否正确。
|
||
</p>
|
||
|
||
{/* Back Button */}
|
||
<Link to="/">
|
||
<Button className="cyber-btn-primary h-12 px-8 text-base font-bold uppercase">
|
||
<Home className="w-5 h-5 mr-2" />
|
||
返回首页
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-xs text-muted-foreground font-mono uppercase">
|
||
© {new Date().getFullYear()} DeepAudit
|
||
</p>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|