Merge pull request #11 from PlayEdu/dev

弹窗组件open外置并使用三元运算

src/App.tsx

@@ -11,7 +11,7 @@ if (G_ID) {
 }
 
 const App = () => {
-  const Views = () => useRoutes(routes);
+  const views = useRoutes(routes);
 
   const location = useLocation();
   useEffect(() => {
@@ -23,7 +23,7 @@ const App = () => {
 
   return (
     <Suspense fallback={<LoadingPage />}>
-      <Views />
+      {views}
     </Suspense>
   );
 };

src/api/course.ts

@@ -31,3 +31,8 @@ export function playPing(courseId: number, hourId: number) {
 export function latestLearn() {
   return client.get(`/api/v1/user/latest-learn`, {});
 }
+
+//下载课件
+export function downloadAttachment(courseId: number, id: number) {
+  return client.get(`/api/v1/course/${courseId}/attach/${id}/download`, {});
+}

src/api/internal/httpClient.ts

@@ -7,6 +7,10 @@ const GoLogin = () => {
   window.location.href = "/login";
 };
 
+const GoError = () => {
+  window.location.href = "/error";
+};
+
 export class HttpClient {
   axios: Axios;
 
@@ -52,10 +56,13 @@ export class HttpClient {
           GoLogin();
         } else if (status === 404) {
           // 跳转到404页面
+          GoError();
         } else if (status === 403) {
           // 跳转到无权限页面
+          GoError();
         } else if (status === 500) {
           // 跳转到500异常页面
+          GoError();
         }
         return Promise.reject(error.response);
       }

src/api/login.ts

@@ -1,16 +1,9 @@
 import client from "./internal/httpClient";
 
-export function login(
-  email: string,
-  password: string,
-  captchaKey: string,
-  captchaVal: string
-) {
+export function login(email: string, password: string) {
   return client.post("/api/v1/auth/login/password", {
     email: email,
     password: password,
-    captcha_key: captchaKey,
-    captcha_val: captchaVal,
   });
 }
 

src/compenents/change-password/index.tsx

@@ -40,11 +40,12 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
 
   return (
     <>
+      {open ? (
         <Modal
           title="修改密码"
           centered
           forceRender
-        open={open}
+          open={true}
           width={416}
           onOk={() => form.submit()}
           onCancel={() => onCancel()}
@@ -97,6 +98,7 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
             </Form>
           </div>
         </Modal>
+      ) : null}
     </>
   );
 };

src/compenents/user-info/index.tsx

@@ -75,11 +75,12 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
 
   return (
     <>
+      {open ? (
         <Modal
           title="个人信息"
           centered
           forceRender
-        open={open}
+          open={true}
           width={416}
           onCancel={() => onCancel()}
           maskClosable={false}
@@ -129,6 +130,7 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
             </Form>
           </div>
         </Modal>
+      ) : null}
     </>
   );
 };

src/pages/course/index.module.scss

@@ -92,13 +92,67 @@
   }
 }
 
+.tabs {
+  width: 1200px;
+  height: 48px;
+  margin: 0 auto;
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .tab-item {
+    width: 64px;
+    height: 48px;
+    margin-right: 50px;
+    transition: all 0.2s;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+      .tit {
+        color: #ff4d4f;
+      }
+    }
+    .tit {
+      width: 64px;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 40px;
+    }
+  }
+  .tab-active-item {
+    width: 64px;
+    height: 48px;
+    cursor: pointer;
+    margin-right: 50px;
+    transition: all 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+    .tit {
+      width: 64px;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #ff4d4f;
+      line-height: 40px;
+    }
+    .banner {
+      animation: scaleTransX 0.3s;
+    }
+  }
+}
+
 .chapters-hours-cont {
   width: 100%;
   height: auto;
   background: #ffffff;
   box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
   border-radius: 12px;
-  margin-top: 30px;
+  margin-top: 24px;
   box-sizing: border-box;
   padding: 24px;
   .hours-list-box {
@@ -135,3 +189,58 @@
     }
   }
 }
+
+.attachments-cont {
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+  margin-top: 24px;
+  box-sizing: border-box;
+  padding: 24px;
+  .attachments-item {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0px 24px;
+    margin-bottom: 8px;
+    text-align: left;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .left-cont {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .title {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        margin-right: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+    .download {
+      width: auto;
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ff4d4f;
+      line-height: 24px;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}

src/pages/course/index.tsx

@@ -1,20 +1,41 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Spin, Image, Progress } from "antd";
+import { Row, Spin, Image, Progress } from "antd";
 import styles from "./index.module.scss";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { course as Course } from "../../api/index";
 import mediaIcon from "../../assets/images/commen/icon-medal.png";
 import { HourCompenent } from "./compenents/hour";
 import { Empty } from "../../compenents";
+import iconRoute from "../../assets/images/commen/icon-route.png";
+
+type tabModal = {
+  key: number;
+  label: string;
+};
+
+type attachModal = {
+  id: number;
+  course_id: number;
+  rid: number;
+  sort: number;
+  title: string;
+  type: string;
+  url?: string;
+};
 
 const CoursePage = () => {
   const params = useParams();
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
   const [loading, setLoading] = useState<boolean>(true);
   const [course, setCourse] = useState<any>({});
   const [chapters, setChapters] = useState<any>([]);
   const [hours, setHours] = useState<any>({});
   const [learnRecord, setLearnRecord] = useState<any>({});
   const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+  const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
+  const [attachments, setAttachments] = useState<attachModal[]>([]);
+  const [items, setItems] = useState<tabModal[]>([]);
 
   useEffect(() => {
     getDetail();
@@ -34,6 +55,22 @@ const CoursePage = () => {
         if (res.data.learn_hour_records) {
           setLearnHourRecord(res.data.learn_hour_records);
         }
+        let arr = res.data.attachments;
+        let tabs = [
+          {
+            key: 1,
+            label: `课程目录`,
+          },
+        ];
+        if (arr.length > 0) {
+          tabs.push({
+            key: 2,
+            label: `课程附件`,
+          });
+          setAttachments(arr);
+        }
+        setItems(tabs);
+
         setLoading(false);
       })
       .catch((e) => {
@@ -41,6 +78,17 @@ const CoursePage = () => {
       });
   };
 
+  const onChange = (key: number) => {
+    setTabKey(key);
+    navigate("/course/" + params.courseId + "?tab=" + key);
+  };
+
+  const downLoadFile = (cid: number, id: number) => {
+    Course.downloadAttachment(cid, id).then((res: any) => {
+      window.open(res.data.download_url);
+    });
+  };
+
   return (
     <div className="container">
       {loading && (
@@ -133,6 +181,34 @@ const CoursePage = () => {
               <div className={styles["desc"]}>{course.short_desc}</div>
             )}
           </div>
+          <div className={styles["tabs"]}>
+            {items.map((item: any) => (
+              <div
+                key={item.key}
+                className={
+                  item.key === tabKey
+                    ? styles["tab-active-item"]
+                    : styles["tab-item"]
+                }
+                onClick={() => {
+                  onChange(item.key);
+                }}
+              >
+                <div className={styles["tit"]}>{item.label}</div>
+                {item.key === tabKey && (
+                  <Image
+                    className={styles["banner"]}
+                    width={40}
+                    height={8}
+                    preview={false}
+                    src={iconRoute}
+                    style={{ marginTop: -16 }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+          {tabKey === 1 && (
             <div className={styles["chapters-hours-cont"]}>
               {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
                 <Empty />
@@ -173,7 +249,8 @@ const CoursePage = () => {
                   {chapters.map((item: any, index: number) => (
                     <div key={item.id} className={styles["chapter-it"]}>
                       <div className={styles["chapter-name"]}>{item.name}</div>
-                    {hours[item.id].map((it: any, int: number) => (
+                      {hours[item.id] &&
+                        hours[item.id].map((it: any, int: number) => (
                           <div key={it.id} className={styles["hours-it"]}>
                             {learnHourRecord[it.id] && (
                               <HourCompenent
@@ -183,7 +260,8 @@ const CoursePage = () => {
                                 record={learnHourRecord[it.id]}
                                 duration={it.duration}
                                 progress={
-                              (learnHourRecord[it.id].finished_duration * 100) /
+                                  (learnHourRecord[it.id].finished_duration *
+                                    100) /
                                   learnHourRecord[it.id].total_duration
                                 }
                               ></HourCompenent>
@@ -205,6 +283,34 @@ const CoursePage = () => {
                 </div>
               )}
             </div>
+          )}
+          {tabKey === 2 && (
+            <div className={styles["attachments-cont"]}>
+              {attachments.map((item: any, index: number) => (
+                <div key={index} className={styles["attachments-item"]}>
+                  <div className={styles["left-cont"]}>
+                    <i
+                      className="iconfont icon-icon-file"
+                      style={{
+                        fontSize: 16,
+                        color: "rgba(0,0,0,0.3)",
+                        marginRight: 10,
+                      }}
+                    />
+                    <span className={styles["title"]}>
+                      {item.title}.{item.ext}
+                    </span>
+                  </div>
+                  <div
+                    className={styles["download"]}
+                    onClick={() => downLoadFile(item.course_id, item.id)}
+                  >
+                    下载
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </>
       )}
     </div>

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/error/index.module.scss

@@ -0,0 +1,4 @@
+.main {
+  width: 100vw;
+  height: 100vh;
+}

src/pages/error/index.tsx

@@ -0,0 +1,28 @@
+import { Button, Result } from "antd";
+import { useNavigate } from "react-router-dom";
+import styles from "./index.module.scss";
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="您访问的页面不存在"
+      className={styles["main"]}
+      extra={
+        <Button
+          type="primary"
+          onClick={() => {
+            navigate("/", { replace: true });
+          }}
+        >
+          返回首页
+        </Button>
+      }
+    />
+  );
+};
+
+export default ErrorPage;

src/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
-import type { MenuProps } from "antd";
+import { useNavigate, useLocation } from "react-router-dom";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
@@ -12,22 +12,24 @@ import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";
 
 const IndexPage = () => {
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [tabKey, setTabKey] = useState(0);
+  const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
   const [coursesList, setCoursesList] = useState<any>([]);
   const [categories, setCategories] = useState<any>([]);
-  const [categoryId, setCategoryId] = useState<number>(0);
-  const [categoryText, setCategoryText] = useState<string>("所有分类");
+  const [categoryId, setCategoryId] = useState<number>(
+    Number(result.get("cid") || 0)
+  );
+  const [categoryText, setCategoryText] = useState<string>(
+    String(result.get("catName") || "所有分类")
+  );
   const [selectKey, setSelectKey] = useState<any>([0]);
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const [stats, setStats] = useState<any>({});
-
-  const departments = useSelector(
-    (state: any) => state.loginUser.value.departments
-  );
   const currentDepId = useSelector(
     (state: any) => state.loginUser.value.currentDepId
   );
@@ -36,6 +38,12 @@ const IndexPage = () => {
     getParams();
   }, []);
 
+  useEffect(() => {
+    let arr = [];
+    arr.push(Number(result.get("cid") || 0));
+    setSelectKey(arr);
+  }, [result.get("cid")]);
+
   useEffect(() => {
     if (currentDepId === 0) {
       return;
@@ -163,17 +171,38 @@ const IndexPage = () => {
 
   const onChange = (key: number) => {
     setTabKey(key);
+    navigate(
+      "/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
+    );
   };
 
   const onSelect = (selectedKeys: any, info: any) => {
     setCategoryId(selectedKeys[0]);
     if (info.node.key === 0) {
       setCategoryText(info.node.title);
-    } else {
-      setCategoryText(info.node.title.props.children);
-    }
       setSelectKey(selectedKeys);
       hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title +
+          "&tab=" +
+          tabKey
+      );
+    } else {
+      setCategoryText(info.node.title.props.children);
+      setSelectKey(selectedKeys);
+      hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title.props.children +
+          "&tab=" +
+          tabKey
+      );
+    }
   };
 
   const handleOpenChange = (newOpen: boolean) => {

src/pages/init/index.tsx

@@ -1,14 +1,12 @@
 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 {
   loginData?: any;
@@ -16,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) {
@@ -72,6 +48,10 @@ export const InitPage = (props: Props) => {
           props.configData["player-bullet-secret-opacity"],
       };
       dispatch(saveConfigAction(config));
+      if (isMobile() && props.configData["system-h5-url"] !== "") {
+        let url = props.configData["system-h5-url"];
+        window.location.href = url;
+      }
     }
     setInit(true);
   }, [props]);
@@ -79,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
+        className={styles["loading-box"]}
+        style={{ height: props.height || "100vh" }}
+      >
+        <Spin size="large" />
       </div>
+    </>
   );
 };
 

src/pages/login/index.module.scss

@@ -47,7 +47,7 @@
         height: 100%;
         box-sizing: border-box;
         border-left: 1px solid #d8d8d8;
-        padding: 0px 60px;
+        padding: 50px 60px;
         display: flex;
         flex-direction: column;
         .captcha-box {

src/pages/login/index.tsx

@@ -1,11 +1,11 @@
-import { Spin, Input, Button, message } from "antd";
+import { Input, Button, message } from "antd";
 import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
 import banner from "../../assets/images/login/banner.png";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
-import { login, system, user } from "../../api/index";
+import { loginAction } from "../../store/user/loginUserSlice";
+import { login, user } from "../../api/index";
 import { setToken } from "../../utils/index";
 import { NoFooter } from "../../compenents";
 
@@ -13,25 +13,8 @@ const LoginPage: React.FC = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(false);
-  const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
-  const [captchaVal, setCaptchaVal] = useState<string>("");
-  const [captchaKey, setCaptchaKey] = useState<string>("");
-  const [captchaLoading, setCaptchaLoading] = useState(true);
-
-  useEffect(() => {
-    fetchImageCaptcha();
-  }, []);
-
-  const fetchImageCaptcha = () => {
-    setCaptchaLoading(true);
-    system.imageCaptcha().then((res: any) => {
-      setImage(res.data.image);
-      setCaptchaKey(res.data.key);
-      setCaptchaLoading(false);
-    });
-  };
 
   const loginSubmit = (e: any) => {
     if (!email) {
@@ -42,14 +25,6 @@ const LoginPage: React.FC = () => {
       message.error("请输入密码");
       return;
     }
-    if (!captchaVal) {
-      message.error("请输入图形验证码");
-      return;
-    }
-    if (captchaVal.length < 4) {
-      message.error("图形验证码错误");
-      return;
-    }
     if (loading) {
       return;
     }
@@ -68,7 +43,7 @@ const LoginPage: React.FC = () => {
     }
     setLoading(true);
     login
-      .login(email, password, captchaKey, captchaVal)
+      .login(email, password)
       .then((res: any) => {
         const token = res.data.token;
         setToken(token);
@@ -76,8 +51,6 @@ const LoginPage: React.FC = () => {
       })
       .catch((e) => {
         setLoading(false);
-        setCaptchaVal("");
-        fetchImageCaptcha();
       });
   };
 
@@ -118,33 +91,8 @@ const LoginPage: React.FC = () => {
                 }}
                 style={{ width: 400, height: 54 }}
                 placeholder="请输入密码"
-              />
-            </div>
-            <div className="login-box d-flex mt-50">
-              <Input
-                value={captchaVal}
-                style={{ width: 260, height: 54 }}
-                placeholder="请输入图形验证码"
-                onChange={(e) => {
-                  setCaptchaVal(e.target.value);
-                }}
                 onKeyUp={(e) => keyUp(e)}
               />
-              <div className={styles["captcha-box"]}>
-                {captchaLoading && (
-                  <div className={styles["catpcha-loading-box"]}>
-                    <Spin size="small" />
-                  </div>
-                )}
-
-                {!captchaLoading && (
-                  <img
-                    className={styles["captcha"]}
-                    onClick={fetchImageCaptcha}
-                    src={image}
-                  />
-                )}
-              </div>
             </div>
             <div className="login-box d-flex mt-50">
               <Button

src/routes/index.tsx

@@ -1,15 +1,25 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router-dom";
 import { system, user } from "../api";
-import { SystemConfigStoreInterface } from "../store/system/systemConfigSlice";
-
 import { getToken } from "../utils";
+// 页面加载
 import { InitPage } from "../pages/init";
-import CoursePage from "../pages/course/index";
-import CoursePlayPage from "../pages/course/video";
-import IndexPage from "../pages/index";
-import LatestLearnPage from "../pages/latest-learn";
 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"));
+//课程相关
+const CoursePage = lazy(() => import("../pages/course/index"));
+const CoursePlayPage = lazy(() => import("../pages/course/video"));
+//最近学习
+const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
+//错误页面
+const ErrorPage = lazy(() => import("../pages/error"));
+
 import PrivateRoute from "../compenents/private-route";
 
 let RootPage: any = null;
@@ -30,42 +40,76 @@ if (getToken()) {
     });
   });
 } else {
-  RootPage = <InitPage />;
-}
+  RootPage = lazy(async () => {
+    return new Promise<any>(async (resolve) => {
+      try {
+        let configRes: any = await system.config();
 
-// 懒加载
-// 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"));
+        resolve({
+          default: <InitPage configData={configRes.data} />,
+        });
+      } catch (e) {
+        console.error("系统初始化失败", e);
+      }
+    });
+  });
+}
 
 const routes: RouteObject[] = [
   {
     path: "/",
     element: RootPage,
+    children: [
+      {
+        path: "/",
+        element: <WithHeaderWithFooter />,
         children: [
           {
             path: "/",
             element: <PrivateRoute Component={<IndexPage />} />,
           },
-      {
-        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: <WithHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+        ],
+      },
+      {
+        path: "/",
+        element: <WithoutHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/course/:courseId/hour/:hourId",
+            element: <PrivateRoute Component={<CoursePlayPage />} />,
+          },
+          {
+            path: "/error",
+            element: <ErrorPage />,
+          },
+          {
+            path: "*",
+            element: <ErrorPage />,
+          },
+        ],
+      },
+    ],
+  },
 ];
 
 export default routes;

src/utils/index.ts

@@ -104,3 +104,10 @@ export function changeAppUrl(str: string) {
     return str + "/";
   }
 }
+
+export function isMobile() {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+  return flag;
+}