缓加载优化

src/pages/layouts/with-header-without-footer/index.module.less

@@ -0,0 +1,40 @@
+.layout-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  .left-menu {
+    width: 200px;
+    height: 100%;
+    float: left;
+  }
+  .right-cont {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #f6f6f6;
+    overflow-x: auto;
+    overflow-y: auto;
+    .right-top {
+      height: 48px;
+      position: sticky;
+      left: 0;
+      top: 0;
+      right: 0;
+      z-index: 10;
+    }
+    .right-main {
+      min-width: 1400px;
+      float: left;
+      height: auto;
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      /* Firefox */
+      -webkit-box-sizing: border-box;
+      /* Safari */
+      padding: 24px;
+    }
+  }
+}

src/pages/layouts/with-header-without-footer/index.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import styles from "./index.module.less";
+import { Outlet } from "react-router-dom";
+import { Header, LeftMenu } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const HomePage = () => {
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <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"]}>
+            <Suspense fallback={<LoadingPage height="100vh" />}>
+              {/* 二级路由出口 */}
+              <Outlet />{" "}
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default HomePage;

src/pages/layouts/without-header-without-footer/index.module.less

@@ -0,0 +1,8 @@
+.layout-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+}

src/pages/layouts/without-header-without-footer/index.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import styles from "./index.module.less";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <div className={styles["layout-wrap"]}>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+    </div>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;