feat: 单位换算优化 上传文件表格表头固定

src/api/fileserver/raysyncApi.ts

@@ -116,6 +116,7 @@ export {
   getType,
 };
 
+// mock 数据
 // const raysyncAddr = {
 //   bandwidth: null
 //   capacity: 10485760

src/utils/util.ts

@@ -60,3 +60,20 @@ export const checkIsNumberLetterChinese = (string: string) => {
 export const getMbfromB = (b: number) => {
   return Math.floor(b / 1048576);
 };
+
+// 内存单位转换
+export const storageUnitFromB = (b: number) => {
+  if (b <= 0) {
+    return "0B";
+  } else if (b < 1024) {
+    return `${b}B`;
+  } else if (b < 1024 * 1024) {
+    return `${(b / 1024).toFixed(2)}KB`;
+  } else if (b < 1024 * 1024 * 1024) {
+    return `${(b / (1024 * 1024)).toFixed(2)}MB`;
+  } else if (b < 1024 * 1024 * 1024 * 1024) {
+    return `${(b / (1024 * 1024 * 1024)).toFixed(2)}G`;
+  } else {
+    return `${(b / (1024 * 1024 * 1024 * 1024)).toFixed(2)}t`;
+  }
+};

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

@@ -45,10 +45,10 @@
   box-sizing: border-box;
   position: relative;
 }
-.tableBox {
+/* .tableBox {
   height: 300px;
   overflow: scroll;
-}
+} */
 .fileIconBox {
   display: flex;
   justify-content: flex-start;

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

@@ -11,7 +11,7 @@ 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";
+import { storageUnitFromB } from "@/utils/util";
 import { observer } from "mobx-react";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
@@ -98,9 +98,7 @@ const UpLoaderFile = observer((props: any) => {
   };
   // 1,048,576
   const renderSize = (item: any) => {
-    return (
-      <span>{item.size ? `${getMbfromB(Number(item.size))}MB` : "-"}</span>
-    );
+    return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>;
   };
 
   const handleRowDelete = (index: number) => {
@@ -183,12 +181,14 @@ const UpLoaderFile = observer((props: any) => {
                 fontSize: "12px",
                 lineHeight: "20px",
                 color: "#8A9099",
-                // padding: "12px 24px",
               }}
               tableBoySx={{
                 backgroundColor:
                   fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
               }}
+              tableContainerStyle={{
+                maxHeight: "300px",
+              }}
             ></Table>
           </div>
           {fileList.length === 0 && (

src/views/Project/ProjectData/index.tsx

@@ -30,6 +30,7 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import NoProject from "@/components/NoProject";
 import usePass from "@/hooks/usePass";
+import { storageUnitFromB } from "@/utils/util";
 import {
   getDataFind,
   getDataFileSearch,
@@ -66,9 +67,7 @@ const ProjectData = observer(() => {
   const { currentProjectStore } = useStores();
   // const [fileToken, setFileToken] = useState("");
   const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
-  console.log(fileToken);
   const projectId = toJS(currentProjectStore.currentProjectInfo.id);
-  console.log(projectId);
   // const projectId = useMemo(() => {
   //   console.log(
   //     toJS(currentProjectStore.currentProjectInfo.id),
@@ -359,9 +358,7 @@ const ProjectData = observer(() => {
     if (item.type === "dataSet") {
       return `${item.size}条`;
     }
-    return `${
-      item.size ? String((Number(item.size) / 1048576).toFixed(2)) + "MB" : "-"
-    }`;
+    return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
   };
 
   // table配置

src/views/Project/project.ts

@@ -22,10 +22,5 @@ export const setFileServerEndPointLocalStorage = async (zoneId: string) => {
 // 根据项目id获取文件token
 export const getFiletokenAccordingToId = async (projectId: string) => {
   const res = await getDataFileToken({ id: projectId });
-  console.log(res, "getFiletokenAccordingToId");
   return res.data;
-  // if (res) {
-  // } else {
-  //   return false;
-  // }
 };