feat： 项目数据换成虚拟table

src/components/CommonComponents/VirtuallyTable/index.module.scss

@@ -11,10 +11,13 @@
 .VTHeaderRow {
 	background-color: rgba(247, 248, 250, 1);
 	box-sizing: border-box;
+	border-radius: 4px 4px 0 0;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
 }
 .VTRow {
 	background-color: #fff;
 	box-sizing: border-box;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
 	&:hover {
 		background-color: rgba(245, 246, 247, 1);
 	}
@@ -30,5 +33,4 @@
 	line-height: 22px;
 	color: rgba(30, 38, 51, 1);
 	padding: 16px;
-	border-bottom: 1px solid rgba(240, 242, 245, 1);
 }

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

@@ -11,7 +11,7 @@
 	box-sizing: border-box;
 }
 .projectDataStickyTopPadding {
-	padding: 22px 24px 24px;
+	padding: 22px 24px 64px;
 }
 .projectDataTitle {
 	font-size: 18px;
@@ -26,7 +26,7 @@
 
 .tableBox {
 	/* flex: 1; */
-	height: calc(100% - 146px);
+	height: calc(100% - 140px);
 }
 .projectDataButtonAndSearch {
 	display: flex;

src/views/Project/ProjectData/index.tsx

@@ -271,18 +271,6 @@ const ProjectData = observer(() => {
 		}
 	};
 
-	// table配置
-	const versionsHeadCells = [
-		{ id: "name", label: "名称" },
-		{ id: "size", label: "大小", width: 200 },
-		{
-			id: "mtime",
-			label: "创建时间",
-			width: 200,
-		},
-		{ id: "caozuo", label: "操作", width: 200 },
-	];
-
 	// 文件夹下钻
 	const handleViewFolders = (item: any) => {
 		if (debounce) {
@@ -304,52 +292,54 @@ const ProjectData = observer(() => {
 	};
 
 	// table配置
-	const renderName = (item: any) => {
-		if (item.type === "directory") {
+	const renderName = (data: any) => {
+		if (data.rowData.type === "directory") {
 			return (
 				<span
 					className={classnames({
 						[style.folderIconBox]: true,
 						[style.pointer]: true,
 					})}
-					onClick={() => handleViewFolders(item)}
+					onClick={() => handleViewFolders(data.rowData)}
 				>
 					<img className={style.folderIcon} src={folderIcon} alt="" />
-					{item.name}
+					{data.rowData.name}
 				</span>
 			);
-		} else if (item.type === "dataSet") {
+		} else if (data.rowData.type === "dataSet") {
 			return (
 				<span
 					className={classnames({
 						[style.folderIconBox]: true,
 						[style.pointer]: true,
 					})}
-					onClick={() => handleSeeDataset(item)}
+					onClick={() => handleSeeDataset(data.rowData)}
 				>
 					<img className={style.folderIcon} src={dataSetIcon} alt="" />
-					{item.name}
+					{data.rowData.name}
 				</span>
 			);
 		} else {
 			return (
 				<span className={style.folderIconBox}>
 					<img className={style.folderIcon} src={fileIcon} alt="" />
-					{item.name}
+					{data.rowData.name}
 				</span>
 			);
 		}
 	};
-	const renderSize = (item: any) => {
-		if (item.type === "dataSet") {
-			return `${item.size}条`;
+	const renderSize = (data: any) => {
+		if (data.rowData.type === "dataSet") {
+			return `${data.rowData.size}条`;
 		}
-		return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
+		return `${
+			data.rowData.size ? storageUnitFromB(Number(data.rowData.size)) : "-"
+		}`;
 	};
-	const renderMtime = (item: any) => {
-		return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
+	const renderMtime = (data: any) => {
+		return String(moment(data.rowData.mtime).format("YYYY-MM-DD HH:mm:ss"));
 	};
-	const renderButtons = (item: any) => {
+	const renderButtons = (data: any) => {
 		return (
 			<span style={{ whiteSpace: "nowrap" }}>
 				{!isAllDirectory && (
@@ -362,14 +352,15 @@ const ProjectData = observer(() => {
 							height: "22px",
 							padding: "0 10px",
 							visibility:
-								item.type !== "dataSet" && item.type !== "directory"
+								data.rowData.type !== "dataSet" &&
+								data.rowData.type !== "directory"
 									? "visible"
 									: "hidden",
 						}}
 						variant="text"
 						size="medium"
 						disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
-						onClick={() => hanleDownloadFile(item)}
+						onClick={() => hanleDownloadFile(data.rowData)}
 					/>
 				)}
 				<MyButton
@@ -384,7 +375,7 @@ const ProjectData = observer(() => {
 					variant="text"
 					size="medium"
 					onClick={() => {
-						setCurrentOperateFile(item);
+						setCurrentOperateFile(data.rowData);
 						setMoveDialogOpen(true);
 					}}
 					disabled={
@@ -405,7 +396,7 @@ const ProjectData = observer(() => {
 					size="medium"
 					color="error"
 					onClick={() => {
-						setCurrentOperateFile(item);
+						setCurrentOperateFile(data.rowData);
 						setDeleteDialogOpen(true);
 					}}
 					disabled={
@@ -416,6 +407,25 @@ const ProjectData = observer(() => {
 		);
 	};
 
+	// table配置
+	const versionsHeadCells = [
+		{
+			id: "name",
+			label: "名称",
+			width: 200,
+			flexGrow: 2,
+			cellRenderer: renderName,
+		},
+		{ id: "size", label: "大小", width: 200, cellRenderer: renderSize },
+		{
+			id: "mtime",
+			label: "创建时间",
+			width: 200,
+			cellRenderer: renderMtime,
+		},
+		{ id: "caozuo", label: "操作", width: 200, cellRenderer: renderButtons },
+	];
+
 	// 下载文件
 	const hanleDownloadFile = (item: any) => {
 		const downloadPath =
@@ -590,18 +600,13 @@ const ProjectData = observer(() => {
 					</div>
 					<div className={style.tableBox}>
 						<MyTable
+							isVirtuallyTable={true}
 							fixedHead={true}
 							hasCheckbox={showCheckBox}
 							headCells={versionsHeadCells}
 							selectItems={selectIds}
 							setSelectItems={setSelectIds}
-							rows={showList.map((item: any, index: number) => ({
-								...item,
-								name: renderName(item),
-								size: renderSize(item),
-								mtime: renderMtime(item),
-								caozuo: renderButtons(item),
-							}))}
+							rows={showList}
 						/>
 					</div>
 				</div>