feat: 完成新建文件夹功能

package-lock.json

@@ -3577,6 +3577,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "10.4.7",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
@@ -5749,6 +5754,14 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "filelist": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.3.tgz",
@@ -10109,6 +10122,16 @@
         "scheduler": "^0.22.0"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmmirror.com/react-dropzone/-/react-dropzone-14.2.1.tgz",
+      "integrity": "sha512-jzX6wDtAjlfwZ+Fbg+G17EszWUkQVxhMTWMfAC9qSUq7II2pKglHA8aarbFKl0mLpRPDaNUcy+HD/Sf4gkf76Q==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -11681,7 +11704,7 @@
     },
     "webpack-dev-server": {
       "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
       "integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
       "requires": {
         "@types/bonjour": "^3.5.9",

package.json

@@ -64,6 +64,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.1.0",
+    "react-dropzone": "^14.2.1",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.3.0",
     "resolve": "^1.20.0",

src/components/mui/MyDialog.tsx

@@ -52,12 +52,13 @@ const MyDialog = (props: any) => {
           <CloseIcon style={{ color: "#C2C6CC" }} />
         </IconButton>
       </DialogContent>
-      <DialogActions style={{ padding: "24px" }}>
+      <DialogActions style={{ padding: "16px 24px" }}>
         <Button
           onClick={handleClose}
           color="inherit"
           variant="contained"
           style={{ color: "#1E2633", backgroundColor: "#fff" }}
+          size="small"
         >
           取消
         </Button>
@@ -67,6 +68,7 @@ const MyDialog = (props: any) => {
           color="primary"
           variant="contained"
           style={submitStyle}
+          size="small"
         >
           确认
         </LoadingButton>

src/utils/util.ts

@@ -6,14 +6,18 @@
  * @FilePath: /bkunyun/src/utils/util.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-export const isProjectOwner = (name: string)=>{
-    let localName =''
-  try{
-    localName = JSON.parse(
-        localStorage.getItem("userInfo") || "{}"
-      )?.name
+export const isProjectOwner = (name: string) => {
+  let localName = "";
+  try {
+    localName = JSON.parse(localStorage.getItem("userInfo") || "{}")?.name;
   } catch {
-    console.error('获取localStorage出错')
+    console.error("获取localStorage出错");
   }
-  return localName === name
-}
\ No newline at end of file
+  return localName === name;
+};
+
+const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
+
+export const checkIsNumberLetterChinese = (string: string) => {
+  return IsNumberLetterChineseReg.test(string);
+};

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

+import React, { useState, useImperativeHandle } from "react";
+
+import { TextField } from "@mui/material";
+import MyDialog from "@/components/mui/MyDialog";
+import { checkIsNumberLetterChinese } from "@/utils/util";
+import { useMessage } from "@/components/MySnackbar";
+const AddFolder = (props: any) => {
+  const { list } = props;
+  const Message = useMessage();
+  let addFolderDialogRef: any = React.createRef();
+
+  const showDialog = () => {
+    addFolderDialogRef.current.handleClickOpen();
+  };
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      showDialog: showDialog,
+    };
+  });
+
+  const handleAddSubmit = () => {
+    if (fileName && !fileNameCheck.error) {
+      // 请求接口
+    } else {
+      Message.info(fileNameCheck.help || "请输入文件夹名称");
+    }
+  };
+
+  const addFolderSubmitloading = false;
+  const [fileName, setFileName] = useState("");
+  const [fileNameCheck, setFileNameCheck] = useState({
+    error: false,
+    help: "",
+  });
+  const handleFileNameChange = (e: any) => {
+    const fileName = e.target.value;
+    setFileName(fileName);
+    //     1.“格式不正确，必须在30字符以内，仅限大小写字母、数字、中文”
+
+    // 2. “文件夹名称不能为空”
+
+    // 3. “已存在同名文件夹”
+    if (!fileName) {
+      setFileNameCheck({
+        error: true,
+        help: "文件夹名称不能为空",
+      });
+    } else if (!checkIsNumberLetterChinese(fileName) || fileName.length > 30) {
+      setFileNameCheck({
+        error: true,
+        help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
+      });
+    } else if (isRepeat(fileName)) {
+      setFileNameCheck({
+        error: true,
+        help: "已存在同名文件夹",
+      });
+    } else {
+      setFileNameCheck({
+        error: false,
+        help: "",
+      });
+    }
+  };
+
+  const isRepeat = (fileName: string) => {
+    return list.some((item: any) => {
+      return item.name === fileName;
+    });
+  };
+
+  return (
+    <MyDialog
+      handleSubmit={handleAddSubmit}
+      onRef={addFolderDialogRef}
+      title="新建文件夹"
+      submitloading={addFolderSubmitloading}
+    >
+      <TextField
+        sx={{
+          width: "388px",
+          border: "1px solide #E6E8EB",
+          marginTop: "12px",
+        }}
+        required
+        error={fileNameCheck.error}
+        id="fileName"
+        label="名称"
+        variant="outlined"
+        value={fileName}
+        onChange={handleFileNameChange}
+        helperText={fileNameCheck.help}
+        size="small"
+      />
+    </MyDialog>
+  );
+};
+
+export default AddFolder;

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

+import React, { useState, useImperativeHandle } from "react";
+
+import { TextField } from "@mui/material";
+import MyDialog from "@/components/mui/MyDialog";
+import { checkIsNumberLetterChinese } from "@/utils/util";
+import { useMessage } from "@/components/MySnackbar";
+
+const UpLoaderFolder = (props: any) => {
+  const { path } = props;
+
+  const submitloading = false;
+
+  let dialogRef: any = React.createRef();
+
+  const handleSubmit = () => {
+    console.log("handleSubmit");
+  };
+
+  const showDialog = () => {
+    dialogRef.current.handleClickOpen();
+  };
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      showDialog: showDialog,
+    };
+  });
+  const handleFileChange = (e: any) => {
+    console.log(e);
+  };
+  return (
+    <MyDialog
+      handleSubmit={handleSubmit}
+      onRef={dialogRef}
+      title="上传文件"
+      submitloading={submitloading}
+    >
+      <input onChange={(e) => handleFileChange(e)} type="file" multiple />
+    </MyDialog>
+  );
+};
+
+export default UpLoaderFolder;

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

@@ -80,8 +80,8 @@
 .projectDataStickyBox {
   height: 64px;
   position: sticky;
-  bottom: 0;
-  border-top: 1px solid #ebedf0;
+  bottom: -1px;
+  border: 1px solid #ebedf0;
   z-index: 100;
   background-color: #fff;
   display: flex;

src/views/Project/ProjectData/index.tsx

-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 
 import style from "./index.module.css";
 import classnames from "classnames";
-import { Button, InputBase, IconButton } from "@mui/material";
+import { Button, InputBase, IconButton, TextField } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import SearchIcon from "@mui/icons-material/Search";
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -12,6 +12,12 @@ import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import noFile from "@/assets/project/noFile.svg";
+import MyDialog from "@/components/mui/MyDialog";
+import { checkIsNumberLetterChinese } from "@/utils/util";
+import { useMessage } from "@/components/MySnackbar";
+import AddFolder from "./AddFolder";
+import UpLoaderFolder from "./UpLoaderFolder";
+
 const theme = createTheme({
   palette: {
     neutral: {
@@ -49,7 +55,7 @@ const ProjectData = () => {
 
   const [selectIds, setSelectIds] = useState([]);
 
-  const list = [
+  const [list, setList] = useState([
     {
       id: 123,
       name: "name",
@@ -63,7 +69,7 @@ const ProjectData = () => {
       size: 6,
       mtime: new Date().getTime(),
     },
-  ];
+  ]);
 
   const versionsHeadCells = [
     { id: "checkbox" },
@@ -107,19 +113,43 @@ const ProjectData = () => {
   const renderButtons = (item: any) => {
     return (
       <span>
-        <Button sx={{position: 'relative', left: '-18px'}} variant="text" size="small">
+        <Button
+          sx={{ position: "relative", left: "-18px" }}
+          variant="text"
+          size="small"
+        >
           下载
         </Button>
-        <Button sx={{position: 'relative', left: '-18px'}} variant="text" size="small">
+        <Button
+          sx={{ position: "relative", left: "-18px" }}
+          variant="text"
+          size="small"
+        >
           移动至
         </Button>
-        <Button sx={{position: 'relative', left: '-18px'}} variant="text" size="small" color="error">
+        <Button
+          sx={{ position: "relative", left: "-18px" }}
+          variant="text"
+          size="small"
+          color="error"
+        >
           删除
         </Button>
       </span>
     );
   };
 
+  let uploaderFolderRef: any = React.createRef();
+  const hanleShowUploaderFolderDialog = () => {
+    uploaderFolderRef.current.showDialog();
+  };
+
+  let addFolderRef: any = React.createRef();
+
+  const hanleShowAddFolderDialog = () => {
+    addFolderRef.current.showDialog();
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <div className={style.projectData}>
@@ -133,10 +163,16 @@ const ProjectData = () => {
                   variant="contained"
                   size="small"
                   style={{ marginRight: "12px" }}
+                  onClick={hanleShowUploaderFolderDialog}
                 >
                   上传文件
                 </Button>
-                <Button color="neutral" variant="outlined" size="small">
+                <Button
+                  color="neutral"
+                  variant="outlined"
+                  size="small"
+                  onClick={hanleShowAddFolderDialog}
+                >
                   新建文件夹
                 </Button>
               </div>
@@ -232,6 +268,8 @@ const ProjectData = () => {
             </Button>
           </div>
         )}
+        <UpLoaderFolder onRef={uploaderFolderRef} path={path}></UpLoaderFolder>
+        <AddFolder onRef={addFolderRef} list={list}></AddFolder>
       </div>
     </ThemeProvider>
   );

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -27,8 +27,7 @@ import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
 import MyDialog from "@/components/mui/MyDialog";
 import { getProjectList } from "../../project";
-
-const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
+import { checkIsNumberLetterChinese } from "@/utils/util";
 
 type zoneIdOption = {
   id: string;
@@ -127,7 +126,7 @@ const BaseInfo = observer(() => {
   // 修改项目
   const handleClickUpdate = () => {
     if (projectInfo.name) {
-      if (reg.test(projectInfo.name)) {
+      if (checkIsNumberLetterChinese(projectInfo.name)) {
         updateProjectRun({ ...projectInfo, product: "CADD" });
       } else {
         message.info(

src/views/Project/components/AddProject/index.tsx

@@ -7,8 +7,7 @@ import { hpczone, addProject } from "@/api/project_api";
 import { useMessage } from "@/components/MySnackbar";
 import { getProjectList } from "../../project";
 import { useStores } from "@/store";
-
-const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
+import { checkIsNumberLetterChinese } from "@/utils/util";
 
 type zoneIdOption = {
   id: string;
@@ -79,7 +78,7 @@ const AddProject = (props: any) => {
           error: true,
           help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
         });
-      } else if (reg.test(name)) {
+      } else if (checkIsNumberLetterChinese(name)) {
         setNameCheck({
           error: false,
           help: "",
@@ -159,6 +158,7 @@ const AddProject = (props: any) => {
           value={name}
           onChange={handleNameChange}
           helperText={nameCheck.help}
+          size="small"
         />
         <TextField
           id="zoneId"
@@ -169,6 +169,7 @@ const AddProject = (props: any) => {
           onChange={handleZoneIdChange}
           variant="outlined"
           onClick={handleFromBox}
+          size="small"
         >
           {zoneIdOptions &&
             zoneIdOptions.map((option) => (
@@ -187,6 +188,7 @@ const AddProject = (props: any) => {
           placeholder="请输入项目描述"
           onChange={handleDescChange}
           helperText={descCheck.help}
+          size="small"
         />
       </div>
     </MyDialog>