添加菜单

src/App.tsx

@@ -5,7 +5,7 @@ import { Outlet } from "react-router";
 import { Layout } from "antd";
 import { default as AppHeader} from "./components/Header";
 import { default as AppFooter} from "./components/Footer";
-import Menu from "./components/Menu";
+import SideMenu from "./components/SideMenu";
 
 const { Header, Footer, Sider, Content } = Layout;
 
@@ -27,13 +27,6 @@ function App() {
 		backgroundColor: "#0958d9",
 	};
 
-	const siderStyle: React.CSSProperties = {
-		textAlign: "center",
-		lineHeight: "100vh",
-		color: "#fff",
-		backgroundColor: "#3165D2",
-	};
-
 	const footerStyle: React.CSSProperties = {
 		textAlign: "center",
 		color: "#fff",
@@ -46,8 +39,8 @@ function App() {
 	return (
 		<div className="">
 			<Layout style={layoutStyle}>
-				<Sider width="260px" style={siderStyle}>
-					<Menu />
+				<Sider width="200px">
+					<SideMenu />
 				</Sider>
 				<Layout>
 					<Header style={headerStyle}>

src/assets/menu/icon_measure.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28" height="27" viewBox="0 0 28 27"><g><path d="M1.18734,7.68004L3.32278,5.53183L4.65743,6.87446L2.52199,9.02267L3.85664,10.3653L5.99209,8.08283L7.32674,9.42546L5.19129,11.5737L5.59169,12.6478L12.6653,5.66609L7.8606,0.429829C7.05981,-0.241487,5.59169,-0.107224,4.92436,0.698355L0.386545,4.99478C-0.280781,5.66609,-0.0138507,6.60593,0.653476,7.27725L1.18734,7.68004ZM0.653476,25.4028C0.52001,25.9398,0.920406,26.3426,1.45427,26.2084L9.59565,23.6574L3.32278,17.4813L0.653476,25.4028ZM27.2131,6.7402C27.8804,6.06888,27.8804,5.12904,27.2131,4.45772L23.3426,0.698355C22.6752,0.0270394,21.6075,0.0270394,20.9402,0.698355L18.1374,3.38362L24.4103,9.42546L27.2131,6.7402ZM17.2032,4.32346L4.25704,16.6757L10.5299,22.7175L23.476,10.231L17.2032,4.32346ZM27.6135,19.2267L21.741,13.7219L14.5339,20.5693L15.8685,21.9119L18.1374,19.7637L19.4721,21.1064L17.2032,23.2546L18.5378,24.5972L20.8067,22.449L22.1414,23.7916L19.8725,25.9398L20.2729,26.3426C20.9402,27.0139,22.0079,27.2825,22.8087,26.6111L27.3465,22.3147C28.0139,21.3749,28.2808,19.898,27.6135,19.2267Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/components/Menu.tsx

@@ -1,3 +0,0 @@
-export default function Menu() {
-    return <div>Menu</div>
-}

src/components/SideMenu.scss

@@ -0,0 +1,29 @@
+.side-menu {
+	.ant-menu-submenu-title {
+		color: #fff;
+
+		img {
+			width: 16px;
+		}
+		.ant-menu-title-content {
+			color: #fff;
+		}
+	}
+	.ant-menu-submenu-selected {
+		background-color: #3458bc;
+	}
+	.ant-menu-item {
+		margin-inline: 0;
+		border-radius: 0;
+	}
+	.ant-menu-item-selected {
+		width: 100%;
+	}
+
+	.ant-menu-item {
+		color: #fff;
+	}
+	.ant-menu-item-selected {
+		color: var(--primaryColor);
+	}
+}

src/components/SideMenu.tsx

@@ -0,0 +1,47 @@
+import type { MenuProps } from "antd";
+import { Menu } from "antd";
+import icon_logo from "../assets/icon_logo.svg";
+import icon_measure from "../assets/menu/icon_measure.svg";
+
+import "./SideMenu.scss";
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+const items: MenuItem[] = [
+	{
+		key: "sub1",
+		label: "测量",
+		icon: <img src={icon_measure} alt="" />,
+		children: [
+			{
+				key: "g1",
+				label: "新测量",
+			},
+			{
+				key: "g2",
+				label: "测量记录",
+			},
+		],
+	},
+];
+
+export default function SideMenu() {
+	const onClick: MenuProps["onClick"] = e => {
+		console.log("click ", e);
+	};
+	return (
+		<div className="h-[100vh] bg-primary flex flex-col">
+			<img src={icon_logo} alt="" className="w-[120px] block mx-auto py-4 " />
+			<Menu
+				className="side-menu"
+				onClick={onClick}
+				style={{ width: "100%", backgroundColor: "transparent", color: "#fff" }}
+				defaultSelectedKeys={["1"]}
+				defaultOpenKeys={["sub1"]}
+				mode="inline"
+				items={items}
+			/>
+      <p className="text-white/[0.7] text-center mt-auto mb-4 text-lg">V1.0</p>
+		</div>
+	);
+}

src/index.css

@@ -3,15 +3,17 @@
 @tailwind utilities;
 
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+		"Droid Sans", "Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+:root {
+	--primaryColor: #3e63cb;
 }

src/pages/home/Home.tsx

@@ -1,4 +1,4 @@
-import "./Home.module.scss";
+import "./Home.scss";
 
 export default function Home() {
 	return (

tailwind.config.js

@@ -3,7 +3,7 @@ module.exports = {
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
 	theme: {
 		colors: {
-			primary: "#3165D2",
+			primary: "#3e63cb",
 			white: "#FFF",
 			title: "#646566",
 			text: "#333",