!6 优化

Merge pull request !6 from 白书科技/fix/1007

package.json

@@ -28,9 +28,11 @@
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "rollup-plugin-gzip": "^3.1.0",
     "sass": "^1.59.3",
+    "terser": "^5.20.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   }

src/api/login.ts

@@ -10,3 +10,11 @@ export function login(email: string, password: string) {
 export function logout() {
   return client.post("/api/v1/auth/logout", {});
 }
+
+export function loginLdap(email: string, password: string) {
+  return client.post("/api/v1/auth/login/ldap", {
+    username: email,
+    password: password,
+  });
+}
+

src/compenents/change-password/index.tsx

@@ -40,63 +40,65 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="修改密码"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="change-password"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="请输入原密码"
-              name="old_password"
-              rules={[{ required: true, message: "请输入原密码!" }]}
+      {open ? (
+        <Modal
+          title="修改密码"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          <div className="float-left mt-24">
+            <Form
+              form={form}
+              name="change-password"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input.Password
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="请输入原密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="输入新密码"
-              name="new_password"
-              rules={[{ required: true, message: "请输入新密码!" }]}
-            >
-              <Input.Password
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="请输入新密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="再次输入新密码"
-              name="again_new_password"
-              rules={[{ required: true, message: "再次输入新密码!" }]}
-            >
-              <Input.Password
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="再次输入新密码"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="请输入原密码"
+                name="old_password"
+                rules={[{ required: true, message: "请输入原密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 200 }}
+                  autoComplete="off"
+                  placeholder="请输入原密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="输入新密码"
+                name="new_password"
+                rules={[{ required: true, message: "请输入新密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 200 }}
+                  autoComplete="off"
+                  placeholder="请输入新密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="再次输入新密码"
+                name="again_new_password"
+                rules={[{ required: true, message: "再次输入新密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 200 }}
+                  autoComplete="off"
+                  placeholder="再次输入新密码"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/compenents/user-info/index.tsx

@@ -75,60 +75,62 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
 
   return (
     <>
-      <Modal
-        title="个人信息"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-        footer={null}
-      >
-        <div className="mt-24">
-          <Form
-            form={form}
-            name="user-info"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="学员头像"
-              labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
+      {open ? (
+        <Modal
+          title="个人信息"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+          footer={null}
+        >
+          <div className="mt-24">
+            <Form
+              form={form}
+              name="user-info"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              autoComplete="off"
             >
-              <div className="d-flex">
-                {avatar && (
-                  <Image
-                    loading="lazy"
-                    width={60}
-                    height={60}
-                    style={{ borderRadius: "50%" }}
-                    src={avatar}
-                    preview={false}
-                  />
-                )}
-                <div className="d-flex ml-16">
-                  <Upload {...props} showUploadList={false}>
-                    <Button>更换头像</Button>
-                  </Upload>
+              <Form.Item
+                label="学员头像"
+                labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
+              >
+                <div className="d-flex">
+                  {avatar && (
+                    <Image
+                      loading="lazy"
+                      width={60}
+                      height={60}
+                      style={{ borderRadius: "50%" }}
+                      src={avatar}
+                      preview={false}
+                    />
+                  )}
+                  <div className="d-flex ml-16">
+                    <Upload {...props} showUploadList={false}>
+                      <Button>更换头像</Button>
+                    </Upload>
+                  </div>
                 </div>
-              </div>
-            </Form.Item>
-            {name && (
-              <Form.Item label="学员姓名">
-                <div>{name}</div>
               </Form.Item>
-            )}
-            {idCard && (
-              <Form.Item label="身份证号" style={{ marginBottom: 16 }}>
-                <div>{idCard}</div>
-              </Form.Item>
-            )}
-          </Form>
-        </div>
-      </Modal>
+              {name && (
+                <Form.Item label="学员姓名">
+                  <div>{name}</div>
+                </Form.Item>
+              )}
+              {idCard && (
+                <Form.Item label="身份证号" style={{ marginBottom: 16 }}>
+                  <div>{idCard}</div>
+                </Form.Item>
+              )}
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/index.scss

@@ -1,5 +1,3 @@
-@import "./assets/iconfont/iconfont.css";
-
 $primaryColor: #ff4d4f;
 
 :root {

src/main.tsx

@@ -4,6 +4,7 @@ import store from "./store";
 import { BrowserRouter } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import zhCN from "antd/locale/zh_CN";
+import "./assets/iconfont/iconfont.css";
 import App from "./App";
 import "./index.scss"; //全局样式
 import AutoScorllTop from "./AutoTop";

src/pages/course/index.tsx

@@ -8,12 +8,12 @@ import { HourCompenent } from "./compenents/hour";
 import { Empty } from "../../compenents";
 import iconRoute from "../../assets/images/commen/icon-route.png";
 
-type tabModal = {
+type TabModel = {
   key: number;
   label: string;
 };
 
-type attachModal = {
+type AttachModel = {
   id: number;
   course_id: number;
   rid: number;
@@ -23,19 +23,40 @@ type attachModal = {
   url?: string;
 };
 
+type HoursModel = {
+  [key: number]: HourModel[];
+};
+
+type ChapterModel = {
+  course_id: number;
+  created_at: string;
+  id: number;
+  name: string;
+  sort: number;
+  updated_at: string;
+};
+
+type LearnHourRecordsModel = {
+  [key: number]: HourRecordModel;
+};
+
 const CoursePage = () => {
   const params = useParams();
   const navigate = useNavigate();
   const result = new URLSearchParams(useLocation().search);
   const [loading, setLoading] = useState<boolean>(true);
-  const [course, setCourse] = useState<any>({});
-  const [chapters, setChapters] = useState<any>([]);
-  const [hours, setHours] = useState<any>({});
-  const [learnRecord, setLearnRecord] = useState<any>({});
-  const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+  const [course, setCourse] = useState<CourseModel | null>(null);
+  const [chapters, setChapters] = useState<ChapterModel[]>([]);
+  const [hours, setHours] = useState<HoursModel>({});
+  const [learnRecord, setLearnRecord] = useState<CourseRecordModel | null>(
+    null
+  );
+  const [learnHourRecord, setLearnHourRecord] = useState<LearnHourRecordsModel>(
+    {}
+  );
   const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
-  const [attachments, setAttachments] = useState<attachModal[]>([]);
-  const [items, setItems] = useState<tabModal[]>([]);
+  const [attachments, setAttachments] = useState<AttachModel[]>([]);
+  const [items, setItems] = useState<TabModel[]>([]);
 
   useEffect(() => {
     getDetail();
@@ -55,8 +76,8 @@ const CoursePage = () => {
         if (res.data.learn_hour_records) {
           setLearnHourRecord(res.data.learn_hour_records);
         }
-        let arr = res.data.attachments;
-        let tabs = [
+        let arr: AttachModel[] = res.data.attachments;
+        let tabs: TabModel[] = [
           {
             key: 1,
             label: `课程目录`,
@@ -115,18 +136,18 @@ const CoursePage = () => {
                   height={90}
                   style={{ borderRadius: 10 }}
                   preview={false}
-                  src={course.thumb}
+                  src={course?.thumb}
                 />
                 <div className={styles["info"]}>
-                  <div className={styles["title"]}>{course.title}</div>
+                  <div className={styles["title"]}>{course?.title}</div>
                   <div className={styles["status"]}>
-                    {course.is_required === 1 && (
+                    {course?.is_required === 1 && (
                       <div className={styles["type"]}>必修课</div>
                     )}
-                    {course.is_required === 0 && (
+                    {course?.is_required === 0 && (
                       <div className={styles["active-type"]}>选修课</div>
                     )}
-                    {learnRecord.progress / 100 >= 100 && (
+                    {learnRecord && learnRecord.progress / 100 >= 100 && (
                       <div className={styles["success"]}>
                         <Image
                           width={24}
@@ -140,7 +161,8 @@ const CoursePage = () => {
                   </div>
                 </div>
               </div>
-              {JSON.stringify(learnRecord) === "{}" &&
+              {(!learnRecord ||
+                (learnRecord && JSON.stringify(learnRecord) === "{}")) &&
                 JSON.stringify(learnHourRecord) === "{}" && (
                   <Progress
                     type="circle"
@@ -152,7 +174,8 @@ const CoursePage = () => {
                     format={(percent) => `${percent}%`}
                   />
                 )}
-              {JSON.stringify(learnRecord) === "{}" &&
+              {(!learnRecord ||
+                (learnRecord && JSON.stringify(learnRecord) === "{}")) &&
                 JSON.stringify(learnHourRecord) !== "{}" && (
                   <Progress
                     type="circle"
@@ -164,7 +187,8 @@ const CoursePage = () => {
                     format={(percent) => `${percent}%`}
                   />
                 )}
-              {JSON.stringify(learnRecord) !== "{}" &&
+              {learnRecord &&
+                JSON.stringify(learnRecord) !== "{}" &&
                 JSON.stringify(learnHourRecord) !== "{}" && (
                   <Progress
                     type="circle"
@@ -177,7 +201,7 @@ const CoursePage = () => {
                   />
                 )}
             </div>
-            {course.short_desc && (
+            {course?.short_desc && (
               <div className={styles["desc"]}>{course.short_desc}</div>
             )}
           </div>

src/pages/course/video.module.scss

@@ -64,6 +64,7 @@
       margin: 0 auto;
       border-radius: 8px;
       position: relative;
+
       .alert-message {
         position: absolute;
         top: 0;
@@ -80,6 +81,12 @@
         font-size: 18px;
         color: white;
         z-index: 100;
+        .des-video {
+          font-size: 15px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 15px;
+        }
         .alert-button {
           width: 200px;
           height: 54px;

src/pages/course/video.tsx

@@ -5,31 +5,35 @@ import { useSelector } from "react-redux";
 import { course as Course } from "../../api/index";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { message } from "antd";
+import { getPlayId, savePlayId } from "../../utils";
 
 declare const window: any;
+var timer: any = null;
 
 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 [playUrl, setPlayUrl] = useState("");
   const [playDuration, setPlayDuration] = useState(0);
-  const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
+  const [playendedStatus, setPlayendedStatus] = useState(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 [course, setCourse] = useState<CourseModel | null>(null);
+  const [hour, setHour] = useState<HourModel | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [isLastpage, setIsLastpage] = useState(false);
+  const [totalHours, setTotalHours] = useState<HourModel[]>([]);
   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);
+  const [checkPlayerStatus, setCheckPlayerStatus] = useState(false);
 
   useEffect(() => {
+    timer && clearInterval(timer);
     getCourse();
     getDetail();
     document.oncontextmenu = function (e) {
@@ -37,7 +41,9 @@ const CoursePalyPage = () => {
       e = e || window.event;
       return false;
     };
+
     return () => {
+      timer && clearInterval(timer);
       document.oncontextmenu = function (e) {
         /*恢复浏览器默认右键事件*/
         e = e || window.event;
@@ -59,17 +65,17 @@ const CoursePalyPage = () => {
   }, [watchedSeconds]);
 
   useEffect(() => {
-    totalRef.current = hour.duration;
+    totalRef.current = hour?.duration || 0;
   }, [hour]);
 
   const getCourse = () => {
     Course.detail(Number(params.courseId)).then((res: any) => {
-      let totalHours: any = [];
+      let totalHours: HourModel[] = [];
       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 = [];
+        const arr: HourModel[] = [];
         for (let key in res.data.hours) {
           res.data.hours[key].map((item: any) => {
             arr.push(item);
@@ -97,7 +103,7 @@ const CoursePalyPage = () => {
         setCourse(res.data.course);
         setHour(res.data.hour);
         document.title = res.data.hour.title;
-        let record = res.data.user_hour_record;
+        let record: HourRecordModel = res.data.user_hour_record;
         let params = null;
         if (record && record.finished_duration && record.is_finished === 0) {
           params = {
@@ -123,6 +129,7 @@ const CoursePalyPage = () => {
       (res: any) => {
         setPlayUrl(res.data.url);
         initDPlayer(res.data.url, 0, data);
+        savePlayId(String(params.courseId) + "-" + String(params.hourId));
       }
     );
   };
@@ -185,6 +192,7 @@ const CoursePalyPage = () => {
       window.player && window.player.destroy();
     });
     setLoading(false);
+    checkPlayer();
   };
 
   const playTimeUpdate = (duration: number, isEnd: boolean) => {
@@ -201,6 +209,22 @@ const CoursePalyPage = () => {
     }
   };
 
+  const checkPlayer = () => {
+    timer = setInterval(() => {
+      let playId = getPlayId();
+      if (
+        playId &&
+        playId !== String(params.courseId) + "-" + String(params.hourId)
+      ) {
+        timer && clearInterval(timer);
+        window.player && window.player.destroy();
+        setCheckPlayerStatus(true);
+      } else {
+        setCheckPlayerStatus(false);
+      }
+    }, 5000);
+  };
+
   const goNextVideo = () => {
     const index = totalHours.findIndex(
       (i: any) => i.id === Number(params.hourId)
@@ -234,6 +258,7 @@ const CoursePalyPage = () => {
           <div
             className={styles["close-btn"]}
             onClick={() => {
+              timer && clearInterval(timer);
               window.player && window.player.destroy();
               document.oncontextmenu = function (e) {
                 /*恢复浏览器默认右键事件*/
@@ -249,13 +274,20 @@ const CoursePalyPage = () => {
         </div>
       </div>
       <div className={styles["video-body"]}>
-        <div className={styles["video-title"]}>{hour.title}</div>
+        <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>
+          {checkPlayerStatus && (
+            <div className={styles["alert-message"]}>
+              <div className={styles["des-video"]}>
+                您已打开新视频，暂停本视频播放
+              </div>
+            </div>
+          )}
           {playendedStatus && (
             <div className={styles["alert-message"]}>
               {isLastpage && (

src/pages/index/index.tsx

@@ -11,6 +11,29 @@ import studyTime from "../../assets/images/commen/icon-studytime.png";
 import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";
 
+type StatsModel = {
+  learn_duration: number;
+  nun_required_course_count: number;
+  nun_required_finished_course_count: number;
+  nun_required_finished_hour_count: number;
+  nun_required_hour_count: number;
+  required_course_count: number;
+  required_finished_course_count: number;
+  required_finished_hour_count: number;
+  required_hour_count: number;
+  today_learn_duration: number;
+};
+
+type LearnCourseRecordsModel = {
+  [key: number]: CourseRecordModel;
+};
+
+type CategoryModel = {
+  key: number;
+  title: any;
+  children?: CategoryModel[];
+};
+
 const IndexPage = () => {
   const navigate = useNavigate();
   const result = new URLSearchParams(useLocation().search);
@@ -18,8 +41,8 @@ const IndexPage = () => {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
-  const [coursesList, setCoursesList] = useState<any>([]);
-  const [categories, setCategories] = useState<any>([]);
+  const [coursesList, setCoursesList] = useState<CourseModel[]>([]);
+  const [categories, setCategories] = useState<CategoryModel[]>([]);
   const [categoryId, setCategoryId] = useState<number>(
     Number(result.get("cid") || 0)
   );
@@ -27,9 +50,10 @@ const IndexPage = () => {
     String(result.get("catName") || "所有分类")
   );
   const [selectKey, setSelectKey] = useState<any>([0]);
-  const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
+  const [learnCourseRecords, setLearnCourseRecords] =
+    useState<LearnCourseRecordsModel>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
-  const [stats, setStats] = useState<any>({});
+  const [stats, setStats] = useState<StatsModel | null>(null);
   const currentDepId = useSelector(
     (state: any) => state.loginUser.value.currentDepId
   );
@@ -62,14 +86,14 @@ const IndexPage = () => {
   const getData = () => {
     setLoading(true);
     user.courses(currentDepId, categoryId).then((res: any) => {
-      const records = res.data.learn_course_records;
+      const records: LearnCourseRecordsModel = res.data.learn_course_records;
       setStats(res.data.stats);
       setLearnCourseRecords(records);
       setLearnCourseHourCount(res.data.user_course_hour_count);
       if (tabKey === 0) {
         setCoursesList(res.data.courses);
       } else if (tabKey === 1) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (item.is_required === 1) {
             arr.push(item);
@@ -77,7 +101,7 @@ const IndexPage = () => {
         });
         setCoursesList(arr);
       } else if (tabKey === 2) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (item.is_required === 0) {
             arr.push(item);
@@ -85,7 +109,7 @@ const IndexPage = () => {
         });
         setCoursesList(arr);
       } else if (tabKey === 3) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (records[item.id] && records[item.id].progress >= 10000) {
             arr.push(item);
@@ -93,7 +117,7 @@ const IndexPage = () => {
         });
         setCoursesList(arr);
       } else if (tabKey === 4) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (
             !records[item.id] ||
@@ -112,7 +136,7 @@ const IndexPage = () => {
     user.coursesCategories().then((res: any) => {
       const categories = res.data.categories;
       if (JSON.stringify(categories) !== "{}") {
-        const new_arr: any[] = checkArr(categories, 0);
+        const new_arr: CategoryModel[] = checkArr(categories, 0);
         new_arr.unshift({
           key: 0,
           title: "所有分类",
@@ -123,7 +147,7 @@ const IndexPage = () => {
   };
 
   const checkArr = (categories: any[], id: number) => {
-    const arr = [];
+    const arr: CategoryModel[] = [];
     for (let i = 0; i < categories[id].length; i++) {
       if (!categories[categories[id][i].id]) {
         arr.push({
@@ -133,7 +157,10 @@ const IndexPage = () => {
           key: categories[id][i].id,
         });
       } else {
-        const new_arr: any[] = checkArr(categories, categories[id][i].id);
+        const new_arr: CategoryModel[] = checkArr(
+          categories,
+          categories[id][i].id
+        );
         arr.push({
           title: (
             <span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
@@ -240,17 +267,17 @@ const IndexPage = () => {
             <div className={styles["info"]}>
               <div className={styles["info-item"]}>
                 <span>必修课：已学完课程</span>
-                <strong> {stats.required_finished_course_count || 0} </strong>
-                <span>/ {stats.required_course_count || 0}</span>
+                <strong> {stats?.required_finished_course_count || 0} </strong>
+                <span>/ {stats?.required_course_count || 0}</span>
               </div>
-              {stats.nun_required_course_count > 0 && (
+              {stats && stats.nun_required_course_count > 0 && (
                 <div className={styles["info-item"]}>
                   <span>选修课：已学完课程</span>
                   <strong>
                     {" "}
-                    {stats.nun_required_finished_course_count || 0}{" "}
+                    {stats?.nun_required_finished_course_count || 0}{" "}
                   </strong>
-                  <span>/ {stats.nun_required_course_count || 0}</span>
+                  <span>/ {stats?.nun_required_course_count || 0}</span>
                 </div>
               )}
             </div>
@@ -260,70 +287,56 @@ const IndexPage = () => {
               <img className={styles["icon"]} src={studyTime} />
               <span>学习时长</span>
             </div>
-            <div className={styles["info"]}>
-              <div className={styles["info-item"]}>
-                今日：
-                {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
-                    </strong>
-                    天
-                  </>
-                )}
-                {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
-                    </strong>
-                    小时
-                  </>
-                )}
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
-                </strong>
-                分钟
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
-                </strong>
-                秒
+            {stats ? (
+              <div className={styles["info"]}>
+                <div className={styles["info-item"]}>
+                  今日：
+                  {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
+                    <>
+                      <strong>
+                        {" "}
+                        {studyTimeFormat(stats.today_learn_duration)[0] ||
+                          0}{" "}
+                      </strong>
+                      小时
+                    </>
+                  )}
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
+                  </strong>
+                  分钟
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
+                  </strong>
+                  秒
+                </div>
+                <div className={styles["info-item"]}>
+                  累计：
+                  {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
+                    <>
+                      <strong>
+                        {" "}
+                        {studyTimeFormat(stats.learn_duration || 0)[0] ||
+                          0}{" "}
+                      </strong>
+                      小时
+                    </>
+                  )}
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
+                  </strong>
+                  分钟
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
+                  </strong>
+                  秒
+                </div>
               </div>
-              <div className={styles["info-item"]}>
-                累计：
-                {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
-                    </strong>
-                    天
-                  </>
-                )}
-                {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
-                    </strong>
-                    小时
-                  </>
-                )}
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
-                </strong>
-                分钟
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
-                </strong>
-                秒
-              </div>
-            </div>
+            ) : null}
           </div>
         </div>
         <div className={styles["tabs"]}>

src/pages/init/index.tsx

@@ -24,6 +24,7 @@ export const InitPage = (props: Props) => {
     if (props.configData) {
       let config: SystemConfigStoreInterface = {
         //系统配置
+        "ldap-enabled": props.configData["ldap-enabled"],
         systemApiUrl: props.configData["system-api-url"],
         systemH5Url: props.configData["system-h5-url"],
         systemLogo: props.configData["system-logo"],

src/pages/latest-learn/index.tsx

@@ -7,12 +7,46 @@ import mediaIcon from "../../assets/images/commen/icon-medal.png";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 
+type LastLearnModel = {
+  [key: number]: LearnModel;
+};
+
+type LearnModel = {
+  course: LastCourseModel;
+  hour_record: HourRecordModel;
+  last_learn_hour: LastHourModel;
+  record: CourseRecordModel;
+};
+
+type LastCourseModel = {
+  charge?: number;
+  class_hour: number;
+  created_at?: string;
+  id: number;
+  is_required: number;
+  is_show?: number;
+  short_desc: string;
+  thumb: string;
+  title: string;
+};
+
+type LastHourModel = {
+  chapter_id: number;
+  course_id: number;
+  duration: number;
+  id: number;
+  rid: number;
+  sort: number;
+  title: string;
+  type: string;
+};
+
 const LatestLearnPage = () => {
   document.title = "最近学习";
   const navigate = useNavigate();
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [loading, setLoading] = useState<boolean>(false);
-  const [courses, setCourses] = useState<any>([]);
+  const [courses, setCourses] = useState<LastLearnModel[]>([]);
 
   useEffect(() => {
     getCourses();

src/pages/login/index.tsx

@@ -1,8 +1,8 @@
 import { Input, Button, message } from "antd";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import styles from "./index.module.scss";
 import banner from "../../assets/images/login/banner.png";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { loginAction } from "../../store/user/loginUserSlice";
 import { login, user } from "../../api/index";
@@ -15,10 +15,11 @@ const LoginPage: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
+  const systemConfig = useSelector((state: any) => state.systemConfig.value);
 
   const loginSubmit = (e: any) => {
     if (!email) {
-      message.error("请输入学员邮箱账号");
+      message.error("请输入邮箱或UID");
       return;
     }
     if (!password) {
@@ -42,16 +43,29 @@ const LoginPage: React.FC = () => {
       return;
     }
     setLoading(true);
-    login
-      .login(email, password)
-      .then((res: any) => {
-        const token = res.data.token;
-        setToken(token);
-        getUser();
-      })
-      .catch((e) => {
-        setLoading(false);
-      });
+    if (systemConfig["ldap-enabled"] === "1") {
+      login
+        .loginLdap(email, password)
+        .then((res: any) => {
+          const token = res.data.token;
+          setToken(token);
+          getUser();
+        })
+        .catch((e) => {
+          setLoading(false);
+        });
+    } else {
+      login
+        .login(email, password)
+        .then((res: any) => {
+          const token = res.data.token;
+          setToken(token);
+          getUser();
+        })
+        .catch((e) => {
+          setLoading(false);
+        });
+    }
   };
 
   const getUser = () => {
@@ -79,7 +93,7 @@ const LoginPage: React.FC = () => {
                   setEmail(e.target.value);
                 }}
                 style={{ width: 400, height: 54 }}
-                placeholder="请输入学员邮箱账号"
+                placeholder={"请输入邮箱或UID"}
                 onKeyUp={(e) => keyUp(e)}
               />
             </div>

src/playedu.d.ts

@@ -0,0 +1,53 @@
+declare global {
+  interface CourseModel {
+    charge: number;
+    class_hour: number;
+    created_at: string;
+    id: number;
+    is_required: number;
+    is_show: number;
+    short_desc: string;
+    thumb: string;
+    title: string;
+  }
+
+  interface HourModel {
+    chapter_id: number;
+    course_id: number;
+    duration: number;
+    id: number;
+    rid: number;
+    sort: number;
+    title: string;
+    type: string;
+  }
+
+  interface HourRecordModel {
+    course_id: number;
+    created_at: string;
+    finished_at?: string;
+    finished_duration: number;
+    hour_id: number;
+    id: number;
+    is_finished: number;
+    real_duration: number;
+    total_duration: number;
+    updated_at: string;
+    user_id: number;
+  }
+
+  interface CourseRecordModel {
+    course_id: number;
+    created_at: string;
+    finished_at?: string;
+    finished_count: number;
+    hour_count: number;
+    id: number;
+    is_finished: number;
+    progress: number;
+    updated_at: string;
+    user_id: number;
+  }
+}
+
+export {};

src/store/system/systemConfigSlice.ts

@@ -1,6 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 type SystemConfigStoreInterface = {
+  "ldap-enabled": string;
   systemApiUrl: string;
   systemPcUrl: string;
   systemH5Url: string;
@@ -16,6 +17,7 @@ type SystemConfigStoreInterface = {
 };
 
 let defaultValue: SystemConfigStoreInterface = {
+  "ldap-enabled": "",
   systemApiUrl: "",
   systemPcUrl: "",
   systemH5Url: "",

src/utils/index.ts

@@ -28,7 +28,6 @@ export function durationFormat(dateStr: number) {
 export function studyTimeFormat(dateStr: number) {
   var d = moment.duration(dateStr / 1000, "seconds");
   let value = [];
-  value.push(Math.floor(d.asDays()));
   value.push(d.hours());
   value.push(d.minutes());
   value.push(d.seconds());
@@ -111,3 +110,15 @@ export function isMobile() {
   );
   return flag;
 }
+
+export function getPlayId(): string {
+  return window.localStorage.getItem("playedu-play-id") || "";
+}
+
+export function savePlayId(id: string) {
+  window.localStorage.setItem("playedu-play-id", id);
+}
+
+export function clearPlayId() {
+  window.localStorage.removeItem("playedu-play-id");
+}

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import gzipPlugin from "rollup-plugin-gzip";
+import legacy from "@vitejs/plugin-legacy";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -8,7 +9,15 @@ export default defineConfig({
     host: "0.0.0.0",
     port: 9797,
   },
-  plugins: [react()],
+  plugins: [
+    react(),
+    legacy({
+      targets: ["chrome 52"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+      renderLegacyChunks: true,
+      modernPolyfills: true,
+    }),
+  ],
   build: {
     rollupOptions: {
       plugins: [gzipPlugin()],