feat: 完成上传文件样式和交互

src/api/api_manager.ts

@@ -9,6 +9,7 @@ const RESTAPI = {
   API_PROJECT_DELETE: `${BACKEND_API_URI_PREFIX}/cpp/project/delete`, //删除项目
   API_PROJECT_GET: `${BACKEND_API_URI_PREFIX}/cpp/project/get`, //获取项目信息
   API_CPCE_HPCZONE: `${BACKEND_API_URI_PREFIX}/cpp/cpce/hpczone`, //获取计算区列表
+  API_DATA_FILETOKEN: `${BACKEND_API_URI_PREFIX}/cpp/data/filetoken`, //获取项目目录的filetoken
 };
 
 export default RESTAPI;

src/api/api_prefix.ts

@@ -7,11 +7,11 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 // const AWSPREFIX = "/0xaws";
-// const PRIVATIZATIONPREFIX = "/fileserver"
+const PRIVATIZATIONPREFIX = "/fileserver";
 // const PRIVATIZATION_API_URI_PREFIX = process.env.NODE_ENV === 'development' ? "http://123.57.131.31" : "";
 
 let BACKEND_API_URI_PREFIX = "";
-console.log('process.env.REACT_APP_ENV: ', process.env.REACT_APP_ENV)
+console.log("process.env.REACT_APP_ENV: ", process.env.REACT_APP_ENV);
 switch (process.env.REACT_APP_ENV) {
   case "dev-cn":
     BACKEND_API_URI_PREFIX = "http://47.57.4.97";
@@ -29,7 +29,7 @@ switch (process.env.REACT_APP_ENV) {
     BACKEND_API_URI_PREFIX = "https://www.cloudam.io";
     break;
   default:
-        if (['www.bkunyun.com'].includes(window.location.host)) {
+    if (["www.bkunyun.com"].includes(window.location.host)) {
       BACKEND_API_URI_PREFIX = "https://www.bkunyun.com";
     } else {
       BACKEND_API_URI_PREFIX = "http://47.57.4.97";
@@ -37,12 +37,4 @@ switch (process.env.REACT_APP_ENV) {
     break;
 }
 
-
-
-
-
-
-
-
-
-export { BACKEND_API_URI_PREFIX } // 导出放在11行后面，避免发布时被替换
+export { BACKEND_API_URI_PREFIX, PRIVATIZATIONPREFIX }; // 导出放在11行后面，避免发布时被替换

src/api/project_api.ts

@@ -87,6 +87,18 @@ const deleteProject = (params: deleteProjectParams) => {
   });
 };
 
+type getDataFileTokenParams = {
+  id: string;
+};
+// 获取项目目录的filetoken
+const getDataFileToken = (params: getDataFileTokenParams) => {
+  return request({
+    url: Api.API_DATA_FILETOKEN,
+    method: "get",
+    params,
+  });
+};
+
 export {
   current,
   menu,
@@ -96,4 +108,5 @@ export {
   getProject,
   updateProject,
   deleteProject,
+  getDataFileToken,
 };

src/api/raysyncApi.js

+//  const API = "https://fileserver.cloudam.cn:8091"
+//  const APIOPTION = "https://fileserver.cloudam.cn"
+//  const APIPORT = "39.105.230.38"
+import { isPrivatization } from './helper.js'
+import { Constants } from "./constants";
+import { PRIVATIZATIONPREFIX } from "./api_prefix.js";
+const API = function () {
+    return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? "https://" + JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).srcAddr + ":8091" : "";
+}
+
+const APIOPTION = function () {
+    if (isPrivatization) {
+        if (localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY) && JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))) {
+            let json = JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))
+            if (json['location'] && json['location'] === "ON_PREMISE") {
+                return JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint
+            } else if (json['location'] && json['location'] === "CLOUDAM") {
+                return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint + PRIVATIZATIONPREFIX : "";
+            } else if (json['location'] && json['location'] === "CLOUD") {
+                return (window.location.host === "localhost:3000" ? "http://8.140.168.27" : window.location.origin) + PRIVATIZATIONPREFIX
+            }
+            return false
+        }
+        return false;
+    }
+    return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) && localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).fileServerEndPoint : "";
+}
+
+const APIPORT = function () {
+    return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).srcIp : "";
+}
+
+let currentRegion = localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY);
+let currentRegionJson = currentRegion && JSON.parse(currentRegion);
+let user = localStorage.getItem(Constants.USER_INFO_TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY));
+const FILEPATH = currentRegionJson && currentRegionJson.location && currentRegionJson.location === "ON_PREMISE" && localStorage.getItem(Constants.USER_INFO_TOKEN_KEY) ? `/home/${user.name}` : "/home/cloudam"
+const FILEPATH_SHARE = "/share"
+
+const APIJOBLOGPOINT = function () {
+    return localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY) ? JSON.parse(localStorage.getItem(Constants.RAYSYNC_ADDR_TOKEN_KEY)).jobLogServerEndPoint : "";
+}
+const ZONEID = function (params) {
+    return localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY) ? JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))[params || "id"] : "";
+}
+const urlToken = function (root) {
+    let token = localStorage.getItem(Constants.TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.TOKEN_KEY)).access_token
+    let json = JSON.parse(localStorage.getItem(Constants.CURRENT_REGION_SELECT_KEY))
+    if (json['location'] && json['location'] === "ON_PREMISE") {
+        return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['name'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['onpremFileAccessToken']) + "&share=false";
+    }
+    if (root && root === "home") {
+        return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['homeDirectoryMountPoint'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['fileAccessToken']) + "&share=false";
+    }
+    if (localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) && localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) === "true") {
+        return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['shareDirectoryMountPoint'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['shareFileAccessToken']) + "&share=true";
+    } else {
+        return "?username=" + JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['homeDirectoryMountPoint'] + "&token=" + token + "&filetoken=" + encodeURIComponent(JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['fileAccessToken']) + "&share=false";
+    }
+}
+const getUuid = function () {
+    if (localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) && localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) === "true") {
+        return JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['shareDirectoryMountPoint'];
+    } else {
+        return JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['homeDirectoryMountPoint'];
+    }
+}
+const USERNAME = function () {
+    return JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))['name']
+}
+
+const encryptTransfer = function () {
+    if (localStorage.getItem(Constants.USER_INFO_TOKEN_KEY) && JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY))) {
+        let encryptTransfer = JSON.parse(localStorage.getItem(Constants.USER_INFO_TOKEN_KEY)).encryptTransfer
+        if (encryptTransfer) {
+            return true;
+        }
+        return false;
+    }
+    return false;
+}
+const getType = function () {
+    if (localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) && localStorage.getItem(Constants.CURRENT_ISFILESYSTEM) === "true") {
+        return "share";
+    } else {
+        return "data";
+    }
+}
+export { API, APIPORT, FILEPATH, FILEPATH_SHARE, APIOPTION, APIJOBLOGPOINT, ZONEID, urlToken, USERNAME, getUuid, encryptTransfer, getType }
\ No newline at end of file

src/components/Material.Ui/Table.jsx

@@ -20,8 +20,8 @@ export default function EnhancedTable(props) {
   const classes = useStyles;
   const [order, setOrder] = React.useState("asc");
   const [orderBy, setOrderBy] = React.useState("");
-  const { headCells, rows, footer = true, elevation1, tableStyle,tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight='', borderBottom='', onDoubleClick,
-    load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox ,RowHeight='',CellWidth='',rowHover, TableNodataPadding = '',TableNodataLineHeight=''} = props;
+  const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
+    load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx } = props;
   const [selected, setSelected] = React.useState(initSelected || []);
   const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
   // const [spin, setSpin] = React.useState(false)
@@ -109,7 +109,9 @@ export default function EnhancedTable(props) {
               rowCount={rows.length}
               headCells={headCells || []}
             />
-            <TableBody>
+            <TableBody sx={{
+              ...tableBoySx
+            }}>
               {
                 (rows.length === 0 && !load) && <TableRow>
                   <TableCell
@@ -118,7 +120,7 @@ export default function EnhancedTable(props) {
                     }}
                     colSpan={headCells?.filter(k => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1}
                     className={classes.TypographyStyle}
-                    style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom ,padding:TableNodataPadding,lineHeight:TableNodataLineHeight}}
+                    style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom, padding: TableNodataPadding, lineHeight: TableNodataLineHeight }}
                   >
                     No Data
                   </TableCell>
@@ -129,13 +131,13 @@ export default function EnhancedTable(props) {
                 const labelId = `enhanced-table-checkbox-${index}`;
                 return (
                   <TableRow
-                    hover={ rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
+                    hover={rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
 
                     onDoubleClick={() => {
                       onDoubleClick && onDoubleClick(row)
                     }}
                     style={{
-                      height:RowHeight,
+                      height: RowHeight,
                       border: onRow === row[param || "id"] ? !row[disabledparam] ? "" : '1px solid #136EFA' : "",
                       backgroundColor: onRow === row[param || "id"] ? !row[disabledparam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "",
                       cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledparam] ? "no-drop" : "pointer" : "auto"),
@@ -161,21 +163,21 @@ export default function EnhancedTable(props) {
                       </TableCell>
                     }
                     {
-                      headCells.filter(item=>item.id !== 'checkbox').map((item, k) => {
+                      headCells.filter(item => item.id !== 'checkbox').map((item, k) => {
                         return (
                           <TableCell key={k} component="th" id={labelId + k}
                             sx={{
                               borderBottom: '1px solid #F0F2F5'
                             }}
                             // align={}
-                            style={{ width:CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "",border:tablecellstyle }}
+                            style={{ width: CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "", border: tablecellstyle }}
                             scope="row"
                             padding={item.disablePadding ? "none" : "normal"}
                             classes={{
                               body: props.bodyTableCell || classes.bodyTableCell
                             }}
                           > {
-                              item.render ? <>{item.render(row[item.id],row,index)}</> :
+                              item.render ? <>{item.render(row[item.id], row, index)}</> :
                                 row[item.id]
                             }
                           </TableCell>

src/components/Material.Ui/Table/EnhancedTableHead.jsx

@@ -18,17 +18,17 @@ import Tooltip from '@mui/material/Tooltip';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 
 const EnhancedTableHead = (props) => {
-    const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox,RowStyle } = props;
+    const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox, RowStyle, headTableCellStyle } = props;
     const createSortHandler = (property) => (event) => {
         onRequestSort(event, property);
     };
     return (
         <TableHead classes={{ root: TableHeadClasses || classes.TableHeadClasses }} sx={{
-            th:{
+            th: {
                 backgroundColor: '#F7F8FA',
             }
         }}>
-            <TableRow style={{...RowStyle}}>
+            <TableRow style={{ ...RowStyle }}>
                 {
                     headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell sx={{
                         border: 'none'
@@ -43,16 +43,17 @@ const EnhancedTableHead = (props) => {
                         />
                     </TableCell>
                 }
-                {headCells.map((headCell,k) => (
+                {headCells.map((headCell, k) => (
                     <TableCell
                         sx={{
-                                border: 'none'
+                            border: 'none',
+                            ...headTableCellStyle
                         }}
                         key={headCell.id}
                         style={{ width: headCell.width ? headCell.width : "", textAlign: headCell.numeric ? "right" : "left", display: headCell.id !== "checkbox" ? "" : "none" }}
                         padding={headCell.disablePadding ? "none" : "normal"}
                         sortDirection={orderBy === headCell.id ? order : false}
-                            classes={{ head:( k && headTableCell) || classes.headTableCell }}
+                        classes={{ head: (k && headTableCell) || classes.headTableCell }}
                     >
                         {
                             headCell.sort && <TableSortLabel active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
@@ -63,7 +64,7 @@ const EnhancedTableHead = (props) => {
                             !headCell.sort && <Typography className={headTableCellCheckbox || ''} style={headCell.tooltip ? { display: "flex", alignItems: "center" } : {}}      >
                                 {headCell.label}
                                 {headCell.tooltip ? <Tooltip title={headCell.tooltip} placement="top" arrow>
-                                        <ErrorOutlineIcon style={{ fontSize: "16px",marginLeft:"5px" }} fontSize="small" />
+                                    <ErrorOutlineIcon style={{ fontSize: "16px", marginLeft: "5px" }} fontSize="small" />
                                 </Tooltip> : ""}
                             </Typography>
                         }

src/components/mui/MyDialog.tsx

@@ -18,6 +18,8 @@ const MyDialog = (props: any) => {
     handleSubmit,
     submitloading,
     submitStyle = { backgroundColor: "#1370FF" },
+    showCloseButton = true,
+    submitText = "确定",
   } = props;
 
   const handleClickOpen = () => {
@@ -66,6 +68,7 @@ const MyDialog = (props: any) => {
         </IconButton>
       </DialogContent>
       <DialogActions style={{ padding: "16px 24px" }}>
+        {showCloseButton && (
           <Button
             onClick={handleClose}
             color="inherit"
@@ -75,6 +78,7 @@ const MyDialog = (props: any) => {
           >
             取消
           </Button>
+        )}
         <LoadingButton
           loading={submitloading}
           onClick={handleSubmit}
@@ -83,7 +87,7 @@ const MyDialog = (props: any) => {
           style={submitStyle}
           size="small"
         >
-          确认
+          {submitText}
         </LoadingButton>
       </DialogActions>
     </Dialog>

src/react-app-env.d.ts

@@ -12,72 +12,72 @@
 
 declare namespace NodeJS {
   interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly NODE_ENV: "development" | "production" | "test";
     readonly PUBLIC_URL: string;
   }
 }
 
-declare module '*.avif' {
+declare module "*.avif" {
   const src: string;
   export default src;
 }
 
-declare module '*.bmp' {
+declare module "*.bmp" {
   const src: string;
   export default src;
 }
 
-declare module '*.gif' {
+declare module "*.gif" {
   const src: string;
   export default src;
 }
 
-declare module '*.jpg' {
+declare module "*.jpg" {
   const src: string;
   export default src;
 }
 
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const src: string;
   export default src;
 }
 
-declare module '*.png' {
+declare module "*.png" {
   const src: string;
   export default src;
 }
 
-declare module '*.webp' {
+declare module "*.webp" {
   const src: string;
   export default src;
 }
 
-declare module '*.svg' {
-  import * as React from 'react';
+declare module "*.svg" {
+  import * as React from "react";
 
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
 
   const src: string;
   export default src;
 }
 
-declare module '*.module.css' {
+declare module "*.module.css" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
 
-declare module '*.module.scss' {
+declare module "*.module.scss" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
 
-declare module '*.module.sass' {
+declare module "*.module.sass" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
 
-declare module '@mui/lab';
-declare module 'lodash';
-declare module "@mui/material/Tab"
+declare module "@mui/lab";
+declare module "lodash";
+declare module "@mui/material/Tab";

src/utils/util.ts

@@ -21,3 +21,7 @@ const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 export const checkIsNumberLetterChinese = (string: string) => {
   return IsNumberLetterChineseReg.test(string);
 };
+
+export const getMbfromB = (b: number) => {
+  return Math.floor(b / 1048576);
+};

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

@@ -22,6 +22,9 @@
   border: 1px dashed #d1d6de;
   border-radius: 4px;
 }
+.dropBoxDragActive {
+  background-color: #f7f8fa;
+}
 .uploaderIcon {
   width: 56px;
   margin-bottom: 24px;
@@ -37,20 +40,49 @@
   font-size: 12px;
   color: #8a9099;
 }
-.folderListBox {
+.fileListBox {
   width: 528px;
   box-sizing: border-box;
+  position: relative;
 }
 .tableBox {
   height: 300px;
   overflow: scroll;
 }
-.folderIconBox {
+.fileIconBox {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
 
-.folderIcon {
+.noFile {
+  position: absolute;
+  top: 92px;
+  height: 200px;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.noFileIcon {
+  width: 83px;
+  height: 70px;
+  height: auto;
+  margin-bottom: 6px;
+}
+
+.noFileText {
+  line-height: 18px;
+  font-size: 12px;
+  color: rgba(34, 34, 34, 0.45);
+}
+.fileIcon {
   margin-right: 12px;
 }
+
+.red {
+  color: #ff4e4e;
+}

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

@@ -9,17 +9,46 @@ 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 noFile from "@/assets/project/noFile.svg";
 import uploaderIcon from "@/assets/project/uploaderIcon.svg";
+import classnames from "classnames";
+import { getMbfromB } from "@/utils/util";
 
-const UpLoaderFolder = (props: any) => {
-  const [folderList, setFolderList] = useState([]);
-  const { path } = props;
+const UpLoaderFile = (props: any) => {
+  const message = useMessage();
+  const [fileList, setFileList] = useState<any>([]);
+  // list 是项目数据table的数据
+  const { path, list } = props;
+
+  const onDrop = useCallback(
+    (acceptedFiles: any) => {
+      // 判断是否有文件名重复
+      const fileListRepeatName = getRepeatName(fileList, acceptedFiles);
+      const listRepeatName = getRepeatName(list, acceptedFiles);
+      if (fileListRepeatName || listRepeatName) {
+        message.error(`${fileListRepeatName || listRepeatName}文件已存在`);
+        return;
+      }
+      // 插入新的文件列表
+      const popLength = 10 - fileList.length;
+      let newFileList = [...acceptedFiles.slice(0, popLength), ...fileList];
+      setFileList(newFileList);
+    },
+    [fileList, list, message]
+  );
+
+  const getRepeatName = (fList: Array<any>, Alist: Array<any>) => {
+    let repeatName = "";
+    Alist.forEach((aItem) => {
+      fList.forEach((fItem: any) => {
+        if (fItem.name === aItem.name) {
+          repeatName = fItem.name;
+        }
+      });
+    });
+    return repeatName;
+  };
 
-  const onDrop = useCallback((acceptedFiles: any) => {
-    console.log(acceptedFiles);
-    setFolderList(acceptedFiles);
-    // Do something with the files
-  }, []);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   const submitloading = false;
@@ -40,7 +69,7 @@ const UpLoaderFolder = (props: any) => {
     };
   });
 
-  const folderListHeadCells = [
+  const fileListHeadCells = [
     { id: "name", numeric: false, label: "名称", width: "60%" },
     { id: "size", numeric: false, label: "大小", width: "25%" },
     { id: "caozuo", numeric: false, label: "操作", width: "15%" },
@@ -48,18 +77,25 @@ const UpLoaderFolder = (props: any) => {
 
   const renderName = (item: any) => {
     return (
-      <span className={style.folderIconBox}>
-        <img className={style.folderIcon} src={fileIcon} alt="" />
+      <span className={style.fileIconBox}>
+        <img className={style.fileIcon} src={fileIcon} alt="" />
         {item.name}
       </span>
     );
   };
-
+  // 1,048,576
   const renderSize = (item: any) => {
-    return <span>{item.size ? `${item.size}b` : "-"}</span>;
+    return (
+      <span>{item.size ? `${getMbfromB(Number(item.size))}MB` : "-"}</span>
+    );
+  };
+
+  const handleRowDelete = (index: number) => {
+    fileList.splice(index, 1);
+    setFileList([...fileList]);
   };
 
-  const renderButtons = (item: any) => {
+  const renderButtons = (item: any, index: number) => {
     return (
       <span>
         <Button
@@ -67,6 +103,7 @@ const UpLoaderFolder = (props: any) => {
           variant="text"
           size="small"
           color="error"
+          onClick={() => handleRowDelete(index)}
         >
           删除
         </Button>
@@ -80,14 +117,23 @@ const UpLoaderFolder = (props: any) => {
       onRef={dialogRef}
       title="上传文件"
       submitloading={submitloading}
+      submitText="开始上传"
+      showCloseButton={false}
     >
       <div className={style.uploderBox}>
         <div className={style.uploderBoxLeft}>
           <div className={style.dropTitle}>添加文件</div>
 
-          <div {...getRootProps()} className={style.dropBox}>
+          {/* <div {...getRootProps()} className={style.dropBox}> */}
+          <div
+            {...getRootProps()}
+            className={classnames({
+              [style.dropBox]: true,
+              [style.dropBoxDragActive]: isDragActive,
+            })}
+          >
+            {/* isDragActive */}
             <input {...getInputProps()} multiple />
-            {/* <input {...getInputProps()} webkitdirectory="true" multiple /> */}
             <img className={style.uploaderIcon} src={uploaderIcon} alt="" />
             <div className={style.uploderText1}>
               点击添加文件或将文件拖到此处添加
@@ -95,30 +141,53 @@ const UpLoaderFolder = (props: any) => {
             <div className={style.uploderText2}>一次最多添加10个文件</div>
           </div>
         </div>
-        <div className={style.folderListBox}>
+        <div className={style.fileListBox}>
           <div className={style.dropTitle}>
-            已添加文件（{folderList.length}/10）
+            已添加文件
+            <span
+              className={classnames({
+                [style.red]: fileList.length >= 10,
+              })}
+            >
+              （{fileList.length}/10）
+            </span>
           </div>
           <div className={style.tableBox}>
             <Table
               rowHover={true}
               stickyheader={true}
-              rows={folderList.map((item: any) => ({
+              rows={fileList.map((item: any, index: number) => ({
                 ...item,
                 name: renderName(item),
                 size: renderSize(item),
-                caozuo: renderButtons(item),
+                caozuo: renderButtons(item, index),
               }))}
               rowsPerPage={"99"}
-              headCells={folderListHeadCells}
+              headCells={fileListHeadCells}
               nopadding={true}
               footer={false}
+              headTableCellStyle={{
+                fontSize: "12px",
+                lineHeight: "20px",
+                color: "#8A9099",
+                // padding: "12px 24px",
+              }}
+              tableBoySx={{
+                backgroundColor:
+                  fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
+              }}
             ></Table>
           </div>
+          {fileList.length === 0 && (
+            <div className={style.noFile}>
+              <img className={style.noFileIcon} src={noFile} alt="" />
+              <span className={style.noFileText}>暂无添加文件</span>
+            </div>
+          )}
         </div>
       </div>
     </MyDialog>
   );
 };
 
-export default UpLoaderFolder;
+export default UpLoaderFile;

src/views/Project/ProjectData/index.tsx

-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 
 import style from "./index.module.css";
 import classnames from "classnames";
@@ -13,10 +13,13 @@ 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 { getDataFileToken } from "@/api/project_api";
 import AddFolder from "./AddFolder";
-import UpLoaderFolder from "./UpLoaderFolder";
+import UpLoaderFile from "./UpLoaderFile";
+import useMyRequest from "@/hooks/useMyRequest";
+import { observer } from "mobx-react-lite";
+import { useStores } from "@/store";
 
 const theme = createTheme({
   palette: {
@@ -44,10 +47,25 @@ declare module "@mui/material/Button" {
   }
 }
 
-const ProjectData = () => {
+const ProjectData = observer(() => {
+  const { currentProjectStore } = useStores();
   const [path, setPath] = useState("ProjectData");
   const [activeTab, setActiveTab] = useState(1);
   const [keyWord, setKeyWord] = useState("");
+  const [fileToken, setFileToken] = useState("");
+
+  const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
+    onSuccess: (res: any) => {
+      console.log("res", res);
+      setFileToken(res.data);
+    },
+  });
+
+  useEffect(() => {
+    getDataFileTokenRun({
+      id: currentProjectStore.currentProjectInfo.id as string,
+    });
+  }, [getDataFileTokenRun, currentProjectStore]);
 
   const handleKeyWordChange = (e: any) => {
     setKeyWord(e.target.value);
@@ -139,9 +157,9 @@ const ProjectData = () => {
     );
   };
 
-  let uploaderFolderRef: any = React.createRef();
-  const hanleShowUploaderFolderDialog = () => {
-    uploaderFolderRef.current.showDialog();
+  let UpLoaderFileRef: any = React.createRef();
+  const hanleShowUpLoaderFileDialog = () => {
+    UpLoaderFileRef.current.showDialog();
   };
 
   let addFolderRef: any = React.createRef();
@@ -163,7 +181,7 @@ const ProjectData = () => {
                   variant="contained"
                   size="small"
                   style={{ marginRight: "12px" }}
-                  onClick={hanleShowUploaderFolderDialog}
+                  onClick={hanleShowUpLoaderFileDialog}
                 >
                   上传文件
                 </Button>
@@ -268,11 +286,15 @@ const ProjectData = () => {
             </Button>
           </div>
         )}
-        <UpLoaderFolder onRef={uploaderFolderRef} path={path}></UpLoaderFolder>
+        <UpLoaderFile
+          onRef={UpLoaderFileRef}
+          path={path}
+          list={list}
+        ></UpLoaderFile>
         <AddFolder onRef={addFolderRef} list={list}></AddFolder>
       </div>
     </ThemeProvider>
   );
-};
+});
 
 export default ProjectData;