74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import type { MenuTheme } from 'antd';
|
|
import type { FC } from 'react';
|
|
|
|
import { AlertFilled, AreaChartOutlined, HomeFilled, VideoCameraFilled } from '@ant-design/icons';
|
|
import { Button, Layout, Menu, theme, Typography } from 'antd';
|
|
import { useState } from 'react';
|
|
|
|
const { Content, Footer, Header, Sider } = Layout;
|
|
const { Title } = Typography;
|
|
|
|
const App: FC = () => {
|
|
const { token: { colorBgContainer } } = theme.useToken();
|
|
const [menuTheme] = useState<MenuTheme>('light');
|
|
const [count, setCount] = useState(0);
|
|
|
|
return (
|
|
<Layout style={{ height: '100%' }}>
|
|
<Header style={{ background: colorBgContainer }}>
|
|
<Title level={2}>网络设备管理平台</Title>
|
|
</Header>
|
|
<Layout>
|
|
<Sider collapsible defaultCollapsed collapsedWidth={64} trigger={null} style={{ background: colorBgContainer }}>
|
|
<Menu
|
|
theme='light'
|
|
mode='inline'
|
|
defaultSelectedKeys={['home']}
|
|
items={[
|
|
{
|
|
label: '实时数据看板',
|
|
key: 'home',
|
|
icon: <HomeFilled />,
|
|
theme: menuTheme,
|
|
},
|
|
{
|
|
label: '实时设备状态',
|
|
key: 'device',
|
|
icon: <VideoCameraFilled />,
|
|
theme: menuTheme,
|
|
},
|
|
{
|
|
label: '设备告警记录',
|
|
key: 'alarm',
|
|
icon: <AlertFilled />,
|
|
theme: menuTheme,
|
|
},
|
|
{
|
|
key: 'statistics', // analysis
|
|
icon: <AreaChartOutlined />,
|
|
theme: menuTheme,
|
|
},
|
|
]}
|
|
>
|
|
</Menu>
|
|
</Sider>
|
|
<Content style={{ overflow: 'auto' }}>
|
|
{/* 内容区域 */}
|
|
<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>
|
|
</Layout>
|
|
<Footer style={{ background: colorBgContainer }}>
|
|
<div>Footer</div>
|
|
</Footer>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default App;
|