From 8eca2cba58fd833e8ceeba31ce6c978997e1dd72 Mon Sep 17 00:00:00 2001
From: Chris <1637083533@qq.com>
Date: Mon, 28 Apr 2025 22:23:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84404=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=BF=94=E5=9B=9E=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=92=8C=E6=94=AF=E6=8C=81=E8=81=94=E7=B3=BB=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/not-found.tsx | 75 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 4 deletions(-)

diff --git a/web/src/app/not-found.tsx b/web/src/app/not-found.tsx
index 9a023999..0d5f0770 100644
--- a/web/src/app/not-found.tsx
+++ b/web/src/app/not-found.tsx
@@ -1,8 +1,75 @@
+"use client";
+
+import { Button, Typography, Space, Layout, Row, Col, Result } from 'antd';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+
+const { Title, Paragraph } = Typography;
+
 export default function NotFound() {
+    const router = useRouter();
+
     return (
-        <div className={``}>
-            {/* TODO: @qidongrui 这里404页面有时间要更新*/}
-            <h1>Langbot没有找到该页面喔～</h1>
-        </div>
+        <Layout style={{ height: '100vh', display: 'flex', background: 'white', justifyContent: 'center' }}>            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
+            <div className="error-container" style={{ width: '100%', textAlign: 'center' }}>
+                <div className="error-card" style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    padding: '24px'
+                }}>
+                    {/* Ant Design 图标，可以换成 Langbot 的 Logo */}
+                    <div style={{ marginBottom: '20px', maxWidth: '100%', height: 'auto' }}>
+                        <Result
+                            status="404"
+                            title={null}
+                            subTitle={null}
+                            style={{ padding: 0 }}
+                        />
+                    </div>
+
+                    <div className="error-text" style={{ textAlign: 'center', marginBottom: '24px' }}>
+                        <Title level={1} style={{ margin: '0 0 16px 0', fontSize: '72px', fontWeight: 'bold', color: '#333' }}>
+                            404
+                        </Title>
+                        <Title level={3} style={{ margin: '0 0 8px 0', fontWeight: 'normal', color: '#333' }}>
+                            页面不存在
+                        </Title>
+                        <Paragraph style={{ fontSize: '16px', color: '#666', maxWidth: '450px', margin: '0 auto 32px auto' }}>
+                            您要查找的页面似乎不存在。请检查您输入的 URL 是否正确，或者返回首页。
+                        </Paragraph>
+                    </div>
+
+                    <div className="error-button" style={{ marginBottom: '24px' }}>
+                        <Space>
+                            <Button type="primary" style={{
+                                backgroundColor: '#2288ee',
+                                borderColor: '#2288ee',
+                                borderRadius: '4px',
+                                height: '36px',
+                                padding: '0 16px'
+                            }} onClick={() => router.back()}>
+                                上一级
+                            </Button>
+                            <Button style={{
+                                borderColor: '#d9d9d9',
+                                borderRadius: '4px',
+                                height: '36px',
+                                padding: '0 16px'
+                            }} onClick={() => router.push('/')}>
+                                返回主页
+                            </Button>
+                        </Space>
+                    </div>
+
+                    <div className="error-support" style={{ textAlign: 'center', marginTop: '16px' }}>
+                        <Paragraph style={{ fontSize: '14px', color: '#666' }}>
+                            需要帮助吗？您可以联系 <a href="mailto:support@qq.com" style={{ color: '#000', textDecoration: 'none' }}>support@qq.com</a>
+                        </Paragraph>
+                    </div>
+                </div>
+            </div>
+        </Row>
+        </Layout>
     );
 }