左侧栏初步

src/pages/home/HomePage.module.css

@@ -1,8 +1,23 @@
 .page-content {
-    width: 1200px;
-    min-height: calc(100vh - 173px);
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 30px;
-    margin-bottom: 100px;
-  }
+  width: 1200px;
+  min-height: calc(100vh - 173px);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30px;
+  margin-bottom: 100px;
+}
+
+.layout-wrap {
+  width: 100%;
+  display: flex;
+}
+
+.left-menu {
+  width: 200px;
+}
+
+.right-cont {
+  width: calc(100% - 200px);
+  display: flex;
+  flex-direction: column;
+}

src/pages/home/HomePage.tsx

@@ -1,13 +1,25 @@
 import React from "react";
 import styles from "./HomePage.module.css";
-import { Header, Footer } from "../../compenents";
+import { Outlet } from "react-router-dom";
+import { Header, LeftMenu } from "../../compenents";
 
 export const HomePage: React.FC = () => {
   return (
     <>
-      <Header></Header>
-      <div className={styles["page-content"]}>主页</div>
-      <Footer></Footer>
+      <div className={styles["layout-wrap"]}>
+        <div className={styles["left-menu"]}>
+          <LeftMenu />
+        </div>
+        <div className={styles["right-cont"]}>
+          <div className={styles["right-top"]}>
+            <Header></Header>
+          </div>
+          <div className={styles["right-main"]}>
+            {/* 二级路由出口 */}
+            <Outlet />
+          </div>
+        </div>
+      </div>
     </>
   );
 };