视频列表优化

src/compenents/tree-category/index.tsx

@@ -10,24 +10,20 @@ interface Option {
 }
 
 interface PropInterface {
+  text: string;
   onUpdate: (keys: any) => void;
 }
 
 export const TreeCategory = (props: PropInterface) => {
   const [treeData, setTreeData] = useState<any>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [selectKey, setSelectKey] = useState<any>([]);
   useEffect(() => {
     setLoading(true);
     resourceCategory.resourceCategoryList().then((res: any) => {
       const categories = res.data.categories;
       if (JSON.stringify(categories) !== "{}") {
-        const new_arr: Option[] = [
-          {
-            key: "",
-            title: "全部",
-            children: checkArr(categories, 0),
-          },
-        ];
+        const new_arr: Option[] = checkArr(categories, 0);
         setTreeData(new_arr);
       } else {
         const new_arr: Option[] = [
@@ -65,6 +61,7 @@ export const TreeCategory = (props: PropInterface) => {
 
   const onSelect = (selectedKeys: any, info: any) => {
     props.onUpdate(selectedKeys);
+    setSelectKey(selectedKeys);
   };
 
   const onDragEnter: TreeProps["onDragEnter"] = (info) => {
@@ -80,12 +77,24 @@ export const TreeCategory = (props: PropInterface) => {
   };
 
   return (
-    <Tree
-      onSelect={onSelect}
-      treeData={treeData}
-      draggable
-      onDragEnter={onDragEnter}
-      onDrop={onDrop}
-    />
+    <div>
+      <div
+        className={
+          selectKey.length === 0
+            ? "mb-8 category-label active"
+            : "mb-8 category-label"
+        }
+        onClick={() => onSelect([], "")}
+      >
+        全部{props.text}
+      </div>
+      <Tree
+        onSelect={onSelect}
+        treeData={treeData}
+        draggable
+        onDragEnter={onDragEnter}
+        onDrop={onDrop}
+      />
+    </div>
   );
 };

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

@@ -97,7 +97,7 @@ export const UploadImageButton = (props: PropsInterface) => {
         >
           <Row gutter={16}>
             <Col span={4}>
-              <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
+              <TreeCategory text={"图片"} onUpdate={(keys: any) => setCategoryIds(keys)} />
             </Col>
             <Col span={20}>
               <Row style={{ marginBottom: 24 }}>

src/index.less

@@ -32,6 +32,10 @@ code {
   margin-right: 16px;
 }
 
+.mb-8 {
+  margin-bottom: 8px;
+}
+
 .mb-10 {
   margin-bottom: 10px;
 }
@@ -117,6 +121,22 @@ code {
   color: @primaryColor;
 }
 
+.category-label {
+  width: 100%;
+  height: 40px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 40px;
+  box-sizing: border-box;
+  padding-left: 16px;
+  cursor: pointer;
+  &.active {
+    background: rgba(#ff4d4f, 0.1);
+  }
+}
+
 .form-avatar {
   width: 100px;
   height: 100px;
@@ -160,6 +180,37 @@ code {
   }
 }
 
+.tree-main-body {
+  width: 100%;
+  height: auto;
+  min-height: calc(100vh - 172px);
+  float: left;
+  box-sizing: border-box;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  .left-box {
+    width: 250px;
+    float: left;
+    height: auto;
+    min-height: calc(100vh - 172px);
+    border-right: 1px solid #f6f6f6;
+    box-sizing: border-box;
+    padding: 24px 16px;
+    background-color: white;
+  }
+  .right-box {
+    width: calc(100% - 251px);
+    float: left;
+    height: auto;
+    min-height: calc(100vh - 172px);
+    box-sizing: border-box;
+    padding: 24px;
+    background-color: white;
+  }
+}
+
 .ant-menu,
 .ant-menu-sub,
 .ant-menu-inline {

src/pages/course/index.tsx

@@ -172,7 +172,10 @@ export const CoursePage = () => {
               <div className="d-flex mb-24">
                 <Typography.Text>资源分类：</Typography.Text>
               </div>
-              <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
+              <TreeCategory
+                text={"资源"}
+                onUpdate={(keys: any) => setCategoryIds(keys)}
+              />
             </div>
             <div className="float-left">
               <div className="d-flex mb-24">

src/pages/resource/images/index.tsx

@@ -74,79 +74,78 @@ export const ResourceImagesPage = () => {
 
   return (
     <>
-      <Row>
-        <Col span={4}>
-          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
-            <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
+      <div className="tree-main-body">
+        <div className="left-box">
+          <TreeCategory
+            text={"图片"}
+            onUpdate={(keys: any) => setCategoryIds(keys)}
+          />
+        </div>
+        <div className="right-box">
+          <div className="playedu-main-title float-left mb-24">
+            图片 / 全部图片
           </div>
-        </Col>
-        <Col span={20}>
-          <div className="playedu-main-body">
-            <div className="playedu-main-title float-left mb-24">
-              图片 / 全部图片
-            </div>
-            <Row gutter={16} style={{ marginBottom: 24 }}>
+          <Row gutter={16} style={{ marginBottom: 24 }}>
+            <Col span={24}>
+              <UploadImageSub
+                categoryIds={category_ids}
+                onUpdate={() => {
+                  resetImageList();
+                }}
+              ></UploadImageSub>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]}>
+            {imageList.length === 0 && (
               <Col span={24}>
-                <UploadImageSub
-                  categoryIds={category_ids}
-                  onUpdate={() => {
-                    resetImageList();
-                  }}
-                ></UploadImageSub>
+                <Empty description="暂无图片" />
               </Col>
-            </Row>
-            <Row gutter={[24, 24]}>
-              {imageList.length === 0 && (
-                <Col span={24}>
-                  <Empty description="暂无图片" />
-                </Col>
-              )}
+            )}
 
-              {imageList.map((item) => (
-                <Col key={item.id} span={3}>
-                  <div className={styles.imageItem}>
-                    <Image
-                      preview={true}
-                      width={150}
-                      height={150}
-                      src={item.url}
-                    />
-                    <Popconfirm
-                      title="警告"
-                      description="即将删除此图片，确认操作？"
-                      onConfirm={() => removeResource(item.id)}
-                      okText="确定"
-                      cancelText="取消"
-                    >
-                      <Button
-                        className={styles.closeButton}
-                        danger
-                        shape="circle"
-                        icon={<CloseOutlined />}
-                      />
-                    </Popconfirm>
-                  </div>
-                </Col>
-              ))}
-
-              {imageList.length > 0 && (
-                <Col span={24}>
-                  <Pagination
-                    showSizeChanger
-                    onChange={(currentPage, currentSize) => {
-                      setPage(currentPage);
-                      setSize(currentSize);
-                    }}
-                    defaultCurrent={page}
-                    total={total}
-                    pageSize={size}
+            {imageList.map((item) => (
+              <Col key={item.id} span={3}>
+                <div className={styles.imageItem}>
+                  <Image
+                    preview={true}
+                    width={150}
+                    height={150}
+                    src={item.url}
                   />
-                </Col>
-              )}
-            </Row>
-          </div>
-        </Col>
-      </Row>
+                  <Popconfirm
+                    title="警告"
+                    description="即将删除此图片，确认操作？"
+                    onConfirm={() => removeResource(item.id)}
+                    okText="确定"
+                    cancelText="取消"
+                  >
+                    <Button
+                      className={styles.closeButton}
+                      danger
+                      shape="circle"
+                      icon={<CloseOutlined />}
+                    />
+                  </Popconfirm>
+                </div>
+              </Col>
+            ))}
+
+            {imageList.length > 0 && (
+              <Col span={24}>
+                <Pagination
+                  showSizeChanger
+                  onChange={(currentPage, currentSize) => {
+                    setPage(currentPage);
+                    setSize(currentSize);
+                  }}
+                  defaultCurrent={page}
+                  total={total}
+                  pageSize={size}
+                />
+              </Col>
+            )}
+          </Row>
+        </div>
+      </div>
     </>
   );
 };

src/pages/resource/videos/index.tsx

@@ -38,18 +38,18 @@ export const ResourceVideosPage = () => {
   const [category_ids, setCategoryIds] = useState<any>([]);
 
   const columns: ColumnsType<DataType> = [
-    {
-      title: "封面",
-      dataIndex: "id",
-      render: (id: string) => (
-        <Image
-          preview={false}
-          width={120}
-          height={80}
-          src={videosExtra[id].poster}
-        ></Image>
-      ),
-    },
+    // {
+    //   title: "封面",
+    //   dataIndex: "id",
+    //   render: (id: string) => (
+    //     <Image
+    //       preview={false}
+    //       width={120}
+    //       height={80}
+    //       src={videosExtra[id].poster}
+    //     ></Image>
+    //   ),
+    // },
     {
       title: "视频名称",
       dataIndex: "name",
@@ -158,37 +158,36 @@ export const ResourceVideosPage = () => {
 
   return (
     <>
-      <Row>
-        <Col span={4}>
-          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
-            <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
+      <div className="tree-main-body">
+        <div className="left-box">
+          <TreeCategory
+            text={"视频"}
+            onUpdate={(keys: any) => setCategoryIds(keys)}
+          />
+        </div>
+        <div className="right-box">
+          <div className="playedu-main-title float-left mb-24">
+            视频 / 后端课程
           </div>
-        </Col>
-        <Col span={20}>
-          <div className="playedu-main-body">
-            <div className="playedu-main-title float-left mb-24">
-              视频 / 后端课程
-            </div>
-            <div className="float-left mb-24">
-              <UploadVideoButton
-                categoryIds={category_ids}
-                onUpdate={() => {
-                  resetVideoList();
-                }}
-              ></UploadVideoButton>
-            </div>
-            <div className="float-left">
-              <Table
-                columns={columns}
-                dataSource={videoList}
-                loading={loading}
-                pagination={paginationProps}
-                rowKey={(record) => record.id}
-              />
-            </div>
+          <div className="float-left mb-24">
+            <UploadVideoButton
+              categoryIds={category_ids}
+              onUpdate={() => {
+                resetVideoList();
+              }}
+            ></UploadVideoButton>
           </div>
-        </Col>
-      </Row>
+          <div className="float-left">
+            <Table
+              columns={columns}
+              dataSource={videoList}
+              loading={loading}
+              pagination={paginationProps}
+              rowKey={(record) => record.id}
+            />
+          </div>
+        </div>
+      </div>
     </>
   );
 };