refactor: not found page

This commit is contained in:
Junyan Qin
2025-05-09 19:39:59 +08:00
parent 0db6a4e524
commit b966f47acb
2 changed files with 52 additions and 139 deletions

View File

@@ -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}>

View File

@@ -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>
);
}