chore: base layout
This commit is contained in:
26
src/App.tsx
26
src/App.tsx
@@ -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 }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user