Skip to content

Commit 342d08e

Browse files
Ohh-889Ohh-889
committed
feat(ui): add 404 page component and update package.json for TS imports
1 parent d4a6a80 commit 342d08e

File tree

2 files changed

+113
-13
lines changed

2 files changed

+113
-13
lines changed

‎packages/ui/package.json‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,7 @@
55
"private": false,
66
"exports": {
77
".": {
8-
"types": "./dist/index.d.ts",
9-
"import": "./dist/index.js",
10-
"require": "./dist/index.js"
11-
},
12-
"./*": {
13-
"types": "./dist/components/*/index.d.ts",
14-
"import": "./dist/components/*/index.js",
15-
"require": "./dist/components/*/index.js"
16-
},
17-
"./utils": {
18-
"types": "./dist/lib/index.d.ts",
19-
"import": "./dist/lib/index.js",
20-
"require": "./dist/lib/index.js"
8+
"import": "./src/index.ts"
219
}
2210
},
2311
"main": "./dist/index.js",

‎playground/src/app/not-found.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
'use client';
2+
3+
import { ArrowLeft, Home, Mail, RefreshCw } from 'lucide-react';
4+
import Link from 'next/link';
5+
6+
export default function NotFound() {
7+
return (
8+
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
9+
{/* 背景装饰 */}
10+
<div className="absolute inset-0 overflow-hidden">
11+
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse" />
12+
<div
13+
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse"
14+
style={{ animationDelay: '1s' }}
15+
/>
16+
<div
17+
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-pink-500/5 rounded-full blur-3xl animate-pulse"
18+
style={{ animationDelay: '0.5s' }}
19+
/>
20+
</div>
21+
22+
<div className="relative z-10 text-center max-w-2xl mx-auto">
23+
{/* 404 大数字 */}
24+
<div className="relative mb-8">
25+
<h1 className="text-9xl md:text-[12rem] font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent animate-pulse">
26+
404
27+
</h1>
28+
<div
29+
className="absolute inset-0 text-9xl md:text-[12rem] font-bold text-purple-500/20 blur-sm animate-pulse"
30+
style={{ animationDelay: '0.3s' }}
31+
>
32+
404
33+
</div>
34+
</div>
35+
36+
{/* 主标题 */}
37+
<div className="mb-6 space-y-2">
38+
<h2 className="text-3xl md:text-5xl font-bold text-white mb-4 animate-bounce">页面走丢了</h2>
39+
<p className="text-lg md:text-xl text-slate-300 animate-fade-in">抱歉，您访问的页面不存在或已被移动</p>
40+
</div>
41+
42+
{/* 描述文字 */}
43+
<div className="mb-8 animate-pulse">
44+
<p className="text-slate-400 max-w-md mx-auto leading-relaxed">
45+
不用担心，这种事情时有发生。您可以返回首页，或者尝试搜索您要找的内容。
46+
</p>
47+
</div>
48+
49+
{/* 行动按钮 */}
50+
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
51+
<Link href="/">
52+
<button className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white border-0 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 font-medium">
53+
<Home className="w-4 h-4 mr-2" />
54+
回到首页
55+
</button>
56+
</Link>
57+
<button
58+
className="inline-flex items-center px-6 py-3 border border-slate-600 text-slate-300 hover:text-white hover:border-slate-500 hover:bg-slate-800/50 transition-all duration-300 hover:scale-105 rounded-lg font-medium"
59+
onClick={() => window.history.back()}
60+
>
61+
<ArrowLeft className="w-4 h-4 mr-2" />
62+
返回上页
63+
</button>
64+
65+
<button
66+
className="inline-flex items-center px-6 py-3 border border-slate-600 text-slate-300 hover:text-white hover:border-slate-500 hover:bg-slate-800/50 transition-all duration-300 hover:scale-105 rounded-lg font-medium"
67+
onClick={() => window.location.reload()}
68+
>
69+
<RefreshCw className="w-4 h-4 mr-2" />
70+
重新加载
71+
</button>
72+
</div>
73+
74+
{/* 快速导航 */}
75+
<div className="animate-bounce">
76+
<h3 className="text-slate-400 text-sm uppercase tracking-wider mb-4 font-semibold">常用页面</h3>
77+
<div className="flex flex-wrap justify-center gap-2">
78+
<Link href="/button">
79+
<span className="inline-flex items-center px-4 py-2 rounded-full bg-slate-800/50 text-slate-300 hover:text-white hover:bg-slate-700/50 transition-all duration-300 text-sm border border-slate-700 hover:border-slate-600">
80+
Button 组件
81+
</span>
82+
</Link>
83+
<Link href="/project">
84+
<span className="inline-flex items-center px-4 py-2 rounded-full bg-slate-800/50 text-slate-300 hover:text-white hover:bg-slate-700/50 transition-all duration-300 text-sm border border-slate-700 hover:border-slate-600">
85+
项目页面
86+
</span>
87+
</Link>
88+
<Link href="/">
89+
<span className="inline-flex items-center px-4 py-2 rounded-full bg-slate-800/50 text-slate-300 hover:text-white hover:bg-slate-700/50 transition-all duration-300 text-sm border border-slate-700 hover:border-slate-600">
90+
文档首页
91+
</span>
92+
</Link>
93+
</div>
94+
</div>
95+
96+
{/* 联系信息 */}
97+
<div className="mt-16 pt-8 border-t border-slate-700/50 animate-pulse">
98+
<p className="text-slate-500 text-sm">
99+
如果问题持续存在，请
100+
<a
101+
className="text-purple-400 hover:text-purple-300 transition-colors inline-flex items-center ml-1"
102+
href="mailto:support@example.com"
103+
>
104+
<Mail className="w-3 h-3 mr-1" />
105+
联系我们
106+
</a>
107+
</p>
108+
</div>
109+
</div>
110+
</div>
111+
);
112+
}

0 commit comments

Comments
 (0)