chore: base layout

This commit is contained in:
2025-08-01 06:37:40 +08:00
parent aee201b741
commit 4a642c24d2

View File

@@ -1,22 +1,20 @@
import type { MenuTheme } from 'antd'; import type { MenuTheme } from 'antd';
import type { FC } from 'react'; import type { FC } from 'react';
import { AlertFilled, AreaChartOutlined, HomeFilled, VideoCameraFilled } from '@ant-design/icons'; import { AlertFilled, AreaChartOutlined, FileTextFilled, HomeFilled, VideoCameraFilled } from '@ant-design/icons';
import { Button, Layout, Menu, theme, Typography } from 'antd'; import { Layout, Menu, theme } from 'antd';
import { useState } from 'react'; import { useState } from 'react';
const { Content, Footer, Header, Sider } = Layout; const { Content, Footer, Header, Sider } = Layout;
const { Title } = Typography;
const App: FC = () => { const App: FC = () => {
const { token: { colorBgContainer } } = theme.useToken(); const { token: { colorBgContainer } } = theme.useToken();
const [menuTheme] = useState<MenuTheme>('light'); const [menuTheme] = useState<MenuTheme>('light');
const [count, setCount] = useState(0);
return ( return (
<Layout style={{ height: '100%' }}> <Layout style={{ height: '100%' }}>
<Header style={{ background: colorBgContainer }}> <Header style={{ background: colorBgContainer }}>
<Title level={2}></Title> <h2 style={{ fontWeight: 'bold' }}></h2>
</Header> </Header>
<Layout> <Layout>
<Sider collapsible defaultCollapsed collapsedWidth={64} trigger={null} style={{ background: colorBgContainer }}> <Sider collapsible defaultCollapsed collapsedWidth={64} trigger={null} style={{ background: colorBgContainer }}>
@@ -44,23 +42,23 @@ const App: FC = () => {
theme: menuTheme, theme: menuTheme,
}, },
{ {
label: '设备性能统计',
key: 'statistics', // analysis key: 'statistics', // analysis
icon: <AreaChartOutlined />, icon: <AreaChartOutlined />,
theme: menuTheme, theme: menuTheme,
}, },
{
label: '系统日志记录',
key: 'log',
icon: <FileTextFilled />,
theme: menuTheme,
}
]} ]}
> >
</Menu> </Menu>
</Sider> </Sider>
<Content style={{ overflow: 'auto' }}> {/* 内容区域 */}
{/* 内容区域 */} <Content style={{ overflow: 'auto', background: colorBgContainer }}>
<Button onClick={() => setCount(count + 1)}>{`count is ${count}`}</Button>
<div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
<div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
<div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
<div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
<div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
<div>Bottom</div>
</Content> </Content>
</Layout> </Layout>
<Footer style={{ background: colorBgContainer }}> <Footer style={{ background: colorBgContainer }}>