From b966f47acb88c9e938f55a4f5a39fb6bb0a3c019 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 9 May 2025 19:39:59 +0800
Subject: [PATCH] refactor: not found page

---
 web/src/app/home/layout.tsx |  19 ----
 web/src/app/not-found.tsx   | 172 +++++++++++-------------------------
 2 files changed, 52 insertions(+), 139 deletions(-)

diff --git a/web/src/app/home/layout.tsx b/web/src/app/home/layout.tsx
index 5e4781c1..2d2d7e56 100644
--- a/web/src/app/home/layout.tsx
+++ b/web/src/app/home/layout.tsx
@@ -21,25 +21,6 @@ export default function HomeLayout({
   };
 
   return (
-    // <Layout className={styles.homeLayoutContainer}>
-    //   {/* homeLayoutContainer 是整个容器的入口,使用 flex 的左右布局 */}
-
-    //   <Sider className="left">
-    //     <HomeSidebar onSelectedChangeAction={onSelectedChangeAction} />
-    //     {/* HomeSidebar 为侧边栏 */}
-    //   </Sider>
-
-    //   <Layout className="right">
-    //     {/* right 为内容显示区域，right使用 flex 上下布局，right 使用 flex 布局吃掉剩余部分 */}
-
-    //     <HomeTitleBar title={title} />
-
-    //     <Content className={styles.main}>
-    //       {/* mainContent 为主页面 */}
-    //       {children}
-    //     </Content>
-    //   </Layout>
-    // </Layout>
 
     <div className={styles.homeLayoutContainer}>
       <aside className={styles.sidebar}>
diff --git a/web/src/app/not-found.tsx b/web/src/app/not-found.tsx
index 693f0fdd..720a8c7e 100644
--- a/web/src/app/not-found.tsx
+++ b/web/src/app/not-found.tsx
@@ -1,131 +1,63 @@
 'use client';
 
-import { Button, Typography, Space, Layout, Row, Col, Result } from 'antd';
 import { useRouter } from 'next/navigation';
-
-const { Title, Paragraph } = Typography;
+import { Button } from "@/components/ui/button";
+import { GithubIcon } from "lucide-react";
 
 export default function NotFound() {
   const router = useRouter();
 
   return (
-    <Layout style={{ minHeight: '100vh', background: 'white' }}>
-      <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
-        <Col xs={22} sm={20} md={18} lg={14} xl={10}>
-          <div
-            className="error-container"
-            style={{ width: '100%', padding: '20px 0', 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 className="min-h-screen bg-white flex items-center justify-center">
+      <div className="w-full max-w-[600px] px-4">
+        <div className="flex flex-col items-center p-6">
+          {/* 404 图标 */}
+          <div className="mb-8">
+            <div className="text-[72px] font-bold text-gray-800">404</div>
           </div>
-        </Col>
-      </Row>
-    </Layout>
+
+          {/* 错误文本 */}
+          <div className="text-center mb-8">
+            <h1 className="text-2xl font-normal text-gray-800 mb-2">
+              页面不存在
+            </h1>
+            <p className="text-base text-gray-600 max-w-[450px] mx-auto mb-8">
+              您要查找的页面似乎不存在。请检查您输入的 URL 是否正确，或者返回首页。
+            </p>
+          </div>
+
+          {/* 按钮组 */}
+          <div className="flex gap-4 mb-6">
+            <Button
+              variant="default"
+              onClick={() => router.back()}
+              className="h-9 px-4 cursor-pointer"
+            >
+              上一级
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => router.push('/home')}
+              className="h-9 px-4 cursor-pointer"
+            >
+              返回主页
+            </Button>
+          </div>
+
+          {/* 帮助文档链接 */}
+          <div className="text-center">
+            <p className="text-sm text-gray-600">
+              查看
+              <a
+                href="https://docs.langbot.app"
+                className="text-black no-underline hover:underline"
+              >
+                帮助文档
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }