Merge pull request #13 from PlayEdu/dev

Dev

src/api/internal/httpClient.ts

@@ -52,10 +52,13 @@ export class HttpClient {
           GoLogin();
         } else if (status === 404) {
           // 跳转到404页面
+          GoLogin();
         } else if (status === 403) {
           // 跳转到无权限页面
+          GoLogin();
         } else if (status === 500) {
           // 跳转到500异常页面
+          GoLogin();
         }
         return Promise.reject(error.response);
       }

src/api/login.ts

@@ -1,16 +1,9 @@
 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("/backend/v1/auth/login", {
     email: email,
     password: password,
-    captcha_key: captchaKey,
-    captcha_value: captchaVal,
   });
 }
 

src/compenents/upload-video-button/index.tsx

@@ -11,7 +11,7 @@ import {
   Upload,
 } from "antd";
 import Dragger from "antd/es/upload/Dragger";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { generateUUID, parseVideo } from "../../utils";
 import { minioMergeVideo, minioUploadId } from "../../api/upload";
 import { UploadChunk } from "../../js/minio-upload-chunk";
@@ -21,28 +21,10 @@ interface PropsInterface {
   onUpdate: () => void;
 }
 
-interface FileItem {
-  id: string;
-  filename: string;
-  uploadId: string;
-  name: string;
-  duration: number;
-  size: number;
-  progress: number;
-  file: File;
-  resourceType: string;
-  loading: boolean;
-  run: UploadChunk;
-  isSuc: boolean;
-  isErr: boolean;
-  errMsg: string;
-  remoteName: string;
-  poster: string;
-}
-
 export const UploadVideoButton = (props: PropsInterface) => {
   const [showModal, setShowModal] = useState(false);
   const localFileList = useRef<FileItem[]>([]);
+  const intervalId = useRef<number>();
   const [fileList, setFileList] = useState<FileItem[]>([]);
 
   const getMinioUploadId = async () => {
@@ -50,6 +32,29 @@ export const UploadVideoButton = (props: PropsInterface) => {
     return resp.data;
   };
 
+  useEffect(() => {
+    if (showModal) {
+      intervalId.current = setInterval(() => {
+        if (localFileList.current.length === 0) {
+          return;
+        }
+        for (let i = 0; i < localFileList.current.length; i++) {
+          if (localFileList.current[i].upload.status === 0) {
+            localFileList.current[i].upload.handler.start();
+            break;
+          }
+          if (localFileList.current[i].upload.status === 3) {
+            break;
+          }
+        }
+      }, 1000);
+      console.log("定时器已创建", intervalId.current);
+    } else {
+      window.clearInterval(intervalId.current);
+      console.log("定时器已销毁");
+    }
+  }, [showModal]);
+
   const uploadProps = {
     multiple: true,
     beforeUpload: async (file: File) => {
@@ -61,56 +66,47 @@ export const UploadVideoButton = (props: PropsInterface) => {
         let run = new UploadChunk(file, data["upload_id"], data["filename"]);
         let item: FileItem = {
           id: generateUUID(),
-          duration: videoInfo.duration,
-          filename: data["filename"],
-          uploadId: data["upload_id"],
-          name: file.name,
-          size: file.size,
-          progress: 0,
           file: file,
-          resourceType: data["resource_type"],
-          loading: true,
-          run: run,
-          isSuc: false,
-          isErr: false,
-          errMsg: "",
-          remoteName: data["filename"],
-          poster: videoInfo.poster,
+          upload: {
+            handler: run,
+            progress: 0,
+            status: 0,
+            remark: "",
+          },
+          video: {
+            duration: videoInfo.duration,
+            poster: videoInfo.poster,
+          },
         };
-        item.run.on("success", () => {
+        item.upload.handler.on("success", () => {
           minioMergeVideo(
-            item.filename,
-            item.uploadId,
+            data["filename"],
+            data["upload_id"],
             props.categoryIds.join(","),
-            item.name,
+            item.file.name,
             "mp4",
-            item.size,
-            item.duration,
-            item.poster
+            item.file.size,
+            item.video?.duration || 0,
+            item.video?.poster || ""
           ).then(() => {
-            item.isSuc = true;
+            item.upload.progress = 100;
+            item.upload.status = item.upload.handler.getUploadStatus();
             setFileList([...localFileList.current]);
-            message.success(`${item.file.name} 上传成功`);
           });
         });
-        item.run.on("retry", () => {
-          item.isErr = false;
-          item.errMsg = "";
+        item.upload.handler.on("progress", (p: number) => {
+          item.upload.status = item.upload.handler.getUploadStatus();
+          item.upload.progress = p >= 100 ? 99 : p;
           setFileList([...localFileList.current]);
         });
-        item.run.on("progress", (progress: number) => {
-          item.progress = progress;
+        item.upload.handler.on("error", (msg: string) => {
+          item.upload.status = item.upload.handler.getUploadStatus();
+          item.upload.remark = msg;
           setFileList([...localFileList.current]);
         });
-        item.run.on("error", (msg: string) => {
-          item.isErr = true;
-          item.errMsg = msg;
-          setFileList([...localFileList.current]);
-        });
-        setTimeout(() => {
-          item.run.start();
-        }, 500);
+        // 先插入到ref
         localFileList.current.push(item);
+        // 再更新list
         setFileList([...localFileList.current]);
       } else {
         message.error(`${file.name} 并不是 mp4 视频文件`);
@@ -120,9 +116,17 @@ export const UploadVideoButton = (props: PropsInterface) => {
   };
 
   const closeWin = () => {
-    setShowModal(false);
-    setFileList([]);
+    if (fileList.length > 0) {
+      fileList.forEach((item) => {
+        if (item.upload.status !== 5 && item.upload.status !== 7) {
+          item.upload.handler.cancel();
+        }
+      });
+    }
     props.onUpdate();
+    localFileList.current = [];
+    setFileList([]);
+    setShowModal(false);
   };
 
   return (
@@ -136,7 +140,7 @@ export const UploadVideoButton = (props: PropsInterface) => {
         上传视频
       </Button>
 
-      {showModal && (
+      {showModal ? (
         <Modal
           width={800}
           title="上传视频"
@@ -149,6 +153,7 @@ export const UploadVideoButton = (props: PropsInterface) => {
           onOk={() => {
             closeWin();
           }}
+          okText="完成"
         >
           <Row gutter={[0, 10]}>
             <Col span={24}>
@@ -171,13 +176,16 @@ export const UploadVideoButton = (props: PropsInterface) => {
                     title: "视频",
                     dataIndex: "name",
                     key: "name",
+                    render: (_, record) => <span>{record.file.name}</span>,
                   },
                   {
                     title: "大小",
                     dataIndex: "size",
                     key: "size",
                     render: (_, record) => (
-                      <span>{(record.size / 1024 / 1024).toFixed(2)} M</span>
+                      <span>
+                        {(record.file.size / 1024 / 1024).toFixed(2)}M
+                      </span>
                     ),
                   },
                   {
@@ -186,12 +194,13 @@ export const UploadVideoButton = (props: PropsInterface) => {
                     key: "progress",
                     render: (_, record: FileItem) => (
                       <>
-                        {record.progress === 0 && "等待上传"}
-                        {record.progress > 0 && (
+                        {record.upload.status === 0 ? (
+                          "等待上传"
+                        ) : (
                           <Progress
                             size="small"
                             steps={20}
-                            percent={record.progress}
+                            percent={record.upload.progress}
                           />
                         )}
                       </>
@@ -202,32 +211,13 @@ export const UploadVideoButton = (props: PropsInterface) => {
                     key: "action",
                     render: (_, record) => (
                       <>
-                        {record.progress > 0 &&
-                          record.isSuc === false &&
-                          record.isErr === false && (
-                            <Button
-                              type="link"
-                              onClick={() => {
-                                record.run.cancel();
-                              }}
-                            >
-                              取消
-                            </Button>
-                          )}
+                        {record.upload.status === 5 ? (
+                          <Tag color="red">{record.upload.remark}</Tag>
+                        ) : null}
 
-                        {record.isErr && (
-                          <>
-                            <Tag color="red">{record.errMsg}</Tag>
-                            <Button
-                              type="link"
-                              onClick={() => {
-                                record.run.retry();
-                              }}
-                            >
-                              继续上传
-                            </Button>
-                          </>
-                        )}
+                        {record.upload.status === 7 ? (
+                          <Tag color="success">上传成功</Tag>
+                        ) : null}
                       </>
                     ),
                   },
@@ -237,7 +227,7 @@ export const UploadVideoButton = (props: PropsInterface) => {
             </Col>
           </Row>
         </Modal>
-      )}
+      ) : null}
     </>
   );
 };

src/js/minio-upload-chunk.ts

@@ -11,15 +11,18 @@ export class UploadChunk {
   chunkIndex: number;
   uploadId: string;
   filename: string;
+  // 上传状态[0:等待上传,3:上传中,5:上传失败,7:上传成功]
+  uploadStatus: number;
+  uploadRemark: string;
 
-  onError: ((err: string) => void | undefined) | undefined;
-  onSuccess: (() => void | undefined) | undefined;
-  onRetry: (() => void | undefined) | undefined;
-  onProgress: ((progress: number) => void) | undefined;
+  onError?: (err: string) => void | undefined;
+  onSuccess?: () => void | undefined;
+  onRetry?: () => void | undefined;
+  onProgress?: (progress: number) => void;
 
   constructor(file: File, uploadId: string, filename: string) {
     this.client = axios.create({
-      timeout: 15000,
+      timeout: 60000,
       withCredentials: false,
     });
     this.file = file;
@@ -31,6 +34,9 @@ export class UploadChunk {
 
     this.uploadId = uploadId;
     this.filename = filename;
+
+    this.uploadStatus = 0;
+    this.uploadRemark = "";
   }
 
   on(event: string, handle: any) {
@@ -49,23 +55,25 @@ export class UploadChunk {
     if (this.isStop) {
       return;
     }
+
+    // 检测是否上传完成
     if (this.chunkIndex > this.chunkNumber) {
-      //上传完成
-      this.onSuccess && this.onSuccess();
+      this.uploadCompleted();
       return;
     }
-    this.onProgress &&
-      this.onProgress(
-        parseInt((this.chunkIndex / this.chunkNumber) * 100 + "")
-      );
+
+    // 进度更新
+    this.uploadProgressUpdated();
 
     let start = (this.chunkIndex - 1) * this.chunkSize;
     const chunkData = this.file.slice(start, start + this.chunkSize);
     const boolname = this.file.name + "-" + this.chunkIndex;
     const tmpFile = new File([chunkData], boolname);
 
+    // 首先获取上传minio的签名
     minioPreSignUrl(this.uploadId, this.filename, this.chunkIndex)
       .then((res: any) => {
+        // 拿到签名之后将分块内容上传到minio
         return this.client.put(res.data.url, tmpFile, {
           headers: {
             "Content-Type": "multipart/form-data",
@@ -76,12 +84,15 @@ export class UploadChunk {
         this.chunkIndex += 1;
         this.start();
       })
-      .catch((e) => {
-        console.error("文件分片上传失败", e);
-        this.onError && this.onError("失败.2");
+      .catch((e: any) => {
+        this.uploadedFail(e);
       });
   }
 
+  isOver() {
+    return this.uploadStatus === 5 || this.uploadStatus === 7;
+  }
+
   cancel() {
     this.isStop = true;
     this.onError && this.onError("已取消");
@@ -92,4 +103,40 @@ export class UploadChunk {
     this.start();
     this.onRetry && this.onRetry();
   }
+
+  uploadProgressUpdated() {
+    if (this.uploadStatus === 0) {
+      this.uploadStatus = 3;
+    }
+    this.onProgress &&
+      this.onProgress(
+        parseInt((this.chunkIndex / this.chunkNumber) * 100 + "")
+      );
+  }
+
+  uploadCompleted() {
+    this.uploadStatus = 7;
+    this.onSuccess && this.onSuccess();
+  }
+
+  uploadedFail(e: any) {
+    console.log("上传失败,错误信息:", e);
+    this.uploadStatus = 5;
+    this.onError && this.onError("失败.2");
+  }
+
+  getUploadStatus(): number {
+    return this.uploadStatus;
+  }
+
+  getUploadProgress(): number {
+    if (this.chunkNumber === 0) {
+      return 0;
+    }
+    return (this.chunkIndex / this.chunkNumber) * 100;
+  }
+
+  getUploadRemark(): string {
+    return this.uploadRemark;
+  }
 }

src/pages/course/compenents/hour-update.tsx

@@ -109,7 +109,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
       if (videos[i].disabled === false) {
         hours.push({
           chapter_id: 0,
-          sort: i,
+          sort: treeData.length + i,
           title: videos[i].name,
           type: videos[i].type,
           duration: videos[i].duration,
@@ -144,7 +144,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
       if (videos[i].disabled === false) {
         hours.push({
           chapter_id: data[addvideoCurrent].id,
-          sort: i,
+          sort: data[addvideoCurrent].hours.length + i,
           title: videos[i].name,
           type: videos[i].type,
           duration: videos[i].duration,

src/pages/login/index.module.less

@@ -29,7 +29,7 @@
       width: 440px;
       height: 100%;
       box-sizing: border-box;
-      padding: 80px 10px 80px 30px;
+      padding: 90px 10px 80px 30px;
       .icon {
         width: 400px;
         height: 400px;
@@ -39,7 +39,7 @@
       width: 440px;
       height: 100%;
       box-sizing: border-box;
-      padding: 50px 30px;
+      padding: 90px 30px 50px 30px;
       display: flex;
       flex-direction: column;
 

src/pages/login/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import styles from "./index.module.less";
-import { Spin, Input, Button, message } from "antd";
+import { Input, Button, message } from "antd";
 import { login as loginApi, system } from "../../api/index";
 import { setToken } from "../../utils/index";
 import { useDispatch } from "react-redux";
@@ -18,22 +18,8 @@ const LoginPage = () => {
   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);
-
-  const fetchImageCaptcha = () => {
-    setCaptchaVal("");
-    setCaptchaLoading(true);
-    system.getImageCaptcha().then((res: any) => {
-      setImage(res.data.image);
-      setCaptchaKey(res.data.key);
-      setCaptchaLoading(false);
-    });
-  };
 
   const loginSubmit = async () => {
     if (!email) {
@@ -44,14 +30,6 @@ const LoginPage = () => {
       message.error("请输入密码");
       return;
     }
-    if (!captchaVal) {
-      message.error("请输入图形验证码");
-      return;
-    }
-    if (captchaVal.length !== 4) {
-      message.error("图形验证码错误");
-      return;
-    }
     await handleSubmit();
   };
 
@@ -61,12 +39,7 @@ const LoginPage = () => {
     }
     setLoading(true);
     try {
-      let res: any = await loginApi.login(
-        email,
-        password,
-        captchaKey,
-        captchaVal
-      );
+      let res: any = await loginApi.login(email, password);
       setToken(res.data.token); //将token写入本地
       await getSystemConfig(); //获取系统配置并写入store
       await getUser(); //获取登录用户的信息并写入store
@@ -75,7 +48,6 @@ const LoginPage = () => {
     } catch (e) {
       console.error("错误信息", e);
       setLoading(false);
-      fetchImageCaptcha(); //刷新图形验证码
     }
   };
 
@@ -104,10 +76,6 @@ const LoginPage = () => {
     }
   };
 
-  useEffect(() => {
-    fetchImageCaptcha();
-  }, []);
-
   return (
     <div className={styles["login-content"]}>
       <div className={styles["banner-box"]}>
@@ -127,8 +95,8 @@ const LoginPage = () => {
               }}
               style={{ width: 400, height: 54 }}
               placeholder="请输入管理员邮箱账号"
-              onKeyUp={(e) => keyUp(e)}
               allowClear
+              onKeyUp={(e) => keyUp(e)}
             />
           </div>
           <div className="login-box d-flex mt-50">
@@ -140,34 +108,8 @@ const LoginPage = () => {
               allowClear
               style={{ width: 400, height: 54 }}
               placeholder="请输入密码"
-            />
-          </div>
-          <div className="d-flex mt-50">
-            <Input
-              value={captchaVal}
-              style={{ width: 260, height: 54 }}
-              placeholder="请输入图形验证码"
-              onChange={(e) => {
-                setCaptchaVal(e.target.value);
-              }}
-              allowClear
               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

src/pages/resource/videos/compenents/video-play-dialog/index.module.less

@@ -9,19 +9,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: rgba(0, 0, 0, 0.45);
   z-index: 200;
   .play-dialog {
     width: 800px;
     height: 450px;
     border-radius: 8px;
-    overflow: hidden;
     position: relative;
     .close-button {
       width: 30px;
       height: 30px;
       position: absolute;
-      top: 24px;
-      right: 24px;
+      top: -30px;
+      right: -30px;
       cursor: pointer;
       z-index: 1000;
       &:hover {

src/pages/resource/videos/compenents/video-play-dialog/index.tsx

@@ -35,6 +35,7 @@ export const VideoPlayDialog: React.FC<PropInterface> = ({
     });
     window.player.on("ended", () => {
       window.player && window.player.destroy();
+      onCancel();
     });
   };
 

src/pages/system/administrator/compenents/create.tsx

@@ -148,6 +148,7 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
               rules={[{ required: true, message: "请输入登录密码!" }]}
             >
               <Input.Password
+                autoComplete="new-password"
                 allowClear
                 style={{ width: 200 }}
                 placeholder="请输入登录密码"

src/pages/system/administrator/compenents/update.tsx

@@ -152,6 +152,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
             </Form.Item>
             <Form.Item label="密码" name="password">
               <Input.Password
+                autoComplete="new-password"
                 style={{ width: 200 }}
                 allowClear
                 placeholder="请输入登录密码"

src/pages/system/config/index.tsx

@@ -286,6 +286,20 @@ const SystemConfigPage = () => {
           >
             <Input style={{ width: 274 }} placeholder="请填写API访问地址" />
           </Form.Item>
+          <Form.Item
+            style={{ marginBottom: 30 }}
+            label="PC端访问地址"
+            name="system.pc_url"
+          >
+            <Input style={{ width: 274 }} placeholder="请填写PC端访问地址" />
+          </Form.Item>
+          <Form.Item
+            style={{ marginBottom: 30 }}
+            label="H5端访问地址"
+            name="system.h5_url"
+          >
+            <Input style={{ width: 274 }} placeholder="请填写H5端访问地址" />
+          </Form.Item>
           <Form.Item
             style={{ marginBottom: 30 }}
             label="网站标题"
@@ -308,21 +322,6 @@ const SystemConfigPage = () => {
               placeholder="请填写网站页脚"
             />
           </Form.Item>
-          {/* 
-          <Form.Item
-            style={{ marginBottom: 30 }}
-            label="PC端访问地址"
-            name="system.pc_url"
-          >
-            <Input style={{ width: 274 }} placeholder="请填写PC端访问地址" />
-          </Form.Item>
-          <Form.Item
-            style={{ marginBottom: 30 }}
-            label="H5端访问地址"
-            name="system.h5_url"
-          >
-            <Input style={{ width: 274 }} placeholder="请填写H5端访问地址" />
-          </Form.Item> */}
           <Form.Item
             style={{ marginBottom: 30 }}
             wrapperCol={{ offset: 3, span: 21 }}

src/playedu.d.ts

@@ -0,0 +1,20 @@
+declare global {
+  interface FileItem {
+    id: string; //上传文件的唯一id
+    file: File; //上传的文件资源
+    // 上传实际执行者
+    upload: {
+      handler: UploadChunk;
+      progress: number;
+      status: number;
+      remark: string;
+    };
+    // 视频文件信息
+    video?: {
+      duration: number; //时长
+      poster: string; //视频帧
+    };
+  }
+}
+
+export {};

src/routes/index.tsx

@@ -2,29 +2,45 @@ import { lazy } from "react";
 import { RouteObject } from "react-router-dom";
 import { login, system } from "../api";
 
-import InitPage from "../pages/init";
 import { getToken } from "../utils";
 import KeepAlive from "../compenents/keep-alive";
-
+// 页面加载
+import InitPage from "../pages/init";
 import LoginPage from "../pages/login";
 import HomePage from "../pages/home";
-import DashboardPage from "../pages/dashboard";
-import ChangePasswordPage from "../pages/change-password";
-import ResourceCategoryPage from "../pages/resource/resource-category";
-import ResourceImagesPage from "../pages/resource/images";
-import ResourceVideosPage from "../pages/resource/videos";
-import CoursePage from "../pages/course/index";
-import CourseUserPage from "../pages/course/user";
-import MemberPage from "../pages/member";
-import MemberImportPage from "../pages/member/import";
-import MemberLearnPage from "../pages/member/learn";
-import MemberDepartmentProgressPage from "../pages/member/departmentUser";
-import SystemConfigPage from "../pages/system/config";
-import SystemAdministratorPage from "../pages/system/administrator";
-import SystemAdminrolesPage from "../pages/system/adminroles";
-import DepartmentPage from "../pages/department";
-import TestPage from "../pages/test";
-import ErrorPage from "../pages/error";
+//首页
+const DashboardPage = lazy(() => import("../pages/dashboard"));
+//修改密码页面
+const ChangePasswordPage = lazy(() => import("../pages/change-password"));
+//资源管理相关
+const ResourceCategoryPage = lazy(
+  () => import("../pages/resource/resource-category")
+);
+const ResourceImagesPage = lazy(() => import("../pages/resource/images"));
+const ResourceVideosPage = lazy(() => import("../pages/resource/videos"));
+//课程相关
+const CoursePage = lazy(() => import("../pages/course/index"));
+const CourseUserPage = lazy(() => import("../pages/course/user"));
+//学员相关
+const MemberPage = lazy(() => import("../pages/member"));
+const MemberImportPage = lazy(() => import("../pages/member/import"));
+const MemberLearnPage = lazy(() => import("../pages/member/learn"));
+const MemberDepartmentProgressPage = lazy(
+  () => import("../pages/member/departmentUser")
+);
+//系统相关
+const SystemConfigPage = lazy(() => import("../pages/system/config"));
+const SystemAdministratorPage = lazy(
+  () => import("../pages/system/administrator")
+);
+const SystemAdminrolesPage = lazy(() => import("../pages/system/adminroles"));
+//部门页面
+const DepartmentPage = lazy(() => import("../pages/department"));
+//测试
+const TestPage = lazy(() => import("../pages/test"));
+//错误页面
+const ErrorPage = lazy(() => import("../pages/error"));
+
 import PrivateRoute from "../compenents/private-route";
 
 // const LoginPage = lazy(() => import("../pages/login"));
@@ -51,9 +67,6 @@ if (getToken()) {
     });
   });
 } else {
-  if (window.location.pathname !== "/login") {
-    window.location.href = "/login";
-  }
   RootPage = <InitPage />;
 }