缓加载优化

src/pages/course/video.module.scss

@@ -49,7 +49,7 @@
     overflow-y: auto;
     .video-title {
       width: 100%;
-      height: 36px;
+      height: auto;
       font-size: 20px;
       font-weight: 600;
       color: rgba(255, 255, 255, 0.88);

src/pages/init/index.tsx

@@ -1,14 +1,11 @@
 import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Outlet } from "react-router-dom";
-// import styles from "./index.module.scss";
 import {
   SystemConfigStoreInterface,
   saveConfigAction,
 } from "../../store/system/systemConfigSlice";
 import { loginAction } from "../../store/user/loginUserSlice";
-import { Header, NoHeader, Footer } from "../../compenents";
-import { useParams, useLocation } from "react-router-dom";
 import { isMobile } from "../../utils/index";
 
 interface Props {
@@ -17,30 +14,8 @@ interface Props {
 }
 
 export const InitPage = (props: Props) => {
-  const pathname = useLocation().pathname;
-  const params = useParams();
   const dispatch = useDispatch();
-  const [showHeader, setShowHeader] = useState<boolean>(true);
-  const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
-  const [showFooter, setShowFooter] = useState<boolean>(true);
   const [init, setInit] = useState<boolean>(false);
-  useEffect(() => {
-    if (pathname) {
-      if (pathname === "/login") {
-        setShowNoHeader(true);
-        setShowHeader(false);
-        setShowFooter(false);
-      } else if (!params.hourId) {
-        setShowNoHeader(false);
-        setShowHeader(true);
-        setShowFooter(true);
-      } else {
-        setShowNoHeader(false);
-        setShowHeader(false);
-        setShowFooter(false);
-      }
-    }
-  }, [pathname, params]);
 
   useEffect(() => {
     if (props.loginData) {
@@ -84,11 +59,8 @@ export const InitPage = (props: Props) => {
   return (
     <>
       {init && (
-        <div>
-          {showNoHeader && <NoHeader></NoHeader>}
-          {showHeader && <Header></Header>}
+        <div style={{ minHeight: 900 }}>
           <Outlet />
-          {showFooter && <Footer></Footer>}
         </div>
       )}
     </>

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

@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import { Footer, Header } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithHeaderWithFooter = () => {
+  return (
+    <>
+      <Header></Header>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+      <Footer></Footer>
+    </>
+  );
+};
+
+export default WithHeaderWithFooter;

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

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+import { NoHeader } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithHeaderWithoutFooter = () => {
+  return (
+    <>
+      <NoHeader></NoHeader>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+    </>
+  );
+};
+
+export default WithHeaderWithoutFooter;

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

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+import { Footer } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithFooter = () => {
+  return (
+    <>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+      <Footer></Footer>
+    </>
+  );
+};
+
+export default WithoutHeaderWithFooter;

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

@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <Suspense fallback={<LoadingPage height="100vh" />}>
+      <Outlet />
+    </Suspense>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

src/pages/loading/index.module.scss

@@ -1,10 +1,6 @@
-.loadingBox {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-  text-align: center;
+.loading-box {
+  width: 100vw;
   line-height: 100vh;
+  text-align: center;
+  background-color: #f4fafe;
 }

src/pages/loading/index.tsx

@@ -1,11 +1,20 @@
 import { Spin } from "antd";
 import styles from "./index.module.scss";
 
-const LoadingPage = () => {
+interface PropsInterface {
+  height?: string;
+}
+
+const LoadingPage = (props: PropsInterface) => {
   return (
-    <div className={styles.loadingBox}>
-      <Spin />
-    </div>
+    <>
+      <div
+        className={styles["loading-box"]}
+        style={{ height: props.height || "100vh" }}
+      >
+        <Spin size="large" />
+      </div>
+    </>
   );
 };
 

src/routes/index.tsx

@@ -5,6 +5,11 @@ import { getToken } from "../utils";
 // 页面加载
 import { InitPage } from "../pages/init";
 import LoginPage from "../pages/login";
+import WithHeaderWithFooter from "../pages/layouts/with-header-with-footer";
+import WithHeaderWithoutFooter from "../pages/layouts/with-header-without-footer";
+import WithoutHeaderWithFooter from "../pages/layouts/without-header-with-footer";
+import WithoutHeaderWithoutFooter from "../pages/layouts/without-header-without-footer";
+
 //主页
 const IndexPage = lazy(() => import("../pages/index"));
 //课程相关
@@ -48,12 +53,6 @@ if (getToken()) {
   });
 }
 
-// 懒加载
-// const LoginPage = lazy(() => import("../pages/login"));
-// const IndexPage = lazy(() => import("../pages/index"));
-// const CoursePage = lazy(() => import("../pages/course"));
-// const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
-
 const routes: RouteObject[] = [
   {
     path: "/",
@@ -61,23 +60,43 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <PrivateRoute Component={<IndexPage />} />,
+        element: <WithHeaderWithFooter />,
+        children: [
+          {
+            path: "/",
+            element: <PrivateRoute Component={<IndexPage />} />,
+          },
+
+          {
+            path: "/course/:courseId",
+            element: <PrivateRoute Component={<CoursePage />} />,
+          },
+
+          {
+            path: "/latest-learn",
+            element: <PrivateRoute Component={<LatestLearnPage />} />,
+          },
+        ],
       },
       {
-        path: "/login",
-        element: <LoginPage />,
+        path: "/",
+        element: <WithHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+        ],
       },
       {
-        path: "/course/:courseId",
-        element: <PrivateRoute Component={<CoursePage />} />,
-      },
-      {
-        path: "/course/:courseId/hour/:hourId",
-        element: <PrivateRoute Component={<CoursePlayPage />} />,
-      },
-      {
-        path: "/latest-learn",
-        element: <PrivateRoute Component={<LatestLearnPage />} />,
+        path: "/",
+        element: <WithoutHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/course/:courseId/hour/:hourId",
+            element: <PrivateRoute Component={<CoursePlayPage />} />,
+          },
+        ],
       },
     ],
   },