feat: 上传文件弹窗样式完成

src/assets/project/uploaderIcon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 60</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="上传文件" transform="translate(-325.000000, -482.000000)">
+            <g id="编组-57" transform="translate(179.000000, 276.000000)">
+                <g id="编组-18" transform="translate(62.000000, 206.000000)">
+                    <g id="编组-60" transform="translate(84.000000, 0.000000)">
+                        <g id="编组-59备份" transform="translate(1.400000, 7.000000)">
+                            <path d="M28.7159091,0 C37.4357661,0 44.5876594,6.37181248 45.2851301,14.4775054 C49.9052925,16.0883207 53.2,20.302527 53.2,25.2471154 C53.2,31.3738473 48.1415865,36.3792127 41.7724852,36.7060962 L41.1090909,36.7230769 L9.67272727,36.7230769 C4.23205673,36.1520517 0,31.7108914 0,26.3947115 C0,22.6288201 2.12348719,19.3336707 5.29597862,17.5290977 C4.99754301,16.7130376 4.83636364,15.8337592 4.83636364,14.91875 C4.83636364,10.482151 8.62566271,6.88557692 13.3,6.88557692 C13.8401456,6.88557692 14.3684733,6.93360229 14.8805016,7.0253996 C17.8638158,2.78919919 22.946682,0 28.7159091,0 Z M28.7159091,3.33846154 C24.4392195,3.33846154 20.5270314,5.23755123 18.0439412,8.35433733 L17.595369,8.95283825 L16.3756995,10.6847257 L14.2960378,10.3118804 C13.9714328,10.2536846 13.6386173,10.2240385 13.3,10.2240385 C10.4214979,10.2240385 8.16136364,12.3692216 8.16136364,14.91875 C8.16136364,15.2574889 8.20014598,15.5884063 8.27595544,15.9079789 L8.41722056,16.3783889 L9.38966938,19.0375106 L6.93493578,20.4338094 C4.69458135,21.7081653 3.325,23.952957 3.325,26.3947115 C3.325,29.7523113 5.92395044,32.6493441 9.47797889,33.2646729 L10.0180408,33.3396318 L10.46045,33.3846154 L16.6758021,33.3848359 L16.625,36.7230769 L36.575,36.7230769 L36.6362796,33.385544 L41.0243527,33.3856997 L41.6027449,33.3719877 C46.2681023,33.1325459 49.875,29.5303701 49.875,25.2471154 C49.875,22.0546731 47.8637479,19.1784464 44.784147,17.8599099 L44.1944324,17.6312415 L42.1580208,16.9212485 L41.9724703,14.7648626 C41.422491,8.37324989 35.6942082,3.33846154 28.7159091,3.33846154 Z" id="形状结合" fill="#D7E8FF" fill-rule="nonzero"></path>
+                            <line x1="26.6" y1="16.6923077" x2="26.6" y2="43.4" id="路径-10" stroke="#D7E8FF" stroke-width="3.36"></line>
+                            <polyline id="路径-15" stroke="#D7E8FF" stroke-width="3.36" points="16.625 26.7076923 26.6 16.6923077 36.575 26.7076923"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/mui/MyDialog.tsx

@@ -39,9 +39,22 @@ const MyDialog = (props: any) => {
     <Dialog
       open={open}
       onClose={handleClose}
+      className="aaa"
       aria-labelledby="form-dialog-title"
+      sx={{
+        "& .MuiDialog-container": {
+          "& .MuiPaper-root": {
+            // 设置最大宽度， 实际宽度让子元素撑大
+            maxWidth: "1920px",
+          },
+        },
+      }}
     >
-      {title && <DialogTitle id="form-dialog-title">{title}</DialogTitle>}
+      {title && (
+        <DialogTitle id="form-dialog-title" sx={{ fontWeight: "600" }}>
+          {title}
+        </DialogTitle>
+      )}
       <DialogContent>
         {props.children}
         <IconButton

src/views/Project/ProjectData/UpLoaderFolder/index.module.css

+.uploderBox {
+  width: 900px;
+  display: flex;
+  justify-content: space-between;
+}
+.uploderBoxLeft {
+  width: 300px;
+}
+.dropTitle {
+  line-height: 22px;
+  font-size: 14px;
+  color: #1e2633;
+  margin-bottom: 14px;
+  font-weight: 600;
+}
+.dropBox {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px dashed #d1d6de;
+  border-radius: 4px;
+}
+.uploaderIcon {
+  width: 56px;
+  margin-bottom: 24px;
+}
+.uploderText1 {
+  line-height: 22px;
+  font-size: 14px;
+  color: #565c66;
+  margin-bottom: 2px;
+}
+.uploderText2 {
+  line-height: 20px;
+  font-size: 12px;
+  color: #8a9099;
+}
+.folderListBox {
+  width: 528px;
+  box-sizing: border-box;
+}
+.tableBox {
+  height: 300px;
+  overflow: scroll;
+}
+.folderIconBox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.folderIcon {
+  margin-right: 12px;
+}

src/views/Project/ProjectData/UpLoaderFolder/index.tsx

-import React, { useState, useImperativeHandle } from "react";
+import React, { useState, useImperativeHandle, useCallback } from "react";
 
+import style from "./index.module.css";
 import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
+import { Button } from "@mui/material";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
+import { useDropzone } from "react-dropzone";
+import Table from "@/components/Material.Ui/Table";
+import fileIcon from "@/assets/project/fileIcon.svg";
+import uploaderIcon from "@/assets/project/uploaderIcon.svg";
 
 const UpLoaderFolder = (props: any) => {
+  const [folderList, setFolderList] = useState([]);
   const { path } = props;
 
+  const onDrop = useCallback((acceptedFiles: any) => {
+    console.log(acceptedFiles);
+    setFolderList(acceptedFiles);
+    // Do something with the files
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
   const submitloading = false;
 
   let dialogRef: any = React.createRef();
@@ -25,9 +39,41 @@ const UpLoaderFolder = (props: any) => {
       showDialog: showDialog,
     };
   });
-  const handleFileChange = (e: any) => {
-    console.log(e);
+
+  const folderListHeadCells = [
+    { id: "name", numeric: false, label: "名称", width: "60%" },
+    { id: "size", numeric: false, label: "大小", width: "25%" },
+    { id: "caozuo", numeric: false, label: "操作", width: "15%" },
+  ];
+
+  const renderName = (item: any) => {
+    return (
+      <span className={style.folderIconBox}>
+        <img className={style.folderIcon} src={fileIcon} alt="" />
+        {item.name}
+      </span>
+    );
+  };
+
+  const renderSize = (item: any) => {
+    return <span>{item.size ? `${item.size}b` : "-"}</span>;
   };
+
+  const renderButtons = (item: any) => {
+    return (
+      <span>
+        <Button
+          sx={{ position: "relative", left: "-18px" }}
+          variant="text"
+          size="small"
+          color="error"
+        >
+          删除
+        </Button>
+      </span>
+    );
+  };
+
   return (
     <MyDialog
       handleSubmit={handleSubmit}
@@ -35,7 +81,42 @@ const UpLoaderFolder = (props: any) => {
       title="上传文件"
       submitloading={submitloading}
     >
-      <input onChange={(e) => handleFileChange(e)} type="file" multiple />
+      <div className={style.uploderBox}>
+        <div className={style.uploderBoxLeft}>
+          <div className={style.dropTitle}>添加文件</div>
+
+          <div {...getRootProps()} className={style.dropBox}>
+            <input {...getInputProps()} multiple />
+            {/* <input {...getInputProps()} webkitdirectory="true" multiple /> */}
+            <img className={style.uploaderIcon} src={uploaderIcon} alt="" />
+            <div className={style.uploderText1}>
+              点击添加文件或将文件拖到此处添加
+            </div>
+            <div className={style.uploderText2}>一次最多添加10个文件</div>
+          </div>
+        </div>
+        <div className={style.folderListBox}>
+          <div className={style.dropTitle}>
+            已添加文件（{folderList.length}/10）
+          </div>
+          <div className={style.tableBox}>
+            <Table
+              rowHover={true}
+              stickyheader={true}
+              rows={folderList.map((item: any) => ({
+                ...item,
+                name: renderName(item),
+                size: renderSize(item),
+                caozuo: renderButtons(item),
+              }))}
+              rowsPerPage={"99"}
+              headCells={folderListHeadCells}
+              nopadding={true}
+              footer={false}
+            ></Table>
+          </div>
+        </div>
+      </div>
     </MyDialog>
   );
 };