Merge pull request #7 from PlayEdu/dev

视频详情课时加载错误修复

.dockerignore

@@ -0,0 +1,3 @@
+/node_modules
+/build
+/dist

.env.example

@@ -1 +1,2 @@
-VITE_APP_URL=
+VITE_APP_URL=
+VITE_G_ID=

Dockerfile

@@ -1,5 +1,13 @@
+FROM node:lts-slim as builder
+
+WORKDIR /app
+
+COPY . /app
+
+RUN yarn config set registry https://registry.npm.taobao.org && yarn && yarn build
+
 FROM nginx:1.23.4-alpine-slim
 
-COPY dist /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html
 
-COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /app/docker/nginx.conf /etc/nginx/nginx.conf

package.json

@@ -10,18 +10,20 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.3",
+    "add": "^2.0.6",
     "antd": "^5.3.2",
     "axios": "^1.3.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "redux": "^4.2.1",
-    "sort-by": "^1.2.0",
-    "web-vitals": "^3.3.0"
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.scss

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

src/App.tsx

@@ -1,31 +1,31 @@
-import { useRoutes } from "react-router-dom";
+import { Suspense, useEffect } from "react";
+import ReactGA from "react-ga";
+import { useLocation, useRoutes } from "react-router-dom";
 import routes from "./routes";
 import "./App.scss";
-import { Suspense } from "react";
 import LoadingPage from "./pages/loading";
-import { user } from "./api/index";
-import { getToken } from "./utils/index";
-import { useDispatch } from "react-redux";
-import { loginAction } from "./store/user/loginUserSlice";
 
-function App() {
+const G_ID = import.meta.env.VITE_G_ID || "";
+if (G_ID) {
+  ReactGA.initialize(G_ID);
+}
+
+const App = () => {
   const Views = () => useRoutes(routes);
-  const dispatch = useDispatch();
-  const getUser = () => {
-    user.detail().then((res: any) => {
-      const data = res.data;
-      dispatch(loginAction(data));
-    });
-  };
-  if (getToken()) {
-    getUser();
-  }
+
+  const location = useLocation();
+  useEffect(() => {
+    if (!G_ID) {
+      return;
+    }
+    ReactGA.pageview(location.pathname + location.search);
+  }, [location]);
 
   return (
     <Suspense fallback={<LoadingPage />}>
       <Views />
     </Suspense>
   );
-}
+};
 
 export default App;

src/AutoTop.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { useLayoutEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const AutoScorllTop: React.FC<{ children: any }> = ({ children }) => {
+  const location = useLocation();
+  useLayoutEffect(() => {
+    document.documentElement.scrollTo(0, 0);
+  }, [location.pathname]);
+  return children;
+};
+
+export default AutoScorllTop;

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
-import { Modal, Button, Dropdown } from "antd";
+import { Modal, Button, Dropdown, Image } from "antd";
 import type { MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useLocation } from "react-router-dom";
@@ -8,6 +8,12 @@ import {
   logoutAction,
   saveCurrentDepId,
 } from "../../store/user/loginUserSlice";
+import {
+  setDepKey,
+  setDepName,
+  getDepName,
+  clearToken,
+} from "../../utils/index";
 import { ChangePasswordModel } from "../change-password";
 import { UserInfoModel } from "../user-info";
 import { ExclamationCircleFilled } from "@ant-design/icons";
@@ -32,7 +38,7 @@ export const Header: React.FC = () => {
 
   useEffect(() => {
     if (departments.length > 0) {
-      setCurrentDepartment(departments[0].name);
+      setCurrentDepartment(getDepName() || departments[0].name);
       const arr: any = [
         {
           key: "1",
@@ -67,7 +73,7 @@ export const Header: React.FC = () => {
         cancelText: "取消",
         onOk() {
           dispatch(logoutAction());
-          navigate("/login");
+          window.location.href = "/login";
         },
         onCancel() {
           console.log("Cancel");
@@ -129,6 +135,8 @@ export const Header: React.FC = () => {
       onOk() {
         setCurrentDepartment(name);
         dispatch(saveCurrentDepId(Number(key)));
+        setDepKey(key);
+        setDepName(name);
         const box = [...departments];
         const arr: any = [
           {
@@ -209,9 +217,11 @@ export const Header: React.FC = () => {
               <div className="d-flex" style={{ cursor: "pointer" }}>
                 {user && user.name && (
                   <>
-                    <img
+                    <Image
+                      loading="lazy"
                       style={{ width: 36, height: 36, borderRadius: "50%" }}
                       src={user.avatar}
+                      preview={false}
                     />
                     <span className="ml-8 c-admin">{user.name}</span>
                   </>

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;
@@ -22,7 +22,9 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
   const [idCard, setIdCard] = useState<string>("");
 
   useEffect(() => {
-    getUser();
+    if (open) {
+      getUser();
+    }
   }, [form, open]);
 
   const getUser = () => {
@@ -38,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(),
@@ -99,6 +101,7 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
               <div className="d-flex">
                 {avatar && (
                   <Image
+                    loading="lazy"
                     width={60}
                     height={60}
                     style={{ borderRadius: "50%" }}

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,95 @@ h1 {
 }
 
 #meedu-player-container {
-  width: 1200px;
-  height: 675px;
-  float: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.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;
+}
+
+.dplayer-notice {
+  opacity: 0 !important;
 }

src/main.tsx

@@ -1,13 +1,12 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
-import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import zhCN from "antd/locale/zh_CN";
 import App from "./App";
 import "./index.scss"; //全局样式
+import AutoScorllTop from "./AutoTop";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <Provider store={store}>
@@ -16,13 +15,10 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
       theme={{ token: { colorPrimary: "#ff4d4f" } }}
     >
       <BrowserRouter>
-        <App />
+        <AutoScorllTop>
+          <App />
+        </AutoScorllTop>
       </BrowserRouter>
     </ConfigProvider>
   </Provider>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);

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>
@@ -191,39 +173,35 @@ 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) => (
-                      <div key={it.id} className={styles["hours-it"]}>
-                        {learnHourRecord[it.id] && (
-                          <HourCompenent
-                            id={it.id}
-                            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] && (
-                          <HourCompenent
-                            id={it.id}
-                            cid={item.course_id}
-                            title={it.title}
-                            record={null}
-                            records={learnHourRecord}
-                            duration={it.duration}
-                            progress={0}
-                            totalHours={totalHours}
-                            onChange={() => getDetail()}
-                          ></HourCompenent>
-                        )}
-                      </div>
-                    ))}
+                    {hours[item.id] &&
+                      hours[item.id].map((it: any, int: number) => (
+                        <div key={it.id} className={styles["hours-it"]}>
+                          {learnHourRecord[it.id] && (
+                            <HourCompenent
+                              id={it.id}
+                              cid={item.course_id}
+                              title={it.title}
+                              record={learnHourRecord[it.id]}
+                              duration={it.duration}
+                              progress={
+                                (learnHourRecord[it.id].finished_duration *
+                                  100) /
+                                learnHourRecord[it.id].total_duration
+                              }
+                            ></HourCompenent>
+                          )}
+                          {!learnHourRecord[it.id] && (
+                            <HourCompenent
+                              id={it.id}
+                              cid={item.course_id}
+                              title={it.title}
+                              record={null}
+                              duration={it.duration}
+                              progress={0}
+                            ></HourCompenent>
+                          )}
+                        </div>
+                      ))}
                   </div>
                 ))}
               </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,290 @@
+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 [playingTime, setPlayingTime] = useState(0);
+  const [watchedSeconds, setWatchedSeconds] = useState(0);
+  const myRef = useRef(0);
+  const playRef = useRef(0);
+  const watchRef = useRef(0);
+  const totalRef = useRef(0);
+
+  useEffect(() => {
+    getCourse();
+    getDetail();
+    document.oncontextmenu = function (e) {
+      /*屏蔽浏览器默认右键事件*/
+      e = e || window.event;
+      return false;
+    };
+    return () => {
+      document.oncontextmenu = function (e) {
+        /*恢复浏览器默认右键事件*/
+        e = e || window.event;
+        return true;
+      };
+    };
+  }, [params.courseId, params.hourId]);
+
+  useEffect(() => {
+    myRef.current = playDuration;
+  }, [playDuration]);
+
+  useEffect(() => {
+    playRef.current = playingTime;
+  }, [playingTime]);
+
+  useEffect(() => {
+    watchRef.current = watchedSeconds;
+  }, [watchedSeconds]);
+
+  useEffect(() => {
+    totalRef.current = hour.duration;
+  }, [hour]);
+
+  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);
+          setWatchedSeconds(record.finished_duration);
+        } else if (record && record.is_finished === 1) {
+          setWatchedSeconds(res.data.hour.duration);
+        }
+        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) => {
+    let banDrag =
+      systemConfig.playerIsDisabledDrag &&
+      watchRef.current < totalRef.current &&
+      watchRef.current === 0;
+    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: banDrag,
+      last_see_pos: params,
+    });
+    // 监听播放进度更新evt
+    window.player.on("timeupdate", () => {
+      let currentTime = parseInt(window.player.video.currentTime);
+      if (
+        systemConfig.playerIsDisabledDrag &&
+        watchRef.current < totalRef.current &&
+        currentTime - playRef.current >= 2 &&
+        currentTime > watchRef.current
+      ) {
+        message.warning("首次学习禁止快进");
+        window.player.seek(watchRef.current);
+      } else {
+        setPlayingTime(currentTime);
+        playTimeUpdate(parseInt(window.player.video.currentTime), false);
+      }
+    });
+    window.player.on("ended", () => {
+      if (
+        systemConfig.playerIsDisabledDrag &&
+        watchRef.current < totalRef.current &&
+        window.player.video.duration - playRef.current >= 2
+      ) {
+        window.player.seek(playRef.current);
+        return;
+      }
+      setPlayingTime(0);
+      setPlayendedStatus(true);
+      playTimeUpdate(parseInt(window.player.video.currentTime), true);
+      exitFullscreen();
+      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,
+      });
+    }
+  };
+
+  const exitFullscreen = () => {
+    let de: any;
+    de = document;
+    if (de.fullscreenElement !== null) {
+      de.exitFullscreen();
+    } else if (de.mozCancelFullScreen) {
+      de.mozCancelFullScreen();
+    } else if (de.webkitCancelFullScreen) {
+      de.webkitCancelFullScreen();
+    }
+  };
+
+  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();
+              document.oncontextmenu = function (e) {
+                /*恢复浏览器默认右键事件*/
+                e = e || window.event;
+                return true;
+              };
+              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

@@ -29,6 +29,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
     >
       <div className={styles["top-content"]}>
         <Image
+          loading="lazy"
           width={120}
           height={90}
           style={{ borderRadius: 10 }}
@@ -63,9 +64,15 @@ 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} />
+            <Image
+              loading="lazy"
+              width={24}
+              height={24}
+              src={mediaIcon}
+              preview={false}
+            />
             <span className="ml-8">恭喜你学完此课程!</span>
           </div>
         )}

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";
@@ -13,9 +13,14 @@ import { studyTimeFormat } from "../../utils/index";
 
 const IndexPage = () => {
   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>({});
@@ -27,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);
@@ -87,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,
@@ -114,6 +165,40 @@ 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",
+      }}
+    >
+      <Tree
+        selectedKeys={selectKey}
+        switcherIcon={null}
+        onSelect={onSelect}
+        treeData={categories}
+        blockNode
+        defaultExpandAll={true}
+      />
+    </div>
+  );
+
   return (
     <div className="main-body">
       <div className="content">
@@ -238,6 +323,21 @@ const IndexPage = () => {
               )}
             </div>
           ))}
+          <Popover
+            content={dropItem}
+            placement="bottomRight"
+            open={open}
+            trigger="click"
+            onOpenChange={handleOpenChange}
+          >
+            <Space className={styles["dropButton"]}>
+              {categoryText}
+              <i
+                className="iconfont icon-icon-xiala"
+                style={{ fontSize: 16 }}
+              />
+            </Space>
+          </Popover>
         </div>
         {loading && (
           <Row
@@ -278,7 +378,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,27 +1,91 @@
+import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Outlet } from "react-router-dom";
 // import styles from "./index.module.scss";
-import { saveConfigAction } from "../../store/system/systemConfigSlice";
+import {
+  SystemConfigStoreInterface,
+  saveConfigAction,
+} 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 {
-  config: Map<string, string>;
+  loginData?: any;
+  configData?: any;
 }
 
 export const InitPage = (props: Props) => {
-  const dispatch = useDispatch();
-  dispatch(saveConfigAction(props.config));
   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) {
+      dispatch(loginAction(props.loginData));
+    }
+    if (props.configData) {
+      let config: SystemConfigStoreInterface = {
+        //系统配置
+        systemApiUrl: props.configData["system-api-url"],
+        systemH5Url: props.configData["system-h5-url"],
+        systemLogo: props.configData["system-logo"],
+        systemName: props.configData["system-name"],
+        systemPcUrl: props.configData["system-pc-url"],
+        pcIndexFooterMsg: props.configData["system-pc-index-footer-msg"],
+        //播放器配置
+        playerPoster: props.configData["player-poster"],
+        playerIsEnabledBulletSecret:
+          props.configData["player-is-enabled-bullet-secret"] &&
+          props.configData["player-is-enabled-bullet-secret"] === "1"
+            ? true
+            : false,
+        playerIsDisabledDrag:
+          props.configData["player-disabled-drag"] &&
+          props.configData["player-disabled-drag"] === "1"
+            ? true
+            : false,
+        playerBulletSecretText: props.configData["player-bullet-secret-text"],
+        playerBulletSecretColor: props.configData["player-bullet-secret-color"],
+        playerBulletSecretOpacity:
+          props.configData["player-bullet-secret-opacity"],
+      };
+      dispatch(saveConfigAction(config));
+    }
+    setInit(true);
+  }, [props]);
 
   return (
     <>
-      <div>
-        {pathname === "/login" && <NoHeader></NoHeader>}
-        {pathname !== "/login" && <Header></Header>}
-        <Outlet />
-        {pathname !== "/login" && <Footer></Footer>}
-      </div>
+      {init && (
+        <div>
+          {showNoHeader && <NoHeader></NoHeader>}
+          {showHeader && <Header></Header>}
+          <Outlet />
+          {showFooter && <Footer></Footer>}
+        </div>
+      )}
     </>
   );
 };

src/pages/latest-learn/index.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 const LatestLearnPage = () => {
+  document.title = "最近学习";
   const navigate = useNavigate();
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [loading, setLoading] = useState<boolean>(false);
@@ -44,23 +45,25 @@ 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
+                      loading="lazy"
+                      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 && (
@@ -81,7 +84,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"
                             />
@@ -89,6 +92,7 @@ const LatestLearnPage = () => {
                           {item.record.progress >= 10000 && (
                             <>
                               <Image
+                                loading="lazy"
                                 width={24}
                                 height={24}
                                 src={mediaIcon}
@@ -121,7 +125,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/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/routes/index.tsx

@@ -1,57 +1,37 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router-dom";
-import { system } from "../api";
+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";
+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 config: SystemConfigStoreInterface = {
-  systemApiUrl: "",
-  systemPcUrl: "",
-  systemH5Url: "",
-  systemLogo: "",
-  systemName: "",
-  pcIndexFooterMsg: "",
-  playerPoster: "",
-  playerIsEnabledBulletSecret: false,
-  playerBulletSecretText: "",
-  playerBulletSecretColor: "",
-  playerBulletSecretOpacity: "",
-};
-
-const Init = lazy(async () => {
-  return new Promise<any>((resolve) => {
-    system.config().then((res: any) => {
-      //系统配置
-      config.systemApiUrl = res.data["system-api-url"];
-      config.systemH5Url = res.data["system-h5-url"];
-      config.systemLogo = res.data["system-logo"];
-      config.systemName = res.data["system-name"];
-      config.systemPcUrl = res.data["system-pc-url"];
-      config.pcIndexFooterMsg = res.data["system-pc-index-footer-msg"];
-
-      //播放器配置
-      config.playerPoster = res.data["player-poster"];
-      config.playerIsEnabledBulletSecret =
-        res.data["player-is-enabled-bullet-secret"] &&
-        res.data["player-is-enabled-bullet-secret"] === "1"
-          ? true
-          : false;
-      config.playerBulletSecretText = res.data["player-bullet-secret-text"];
-      config.playerBulletSecretColor = res.data["player-bullet-secret-color"];
-      config.playerBulletSecretOpacity =
-        res.data["player-bullet-secret-opacity"];
-
-      resolve({
-        default: InitPage,
-      });
+let RootPage: any = null;
+if (getToken()) {
+  RootPage = lazy(async () => {
+    return new Promise<any>(async (resolve) => {
+      try {
+        let configRes: any = await system.config();
+        let userRes: any = await user.detail();
+        resolve({
+          default: (
+            <InitPage configData={configRes.data} loginData={userRes.data} />
+          ),
+        });
+      } catch (e) {
+        console.error("系统初始化失败", e);
+      }
     });
   });
-});
+} else {
+  RootPage = <InitPage />;
+}
 
 // 懒加载
 // const LoginPage = lazy(() => import("../pages/login"));
@@ -62,11 +42,11 @@ const Init = lazy(async () => {
 const routes: RouteObject[] = [
   {
     path: "/",
-    element: <Init config={config} />,
+    element: RootPage,
     children: [
       {
         path: "/",
-        element: <IndexPage />,
+        element: <PrivateRoute Component={<IndexPage />} />,
       },
       {
         path: "/login",
@@ -74,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/system/systemConfigSlice.ts

@@ -9,6 +9,7 @@ type SystemConfigStoreInterface = {
   pcIndexFooterMsg: string;
   playerPoster: string;
   playerIsEnabledBulletSecret: boolean;
+  playerIsDisabledDrag: boolean;
   playerBulletSecretText: string;
   playerBulletSecretColor: string;
   playerBulletSecretOpacity: string;
@@ -23,6 +24,7 @@ let defaultValue: SystemConfigStoreInterface = {
   pcIndexFooterMsg: "",
   playerPoster: "",
   playerIsEnabledBulletSecret: false,
+  playerIsDisabledDrag: false,
   playerBulletSecretText: "",
   playerBulletSecretColor: "",
   playerBulletSecretOpacity: "",

src/store/user/loginUserSlice.ts

@@ -1,4 +1,11 @@
 import { createSlice } from "@reduxjs/toolkit";
+import {
+  getDepKey,
+  clearDepKey,
+  clearDepName,
+  setDepName,
+  clearToken,
+} from "../../utils/index";
 
 type UserStoreInterface = {
   user: null;
@@ -10,7 +17,7 @@ type UserStoreInterface = {
 let defaultValue: UserStoreInterface = {
   user: null,
   departments: [],
-  currentDepId: 0,
+  currentDepId: Number(getDepKey()) || 0,
   isLogin: false,
 };
 
@@ -26,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) {
@@ -33,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

@@ -72,3 +72,35 @@ export function inStrArray(array: string[], value: string): boolean {
   }
   return false;
 }
+
+export function getDepKey(): string {
+  return window.localStorage.getItem("playedu-frontend-depatmentKey") || "";
+}
+
+export function setDepKey(token: string) {
+  window.localStorage.setItem("playedu-frontend-depatmentKey", token);
+}
+
+export function clearDepKey() {
+  window.localStorage.removeItem("playedu-frontend-depatmentKey");
+}
+export function getDepName(): string {
+  return window.localStorage.getItem("playedu-frontend-depatmentName") || "";
+}
+
+export function setDepName(token: string) {
+  window.localStorage.setItem("playedu-frontend-depatmentName", token);
+}
+
+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 + "/";
+  }
+}