图片组件

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.0.1",
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",

src/api/resource.ts

@@ -2,7 +2,7 @@ import client from "./internal/httpClient";
 
 export function resourceList(
   page: number,
-  size: null,
+  size: number,
   sortField: string,
   sortAlgo: string,
   name: string,

src/compenents/createResourceCategory/index.tsx

@@ -0,0 +1,61 @@
+import { Button, Input, message, Modal } from "antd";
+import { useState } from "react";
+import { resourceCategory } from "../../api";
+import { PlusOutlined } from "@ant-design/icons";
+
+interface PropInterface {
+  type: string;
+  onUpdate: () => void;
+}
+
+export const CreateResourceCategory = (props: PropInterface) => {
+  const [showModal, setShowModal] = useState(false);
+  const [name, setName] = useState<string>("");
+
+  const confirm = () => {
+    if (name.length == 0) {
+      message.error("请输入分类名");
+      return;
+    }
+    resourceCategory
+      .storeResourceCategory(props.type, name, 0)
+      .then(() => {
+        setName("");
+        message.success("分类添加成功");
+        setShowModal(false);
+        props.onUpdate();
+      })
+      .catch((err) => {
+        console.log("错误", err);
+      });
+  };
+
+  return (
+    <>
+      <Button
+        type="primary"
+        onClick={() => {
+          setShowModal(true);
+        }}
+        shape="circle"
+        icon={<PlusOutlined />}
+      />
+      <Modal
+        onCancel={() => {
+          setShowModal(false);
+        }}
+        onOk={confirm}
+        open={showModal}
+        title="创建分类"
+      >
+        <Input
+          placeholder="请输入分类名"
+          value={name}
+          onChange={(e) => {
+            setName(e.target.value);
+          }}
+        />
+      </Modal>
+    </>
+  );
+};

src/compenents/uploadImageButton/index.module.less

@@ -0,0 +1,20 @@
+.categoryItem {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  float: left;
+  cursor: pointer;
+  display: flex;
+
+  &.active {
+    background-color: red;
+    color: white;
+  }
+}
+
+.categoryTitle {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+}

src/compenents/uploadImageButton/index.tsx

@@ -1,8 +1,74 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Button, Drawer } from "antd";
+import { Button, Row, Col, Modal, Image, Empty, message } from "antd";
+import { resource, resourceCategory } from "../../api";
+import styles from "./index.module.less";
+import { CreateResourceCategory } from "../createResourceCategory";
+import { CloseOutlined } from "@ant-design/icons";
+
+interface CategoryItem {
+  id: number;
+  type: string;
+  name: string;
+  sort: number;
+}
+
+interface ImageItem {
+  id: number;
+  category_id: number;
+  name: string;
+  extension: string;
+  size: number;
+  disk: string;
+  file_id: string;
+  path: string;
+  url: string;
+  created_at: string;
+}
 
 export const UploadImageButton: React.FC = () => {
-  const [showModal, setShowModal] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState(false);
+  const [categories, setCategories] = useState<CategoryItem[]>([]);
+  const [defaultCid, setDefaultCid] = useState(0);
+  const [refreshCategories, setRefreshCategories] = useState(1);
+  const [imageList, setImageList] = useState<ImageItem[]>([]);
+  const [page, setPage] = useState(0);
+  const [size, setSize] = useState(10);
+  const [total, setTotal] = useState(0);
+
+  const getCategories = () => {
+    resourceCategory.resourceCategoryList("IMAGE").then((res: any) => {
+      let data = res.data.data;
+      if (data.length > 0) {
+        setDefaultCid(data[0].id);
+        setCategories(res.data.data);
+      }
+    });
+  };
+  const removeCategory = (id: number) => {
+    resourceCategory.destroyResourceCategory(id).then(() => {
+      message.success("删除成功");
+      setRefreshCategories(refreshCategories + 1);
+    });
+  };
+
+  useEffect(() => {
+    getCategories();
+  }, [refreshCategories]);
+
+  useEffect(() => {
+    if (defaultCid === 0) {
+      return;
+    }
+    resource
+      .resourceList(page, size, "", "", "", defaultCid + "")
+      .then((res: any) => {
+        setTotal(res.data.total);
+        setImageList(res.data.data);
+      })
+      .catch((err) => {
+        console.log("错误,", err);
+      });
+  }, [defaultCid]);
 
   return (
     <>
@@ -15,18 +81,88 @@ export const UploadImageButton: React.FC = () => {
       </Button>
 
       {showModal && (
-        <Drawer
+        <Modal
-          title="Basic Drawer"
+          title="图片素材库"
-          placement="right"
+          onCancel={() => {
-          onClose={() => {
             setShowModal(false);
           }}
           open={showModal}
+          width="1000px"
+          maskClosable={false}
         >
-          <p>Some contents...</p>
+          <Row gutter={16}>
-          <p>Some contents...</p>
+            <Col span={4}>
-          <p>Some contents...</p>
+              <>
-        </Drawer>
+                <div className={styles.categoryTitle}>
+                  <div>图片分类</div>
+                  <div>
+                    <CreateResourceCategory
+                      type="IMAGE"
+                      onUpdate={() => {
+                        setRefreshCategories(refreshCategories + 1);
+                      }}
+                    ></CreateResourceCategory>
+                  </div>
+                </div>
+                {categories.length === 0 && (
+                  <Empty
+                    description="暂无分类"
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  ></Empty>
+                )}
+
+                {categories.map((item) => (
+                  <div
+                    key={item.id}
+                    className={`${styles.categoryItem} ${
+                      item.id === defaultCid ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setDefaultCid(item.id);
+                    }}
+                  >
+                    <div>{item.name}</div>
+                    <div>
+                      <Button
+                        danger
+                        shape="circle"
+                        onClick={() => {
+                          removeCategory(item.id);
+                        }}
+                        icon={<CloseOutlined />}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </>
+            </Col>
+            <Col span={20}>
+              <Row>
+                <Col span={24}>
+                  <Button type="primary">上传图片</Button>
+                </Col>
+              </Row>
+              <Row
+                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="暂无图片" />
+                  </Col>
+                )}
+
+                {imageList.map((item) => (
+                  <Col span={6}>
+                    <Image src={item.url} />
+                  </Col>
+                ))}
+              </Row>
+            </Col>
+          </Row>
+        </Modal>
       )}
     </>
   );