From e862d40a71508b2203b13dec9c1c79cf29ca02ec Mon Sep 17 00:00:00 2001
From: skycurtain <skycurtain@163.com>
Date: Thu, 31 Jul 2025 17:09:53 +0800
Subject: [PATCH] chore: base layout

---
 src/App.tsx | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index db1f037..10ef6c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,73 @@
+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 = () => {
-  return <div>Hello World</div>;
+  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;