mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-07-18 10:26:07 +00:00
Refactor and enhance UI components across the application
- Improved formatting and consistency in BotConfigPage, HomeSidebar, and Plugin components. - Removed unnecessary Spin component to prevent layout collapse in BotConfigPage. - Enhanced sidebar selection logic to reflect current URL path in HomeSidebar. - Updated layout styles for better responsiveness and visual appeal. - Implemented mock data fetching in PluginMarketComponent for improved testing and development. - Added pagination and search functionality in PluginMarketComponent. - Refactored PluginInstalledComponent to streamline plugin list rendering and modal handling. - Adjusted CSS styles for better alignment and spacing in various components. - Removed commented-out code in HttpClient for cleaner codebase. - Enhanced NotFound component layout for better user experience.
This commit is contained in:
Chris
+59
-56
@@ -10,66 +10,69 @@ export default function NotFound() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<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>
|
||||
<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-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-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 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>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user