Merge pull request #4 from PlayEdu/dev

Dev

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

@@ -295,3 +295,83 @@ h1 {
   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/index.tsx

@@ -124,7 +124,7 @@ const CoursePage = () => {
                     trailColor="#F6F6F6"
                     size={90}
                     strokeWidth={8}
-                    percent={learnRecord.progress / 100}
+                    percent={Math.floor(learnRecord.progress / 100)}
                     format={(percent) => `${percent}%`}
                   />
                 )}

src/pages/course/video.module.scss

@@ -2,9 +2,11 @@
   width: 100%;
   height: 100%;
   min-height: 100vh;
+  max-height: 900px;
   background-color: #0e0e1e;
   display: flex;
   justify-content: center;
+  overflow: hidden;
   .top-cont {
     position: fixed;
     top: 0;
@@ -12,7 +14,8 @@
     right: 0;
     width: 100%;
     height: 60px;
-    background: rgba(255, 255, 255, 0.1);
+    background: #262634;
+    z-index: 100;
     .box {
       width: 62.5%;
       height: 60px;
@@ -37,12 +40,13 @@
   }
   .video-body {
     width: 62.5%;
-    height: auto;
+    height: 100%;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding-top: 30px;
     margin-top: 60px;
+    overflow-y: auto;
     .video-title {
       width: 100%;
       height: 36px;

src/pages/course/video.tsx

@@ -176,7 +176,11 @@ const CoursePalyPage = () => {
       <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"></div>
+          <div
+            className="play-box"
+            id="meedu-player-container"
+            style={{ borderRadius: 8 }}
+          ></div>
           {playendedStatus && (
             <div className={styles["alert-message"]}>
               {isLastpage && (

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 || "首页";
   }, [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,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">
@@ -238,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
@@ -278,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/latest-learn/index.tsx

@@ -83,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"
                             />

src/routes/index.tsx

@@ -10,6 +10,7 @@ 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()) {
@@ -29,9 +30,6 @@ if (getToken()) {
     });
   });
 } else {
-  if (window.location.pathname !== "/login") {
-    window.location.href = "/login";
-  }
   RootPage = <InitPage />;
 }
 
@@ -48,7 +46,7 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <IndexPage />,
+        element: <PrivateRoute Component={<IndexPage />} />,
       },
       {
         path: "/login",
@@ -56,15 +54,15 @@ const routes: RouteObject[] = [
       },
       {
         path: "/course/:courseId",
-        element: <CoursePage />,
+        element: <PrivateRoute Component={<CoursePage />} />,
       },
       {
         path: "/course/:courseId/hour/:hourId",
-        element: <CoursePlayPage />,
+        element: <PrivateRoute Component={<CoursePlayPage />} />,
       },
       {
         path: "/latest-learn",
-        element: <LatestLearnPage />,
+        element: <PrivateRoute Component={<LatestLearnPage />} />,
       },
     ],
   },