Merge pull request #4 from PlayEdu/dev

Dev

src/App.scss

@@ -1,6 +1,5 @@
 #root {
   width: 100%;
-  min-height: 900px;
   margin: 0 auto;
   text-align: center;
   background-color: #ffffff;

src/api/course.ts

@@ -5,6 +5,11 @@ export function detail(id: number) {
   return client.get(`/api/v1/course/${id}`, {});
 }
 
+// 线上课课时详情
+export function play(courseId: number, id: number) {
+  return client.get(`/api/v1/course/${courseId}/hour/${id}`, {});
+}
+
 // 获取播放地址
 export function playUrl(courseId: number, hourId: number) {
   return client.get(`/api/v1/course/${courseId}/hour/${hourId}/play`, {});

src/api/user.ts

@@ -13,9 +13,13 @@ export function password(oldPassword: string, newPassword: string) {
 }
 
 // 学员课程
-export function courses(depId: number) {
+export function coursesCategories() {
+  return client.get("/api/v1/category/all", {});
+}
+export function courses(depId: number, categoryId: number) {
   return client.get("/api/v1/user/courses", {
     dep_id: depId,
+    category_id: categoryId,
   });
 }
 

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3943555 */
-  src: url('iconfont.woff2?t=1679564530649') format('woff2'),
-       url('iconfont.woff?t=1679564530649') format('woff'),
-       url('iconfont.ttf?t=1679564530649') format('truetype');
+  src: url('iconfont.woff2?t=1683529422487') format('woff2'),
+       url('iconfont.woff?t=1683529422487') format('woff'),
+       url('iconfont.ttf?t=1683529422487') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon-xiala:before {
+  content: "\e752";
+}
+
+.icon-close:before {
+  content: "\e751";
+}
+
+.icon-fullscreen:before {
+  content: "\e74b";
+}
+
+.icon-speed:before {
+  content: "\e74c";
+}
+
+.icon-mute:before {
+  content: "\e74d";
+}
+
+.icon-play:before {
+  content: "\e74e";
+}
+
+.icon-pause:before {
+  content: "\e74f";
+}
+
+.icon-unmute:before {
+  content: "\e750";
+}
+
 .icon-icon-tips:before {
   content: "\e74a";
 }

src/compenents/header/index.module.scss

@@ -29,7 +29,7 @@
       display: flex;
       align-items: center;
       .nav-item {
-        width: 64px;
+        width: auto;
         height: 40px;
         font-size: 16px;
         font-weight: 400;
@@ -47,7 +47,7 @@
       }
 
       .nav-active-item {
-        width: 64px;
+        width: auto;
         height: 40px;
         font-size: 16px;
         font-weight: 600;

src/compenents/header/index.tsx

@@ -73,8 +73,7 @@ export const Header: React.FC = () => {
         cancelText: "取消",
         onOk() {
           dispatch(logoutAction());
-          clearToken();
-          navigate("/login");
+          window.location.href = "/login";
         },
         onCancel() {
           console.log("Cancel");

src/compenents/private-route/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { getToken } from "../../utils/index";
+import { Navigate } from "react-router-dom";
+
+interface PropInterface {
+  Component: any;
+}
+
+const PrivateRoute: React.FC<PropInterface> = ({ Component }) => {
+  return getToken() ? Component : <Navigate to="/login" replace={true} />;
+};
+export default PrivateRoute;

src/compenents/user-info/index.tsx

@@ -6,7 +6,7 @@ import { useDispatch } from "react-redux";
 import { loginAction } from "../../store/user/loginUserSlice";
 import type { UploadProps } from "antd";
 import config from "../../js/config";
-import { getToken } from "../../utils/index";
+import { getToken, changeAppUrl } from "../../utils/index";
 
 interface PropInterface {
   open: boolean;
@@ -40,7 +40,7 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
     name: "file",
     multiple: false,
     method: "PUT",
-    action: config.app_url + "api/v1/user/avatar",
+    action: changeAppUrl(config.app_url) + "api/v1/user/avatar",
     headers: {
       Accept: "application/json",
       authorization: "Bearer " + getToken(),

src/index.scss

@@ -50,7 +50,7 @@ body {
   height: auto;
   margin: 0 auto;
   display: flex;
-  flex-direction: column
+  flex-direction: column;
 }
 
 h1 {
@@ -291,7 +291,87 @@ h1 {
 }
 
 #meedu-player-container {
-  width: 1200px;
-  height: 675px;
-  float: left;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.ant-tree-switcher {
+  display: none !important;
+}
+
+.ant-tree-node-selected {
+  .ant-tree-title {
+    color: #ff4d4f;
+  }
+}
+
+.ant-tree-treenode {
+  min-width: 150px;
+  width: 100% !important;
+  height: 40px !important;
+  padding: 0 !important;
+  display: flex;
+  align-items: center !important;
+  &.ant-tree-treenode-selected {
+    background-color: #fff2f0 !important;
+    border-radius: 0px !important;
+    overflow: hidden;
+    .ant-tree-node-content-wrapper {
+      background-color: transparent !important;
+    }
+    .ant-tree-node-content-wrapper-normal {
+      background-color: transparent !important;
+    }
+  }
+  .ant-tree-node-content-wrapper {
+    width: 100% !important;
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+  &:hover {
+    background-color: #fff2f0 !important;
+    border-radius: 0px !important;
+    overflow: hidden;
+    .ant-tree-node-content-wrapper {
+      background-color: transparent !important;
+    }
+    .ant-tree-node-content-wrapper-normal {
+      background-color: transparent !important;
+    }
+  }
+  .ant-tree-node-content-wrapper-normal {
+    width: 100% !important;
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-tree-switcher {
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ant-tree-title {
+  flex: 1;
+
+  padding-left: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .iconfont {
+    color: rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.ant-popover-inner {
+  padding: 8px 0px !important;
 }

src/pages/course/compenents/hour.tsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "./hour.module.scss";
 import { durationFormat } from "../../../utils/index";
-import { VideoModel } from "./video";
 
 interface PropInterface {
   id: number;
@@ -11,9 +10,6 @@ interface PropInterface {
   duration: number;
   record: any;
   progress: number;
-  totalHours: any;
-  records: any;
-  onChange: () => void;
 }
 
 export const HourCompenent: React.FC<PropInterface> = ({
@@ -23,73 +19,14 @@ export const HourCompenent: React.FC<PropInterface> = ({
   duration,
   record,
   progress,
-  totalHours,
-  records,
-  onChange,
 }) => {
-  // const navigate = useNavigate();
-  const [visible, setVisible] = useState<boolean>(false);
-  const [currentId, setCurrentId] = useState(id);
-  const [currentTitle, setCurrentTitle] = useState(title);
-  const [isLastpage, setIsLastpage] = useState<boolean>(false);
-  const [lastSeeDuration, setLastSeeDuration] = useState(0);
-
-  useEffect(() => {
-    getData();
-  }, [totalHours]);
-
-  const getData = () => {
-    const index = totalHours.findIndex((i: any) => i.id === id);
-    if (index === totalHours.length - 1) {
-      setIsLastpage(true);
-    }
-    if (records[totalHours[index].id]) {
-      setLastSeeDuration(records[totalHours[index].id].finished_duration);
-    }
-  };
-
-  const goNextVideo = () => {
-    const index = totalHours.findIndex((i: any) => i.id === currentId);
-    if (index === totalHours.length - 1) {
-      setIsLastpage(true);
-    } else if (index < totalHours.length - 1) {
-      setCurrentId(totalHours[index + 1].id);
-      setCurrentTitle(totalHours[index + 1].title);
-      if (index + 1 === totalHours.length - 1) {
-        setIsLastpage(true);
-      }
-      if (records[totalHours[index + 1].id]) {
-        setLastSeeDuration(records[totalHours[index + 1].id].finished_duration);
-      }
-    }
-    setVisible(true);
-  };
-
+  const navigate = useNavigate();
   return (
     <>
-      <VideoModel
-        cid={cid}
-        id={currentId}
-        title={currentTitle}
-        open={visible}
-        progress={progress}
-        isLastpage={isLastpage}
-        lastSeeDuration={lastSeeDuration}
-        onCancel={() => {
-          setVisible(false);
-          onChange();
-        }}
-        goNextVideo={() => {
-          setVisible(false);
-          goNextVideo();
-        }}
-      ></VideoModel>
       <div
         className={styles["item"]}
         onClick={() => {
-          setCurrentId(id);
-          setCurrentTitle(title);
-          setVisible(true);
+          navigate(`/course/${cid}/hour/${id}`);
         }}
       >
         <div className={styles["left-item"]}>

src/pages/course/compenents/video.tsx

@@ -1,169 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import styles from "./video.module.scss";
-import { course } from "../../../api/index";
-import { ArrowLeftOutlined } from "@ant-design/icons";
-import { useSelector } from "react-redux";
-
-declare const window: any;
-
-interface PropInterface {
-  id: number;
-  cid: number;
-  title: string;
-  open: boolean;
-  isLastpage: boolean;
-  lastSeeDuration: number;
-  progress: number;
-  onCancel: () => void;
-  goNextVideo: () => void;
-}
-
-export const VideoModel: React.FC<PropInterface> = ({
-  id,
-  cid,
-  title,
-  open,
-  isLastpage,
-  lastSeeDuration,
-  progress,
-  onCancel,
-  goNextVideo,
-}) => {
-  const systemConfig = useSelector((state: any) => state.systemConfig.value);
-  const user = useSelector((state: any) => state.loginUser.value.user);
-  const [playUrl, setPlayUrl] = useState<string>("");
-  const [playDuration, setPlayDuration] = useState(0);
-  const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
-  const [lastSeeValue, setLastSeeValue] = useState({});
-  const [loading, setLoading] = useState<Boolean>(false);
-  const myRef = useRef(0);
-
-  useEffect(() => {
-    let params = null;
-    if (open) {
-      if (lastSeeDuration > 0 && progress < 100) {
-        params = {
-          time: 5,
-          pos: lastSeeDuration,
-        };
-        setLastSeeValue(params);
-      }
-      setPlayendedStatus(false);
-      getVideoUrl(params);
-    }
-  }, [open, id, cid, lastSeeDuration]);
-
-  useEffect(() => {
-    myRef.current = playDuration;
-  }, [playDuration]);
-
-  const getVideoUrl = (params: any) => {
-    course.playUrl(cid, id).then((res: any) => {
-      setPlayUrl(res.data.url);
-      initDPlayer(res.data.url, 0, params);
-    });
-  };
-
-  const initDPlayer = (playUrl: string, isTrySee: number, params: any) => {
-    window.player = new window.DPlayer({
-      container: document.getElementById("meedu-player-container"),
-      autoplay: false,
-      video: {
-        url: playUrl,
-        pic: systemConfig.playerPoster,
-      },
-      try: isTrySee === 1,
-      bulletSecret: {
-        enabled: systemConfig.playerIsEnabledBulletSecret,
-        text: systemConfig.playerBulletSecretText
-          .replace("{name}", user.name)
-          .replace("{email}", user.email)
-          .replace("{idCard}", user.id_card),
-        size: "14px",
-        color: systemConfig.playerBulletSecretColor || "red",
-        opacity: Number(systemConfig.playerBulletSecretOpacity),
-      },
-      ban_drag: false,
-      last_see_pos: params,
-    });
-    // 监听播放进度更新evt
-    window.player.on("timeupdate", () => {
-      playTimeUpdate(parseInt(window.player.video.currentTime), false);
-    });
-    window.player.on("ended", () => {
-      setPlayendedStatus(true);
-      playTimeUpdate(parseInt(window.player.video.currentTime), true);
-      window.player && window.player.destroy();
-    });
-    setLoading(false);
-  };
-
-  const playTimeUpdate = (duration: number, isEnd: boolean) => {
-    if (duration - myRef.current >= 10 || isEnd === true) {
-      setPlayDuration(duration);
-      course.record(cid, id, duration).then((res: any) => {});
-      course.playPing(cid, id).then((res: any) => {});
-    }
-  };
-
-  return (
-    <>
-      {open && (
-        <div className={styles["video-mask"]}>
-          <div className={styles["top-cont"]}>
-            <div className={styles["box"]}>
-              <div
-                className={styles["close-btn"]}
-                onClick={() => {
-                  window.player && window.player.destroy();
-                  onCancel();
-                }}
-              >
-                <ArrowLeftOutlined />
-                <span className="ml-14">返回</span>
-              </div>
-            </div>
-          </div>
-          <div className={styles["video-body"]}>
-            <div className={styles["video-title"]}>{title}</div>
-            <div className={styles["video-box"]}>
-              <div className="play-box" id="meedu-player-container"></div>
-              {playendedStatus && (
-                <div className={styles["alert-message"]}>
-                  {isLastpage && (
-                    <div
-                      className={styles["alert-button"]}
-                      onClick={() => {
-                        window.player && window.player.destroy();
-                        onCancel();
-                      }}
-                    >
-                      恭喜你学完最后一节
-                    </div>
-                  )}
-                  {!isLastpage && (
-                    <div
-                      className={styles["alert-button"]}
-                      onClick={() => {
-                        if (loading) {
-                          return;
-                        }
-                        window.player && window.player.destroy();
-                        setLoading(true);
-                        setLastSeeValue({});
-                        setPlayendedStatus(false);
-                        goNextVideo();
-                      }}
-                    >
-                      播放下一节
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};

src/pages/course/index.tsx

@@ -15,7 +15,6 @@ const CoursePage = () => {
   const [hours, setHours] = useState<any>({});
   const [learnRecord, setLearnRecord] = useState<any>({});
   const [learnHourRecord, setLearnHourRecord] = useState<any>({});
-  const [totalHours, setTotalHours] = useState<any>([]);
 
   useEffect(() => {
     getDetail();
@@ -35,17 +34,6 @@ const CoursePage = () => {
         if (res.data.learn_hour_records) {
           setLearnHourRecord(res.data.learn_hour_records);
         }
-        if (res.data.chapters.length === 0) {
-          setTotalHours(res.data.hours[0]);
-        } else if (res.data.chapters.length > 0) {
-          const arr: any = [];
-          for (let key in res.data.hours) {
-            res.data.hours[key].map((item: any) => {
-              arr.push(item);
-            });
-          }
-          setTotalHours(arr);
-        }
         setLoading(false);
       })
       .catch((e) => {
@@ -136,7 +124,7 @@ const CoursePage = () => {
                     trailColor="#F6F6F6"
                     size={90}
                     strokeWidth={8}
-                    percent={learnRecord.progress / 100}
+                    percent={Math.floor(learnRecord.progress / 100)}
                     format={(percent) => `${percent}%`}
                   />
                 )}
@@ -159,14 +147,11 @@ const CoursePage = () => {
                         cid={item.course_id}
                         title={item.title}
                         record={learnHourRecord[item.id]}
-                        records={learnHourRecord}
                         duration={item.duration}
                         progress={
                           (learnHourRecord[item.id].finished_duration * 100) /
                           learnHourRecord[item.id].total_duration
                         }
-                        totalHours={totalHours}
-                        onChange={() => getDetail()}
                       ></HourCompenent>
                     )}
                     {!learnHourRecord[item.id] && (
@@ -175,11 +160,8 @@ const CoursePage = () => {
                         cid={item.course_id}
                         title={item.title}
                         record={null}
-                        records={learnHourRecord}
                         duration={item.duration}
                         progress={0}
-                        totalHours={totalHours}
-                        onChange={() => getDetail()}
                       ></HourCompenent>
                     )}
                   </div>
@@ -199,14 +181,11 @@ const CoursePage = () => {
                             cid={item.course_id}
                             title={it.title}
                             record={learnHourRecord[it.id]}
-                            records={learnHourRecord}
                             duration={it.duration}
                             progress={
                               (learnHourRecord[it.id].finished_duration * 100) /
                               learnHourRecord[it.id].total_duration
                             }
-                            onChange={() => getDetail()}
-                            totalHours={totalHours}
                           ></HourCompenent>
                         )}
                         {!learnHourRecord[it.id] && (
@@ -215,11 +194,8 @@ const CoursePage = () => {
                             cid={item.course_id}
                             title={it.title}
                             record={null}
-                            records={learnHourRecord}
                             duration={it.duration}
                             progress={0}
-                            totalHours={totalHours}
-                            onChange={() => getDetail()}
                           ></HourCompenent>
                         )}
                       </div>

src/pages/course/video.module.scss

@@ -1,15 +1,12 @@
 .video-mask {
   width: 100%;
   height: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: fixed;
+  min-height: 100vh;
+  max-height: 900px;
   background-color: #0e0e1e;
   display: flex;
   justify-content: center;
-  z-index: 100;
+  overflow: hidden;
   .top-cont {
     position: fixed;
     top: 0;
@@ -17,10 +14,10 @@
     right: 0;
     width: 100%;
     height: 60px;
-    background: rgba(255, 255, 255, 0.1);
-
+    background: #262634;
+    z-index: 100;
     .box {
-      width: 1200px;
+      width: 62.5%;
       height: 60px;
       display: flex;
       align-items: center;
@@ -42,16 +39,16 @@
     }
   }
   .video-body {
-    width: 1200px;
-    height: auto;
+    width: 62.5%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding-top: 30px;
     margin-top: 60px;
-    animation: scaleBig 0.3s;
+    overflow-y: auto;
     .video-title {
-      width: 1200px;
+      width: 100%;
       height: 36px;
       font-size: 20px;
       font-weight: 600;
@@ -62,11 +59,10 @@
     }
 
     .video-box {
-      width: 1200px;
-      height: 675px;
+      width: 100%;
+      padding-bottom: calc(9 / 16 * 100%);
       margin: 0 auto;
       border-radius: 8px;
-      overflow: hidden;
       position: relative;
       .alert-message {
         position: absolute;

src/pages/course/video.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useRef, useState } from "react";
+import styles from "./video.module.scss";
+import { useParams, useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { course as Course } from "../../api/index";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import { message } from "antd";
+
+declare const window: any;
+
+const CoursePalyPage = () => {
+  const navigate = useNavigate();
+  const params = useParams();
+  const systemConfig = useSelector((state: any) => state.systemConfig.value);
+  const user = useSelector((state: any) => state.loginUser.value.user);
+  const [playUrl, setPlayUrl] = useState<string>("");
+  const [playDuration, setPlayDuration] = useState(0);
+  const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
+  const [lastSeeValue, setLastSeeValue] = useState({});
+  const [course, setCourse] = useState<any>({});
+  const [hour, setHour] = useState<any>({});
+  const [loading, setLoading] = useState<Boolean>(false);
+  const [isLastpage, setIsLastpage] = useState<Boolean>(false);
+  const [totalHours, setTotalHours] = useState<any>([]);
+  const myRef = useRef(0);
+
+  useEffect(() => {
+    getCourse();
+    getDetail();
+  }, [params.courseId, params.hourId]);
+
+  useEffect(() => {
+    myRef.current = playDuration;
+  }, [playDuration]);
+
+  const getCourse = () => {
+    Course.detail(Number(params.courseId)).then((res: any) => {
+      let totalHours: any = [];
+      if (res.data.chapters.length === 0) {
+        setTotalHours(res.data.hours[0]);
+        totalHours = res.data.hours[0];
+      } else if (res.data.chapters.length > 0) {
+        const arr: any = [];
+        for (let key in res.data.hours) {
+          res.data.hours[key].map((item: any) => {
+            arr.push(item);
+          });
+        }
+        setTotalHours(arr);
+        totalHours = arr;
+      }
+      const index = totalHours.findIndex(
+        (i: any) => i.id === Number(params.hourId)
+      );
+      if (index === totalHours.length - 1) {
+        setIsLastpage(true);
+      }
+    });
+  };
+
+  const getDetail = () => {
+    if (loading) {
+      return true;
+    }
+    setLoading(true);
+    Course.play(Number(params.courseId), Number(params.hourId))
+      .then((res: any) => {
+        setCourse(res.data.course);
+        setHour(res.data.hour);
+        document.title = res.data.hour.title;
+        let record = res.data.user_hour_record;
+        let params = null;
+        if (record && record.finished_duration && record.is_finished === 0) {
+          params = {
+            time: 5,
+            pos: record.finished_duration,
+          };
+          setLastSeeValue(params);
+          setLastSeeValue(params);
+        }
+        getVideoUrl(params);
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+      });
+  };
+
+  const getVideoUrl = (data: any) => {
+    Course.playUrl(Number(params.courseId), Number(params.hourId)).then(
+      (res: any) => {
+        setPlayUrl(res.data.url);
+        initDPlayer(res.data.url, 0, data);
+      }
+    );
+  };
+
+  const initDPlayer = (playUrl: string, isTrySee: number, params: any) => {
+    window.player = new window.DPlayer({
+      container: document.getElementById("meedu-player-container"),
+      autoplay: false,
+      video: {
+        url: playUrl,
+        pic: systemConfig.playerPoster,
+      },
+      try: isTrySee === 1,
+      bulletSecret: {
+        enabled: systemConfig.playerIsEnabledBulletSecret,
+        text: systemConfig.playerBulletSecretText
+          .replace("{name}", user.name)
+          .replace("{email}", user.email)
+          .replace("{idCard}", user.id_card),
+        size: "14px",
+        color: systemConfig.playerBulletSecretColor || "red",
+        opacity: Number(systemConfig.playerBulletSecretOpacity),
+      },
+      ban_drag: false,
+      last_see_pos: params,
+    });
+    // 监听播放进度更新evt
+    window.player.on("timeupdate", () => {
+      playTimeUpdate(parseInt(window.player.video.currentTime), false);
+    });
+    window.player.on("ended", () => {
+      setPlayendedStatus(true);
+      playTimeUpdate(parseInt(window.player.video.currentTime), true);
+      window.player && window.player.destroy();
+    });
+    setLoading(false);
+  };
+
+  const playTimeUpdate = (duration: number, isEnd: boolean) => {
+    if (duration - myRef.current >= 10 || isEnd === true) {
+      setPlayDuration(duration);
+      Course.record(
+        Number(params.courseId),
+        Number(params.hourId),
+        duration
+      ).then((res: any) => {});
+      Course.playPing(Number(params.courseId), Number(params.hourId)).then(
+        (res: any) => {}
+      );
+    }
+  };
+
+  const goNextVideo = () => {
+    const index = totalHours.findIndex(
+      (i: any) => i.id === Number(params.hourId)
+    );
+    if (index === totalHours.length - 1) {
+      setIsLastpage(true);
+      message.error("已经是最后一节了！");
+    } else if (index < totalHours.length - 1) {
+      navigate(`/course/${params.courseId}/hour/${totalHours[index + 1].id}`, {
+        replace: true,
+      });
+    }
+  };
+
+  return (
+    <div className={styles["video-mask"]}>
+      <div className={styles["top-cont"]}>
+        <div className={styles["box"]}>
+          <div
+            className={styles["close-btn"]}
+            onClick={() => {
+              window.player && window.player.destroy();
+              navigate(-1);
+            }}
+          >
+            <ArrowLeftOutlined />
+            <span className="ml-14">返回</span>
+          </div>
+        </div>
+      </div>
+      <div className={styles["video-body"]}>
+        <div className={styles["video-title"]}>{hour.title}</div>
+        <div className={styles["video-box"]}>
+          <div
+            className="play-box"
+            id="meedu-player-container"
+            style={{ borderRadius: 8 }}
+          ></div>
+          {playendedStatus && (
+            <div className={styles["alert-message"]}>
+              {isLastpage && (
+                <div
+                  className={styles["alert-button"]}
+                  onClick={() => navigate(`/course/${params.courseId}`)}
+                >
+                  恭喜你学完最后一节
+                </div>
+              )}
+              {!isLastpage && (
+                <div
+                  className={styles["alert-button"]}
+                  onClick={() => {
+                    window.player && window.player.destroy();
+                    setLastSeeValue({});
+                    setPlayendedStatus(false);
+                    goNextVideo();
+                  }}
+                >
+                  播放下一节
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CoursePalyPage;

src/pages/index/compenents/courses-model.tsx

@@ -63,7 +63,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
             trailColor="#F6F6F6"
           />
         )}
-        {progress === 100 && (
+        {progress >= 100 && (
           <div className={styles["success"]}>
             <Image width={24} height={24} src={mediaIcon} preview={false} />
             <span className="ml-8">恭喜你学完此课程!</span>

src/pages/index/index.module.scss

@@ -64,6 +64,7 @@
   margin-top: 50px;
   display: flex;
   align-items: center;
+  position: relative;
   .tab-item {
     width: 64px;
     height: 48px;
@@ -108,6 +109,19 @@
       animation: scaleTransX 0.3s;
     }
   }
+  .dropButton {
+    height: 40px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+  }
 }
 
 @keyframes scaleTransX {

src/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Spin, Image } from "antd";
-import type { TabsProps } from "antd";
+import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
+import type { MenuProps } from "antd";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
@@ -12,11 +12,15 @@ import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";
 
 const IndexPage = () => {
-  document.title = "首页";
   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 [coursesList, setCoursesList] = useState<any>([]);
+  const [categories, setCategories] = useState<any>([]);
+  const [categoryId, setCategoryId] = useState<number>(0);
+  const [categoryText, setCategoryText] = useState<string>("所有分类");
+  const [selectKey, setSelectKey] = useState<any>([0]);
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const [stats, setStats] = useState<any>({});
@@ -28,20 +32,28 @@ const IndexPage = () => {
     (state: any) => state.loginUser.value.currentDepId
   );
 
+  useEffect(() => {
+    getParams();
+  }, []);
+
   useEffect(() => {
     if (currentDepId === 0) {
       return;
     }
     getData();
-  }, [tabKey, currentDepId]);
+  }, [tabKey, currentDepId, categoryId]);
 
   useEffect(() => {
-    document.title = systemConfig.systemName;
+    document.title = systemConfig.systemName || "首页";
   }, [systemConfig]);
 
+  const hide = () => {
+    setOpen(false);
+  };
+
   const getData = () => {
     setLoading(true);
-    user.courses(currentDepId).then((res: any) => {
+    user.courses(currentDepId, categoryId).then((res: any) => {
       const records = res.data.learn_course_records;
       setStats(res.data.stats);
       setLearnCourseRecords(records);
@@ -88,6 +100,44 @@ const IndexPage = () => {
     });
   };
 
+  const getParams = () => {
+    user.coursesCategories().then((res: any) => {
+      const categories = res.data.categories;
+      if (JSON.stringify(categories) !== "{}") {
+        const new_arr: any[] = checkArr(categories, 0);
+        new_arr.unshift({
+          key: 0,
+          title: "所有分类",
+        });
+        setCategories(new_arr);
+      }
+    });
+  };
+
+  const checkArr = (categories: any[], id: number) => {
+    const arr = [];
+    for (let i = 0; i < categories[id].length; i++) {
+      if (!categories[categories[id][i].id]) {
+        arr.push({
+          title: (
+            <span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
+          ),
+          key: categories[id][i].id,
+        });
+      } else {
+        const new_arr: any[] = checkArr(categories, categories[id][i].id);
+        arr.push({
+          title: (
+            <span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
+          ),
+          key: categories[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
   const items = [
     {
       key: 0,
@@ -115,6 +165,42 @@ const IndexPage = () => {
     setTabKey(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();
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+  };
+
+  const dropItem = (
+    <div
+      style={{
+        maxHeight: 600,
+        overflowX: "hidden",
+        overflowY: "auto",
+      }}
+      onMouseOut={() => setOpen(false)}
+      onMouseOver={() => setOpen(true)}
+    >
+      <Tree
+        selectedKeys={selectKey}
+        switcherIcon={null}
+        onSelect={onSelect}
+        treeData={categories}
+        blockNode
+        defaultExpandAll={true}
+      />
+    </div>
+  );
+
   return (
     <div className="main-body">
       <div className="content">
@@ -239,6 +325,24 @@ const IndexPage = () => {
               )}
             </div>
           ))}
+          <Popover
+            content={dropItem}
+            placement="bottomRight"
+            open={open}
+            trigger="click"
+            onOpenChange={handleOpenChange}
+          >
+            <Space
+              className={styles["dropButton"]}
+              onMouseOver={() => setOpen(true)}
+            >
+              {categoryText}
+              <i
+                className="iconfont icon-icon-xiala"
+                style={{ fontSize: 16 }}
+              />
+            </Space>
+          </Popover>
         </div>
         {loading && (
           <Row
@@ -279,7 +383,9 @@ const IndexPage = () => {
                     title={item.title}
                     thumb={item.thumb}
                     isRequired={item.is_required}
-                    progress={learnCourseRecords[item.id].progress / 100}
+                    progress={Math.floor(
+                      learnCourseRecords[item.id].progress / 100
+                    )}
                   ></CoursesModel>
                 )}
 

src/pages/init/index.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Outlet } from "react-router-dom";
 // import styles from "./index.module.scss";
@@ -7,7 +8,7 @@ import {
 } from "../../store/system/systemConfigSlice";
 import { loginAction } from "../../store/user/loginUserSlice";
 import { Header, NoHeader, Footer } from "../../compenents";
-import { useLocation } from "react-router-dom";
+import { useParams, useLocation } from "react-router-dom";
 
 interface Props {
   loginData?: any;
@@ -15,7 +16,12 @@ 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);
   if (props.loginData) {
     dispatch(loginAction(props.loginData));
   }
@@ -43,15 +49,32 @@ export const InitPage = (props: Props) => {
     dispatch(saveConfigAction(config));
   }
 
-  const pathname = useLocation().pathname;
+  useEffect(() => {
+    setShowHeader(true);
+    setShowNoHeader(false);
+    setShowFooter(true);
+    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]);
 
   return (
     <>
       <div>
-        {pathname === "/login" && <NoHeader></NoHeader>}
-        {pathname !== "/login" && <Header></Header>}
+        {showNoHeader && <NoHeader></NoHeader>}
+        {showHeader && <Header></Header>}
         <Outlet />
-        {pathname !== "/login" && <Footer></Footer>}
+        {showFooter && <Footer></Footer>}
       </div>
     </>
   );

src/pages/latest-learn/index.tsx

@@ -45,23 +45,24 @@ const LatestLearnPage = () => {
         )}
         {!loading &&
           courses.length > 0 &&
-          courses.map((item: any) => (
-            <>
+          courses.map((item: any, index: number) => (
+            <div key={index}>
               {item.course && (
                 <div
-                  key={item.course.id}
                   className={styles["item"]}
                   onClick={() => {
                     navigate(`/course/${item.course.id}`);
                   }}
                 >
-                  <Image
-                    src={item.course.thumb}
-                    width={120}
-                    height={90}
-                    style={{ borderRadius: 10 }}
-                    preview={false}
-                  />
+                  <div style={{ width: 120 }}>
+                    <Image
+                      src={item.course.thumb}
+                      width={120}
+                      height={90}
+                      style={{ borderRadius: 10 }}
+                      preview={false}
+                    />
+                  </div>
                   <div className={styles["item-info"]}>
                     <div className={styles["top"]}>
                       {item.course.is_required === 1 && (
@@ -82,7 +83,7 @@ const LatestLearnPage = () => {
                         <div className={styles["progress"]}>
                           {item.record.progress < 10000 && (
                             <Progress
-                              percent={item.record.progress / 100}
+                              percent={Math.floor(item.record.progress / 100)}
                               strokeColor="#FF4D4F"
                               trailColor="#F6F6F6"
                             />
@@ -122,7 +123,7 @@ const LatestLearnPage = () => {
                   </div>
                 </div>
               )}
-            </>
+            </div>
           ))}
       </div>
       <div className={styles["extra"]}>{systemConfig.pcIndexFooterMsg}</div>

src/pages/login/index.module.scss

@@ -7,65 +7,71 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  .title {
-    width: 120px;
-    height: auto;
-    font-size: 30px;
-    font-weight: 600;
-    color: #333333;
-    line-height: 30px;
-    border-bottom: 4px solid #ff4d4f;
-    box-sizing: border-box;
-    padding-bottom: 10px;
-    margin: 0 auto;
-    margin-top: 100px;
-  }
-  .login-box {
-    width: 1200px;
-    height: 366px;
-    background: #ffffff;
+  .top-content {
+    width: 100%;
     display: flex;
-    margin: 0 auto;
-    margin-top: 80px;
-    .left-box {
-      width: 595px;
-      height: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    .title {
+      min-width: 125px;
+      height: auto;
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 30px;
+      border-bottom: 4px solid #ff4d4f;
       box-sizing: border-box;
-      padding: 33px 60px;
-      .icon {
-        width: 475px;
-        height: 300px;
-      }
+      padding-bottom: 10px;
+      margin: 0 auto;
+      margin-top: 100px;
     }
-    .right-box {
-      width: 520px;
-      height: 100%;
-      box-sizing: border-box;
-      border-left: 1px solid #d8d8d8;
-      padding: 0px 60px;
+    .login-box {
+      width: 1200px;
+      height: 366px;
+      background: #ffffff;
       display: flex;
-      flex-direction: column;
-      .captcha-box {
-        width: 125px;
-        height: 54px;
-        margin-left: 15px;
-        border-radius: 8px;
-        background-color: rgba(#ff4d4f, 0.1);
-        display: flex;
-
-        .catpcha-loading-box {
-          width: 125px;
-          height: 54px;
-          line-height: 54px;
-          text-align: center;
+      margin: 0 auto;
+      margin-top: 80px;
+      .left-box {
+        width: 595px;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 33px 60px;
+        .icon {
+          width: 475px;
+          height: 300px;
         }
-
-        .captcha {
+      }
+      .right-box {
+        width: 520px;
+        height: 100%;
+        box-sizing: border-box;
+        border-left: 1px solid #d8d8d8;
+        padding: 0px 60px;
+        display: flex;
+        flex-direction: column;
+        .captcha-box {
           width: 125px;
           height: 54px;
-          border: none;
-          cursor: pointer;
+          margin-left: 15px;
           border-radius: 8px;
+          background-color: rgba(#ff4d4f, 0.1);
+          display: flex;
+
+          .catpcha-loading-box {
+            width: 125px;
+            height: 54px;
+            line-height: 54px;
+            text-align: center;
+          }
+
+          .captcha {
+            width: 125px;
+            height: 54px;
+            border: none;
+            cursor: pointer;
+            border-radius: 8px;
+          }
         }
       }
     }

src/pages/login/index.tsx

@@ -86,7 +86,7 @@ const LoginPage: React.FC = () => {
       const data = res.data;
       dispatch(loginAction(data));
       setLoading(false);
-      navigate("/");
+      navigate("/", { replace: true });
     });
   };
 

src/routes/index.tsx

@@ -5,10 +5,12 @@ import { SystemConfigStoreInterface } from "../store/system/systemConfigSlice";
 
 import { getToken } from "../utils";
 import { InitPage } from "../pages/init";
-import CoursePage from "../pages/course";
+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 PrivateRoute from "../compenents/private-route";
 
 let RootPage: any = null;
 if (getToken()) {
@@ -28,9 +30,6 @@ if (getToken()) {
     });
   });
 } else {
-  if (window.location.pathname !== "/login") {
-    window.location.href = "/login";
-  }
   RootPage = <InitPage />;
 }
 
@@ -47,7 +46,7 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <IndexPage />,
+        element: <PrivateRoute Component={<IndexPage />} />,
       },
       {
         path: "/login",
@@ -55,11 +54,15 @@ const routes: RouteObject[] = [
       },
       {
         path: "/course/:courseId",
-        element: <CoursePage />,
+        element: <PrivateRoute Component={<CoursePage />} />,
+      },
+      {
+        path: "/course/:courseId/hour/:hourId",
+        element: <PrivateRoute Component={<CoursePlayPage />} />,
       },
       {
         path: "/latest-learn",
-        element: <LatestLearnPage />,
+        element: <PrivateRoute Component={<LatestLearnPage />} />,
       },
     ],
   },

src/store/user/loginUserSlice.ts

@@ -1,5 +1,11 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { getDepKey } from "../../utils/index";
+import {
+  getDepKey,
+  clearDepKey,
+  clearDepName,
+  setDepName,
+  clearToken,
+} from "../../utils/index";
 
 type UserStoreInterface = {
   user: null;
@@ -27,6 +33,7 @@ const loginUserSlice = createSlice({
       stage.value.isLogin = true;
       if (e.payload.departments.length > 0 && stage.value.currentDepId === 0) {
         stage.value.currentDepId = e.payload.departments[0].id;
+        setDepName(e.payload.departments[0].name);
       }
     },
     logoutAction(stage) {
@@ -34,6 +41,9 @@ const loginUserSlice = createSlice({
       stage.value.departments = [];
       stage.value.isLogin = false;
       stage.value.currentDepId = 0;
+      clearToken();
+      clearDepKey();
+      clearDepName();
     },
     saveCurrentDepId(stage, e) {
       stage.value.currentDepId = e.payload;

src/utils/index.ts

@@ -95,3 +95,12 @@ export function setDepName(token: string) {
 export function clearDepName() {
   window.localStorage.removeItem("playedu-frontend-depatmentName");
 }
+
+export function changeAppUrl(str: string) {
+  let key = str.slice(str.length - 1);
+  if (key === "/") {
+    return str;
+  } else {
+    return str + "/";
+  }
+}