首页概览初步优化

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

@@ -46,7 +46,7 @@ export const UploadImageButton = (props: PropsInterface) => {
   const [imageList, setImageList] = useState<ImageItem[]>([]);
   const [refresh, setRefresh] = useState(false);
   const [page, setPage] = useState(1);
-  const [size, setSize] = useState(12);
+  const [size, setSize] = useState(15);
   const [total, setTotal] = useState(0);
 
   // 获取图片列表
@@ -92,11 +92,11 @@ export const UploadImageButton = (props: PropsInterface) => {
             setShowModal(false);
           }}
           open={true}
-          width="1000px"
+          width={820}
           maskClosable={false}
         >
-          <Row gutter={16}>
+          <Row style={{ width: 752, minHeight: 520, marginTop: 24 }}>
-            <Col span={4}>
+            <Col span={7}>
               <TreeCategory
                 type="no-cate"
                 resourceTotal={0}
@@ -105,8 +105,8 @@ export const UploadImageButton = (props: PropsInterface) => {
                 onUpdate={(keys: any) => setCategoryIds(keys)}
               />
             </Col>
-            <Col span={20}>
+            <Col span={17}>
-              <Row style={{ marginBottom: 24 }}>
+              <Row style={{ marginBottom: 24, paddingLeft: 10 }}>
                 <Col span={24}>
                   <UploadImageSub
                     categoryIds={category_ids}
@@ -116,12 +116,7 @@ export const UploadImageButton = (props: PropsInterface) => {
                   ></UploadImageSub>
                 </Col>
               </Row>
-              <Row
+              <div className="image-list-box">
-                gutter={[
-                  { xs: 8, sm: 16, md: 24, lg: 32 },
-                  { xs: 4, sm: 8, md: 12, lg: 16 },
-                ]}
-              >
                 {imageList.length === 0 && (
                   <Col span={24}>
                     <Empty description="暂无图片" />
@@ -129,37 +124,33 @@ export const UploadImageButton = (props: PropsInterface) => {
                 )}
 
                 {imageList.map((item) => (
-                  <Col
+                  <div
                     key={item.id}
-                    span={6}
+                    className="image-item"
+                    style={{ backgroundImage: `url(${item.url})` }}
                     onClick={() => {
                       props.onSelected(item.url);
                       setShowModal(false);
                     }}
-                  >
+                  ></div>
-                    <Image
-                      preview={false}
-                      width={120}
-                      height={80}
-                      src={item.url}
-                    />
-                  </Col>
                 ))}
-
+              </div>
-                {imageList.length > 0 && (
+              {imageList.length > 0 && (
-                  <Col span={24}>
+                <Col
-                    <Pagination
+                  span={24}
-                      showSizeChanger
+                  style={{ display: "flex", flexDirection: "row-reverse" }}
-                      onChange={(currentPage, currentSize) => {
+                >
-                        setPage(currentPage);
+                  <Pagination
-                        setSize(currentSize);
+                    showSizeChanger
-                      }}
+                    onChange={(currentPage, currentSize) => {
-                      defaultCurrent={page}
+                      setPage(currentPage);
-                      total={total}
+                      setSize(currentSize);
-                    />
+                    }}
-                  </Col>
+                    defaultCurrent={page}
-                )}
+                    total={total}
-              </Row>
+                  />
+                </Col>
+              )}
             </Col>
           </Row>
         </Modal>

src/index.less

@@ -540,6 +540,26 @@ textarea.ant-input {
   }
 }
 
+.image-list-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 10px;
+  display: grid;
+  gap: 21px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin-bottom: 24px;
+  .image-item {
+    width: 100px;
+    height: 100px;
+    border-radius: 6px;
+    aspect-ratio: 1/1;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
+    background-color: #f6f6f6;
+  }
+}
+
 .tree-video-title {
   margin-left: 4px;
   width: 346px;

src/pages/dashboard/index.module.less

@@ -67,13 +67,13 @@
   grid-template-columns: repeat(4, minmax(0, 1fr));
   margin-top: 24px;
   .link-mode {
-    width: 176px;
+    width: auto;
     height: 76px;
     border-radius: 7px;
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    padding: 24px;
+    padding: 8%;
     cursor: pointer;
     &:hover {
       background: #fafafa;
@@ -99,18 +99,20 @@
   border-radius: 7px;
   display: flex;
   align-items: center;
+  flex-direction: row-reverse;
   margin-top: 24px;
   .banner {
     width: 130px;
     height: 130px;
     position: absolute;
     top: 22px;
-    left: 196px;
+    left: 20%;
     z-index: 10;
   }
 
   .link {
-    margin-left: 352px;
+    margin-right: 10%;
+    width: auto;
     height: 24px;
     font-size: 14px;
     font-weight: 400;
@@ -175,7 +177,7 @@
           margin-right: 8px;
         }
         .item-name {
-          width: 150px;
+          width: 100px;
           height: 24px;
           font-size: 14px;
           font-weight: 400;

src/pages/dashboard/index.tsx

@@ -2,9 +2,6 @@ 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";
@@ -13,10 +10,6 @@ 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({
@@ -88,7 +81,7 @@ export const Dashboard: React.FC<any> = () => {
           label: {
             show: true,
             position: "center",
-            formatter: ("总资源数" + num), // 可以自定义，也可以{a}{b}{c}这种
+            formatter: "总资源数" + num, // 可以自定义，也可以{a}{b}{c}这种
             textStyle: {
               // 主标题样式
               fontSize: 14,
@@ -110,24 +103,6 @@ export const Dashboard: React.FC<any> = () => {
   return (
     <>
       <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">
@@ -169,7 +144,7 @@ export const Dashboard: React.FC<any> = () => {
               <div
                 className={styles["link-mode"]}
                 onClick={() => {
-                  setMembeVisible(true);
+                  navigate("/member");
                 }}
               >
                 <i
@@ -178,7 +153,12 @@ export const Dashboard: React.FC<any> = () => {
                 ></i>
                 <span>添加学员</span>
               </div>
-              <div className={styles["link-mode"]}>
+              <div
+                className={styles["link-mode"]}
+                onClick={() => {
+                  navigate("/videos");
+                }}
+              >
                 <i
                   className="iconfont icon-upvideo"
                   style={{ color: "#419FFF", fontSize: 36 }}
@@ -188,19 +168,19 @@ export const Dashboard: React.FC<any> = () => {
               <div
                 className={styles["link-mode"]}
                 onClick={() => {
-                  setCourseVisible(true);
+                  navigate("/course");
                 }}
               >
                 <i
                   className="iconfont icon-onlinelesson"
                   style={{ color: "#B284FF", fontSize: 36 }}
                 ></i>
-                <span>新建线上课</span>
+                <span>线上课</span>
               </div>
               <div
                 className={styles["link-mode"]}
                 onClick={() => {
-                  setDepartmentVisible(true);
+                  navigate("/department");
                 }}
               >
                 <i