From 6137916964aa6d37825a2ec1038a2e38f77710e8 Mon Sep 17 00:00:00 2001 From: unknown <18119604035@163.com> Date: Mon, 24 Jul 2023 10:35:56 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=93=E5=8A=A0=E8=BD=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/course/video.module.scss | 2 +- src/pages/init/index.tsx | 30 +--------- .../layouts/with-header-with-footer/index.tsx | 18 ++++++ .../with-header-without-footer/index.tsx | 17 ++++++ .../without-header-with-footer/index.tsx | 17 ++++++ .../without-header-without-footer/index.tsx | 13 +++++ src/pages/loading/index.module.scss | 12 ++-- src/pages/loading/index.tsx | 17 ++++-- src/routes/index.tsx | 57 ++++++++++++------- 9 files changed, 122 insertions(+), 61 deletions(-) create mode 100644 src/pages/layouts/with-header-with-footer/index.tsx create mode 100644 src/pages/layouts/with-header-without-footer/index.tsx create mode 100644 src/pages/layouts/without-header-with-footer/index.tsx create mode 100644 src/pages/layouts/without-header-without-footer/index.tsx diff --git a/src/pages/course/video.module.scss b/src/pages/course/video.module.scss index b193787..b9b23f2 100644 --- a/src/pages/course/video.module.scss +++ b/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); diff --git a/src/pages/init/index.tsx b/src/pages/init/index.tsx index ec1e21e..7ea6f5c 100644 --- a/src/pages/init/index.tsx +++ b/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(true); - const [showNoHeader, setShowNoHeader] = useState(false); - const [showFooter, setShowFooter] = useState(true); const [init, setInit] = useState(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 && ( -
- {showNoHeader && } - {showHeader &&
} +
- {showFooter &&
}
)} diff --git a/src/pages/layouts/with-header-with-footer/index.tsx b/src/pages/layouts/with-header-with-footer/index.tsx new file mode 100644 index 0000000..9d87a56 --- /dev/null +++ b/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 ( + <> +
+ }> + + +
+ + ); +}; + +export default WithHeaderWithFooter; diff --git a/src/pages/layouts/with-header-without-footer/index.tsx b/src/pages/layouts/with-header-without-footer/index.tsx new file mode 100644 index 0000000..0d422bc --- /dev/null +++ b/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 ( + <> + + }> + + + + ); +}; + +export default WithHeaderWithoutFooter; diff --git a/src/pages/layouts/without-header-with-footer/index.tsx b/src/pages/layouts/without-header-with-footer/index.tsx new file mode 100644 index 0000000..68dca21 --- /dev/null +++ b/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 ( + <> + }> + + +
+ + ); +}; + +export default WithoutHeaderWithFooter; diff --git a/src/pages/layouts/without-header-without-footer/index.tsx b/src/pages/layouts/without-header-without-footer/index.tsx new file mode 100644 index 0000000..b4f80ae --- /dev/null +++ b/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 ( + }> + + + ); +}; + +export default WithoutHeaderWithoutFooter; diff --git a/src/pages/loading/index.module.scss b/src/pages/loading/index.module.scss index 1b38194..b721fdc 100644 --- a/src/pages/loading/index.module.scss +++ b/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; } diff --git a/src/pages/loading/index.tsx b/src/pages/loading/index.tsx index 1246bec..9574abd 100644 --- a/src/pages/loading/index.tsx +++ b/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 ( -
- -
+ <> +
+ +
+ ); }; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 14e026f..63993b2 100644 --- a/src/routes/index.tsx +++ b/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: } />, + element: , + children: [ + { + path: "/", + element: } />, + }, + + { + path: "/course/:courseId", + element: } />, + }, + + { + path: "/latest-learn", + element: } />, + }, + ], }, { - path: "/login", - element: , + path: "/", + element: , + children: [ + { + path: "/login", + element: , + }, + ], }, { - path: "/course/:courseId", - element: } />, - }, - { - path: "/course/:courseId/hour/:hourId", - element: } />, - }, - { - path: "/latest-learn", - element: } />, + path: "/", + element: , + children: [ + { + path: "/course/:courseId/hour/:hourId", + element: } />, + }, + ], }, ], },