首页概览初步

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>
-    </div>
+    <>
+      <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"