移除 react-ga 依赖

fixed: pnpm install 和 build 报错
移除xgplayer
2025-06-27 19:52:45 +08:00 · 2024-02-20 14:59:07 +08:00 · 2024-02-20 14:51:33 +08:00 · 2024-02-20 14:29:44 +08:00 · 2024-02-01 09:50:00 +08:00 · 2024-01-31 18:34:10 +08:00
47 changed files with 1428 additions and 548 deletions
--- a/.env.example
+++ b/.env.example
@ -1,2 +1 @@
-VITE_APP_URL=
-VITE_G_ID=
+VITE_APP_URL=
--- a/.gitignore
+++ b/.gitignore
@ -32,4 +32,6 @@ yarn.lock

 deploy-test.sh
 deploy-prod.sh
-deploy-demo.sh
+deploy-demo.sh
+
+pnpm-lock.yaml
--- a/index.html
+++ b/index.html
@ -13,10 +13,5 @@
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
-    <script
-      crossorigin="anonymous"
-      integrity="sha512-oHrfR/z2wkuRuaHrdZ9NhoT/o/1kteub+QvmQgVzOKK7NTvIKQMvnY9+/RR0+eW311o4lAE/YzzLXXmP2XUvig=="
-      src="https://lib.baomitu.com/hls.js/1.1.4/hls.min.js"
-    ></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
-  "name": "frontend",
-  "private": true,
+  "name": "playedu-pc-interface",
+  "private": false,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
@ -9,28 +9,31 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@ant-design/icons": "^5.3.0",
    "@reduxjs/toolkit": "^1.9.3",
    "add": "^2.0.6",
    "antd": "^5.3.2",
    "axios": "^1.3.4",
+    "dayjs": "^1.11.10",
    "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"
  },
  "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@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"
  }
--- a/public/js/xg/hls.min.js
+++ b/public/js/xg/hls.min.js
--- a/public/js/xg/index.js
+++ b/public/js/xg/index.js
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,31 +1,13 @@
-import { Suspense, useEffect } from "react";
-import ReactGA from "react-ga";
-import { useLocation, useRoutes } from "react-router-dom";
+import { Suspense } from "react";
+import { useRoutes } from "react-router-dom";
 import routes from "./routes";
 import "./App.scss";
 import LoadingPage from "./pages/loading";

-const G_ID = import.meta.env.VITE_G_ID || "";
-if (G_ID) {
-  ReactGA.initialize(G_ID);
-}
-
 const App = () => {
-  const Views = () => useRoutes(routes);
+  const views = useRoutes(routes);

-  const location = useLocation();
-  useEffect(() => {
-    if (!G_ID) {
-      return;
-    }
-    ReactGA.pageview(location.pathname + location.search);
-  }, [location]);
-
-  return (
-    <Suspense fallback={<LoadingPage />}>
-      <Views />
-    </Suspense>
-  );
+  return <Suspense fallback={<LoadingPage />}>{views}</Suspense>;
 };

 export default App;
--- a/src/api/course.ts
+++ b/src/api/course.ts
@ -31,3 +31,8 @@ export function playPing(courseId: number, hourId: number) {
 export function latestLearn() {
  return client.get(`/api/v1/user/latest-learn`, {});
 }
+
+//下载课件
+export function downloadAttachment(courseId: number, id: number) {
+  return client.get(`/api/v1/course/${courseId}/attach/${id}/download`, {});
+}
--- a/src/api/internal/httpClient.ts
+++ b/src/api/internal/httpClient.ts
@ -1,12 +1,23 @@
 import axios, { Axios, AxiosResponse } from "axios";
 import { message } from "antd";
-import { getToken, clearToken } from "../../utils/index";
+import {
+  getToken,
+  clearToken,
+  clearDepKey,
+  clearDepName,
+} from "../../utils/index";

 const GoLogin = () => {
  clearToken();
+  clearDepName();
+  clearDepKey();
  window.location.href = "/login";
 };

+const GoError = (status: number) => {
+  window.location.href = "/error?status=" + status;
+};
+
 export class HttpClient {
  axios: Axios;

@ -52,10 +63,13 @@ export class HttpClient {
          GoLogin();
        } else if (status === 404) {
          // 跳转到404页面
+          GoError(404);
        } else if (status === 403) {
          // 跳转到无权限页面
+          GoError(403);
        } else if (status === 500) {
          // 跳转到500异常页面
+          GoError(500);
        }
        return Promise.reject(error.response);
      }
--- a/src/api/login.ts
+++ b/src/api/login.ts
@ -1,19 +1,20 @@
 import client from "./internal/httpClient";

-export function login(
-  email: string,
-  password: string,
-  captchaKey: string,
-  captchaVal: string
-) {
+export function login(email: string, password: string) {
  return client.post("/api/v1/auth/login/password", {
    email: email,
    password: password,
-    captcha_key: captchaKey,
-    captcha_val: captchaVal,
  });
 }

 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,
+  });
+}
+
--- a/src/api/user.ts
+++ b/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,
  });
 }

--- a/src/assets/iconfont/iconfont.css
+++ b/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";
 }
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/iconfont/iconfont.woff
+++ b/src/assets/iconfont/iconfont.woff
--- a/src/assets/iconfont/iconfont.woff2
+++ b/src/assets/iconfont/iconfont.woff2
--- a/src/assets/images/login/banner.png
+++ b/src/assets/images/login/banner.png
--- a/src/compenents/change-password/index.tsx
+++ b/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}
    </>
  );
 };
--- a/src/compenents/header/index.tsx
+++ b/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";
@ -217,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>
                  </>
--- a/src/compenents/private-route/index.tsx
+++ b/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;
--- a/src/compenents/user-info/index.tsx
+++ b/src/compenents/user-info/index.tsx
@ -75,59 +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
-                    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}
    </>
  );
 };
--- a/src/index.scss
+++ b/src/index.scss
@ -1,5 +1,3 @@
-@import "./assets/iconfont/iconfont.css";
-
 $primaryColor: #ff4d4f;

 :root {
@ -35,6 +33,18 @@ body {
  min-height: 100vh;
 }

+.layout-box {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.footer-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 .main-body {
  width: 100%;
  height: auto;
@ -291,7 +301,95 @@ h1 {
 }

 #meedu-player-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
  width: 100%;
-  height: auto;
-  position: relative;
+  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;
 }
--- a/src/main.tsx
+++ b/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";
@ -21,4 +22,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
      </BrowserRouter>
    </ConfigProvider>
  </Provider>
-);
+);
--- a/src/pages/course/index.module.scss
+++ b/src/pages/course/index.module.scss
@ -92,13 +92,67 @@
  }
 }

+.tabs {
+  width: 1200px;
+  height: 48px;
+  margin: 0 auto;
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .tab-item {
+    min-width: 64px;
+    height: 48px;
+    margin-right: 50px;
+    transition: all 0.2s;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+      .tit {
+        color: #ff4d4f;
+      }
+    }
+    .tit {
+      width: 100%;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 40px;
+    }
+  }
+  .tab-active-item {
+    min-width: 64px;
+    height: 48px;
+    cursor: pointer;
+    margin-right: 50px;
+    transition: all 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+    .tit {
+      width: 100%;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #ff4d4f;
+      line-height: 40px;
+    }
+    .banner {
+      animation: scaleTransX 0.3s;
+    }
+  }
+}
+
 .chapters-hours-cont {
  width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
-  margin-top: 30px;
+  margin-top: 24px;
  box-sizing: border-box;
  padding: 24px;
  .hours-list-box {
@ -135,3 +189,58 @@
    }
  }
 }
+
+.attachments-cont {
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+  margin-top: 24px;
+  box-sizing: border-box;
+  padding: 24px;
+  .attachments-item {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0px 24px;
+    margin-bottom: 8px;
+    text-align: left;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .left-cont {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .title {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        margin-right: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+    .download {
+      width: auto;
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ff4d4f;
+      line-height: 24px;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
--- a/src/pages/course/index.tsx
+++ b/src/pages/course/index.tsx
@ -1,20 +1,62 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Spin, Image, Progress } from "antd";
+import { Row, Spin, Image, Progress } from "antd";
 import styles from "./index.module.scss";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { course as Course } from "../../api/index";
 import mediaIcon from "../../assets/images/commen/icon-medal.png";
 import { HourCompenent } from "./compenents/hour";
 import { Empty } from "../../compenents";
+import iconRoute from "../../assets/images/commen/icon-route.png";
+
+type TabModel = {
+  key: number;
+  label: string;
+};
+
+type AttachModel = {
+  id: number;
+  course_id: number;
+  rid: number;
+  sort: number;
+  title: string;
+  type: string;
+  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<AttachModel[]>([]);
+  const [items, setItems] = useState<TabModel[]>([]);

  useEffect(() => {
    getDetail();
@ -34,6 +76,22 @@ const CoursePage = () => {
        if (res.data.learn_hour_records) {
          setLearnHourRecord(res.data.learn_hour_records);
        }
+        let arr: AttachModel[] = res.data.attachments;
+        let tabs: TabModel[] = [
+          {
+            key: 1,
+            label: `课程目录`,
+          },
+        ];
+        if (arr.length > 0) {
+          tabs.push({
+            key: 2,
+            label: `课程附件`,
+          });
+          setAttachments(arr);
+        }
+        setItems(tabs);
+
        setLoading(false);
      })
      .catch((e) => {
@ -41,6 +99,17 @@ const CoursePage = () => {
      });
  };

+  const onChange = (key: number) => {
+    setTabKey(key);
+    navigate("/course/" + params.courseId + "?tab=" + key);
+  };
+
+  const downLoadFile = (cid: number, id: number) => {
+    Course.downloadAttachment(cid, id).then((res: any) => {
+      window.open(res.data.download_url);
+    });
+  };
+
  return (
    <div className="container">
      {loading && (
@ -67,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}
@ -92,7 +161,8 @@ const CoursePage = () => {
                  </div>
                </div>
              </div>
-              {JSON.stringify(learnRecord) === "{}" &&
+              {(!learnRecord ||
+                (learnRecord && JSON.stringify(learnRecord) === "{}")) &&
                JSON.stringify(learnHourRecord) === "{}" && (
                  <Progress
                    type="circle"
@ -104,7 +174,8 @@ const CoursePage = () => {
                    format={(percent) => `${percent}%`}
                  />
                )}
-              {JSON.stringify(learnRecord) === "{}" &&
+              {(!learnRecord ||
+                (learnRecord && JSON.stringify(learnRecord) === "{}")) &&
                JSON.stringify(learnHourRecord) !== "{}" && (
                  <Progress
                    type="circle"
@ -116,7 +187,8 @@ const CoursePage = () => {
                    format={(percent) => `${percent}%`}
                  />
                )}
-              {JSON.stringify(learnRecord) !== "{}" &&
+              {learnRecord &&
+                JSON.stringify(learnRecord) !== "{}" &&
                JSON.stringify(learnHourRecord) !== "{}" && (
                  <Progress
                    type="circle"
@ -124,87 +196,145 @@ const CoursePage = () => {
                    trailColor="#F6F6F6"
                    size={90}
                    strokeWidth={8}
-                    percent={learnRecord.progress / 100}
+                    percent={Math.floor(learnRecord.progress / 100)}
                    format={(percent) => `${percent}%`}
                  />
                )}
            </div>
-            {course.short_desc && (
+            {course?.short_desc && (
              <div className={styles["desc"]}>{course.short_desc}</div>
            )}
          </div>
-          <div className={styles["chapters-hours-cont"]}>
-            {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
-              <Empty />
-            )}
-            {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
-              <div className={styles["hours-list-box"]}>
-                {hours[0].map((item: any, index: number) => (
-                  <div key={item.id} className={styles["hours-it"]}>
-                    {learnHourRecord[item.id] && (
-                      <HourCompenent
-                        id={item.id}
-                        cid={item.course_id}
-                        title={item.title}
-                        record={learnHourRecord[item.id]}
-                        duration={item.duration}
-                        progress={
-                          (learnHourRecord[item.id].finished_duration * 100) /
-                          learnHourRecord[item.id].total_duration
-                        }
-                      ></HourCompenent>
-                    )}
-                    {!learnHourRecord[item.id] && (
-                      <HourCompenent
-                        id={item.id}
-                        cid={item.course_id}
-                        title={item.title}
-                        record={null}
-                        duration={item.duration}
-                        progress={0}
-                      ></HourCompenent>
-                    )}
-                  </div>
-                ))}
+          <div className={styles["tabs"]}>
+            {items.map((item: any) => (
+              <div
+                key={item.key}
+                className={
+                  item.key === tabKey
+                    ? styles["tab-active-item"]
+                    : styles["tab-item"]
+                }
+                onClick={() => {
+                  onChange(item.key);
+                }}
+              >
+                <div className={styles["tit"]}>{item.label}</div>
+                {item.key === tabKey && (
+                  <Image
+                    className={styles["banner"]}
+                    width={40}
+                    height={8}
+                    preview={false}
+                    src={iconRoute}
+                    style={{ marginTop: -16 }}
+                  />
+                )}
              </div>
-            )}
-            {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
-              <div className={styles["hours-list-box"]}>
-                {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]}
-                            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>
-            )}
+            ))}
          </div>
+          {tabKey === 1 && (
+            <div className={styles["chapters-hours-cont"]}>
+              {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
+                <Empty />
+              )}
+              {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
+                <div className={styles["hours-list-box"]}>
+                  {hours[0].map((item: any, index: number) => (
+                    <div key={item.id} className={styles["hours-it"]}>
+                      {learnHourRecord[item.id] && (
+                        <HourCompenent
+                          id={item.id}
+                          cid={item.course_id}
+                          title={item.title}
+                          record={learnHourRecord[item.id]}
+                          duration={item.duration}
+                          progress={
+                            (learnHourRecord[item.id].finished_duration * 100) /
+                            learnHourRecord[item.id].total_duration
+                          }
+                        ></HourCompenent>
+                      )}
+                      {!learnHourRecord[item.id] && (
+                        <HourCompenent
+                          id={item.id}
+                          cid={item.course_id}
+                          title={item.title}
+                          record={null}
+                          duration={item.duration}
+                          progress={0}
+                        ></HourCompenent>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+              {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
+                <div className={styles["hours-list-box"]}>
+                  {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] &&
+                        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>
+              )}
+            </div>
+          )}
+          {tabKey === 2 && (
+            <div className={styles["attachments-cont"]}>
+              {attachments.map((item: any, index: number) => (
+                <div key={index} className={styles["attachments-item"]}>
+                  <div className={styles["left-cont"]}>
+                    <i
+                      className="iconfont icon-icon-file"
+                      style={{
+                        fontSize: 16,
+                        color: "rgba(0,0,0,0.3)",
+                        marginRight: 10,
+                      }}
+                    />
+                    <span className={styles["title"]}>
+                      {item.title}.{item.ext}
+                    </span>
+                  </div>
+                  <div
+                    className={styles["download"]}
+                    onClick={() => downLoadFile(item.course_id, item.id)}
+                  >
+                    下载
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
        </>
      )}
    </div>
--- a/src/pages/course/video.module.scss
+++ b/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,15 +40,16 @@
  }
  .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;
+      height: auto;
      font-size: 20px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
@ -60,6 +64,7 @@
      margin: 0 auto;
      border-radius: 8px;
      position: relative;
+
      .alert-message {
        position: absolute;
        top: 0;
@ -76,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;
--- a/src/pages/course/video.tsx
+++ b/src/pages/course/video.tsx
@ -5,42 +5,77 @@ 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) {
+      /*屏蔽浏览器默认右键事件*/
+      e = e || window.event;
+      return false;
+    };
+
+    return () => {
+      timer && clearInterval(timer);
+      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 || 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);
@ -68,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 = {
@ -77,6 +112,9 @@ const CoursePalyPage = () => {
          };
          setLastSeeValue(params);
          setLastSeeValue(params);
+          setWatchedSeconds(record.finished_duration);
+        } else if (record && record.is_finished === 1) {
+          setWatchedSeconds(res.data.hour.duration);
        }
        getVideoUrl(params);
        setLoading(false);
@ -91,11 +129,16 @@ const CoursePalyPage = () => {
      (res: any) => {
        setPlayUrl(res.data.url);
        initDPlayer(res.data.url, 0, data);
+        savePlayId(String(params.courseId) + "-" + String(params.hourId));
      }
    );
  };

  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,
@ -114,19 +157,42 @@ const CoursePalyPage = () => {
        color: systemConfig.playerBulletSecretColor || "red",
        opacity: Number(systemConfig.playerBulletSecretOpacity),
      },
-      ban_drag: false,
+      ban_drag: banDrag,
      last_see_pos: params,
    });
    // 监听播放进度更新evt
    window.player.on("timeupdate", () => {
-      playTimeUpdate(parseInt(window.player.video.currentTime), false);
+      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);
+    checkPlayer();
  };

  const playTimeUpdate = (duration: number, isEnd: boolean) => {
@ -143,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)
@ -157,6 +239,18 @@ const CoursePalyPage = () => {
    }
  };

+  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"]}>
@ -164,7 +258,13 @@ const CoursePalyPage = () => {
          <div
            className={styles["close-btn"]}
            onClick={() => {
+              timer && clearInterval(timer);
              window.player && window.player.destroy();
+              document.oncontextmenu = function (e) {
+                /*恢复浏览器默认右键事件*/
+                e = e || window.event;
+                return true;
+              };
              navigate(-1);
            }}
          >
@ -174,9 +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"></div>
+          <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 && (
--- a/src/pages/error/index.module.scss
+++ b/src/pages/error/index.module.scss
@ -0,0 +1,4 @@
+.main {
+  width: 100vw;
+  height: 100vh;
+}
--- a/src/pages/error/index.tsx
+++ b/src/pages/error/index.tsx
@ -0,0 +1,31 @@
+import { useState } from "react";
+import { Button, Result } from "antd";
+import { useNavigate, useLocation } from "react-router-dom";
+import styles from "./index.module.scss";
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
+  const [status, setStatus] = useState(String(result.get("status") || "404"));
+
+  return (
+    <Result
+      status="404"
+      title={status}
+      subTitle="您访问的页面不存在"
+      className={styles["main"]}
+      extra={
+        <Button
+          type="primary"
+          onClick={() => {
+            navigate("/", { replace: true });
+          }}
+        >
+          返回首页
+        </Button>
+      }
+    />
+  );
+};
+
+export default ErrorPage;
--- a/src/pages/index/compenents/courses-model.tsx
+++ b/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 }}
@ -65,7 +66,13 @@ export const CoursesModel: React.FC<PropInterface> = ({
        )}
        {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>
        )}
--- a/src/pages/index/index.module.scss
+++ b/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 {
--- a/src/pages/index/index.tsx
+++ b/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 { useNavigate, useLocation } from "react-router-dom";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
@ -11,44 +11,89 @@ import studyTime from "../../assets/images/commen/icon-studytime.png";
 import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";

-const IndexPage = () => {
-  const systemConfig = useSelector((state: any) => state.systemConfig.value);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [tabKey, setTabKey] = useState(0);
-  const [coursesList, setCoursesList] = useState<any>([]);
-  const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
-  const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
-  const [stats, setStats] = useState<any>({});
+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;
+};

-  const departments = useSelector(
-    (state: any) => state.loginUser.value.departments
+type LearnCourseRecordsModel = {
+  [key: number]: CourseRecordModel;
+};
+
+type CategoryModel = {
+  key: number;
+  title: any;
+  children?: CategoryModel[];
+};
+
+const IndexPage = () => {
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
+  const systemConfig = useSelector((state: any) => state.systemConfig.value);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
+  const [coursesList, setCoursesList] = useState<CourseModel[]>([]);
+  const [categories, setCategories] = useState<CategoryModel[]>([]);
+  const [categoryId, setCategoryId] = useState<number>(
+    Number(result.get("cid") || 0)
  );
+  const [categoryText, setCategoryText] = useState<string>(
+    String(result.get("catName") || "所有分类")
+  );
+  const [selectKey, setSelectKey] = useState<any>([0]);
+  const [learnCourseRecords, setLearnCourseRecords] =
+    useState<LearnCourseRecordsModel>({});
+  const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
+  const [stats, setStats] = useState<StatsModel | null>(null);
  const currentDepId = useSelector(
    (state: any) => state.loginUser.value.currentDepId
  );

+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    let arr = [];
+    arr.push(Number(result.get("cid") || 0));
+    setSelectKey(arr);
+  }, [result.get("cid")]);
+
  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) => {
-      const records = res.data.learn_course_records;
+    user.courses(currentDepId, categoryId).then((res: any) => {
+      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);
@ -56,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);
@ -64,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);
@ -72,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] ||
@ -87,6 +132,47 @@ const IndexPage = () => {
    });
  };

+  const getParams = () => {
+    user.coursesCategories().then((res: any) => {
+      const categories = res.data.categories;
+      if (JSON.stringify(categories) !== "{}") {
+        const new_arr: CategoryModel[] = checkArr(categories, 0);
+        new_arr.unshift({
+          key: 0,
+          title: "所有分类",
+        });
+        setCategories(new_arr);
+      }
+    });
+  };
+
+  const checkArr = (categories: any[], id: number) => {
+    const arr: CategoryModel[] = [];
+    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: CategoryModel[] = 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,
@ -112,8 +198,63 @@ const IndexPage = () => {

  const onChange = (key: number) => {
    setTabKey(key);
+    navigate(
+      "/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
+    );
  };

+  const onSelect = (selectedKeys: any, info: any) => {
+    setCategoryId(selectedKeys[0]);
+    if (info.node.key === 0) {
+      setCategoryText(info.node.title);
+      setSelectKey(selectedKeys);
+      hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title +
+          "&tab=" +
+          tabKey
+      );
+    } else {
+      setCategoryText(info.node.title.props.children);
+      setSelectKey(selectedKeys);
+      hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title.props.children +
+          "&tab=" +
+          tabKey
+      );
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    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">
@ -126,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>
@ -146,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"]}>
@ -238,6 +365,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 +420,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>
                )}

--- a/src/pages/init/index.tsx
+++ b/src/pages/init/index.tsx
@ -1,14 +1,12 @@
 import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Outlet } from "react-router-dom";
-// import styles from "./index.module.scss";
 import {
  SystemConfigStoreInterface,
  saveConfigAction,
 } from "../../store/system/systemConfigSlice";
 import { loginAction } from "../../store/user/loginUserSlice";
-import { Header, NoHeader, Footer } from "../../compenents";
-import { useParams, useLocation } from "react-router-dom";
+import { isMobile } from "../../utils/index";

 interface Props {
  loginData?: any;
@ -16,66 +14,56 @@ interface Props {
 }

 export const InitPage = (props: Props) => {
-  const pathname = useLocation().pathname;
-  const params = useParams();
  const dispatch = useDispatch();
-  const [showHeader, setShowHeader] = useState<boolean>(true);
-  const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
-  const [showFooter, setShowFooter] = useState<boolean>(true);
-  if (props.loginData) {
-    dispatch(loginAction(props.loginData));
-  }
-  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,
-      playerBulletSecretText: props.configData["player-bullet-secret-text"],
-      playerBulletSecretColor: props.configData["player-bullet-secret-color"],
-      playerBulletSecretOpacity:
-        props.configData["player-bullet-secret-opacity"],
-    };
-    dispatch(saveConfigAction(config));
-  }
+  const [init, setInit] = useState<boolean>(false);

  useEffect(() => {
-    setShowHeader(true);
-    setShowNoHeader(false);
-    setShowFooter(true);
-    if (pathname === "/login") {
-      setShowNoHeader(true);
-      setShowHeader(false);
-      setShowFooter(false);
-    } else if (!params.hourId) {
-      setShowNoHeader(false);
-      setShowHeader(true);
-      setShowFooter(true);
-    } else {
-      setShowNoHeader(false);
-      setShowHeader(false);
-      setShowFooter(false);
+    if (props.loginData) {
+      dispatch(loginAction(props.loginData));
    }
-  }, [pathname, params]);
+    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"],
+        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));
+      if (isMobile() && props.configData["system-h5-url"] !== "") {
+        let url = props.configData["system-h5-url"];
+        window.location.href = url;
+      }
+    }
+    setInit(true);
+  }, [props]);

  return (
    <>
-      <div>
-        {showNoHeader && <NoHeader></NoHeader>}
-        {showHeader && <Header></Header>}
-        <Outlet />
-        {showFooter && <Footer></Footer>}
-      </div>
+      {init && (
+        <div style={{ minHeight: 900 }}>
+          <Outlet />
+        </div>
+      )}
    </>
  );
 };
--- a/src/pages/latest-learn/index.tsx
+++ b/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();
@ -56,6 +90,7 @@ const LatestLearnPage = () => {
                >
                  <div style={{ width: 120 }}>
                    <Image
+                      loading="lazy"
                      src={item.course.thumb}
                      width={120}
                      height={90}
@ -83,7 +118,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"
                            />
@ -91,6 +126,7 @@ const LatestLearnPage = () => {
                          {item.record.progress >= 10000 && (
                            <>
                              <Image
+                                loading="lazy"
                                width={24}
                                height={24}
                                src={mediaIcon}
--- a/src/pages/layouts/with-header-with-footer/index.tsx
+++ b/src/pages/layouts/with-header-with-footer/index.tsx
@ -0,0 +1,20 @@
+import { Outlet } from "react-router-dom";
+import { Footer, Header } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithHeaderWithFooter = () => {
+  return (
+    <div className="layout-box">
+      <Header></Header>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+      <div className="footer-box">
+        <Footer></Footer>
+      </div>
+    </div>
+  );
+};
+
+export default WithHeaderWithFooter;
--- a/src/pages/layouts/with-header-without-footer/index.tsx
+++ b/src/pages/layouts/with-header-without-footer/index.tsx
@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+import { NoHeader } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithHeaderWithoutFooter = () => {
+  return (
+    <>
+      <NoHeader></NoHeader>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+    </>
+  );
+};
+
+export default WithHeaderWithoutFooter;
--- a/src/pages/layouts/without-header-with-footer/index.tsx
+++ b/src/pages/layouts/without-header-with-footer/index.tsx
@ -0,0 +1,19 @@
+import { Outlet } from "react-router-dom";
+import { Footer } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithFooter = () => {
+  return (
+    <div className="layout-box">
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+      <div className="footer-box">
+        <Footer></Footer>
+      </div>
+    </div>
+  );
+};
+
+export default WithoutHeaderWithFooter;
--- a/src/pages/layouts/without-header-without-footer/index.tsx
+++ b/src/pages/layouts/without-header-without-footer/index.tsx
@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <Suspense fallback={<LoadingPage height="100vh" />}>
+      <Outlet />
+    </Suspense>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;
--- a/src/pages/loading/index.module.scss
+++ b/src/pages/loading/index.module.scss
@ -1,10 +1,6 @@
-.loadingBox {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-  text-align: center;
+.loading-box {
+  width: 100vw;
  line-height: 100vh;
+  text-align: center;
+  background-color: #f4fafe;
 }
--- a/src/pages/loading/index.tsx
+++ b/src/pages/loading/index.tsx
@ -1,11 +1,20 @@
 import { Spin } from "antd";
 import styles from "./index.module.scss";

-const LoadingPage = () => {
+interface PropsInterface {
+  height?: string;
+}
+
+const LoadingPage = (props: PropsInterface) => {
  return (
-    <div className={styles.loadingBox}>
-      <Spin />
-    </div>
+    <>
+      <div
+        className={styles["loading-box"]}
+        style={{ height: props.height || "100vh" }}
+      >
+        <Spin size="large" />
+      </div>
+    </>
  );
 };

--- a/src/pages/login/index.module.scss
+++ b/src/pages/login/index.module.scss
@ -47,7 +47,7 @@
        height: 100%;
        box-sizing: border-box;
        border-left: 1px solid #d8d8d8;
-        padding: 0px 60px;
+        padding: 50px 60px;
        display: flex;
        flex-direction: column;
        .captcha-box {
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@ -1,11 +1,11 @@
-import { Spin, Input, Button, message } from "antd";
-import React, { useState, useEffect } from "react";
+import { Input, Button, message } from "antd";
+import React, { useState } from "react";
 import styles from "./index.module.scss";
 import banner from "../../assets/images/login/banner.png";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
-import { login, system, user } from "../../api/index";
+import { loginAction } from "../../store/user/loginUserSlice";
+import { login, user } from "../../api/index";
 import { setToken } from "../../utils/index";
 import { NoFooter } from "../../compenents";

@ -13,43 +13,19 @@ const LoginPage: React.FC = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [loading, setLoading] = useState<boolean>(false);
-  const [image, setImage] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
-  const [captchaVal, setCaptchaVal] = useState<string>("");
-  const [captchaKey, setCaptchaKey] = useState<string>("");
-  const [captchaLoading, setCaptchaLoading] = useState(true);
-
-  useEffect(() => {
-    fetchImageCaptcha();
-  }, []);
-
-  const fetchImageCaptcha = () => {
-    setCaptchaLoading(true);
-    system.imageCaptcha().then((res: any) => {
-      setImage(res.data.image);
-      setCaptchaKey(res.data.key);
-      setCaptchaLoading(false);
-    });
-  };
+  const systemConfig = useSelector((state: any) => state.systemConfig.value);

  const loginSubmit = (e: any) => {
    if (!email) {
-      message.error("请输入学员邮箱账号");
+      message.error("请输入邮箱或UID");
      return;
    }
    if (!password) {
      message.error("请输入密码");
      return;
    }
-    if (!captchaVal) {
-      message.error("请输入图形验证码");
-      return;
-    }
-    if (captchaVal.length < 4) {
-      message.error("图形验证码错误");
-      return;
-    }
    if (loading) {
      return;
    }
@ -67,18 +43,29 @@ const LoginPage: React.FC = () => {
      return;
    }
    setLoading(true);
-    login
-      .login(email, password, captchaKey, captchaVal)
-      .then((res: any) => {
-        const token = res.data.token;
-        setToken(token);
-        getUser();
-      })
-      .catch((e) => {
-        setLoading(false);
-        setCaptchaVal("");
-        fetchImageCaptcha();
-      });
+    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 = () => {
@ -106,7 +93,7 @@ const LoginPage: React.FC = () => {
                  setEmail(e.target.value);
                }}
                style={{ width: 400, height: 54 }}
-                placeholder="请输入学员邮箱账号"
+                placeholder={"请输入邮箱或UID"}
                onKeyUp={(e) => keyUp(e)}
              />
            </div>
@ -118,33 +105,8 @@ const LoginPage: React.FC = () => {
                }}
                style={{ width: 400, height: 54 }}
                placeholder="请输入密码"
-              />
-            </div>
-            <div className="login-box d-flex mt-50">
-              <Input
-                value={captchaVal}
-                style={{ width: 260, height: 54 }}
-                placeholder="请输入图形验证码"
-                onChange={(e) => {
-                  setCaptchaVal(e.target.value);
-                }}
                onKeyUp={(e) => keyUp(e)}
              />
-              <div className={styles["captcha-box"]}>
-                {captchaLoading && (
-                  <div className={styles["catpcha-loading-box"]}>
-                    <Spin size="small" />
-                  </div>
-                )}
-
-                {!captchaLoading && (
-                  <img
-                    className={styles["captcha"]}
-                    onClick={fetchImageCaptcha}
-                    src={image}
-                  />
-                )}
-              </div>
            </div>
            <div className="login-box d-flex mt-50">
              <Button
--- a/src/playedu.d.ts
+++ b/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 {};
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -1,15 +1,26 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router-dom";
 import { system, user } from "../api";
-import { SystemConfigStoreInterface } from "../store/system/systemConfigSlice";
-
 import { getToken } from "../utils";
+// 页面加载
 import { InitPage } from "../pages/init";
-import CoursePage from "../pages/course/index";
-import CoursePlayPage from "../pages/course/video";
-import IndexPage from "../pages/index";
-import LatestLearnPage from "../pages/latest-learn";
 import LoginPage from "../pages/login";
+import WithHeaderWithFooter from "../pages/layouts/with-header-with-footer";
+import WithHeaderWithoutFooter from "../pages/layouts/with-header-without-footer";
+import WithoutHeaderWithFooter from "../pages/layouts/without-header-with-footer";
+import WithoutHeaderWithoutFooter from "../pages/layouts/without-header-without-footer";
+
+//主页
+const IndexPage = lazy(() => import("../pages/index"));
+//课程相关
+const CoursePage = lazy(() => import("../pages/course/index"));
+const CoursePlayPage = lazy(() => import("../pages/course/video"));
+//最近学习
+const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
+//错误页面
+const ErrorPage = lazy(() => import("../pages/error"));
+
+import PrivateRoute from "../compenents/private-route";

 let RootPage: any = null;
 if (getToken()) {
@ -29,17 +40,20 @@ if (getToken()) {
    });
  });
 } else {
-  if (window.location.pathname !== "/login") {
-    window.location.href = "/login";
-  }
-  RootPage = <InitPage />;
-}
+  RootPage = lazy(async () => {
+    return new Promise<any>(async (resolve) => {
+      try {
+        let configRes: any = await system.config();

-// 懒加载
-// const LoginPage = lazy(() => import("../pages/login"));
-// const IndexPage = lazy(() => import("../pages/index"));
-// const CoursePage = lazy(() => import("../pages/course"));
-// const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
+        resolve({
+          default: <InitPage configData={configRes.data} />,
+        });
+      } catch (e) {
+        console.error("系统初始化失败", e);
+      }
+    });
+  });
+}

 const routes: RouteObject[] = [
  {
@ -48,23 +62,51 @@ const routes: RouteObject[] = [
    children: [
      {
        path: "/",
-        element: <IndexPage />,
+        element: <WithHeaderWithFooter />,
+        children: [
+          {
+            path: "/",
+            element: <PrivateRoute Component={<IndexPage />} />,
+          },
+
+          {
+            path: "/course/:courseId",
+            element: <PrivateRoute Component={<CoursePage />} />,
+          },
+
+          {
+            path: "/latest-learn",
+            element: <PrivateRoute Component={<LatestLearnPage />} />,
+          },
+        ],
      },
      {
-        path: "/login",
-        element: <LoginPage />,
+        path: "/",
+        element: <WithHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+        ],
      },
      {
-        path: "/course/:courseId",
-        element: <CoursePage />,
-      },
-      {
-        path: "/course/:courseId/hour/:hourId",
-        element: <CoursePlayPage />,
-      },
-      {
-        path: "/latest-learn",
-        element: <LatestLearnPage />,
+        path: "/",
+        element: <WithoutHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/course/:courseId/hour/:hourId",
+            element: <PrivateRoute Component={<CoursePlayPage />} />,
+          },
+          {
+            path: "/error",
+            element: <ErrorPage />,
+          },
+          {
+            path: "*",
+            element: <ErrorPage />,
+          },
+        ],
      },
    ],
  },
--- a/src/store/system/systemConfigSlice.ts
+++ b/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;
@ -9,12 +10,14 @@ type SystemConfigStoreInterface = {
  pcIndexFooterMsg: string;
  playerPoster: string;
  playerIsEnabledBulletSecret: boolean;
+  playerIsDisabledDrag: boolean;
  playerBulletSecretText: string;
  playerBulletSecretColor: string;
  playerBulletSecretOpacity: string;
 };

 let defaultValue: SystemConfigStoreInterface = {
+  "ldap-enabled": "",
  systemApiUrl: "",
  systemPcUrl: "",
  systemH5Url: "",
@ -23,6 +26,7 @@ let defaultValue: SystemConfigStoreInterface = {
  pcIndexFooterMsg: "",
  playerPoster: "",
  playerIsEnabledBulletSecret: false,
+  playerIsDisabledDrag: false,
  playerBulletSecretText: "",
  playerBulletSecretColor: "",
  playerBulletSecretOpacity: "",
--- a/src/store/user/loginUserSlice.ts
+++ b/src/store/user/loginUserSlice.ts
@ -31,7 +31,7 @@ const loginUserSlice = createSlice({
      stage.value.user = e.payload.user;
      stage.value.departments = e.payload.departments;
      stage.value.isLogin = true;
-      if (e.payload.departments.length > 0 && stage.value.currentDepId === 0) {
+      if (e.payload.departments.length > 0 && !getDepKey()) {
        stage.value.currentDepId = e.payload.departments[0].id;
        setDepName(e.payload.departments[0].name);
      }
--- a/src/utils/index.ts
+++ b/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());
@ -104,3 +103,22 @@ export function changeAppUrl(str: string) {
    return str + "/";
  }
 }
+
+export function isMobile() {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+  return flag;
+}
+
+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");
+}
--- a/vite.config.ts
+++ b/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()],
Author	SHA1	Message	Date
xxx	96da44a884	移除 react-ga 依赖	2024-02-20 14:59:07 +08:00
xxx	39250531fb	fixed: pnpm install 和 build 报错	2024-02-20 14:51:33 +08:00
xxx	490ea214b3	移除xgplayer	2024-02-20 14:29:44 +08:00
unknown	b0d0063fc1	重部署系统时部门storage存储优化以及error页面显示优化	2024-02-01 09:50:00 +08:00
unknown	8614d4ebaf	底部组件优化	2024-01-31 18:34:10 +08:00
unknown	46bb144f0a	退出登录优化	2024-01-26 10:53:44 +08:00
xxx	6e920d8ea1	移除hls.min.js	2024-01-08 16:14:11 +08:00
unknown	8154ee3130	登录封面替换	2024-01-08 12:02:31 +08:00
xxx	e056775fc0	Merge branch 'fix/1116' into dev	2023-11-16 14:57:44 +08:00
unknown	f5b4a70741	首页学习时间不显示天数	2023-11-16 14:57:38 +08:00
unknown	e1bca31883	课程详情tab优化	2023-11-16 14:55:26 +08:00
白书科技	f1985d0b8f	!6 优化 Merge pull request !6 from 白书科技/fix/1007	2023-10-07 09:55:43 +00:00
unknown	3eafab1d41	首页学习时间不显示天数	2023-10-07 17:53:57 +08:00
白书科技	66fd8486db	!5 优化 Merge pull request !5 from 白书科技/fix/0922	2023-09-24 00:47:27 +00:00
unknown	30612785b5	检测视频重复播放	2023-09-22 16:50:31 +08:00
unknown	1fbe67f228	检测视频重复播放	2023-09-22 16:46:43 +08:00
unknown	7a64180d04	iconfont优化	2023-09-22 15:28:35 +08:00
xxx	eaee82649e	兼容安卓钉钉	2023-09-21 10:32:21 +08:00
滕勇志	beae7f4d27	Merge pull request #12 from PlayEdu/dev v1.3	2023-09-06 17:09:37 +08:00
白书科技	48e93202bf	!4 优化 Merge pull request !4 from 白书科技/fix/0906	2023-09-06 01:56:10 +00:00
unknown	075f164147	登录页面文案修改	2023-09-06 09:47:27 +08:00
白书科技	0029e81356	!3 v1.3 Merge pull request !3 from 白书科技/fix/0904	2023-09-04 09:10:51 +00:00
unknown	3af8b4eb27	学员登录ldap优化	2023-09-04 16:50:44 +08:00
白书科技	1312d4531b	!2 优化 Merge pull request !2 from 白书科技/fix/0808	2023-08-11 00:54:18 +00:00
unknown	470c0971c3	课程详情进度条显示优化	2023-08-08 16:09:48 +08:00
白书科技	931b9ee677	!1 优化 Merge pull request !1 from 白书科技/fix/0804	2023-08-08 01:35:51 +00:00
unknown	3c34f8356f	数据结构添加interface	2023-08-04 16:03:03 +08:00
unknown	9d12bf1c0d	数据结构添加interface	2023-08-04 14:55:06 +08:00
Teng	c00a7236a7	Merge pull request #11 from PlayEdu/dev 弹窗组件open外置并使用三元运算	2023-08-04 09:08:26 +08:00
unknown	565df9891d	弹窗组件open外置并使用三元运算	2023-08-03 09:44:16 +08:00
unknown	9425cae0da	课件列表显示后缀	2023-07-30 16:16:45 +08:00
unknown	fabb0dd264	前台附件列表显示课件类型	2023-07-30 13:06:32 +08:00
unknown	b91de09c0c	课程详情增加课件下载	2023-07-29 16:25:12 +08:00
unknown	765f37a5eb	课程详情增加课件下载	2023-07-29 16:20:01 +08:00
unknown	6137916964	缓加载优化	2023-07-24 10:35:56 +08:00
禺狨	bf19ea66a3	页面缓加载	2023-07-17 16:50:58 +08:00
禺狨	90e147eb3b	页面缓加载	2023-07-17 16:49:04 +08:00
禺狨	1159700f37	Merge branch 'dev' of https://gitee.com/playeduxyz/frontend into dev	2023-07-17 16:47:32 +08:00
禺狨	82a75f760f	页面缓加载	2023-07-17 16:47:19 +08:00
Teng	71673f3466	Merge pull request #10 from lilonghe/patch-1 fix: the page bounce when switching routes	2023-07-07 21:41:31 +08:00
longhe.li	63219bed2c	fix: the page bounce when switching routes	2023-07-07 14:46:19 +08:00
Teng	d35fddad01	Merge pull request #9 from PlayEdu/dev 登录页面密码框按回车键登录	2023-07-05 10:53:26 +08:00
禺狨	bc0557569c	登录页面密码框按回车键登录	2023-07-05 10:45:31 +08:00
Teng	dbaac2c785	Merge pull request #8 from PlayEdu/dev v1.1	2023-07-04 19:54:34 +08:00
禺狨	4af407e6b9	学习页面tab存储到url里	2023-07-03 16:20:32 +08:00
禺狨	3ea0857c2e	登陆页面优化	2023-07-03 15:41:27 +08:00
禺狨	7e81dc1a9d	登陆去除验证码	2023-07-03 14:53:07 +08:00
禺狨	2949eaafda	手机浏览跳转h5	2023-07-03 14:22:47 +08:00
Teng	bf4404b107	Merge pull request #7 from PlayEdu/dev 视频详情课时加载错误修复	2023-06-14 17:33:27 +08:00
禺狨	d47f1a9250	视频详情课时加载错误修复	2023-06-14 17:30:47 +08:00
Teng	25bb64a835	Merge pull request #6 from PlayEdu/dev Dev	2023-06-13 14:12:13 +08:00
禺狨	ccde01e6ff	头像重复加载优化	2023-06-13 11:22:58 +08:00
禺狨	1996340699	播放结束退出全屏	2023-06-13 09:14:42 +08:00
禺狨	c2420798d2	页面初始化优化	2023-06-08 18:16:18 +08:00
禺狨	e04d63125a	首页。最近学习页懒加载	2023-06-08 16:10:30 +08:00
禺狨	950fc74371	首页。最近学习页懒加载	2023-06-08 16:08:49 +08:00
禺狨	07cfa836a2	首页。最近学习页懒加载	2023-06-08 15:49:52 +08:00
Teng	d922bb1b0b	Merge pull request #5 from PlayEdu/dev Dev	2023-05-31 10:37:48 +08:00
禺狨	59b80c4158	播放器快进、快退toast隐藏	2023-05-31 09:37:36 +08:00
禺狨	465cc901b1	播放页面拖动进度条逻辑优化	2023-05-31 09:08:54 +08:00
禺狨	97f4abfe41	视频已学显示进度条b	2023-05-30 18:13:10 +08:00
禺狨	0075a848e3	视频第一次播放显示进度条bug修复	2023-05-30 18:05:30 +08:00
禺狨	58440be424	已看完视频显示进度条	2023-05-30 17:47:26 +08:00
禺狨	cec5251da4	已看完视频显示进度条	2023-05-30 17:47:12 +08:00
禺狨	c8e9f8cc7a	视频播放封面宽高优化	2023-05-30 17:26:14 +08:00
禺狨	1a9a20cbca	视频播放根据配置禁止拖动进度条	2023-05-30 16:40:10 +08:00
禺狨	537cac224a	视频播放页面屏蔽右键菜单	2023-05-30 10:00:43 +08:00
禺狨	29630ec1ee	视频播放页面屏蔽右键菜单	2023-05-30 09:58:37 +08:00
禺狨	01d2cf4e9b	首页分类选择栏取消悬浮显示	2023-05-30 09:54:33 +08:00
Teng	51a16dd168	Merge pull request #4 from PlayEdu/dev Dev	2023-05-10 10:57:08 +08:00
禺狨	db16226dd1	首页筛选框默认选中	2023-05-10 10:39:40 +08:00
禺狨	cf392c43c6	首页筛选框默认选中	2023-05-10 10:35:46 +08:00
禺狨	d6d814deb7	首页筛选框样式优化	2023-05-10 10:33:02 +08:00
禺狨	7ed33dd460	首页筛选框默认选中	2023-05-10 10:31:57 +08:00
禺狨	6701cef724	视频播放页面圆角	2023-05-10 10:28:21 +08:00
禺狨	403b445719	首页筛选框样式优化	2023-05-10 10:24:51 +08:00
禺狨	690f5ae11b	首页筛选框样式优化	2023-05-10 10:18:59 +08:00
禺狨	9d423379e5	首页筛选框最小宽度改为150px	2023-05-10 10:15:14 +08:00
禺狨	2c50af1778	首页课程分类选择	2023-05-08 18:12:50 +08:00
禺狨	6b69974e2e	首页课程分类选择	2023-05-08 18:06:09 +08:00
禺狨	6985b7a8cc	首页课程分类选择	2023-05-08 17:50:54 +08:00
禺狨	453bf9d8c8	首页课程分类选择	2023-05-08 16:57:54 +08:00
禺狨	dec09df6b7	iconfont更新	2023-05-08 15:05:26 +08:00
禺狨	fbfea2e70a	登录路由守卫组件	2023-05-08 10:11:27 +08:00
禺狨	90bd5919b4	视频播放页面优化	2023-05-08 10:04:01 +08:00
禺狨	7666e64f78	视频播放页面顶部优化	2023-05-08 09:59:48 +08:00