首页概览初步

package-lock.json

@@ -34,6 +34,7 @@
         "css-minimizer-webpack-plugin": "^3.2.0",
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
+        "echarts": "^5.4.1",
         "eslint": "^8.3.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
@@ -7142,6 +7143,20 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -17952,6 +17967,19 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -22631,6 +22659,22 @@
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "echarts": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -29795,6 +29839,21 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zrender": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -29,6 +29,7 @@
     "css-minimizer-webpack-plugin": "^3.2.0",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
+    "echarts": "^5.4.1",
     "eslint": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-webpack-plugin": "^3.1.1",

src/index.less

@@ -46,6 +46,14 @@ code {
   width: 200px;
 }
 
+.mr-5 {
+  margin-right: 5px;
+}
+
+.ml-5 {
+  margin-left: 5px;
+}
+
 .ml-8 {
   margin-left: 8px;
 }
@@ -177,10 +185,14 @@ code {
   color: #e1a500;
 }
 
-.c-green {
+.c-success {
   color: #04c877;
 }
 
+.c-green {
+  color: #00cc66;
+}
+
 .c-red {
   color: @primaryColor;
 }
@@ -219,6 +231,7 @@ code {
   box-sizing: border-box;
   padding: 24px;
   border-radius: 12px;
+  position: relative;
 }
 
 .playedu-main-body {

src/pages/course/index.tsx

@@ -111,7 +111,7 @@ export const CoursePage = () => {
       title: "是否显示",
       dataIndex: "is_show",
       render: (is_show: number) => (
-        <span className={is_show === 1 ? "c-green" : "c-red"}>
+        <span className={is_show === 1 ? "c-success" : "c-red"}>
           {is_show === 1 ? "· 显示" : "· 隐藏"}
         </span>
       ),

src/pages/dashboard/index.module.less

@@ -0,0 +1,204 @@
+.label-item {
+  width: auto;
+  height: 94px;
+  display: flex;
+  flex-direction: column;
+  .label {
+    width: 84px;
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 24px;
+  }
+  .info {
+    width: auto;
+    height: 46px;
+    display: flex;
+    flex-direction: row;
+    margin-top: 24px;
+    align-items: center;
+    .num {
+      width: auto;
+      height: 46px;
+      font-size: 30px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 46px;
+    }
+    .compare {
+      width: auto;
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 24px;
+      margin-left: 24px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .down {
+        color: #00cc66;
+        font-size: 10px;
+      }
+
+      .up {
+        color: #ff4d4f;
+        font-size: 10px;
+      }
+    }
+  }
+}
+
+.large-title {
+  width: 100%;
+  height: 28px;
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 28px;
+}
+.mode-box {
+  width: 100%;
+  height: 76px;
+  display: grid;
+  column-gap: 24px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 24px;
+  .link-mode {
+    width: 176px;
+    height: 76px;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 24px;
+    cursor: pointer;
+    &:hover {
+      background: #fafafa;
+    }
+
+    i {
+      margin-right: 16px;
+    }
+
+    span {
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 24px;
+    }
+  }
+}
+
+.usage-guide {
+  width: 100%;
+  height: 76px;
+  background: #fafafa;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  .banner {
+    width: 130px;
+    height: 130px;
+    position: absolute;
+    top: 22px;
+    left: 196px;
+    z-index: 10;
+  }
+
+  .link {
+    margin-left: 352px;
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+    .icon {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
+}
+
+.rank-list {
+  width: 100%;
+  height: auto;
+  display: grid;
+  column-gap: 100px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 24px;
+  margin-bottom: 12px;
+  .half-list {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    .rank-item {
+      width: 100%;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 36px;
+      justify-content: space-between;
+      &:last-child {
+        margin-bottom: 0px;
+      }
+      .left-item {
+        width: auto;
+        display: flex;
+        align-items: center;
+        .item-num {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          font-size: 14px;
+          background-color: #fafafa;
+          color: rgba(0, 0, 0, 0.45);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 8px;
+        }
+        .item-icon {
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+        }
+        .item-name {
+          width: 150px;
+          height: 24px;
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.88);
+          line-height: 24px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+      .item-time {
+        height: 24px;
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.charts {
+  width: 100%;
+  height: 300px;
+  box-sizing: border-box;
+  padding-top: 24px;
+}

src/pages/dashboard/index.tsx

@@ -1,10 +1,335 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./index.module.less";
+import { Row, Col, message } from "antd";
+import { useNavigate } from "react-router-dom";
+import { DepartmentCreate } from "../department/compenents/create";
+import { MemberCreate } from "../member/compenents/create";
+import { CourseCreate } from "../course/compenents/create";
+import banner from "../../assets/images/dashboard/img-a1.png";
+import icon from "../../assets/images/dashboard/icon-more.png";
+import iconN1 from "../../assets/images/dashboard/icon-n1.png";
+import iconN2 from "../../assets/images/dashboard/icon-n2.png";
+import iconN3 from "../../assets/images/dashboard/icon-n3.png";
 
 export const Dashboard: React.FC<any> = () => {
+  const navigate = useNavigate();
+  const [departmentVisible, setDepartmentVisible] = useState<boolean>(false);
+  const [memberVisible, setMembeVisible] = useState<boolean>(false);
+  const [uploadVideoVisible, setUploadVideoVisible] = useState<boolean>(false);
+  const [courseVisible, setCourseVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    renderPieView({
+      videos_count: 30,
+      images_count: 10,
+    });
+    return () => {
+      window.onresize = null;
+    };
+  }, []);
+
+  const renderPieView = (params: any) => {
+    let num = params.videos_count + params.images_count;
+    let data = [
+      {
+        name: "视频数",
+        value: params.videos_count,
+      },
+      {
+        name: "图片数",
+        value: params.images_count,
+      },
+    ];
+    var echarts = require("echarts");
+    let myChart = echarts.init(document.getElementById("chartCircle"));
+    myChart.setOption({
+      legend: [
+        {
+          selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
+          bottom: "10%",
+          left: "center",
+          textStyle: {
+            // 图例的公用文本样式。
+            fontSize: 14,
+            color: " #333333",
+          },
+          data: ["视频数", "图片数"],
+        },
+      ],
+      tooltip: {
+        show: true, // 是否显示提示框
+      },
+      title: {
+        text: "", //主标题
+        left: "center", // 水平对齐方式
+        bottom: 0,
+        itemGap: 4, // 主副标题相隔间距
+        textStyle: {
+          // 主标题样式
+          fontSize: 16,
+          fontWeight: 400,
+        },
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["40%", "60%"], // 环比 圈的大小
+          center: ["50%", "40%"], // 图形在整个canvas中的位置
+          color: ["#FE8650", "#FFB504"], // item的取色盘
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderColor: "#fff", // 白边
+            borderWidth: 2,
+          },
+          emphasis: {
+            // 高亮item的样式
+            disabled: true,
+          },
+          label: {
+            show: true,
+            position: "center",
+            formatter: "总资源数" + num, // 可以自定义，也可以{a}{b}{c}这种
+          },
+          labelLine: {
+            show: false,
+          },
+          data: data,
+        },
+      ],
+    });
+    window.onresize = () => {
+      myChart.resize();
+    };
+  };
+
   return (
-    <div>
+    <>
-      <p>首頁概況</p>
+      <Row gutter={24}>
+        <DepartmentCreate
+          open={departmentVisible}
+          onCancel={() => {
+            setDepartmentVisible(false);
+          }}
+        />
+        <MemberCreate
+          open={memberVisible}
+          onCancel={() => {
+            setMembeVisible(false);
+          }}
+        />
+        <CourseCreate
+          open={courseVisible}
+          onCancel={() => {
+            setCourseVisible(false);
+          }}
+        />
+        <Col span={12}>
+          <div className="playedu-main-top">
+            <div className="j-b-flex">
+              <div className={styles["label-item"]}>
+                <div className={styles["label"]}>今日学习学员</div>
+                <div className={styles["info"]}>
+                  <div className={styles["num"]}>300</div>
+                  <div className={styles["compare"]}>
+                    <span className="mr-5">较昨日</span>
+                    <span className="c-green">
+                      <i className={styles["down"]}>&#9660;</i>100
+                    </span>
                   </div>
+                </div>
+              </div>
+              <div className={styles["label-item"]}>
+                <div className={styles["label"]}>总学员数</div>
+                <div className={styles["info"]}>
+                  <div className={styles["num"]}>3000</div>
+                  <div className={styles["compare"]}>
+                    <span className="mr-5">较昨日</span>
+                    <span className="c-red">
+                      <i className={styles["up"]}>&#9650;</i>100
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div className={styles["label-item"]}>
+                <div className={styles["label"]}>线上课数</div>
+                <div className={styles["info"]}>
+                  <div className={styles["num"]}>20</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="playedu-main-top mt-24">
+            <div className={styles["large-title"]}>快捷操作</div>
+            <div className={styles["mode-box"]}>
+              <div
+                className={styles["link-mode"]}
+                onClick={() => {
+                  setMembeVisible(true);
+                }}
+              >
+                <i
+                  className="iconfont icon-adduser"
+                  style={{ color: "#FF9F32", fontSize: 36 }}
+                ></i>
+                <span>添加学员</span>
+              </div>
+              <div className={styles["link-mode"]}>
+                <i
+                  className="iconfont icon-upvideo"
+                  style={{ color: "#419FFF", fontSize: 36 }}
+                ></i>
+                <span>上传视频</span>
+              </div>
+              <div
+                className={styles["link-mode"]}
+                onClick={() => {
+                  setCourseVisible(true);
+                }}
+              >
+                <i
+                  className="iconfont icon-onlinelesson"
+                  style={{ color: "#B284FF", fontSize: 36 }}
+                ></i>
+                <span>新建线上课</span>
+              </div>
+              <div
+                className={styles["link-mode"]}
+                onClick={() => {
+                  setDepartmentVisible(true);
+                }}
+              >
+                <i
+                  className="iconfont icon-department"
+                  style={{ color: "#21C785", fontSize: 36 }}
+                ></i>
+                <span>添加部门</span>
+              </div>
+            </div>
+          </div>
+          <div className="playedu-main-top mt-24">
+            <div className={styles["large-title"]}>今日学习排行</div>
+            <div className={styles["rank-list"]}>
+              <div className={styles["half-list"]}>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <img className={styles["item-icon"]} src={iconN1} alt="" />
+                    <div className={styles["item-name"]}>忻咏</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <img className={styles["item-icon"]} src={iconN2} alt="" />
+                    <div className={styles["item-name"]}>蒋建</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <img className={styles["item-icon"]} src={iconN3} alt="" />
+                    <div className={styles["item-name"]}>谭茂</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>4</div>
+                    <div className={styles["item-name"]}>渠雅眉</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>5</div>
+                    <div className={styles["item-name"]}>柴晨</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+              </div>
+              <div className={styles["half-list"]}>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>6</div>
+                    <div className={styles["item-name"]}>柴晨</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>7</div>
+                    <div className={styles["item-name"]}>柴晨</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>8</div>
+                    <div className={styles["item-name"]}>柴晨</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>9</div>
+                    <div className={styles["item-name"]}>柴晨</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+                <div className={styles["rank-item"]}>
+                  <div className={styles["left-item"]}>
+                    <div className={styles["item-num"]}>10</div>
+                    <div className={styles["item-name"]}>柴晨</div>
+                  </div>
+                  <div className={styles["item-time"]}>1小时24秒</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Col>
+        <Col span={12}>
+          <div className="playedu-main-top">
+            <div className="j-b-flex">
+              <div className={styles["label-item"]}>
+                <div className={styles["label"]}>部门数</div>
+                <div className={styles["info"]}>
+                  <div className={styles["num"]}>8</div>
+                </div>
+              </div>
+              <div className={styles["label-item"]}>
+                <div className={styles["label"]}>超级管理员</div>
+                <div className={styles["info"]}>
+                  <div className={styles["num"]}>2</div>
+                </div>
+              </div>
+              <div className={styles["label-item"]}>
+                <div className={styles["label"]}>子管理员</div>
+                <div className={styles["info"]}>
+                  <div className={styles["num"]}>8</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="playedu-main-top mt-24">
+            <div className={styles["large-title"]}>使用指南</div>
+            <div className={styles["usage-guide"]}>
+              <img className={styles["banner"]} src={banner} alt="" />
+              <div className={styles["link"]}>
+                点击查看产品手册，快速玩转Playedu！
+                <img className={styles["icon"]} src={icon} alt="" />
+              </div>
+            </div>
+          </div>
+          <div className="playedu-main-top mt-24">
+            <div className={styles["large-title"]}>资源统计</div>
+            <div className={styles["charts"]}>
+              <div
+                id="chartCircle"
+                style={{ width: "100%", height: 280 }}
+              ></div>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </>
   );
 };

src/pages/department/compenents/create.tsx

@@ -97,7 +97,7 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
   return (
     <>
       <Modal
-        title="新建部门"
+        title="添加部门"
         centered
         forceRender
         open={open}

src/pages/department/index.tsx

@@ -366,7 +366,7 @@ export const DepartmentPage: React.FC = () => {
         <div className="d-flex">
           <PerButton
             type="primary"
-            text="新建部门"
+            text="添加部门"
             class="mr-16"
             icon={<PlusOutlined />}
             p="department-cud"