feat: 完善FullScreenDrawer组件

src/components/CommonComponents/FullScreenDrawer/index.module.css

+.drawerBox {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.78);
+	z-index: 100;
+	display: flex;
+	flex-direction: column;
+	animation: showBG 1s ease;
+	-webkit-animation: showBG 1s ease;
+}
+.drawerBoxHidden {
+	animation: hiddenBG 1s ease;
+	-webkit-animation: hiddenBG 1s ease;
+}
+.closeBox {
+	display: flex;
+	justify-content: flex-end;
+	width: 100%;
+	height: 40px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	align-items: center;
+	animation: showClose 1s ease;
+	-webkit-animation: showClose 1s ease;
+}
+.closeBoxHidden {
+	animation: hiddenClose 1s ease;
+	-webkit-animation: hiddenClose 1s ease;
+}
+.closeiIcon {
+	position: absolute;
+	right: 12px;
+	top: 8px;
+	cursor: pointer;
+	color: rgba(209, 214, 222, 1);
+}
+.contentBox {
+	width: 100vw;
+	height: calc(100vh - 40px);
+	position: fixed;
+	top: 40px;
+	left: 0;
+	background-color: #fff;
+	border-radius: 16px 0 0 0;
+	padding: 24px 32px;
+	box-sizing: border-box;
+	overflow: scroll;
+	animation: showDrawer 1s ease;
+	-webkit-animation: showDrawer 1s ease;
+}
+.contentBoxHidden {
+	animation: hiddenDrawer 1s ease;
+	-webkit-animation: hiddenDrawer 1s ease;
+}
+
+@keyframes showBG {
+	from {
+		background-color: rgba(0, 0, 0, 0);
+	}
+	to {
+		background-color: rgba(0, 0, 0, 0.78);
+	}
+}
+
+@keyframes hiddenBG {
+	from {
+		background-color: rgba(0, 0, 0, 0.78);
+	}
+	to {
+		background-color: rgba(0, 0, 0, 0);
+	}
+}
+
+@keyframes showClose {
+	from {
+		top: calc(100% - 40px);
+	}
+	to {
+		top: 0px;
+	}
+}
+
+@keyframes hiddenClose {
+	from {
+		top: 0px;
+	}
+	to {
+		top: calc(100% - 40px);
+	}
+}
+
+@keyframes showDrawer {
+	from {
+		top: 100%;
+	}
+	to {
+		top: 40px;
+	}
+}
+
+@keyframes hiddenDrawer {
+	from {
+		top: 40px;
+	}
+	to {
+		top: 100%;
+	}
+}

src/components/CommonComponents/FullScreenDrawer/index.tsx

 // 从下往上弹的全屏抽屉
+import { useState } from "react";
 import style from "./index.module.css";
+import classNames from "classnames";
+import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 
-type IFullScreenDrawerProps = {};
+type IFullScreenDrawerProps = {
+	children: React.ReactNode;
+	handleClose: any;
+};
 
 const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
-	return <div>123</div>;
+	const { children, handleClose } = props;
+	const [closeing, setCloseing] = useState(false);
+	return (
+		<div
+			className={classNames({
+				[style.drawerBox]: true,
+				[style.drawerBoxHidden]: closeing,
+			})}
+		>
+			<div
+				className={classNames({
+					[style.closeBox]: true,
+					[style.closeBoxHidden]: closeing,
+				})}
+			>
+				<CloseOutlinedIcon
+					className={style.closeiIcon}
+					onClick={() => {
+						setCloseing(true);
+						setTimeout(() => {
+							setCloseing(false);
+							handleClose();
+						}, 1000);
+					}}
+				/>
+			</div>
+			<div
+				className={classNames({
+					[style.contentBox]: true,
+					[style.contentBoxHidden]: closeing,
+				})}
+			>
+				{children}
+			</div>
+		</div>
+	);
 };
 
 export default FullScreenDrawer;

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

+import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
+
+type ISeeDatasetProps = {
+	handleClose: any;
+};
+
+const SeeDataset = (props: ISeeDatasetProps) => {
+	return (
+		<FullScreenDrawer handleClose={props.handleClose}>
+			SeeDataset
+		</FullScreenDrawer>
+	);
+};
+
+export default SeeDataset;

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

@@ -49,7 +49,7 @@
 	align-items: center;
 }
 
-.folderPointer {
+.pointer {
 	cursor: pointer;
 }
 

src/views/Project/ProjectData/index.tsx

 import React, { useState, useCallback, useEffect, useMemo } from "react";
-
 import style from "./index.module.css";
 import classnames from "classnames";
 import { Button, InputBase, IconButton } from "@mui/material";
@@ -26,6 +25,7 @@ import usePass from "@/hooks/usePass";
 import { storageUnitFromB } from "@/utils/util";
 import { useLocation } from "react-router-dom";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
+import SeeDataset from "./SeeDataset";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
 
 const theme = createTheme({
@@ -83,7 +83,10 @@ const ProjectData = observer(() => {
 	const [moveDialogOpen, setMoveDialogOpen] = useState(false);
 	// 文件删除弹窗控制
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	// 上传文件弹窗控制
 	const [uploaderDialogOpen, setUploaderDialogOpen] = useState(false);
+	// 查看数据集（数据集详情）显示控制
+	const [showSeeDataset, setShowSeeDataset] = useState(false);
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
@@ -327,6 +330,12 @@ const ProjectData = observer(() => {
 		}
 	};
 
+	// 查看数据集
+	const handleSeeDataset = (item: any) => {
+		console.log(item);
+		setShowSeeDataset(true);
+	};
+
 	// table配置
 	const renderName = (item: any) => {
 		if (item.type === "directory") {
@@ -334,7 +343,7 @@ const ProjectData = observer(() => {
 				<span
 					className={classnames({
 						[style.folderIconBox]: true,
-						[style.folderPointer]: true,
+						[style.pointer]: true,
 					})}
 					onClick={() => handleViewFolders(item)}
 				>
@@ -344,7 +353,13 @@ const ProjectData = observer(() => {
 			);
 		} else if (item.type === "dataSet") {
 			return (
-				<span className={style.folderIconBox}>
+				<span
+					className={classnames({
+						[style.folderIconBox]: true,
+						[style.pointer]: true,
+					})}
+					onClick={() => handleSeeDataset(item)}
+				>
 					<img className={style.folderIcon} src={dataSetIcon} alt="" />
 					{item.name}
 				</span>
@@ -358,21 +373,15 @@ const ProjectData = observer(() => {
 			);
 		}
 	};
-
-	// table配置
 	const renderSize = (item: any) => {
 		if (item.type === "dataSet") {
 			return `${item.size}条`;
 		}
 		return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
 	};
-
-	// table配置
 	const renderMtime = (item: any) => {
 		return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
 	};
-
-	// table配置
 	const renderButtons = (item: any) => {
 		return (
 			<span style={{ whiteSpace: "nowrap" }}>
@@ -405,7 +414,10 @@ const ProjectData = observer(() => {
 					}}
 					variant="text"
 					size="small"
-					onClick={() => hanleShowMoveFileDialog(item)}
+					onClick={() => {
+						setCurrentOperateFile(item);
+						setMoveDialogOpen(true);
+					}}
 					disabled={
 						selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
 					}
@@ -422,7 +434,10 @@ const ProjectData = observer(() => {
 					variant="text"
 					size="small"
 					color="error"
-					onClick={() => hanleShowDeleteDialogRef(item)}
+					onClick={() => {
+						setCurrentOperateFile(item);
+						setDeleteDialogOpen(true);
+					}}
 					disabled={
 						selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
 					}
@@ -444,30 +459,6 @@ const ProjectData = observer(() => {
 		);
 	};
 
-	// 显示移动弹窗
-	const hanleShowMoveFileDialog = (item: any) => {
-		setCurrentOperateFile(item);
-		setMoveDialogOpen(true);
-	};
-
-	// 删除弹窗
-	const hanleShowDeleteDialogRef = (item: any) => {
-		setCurrentOperateFile(item);
-		setDeleteDialogOpen(true);
-	};
-
-	// 批量移动
-	const handleBatchMove = () => {
-		setCurrentOperateFile(null);
-		setMoveDialogOpen(true);
-	};
-
-	// 批量删除
-	const handleBatchDelete = () => {
-		setCurrentOperateFile(null);
-		setDeleteDialogOpen(true);
-	};
-
 	// 前端展示的文件路径
 	const showPath = useMemo(() => {
 		if (path === "/") {
@@ -523,7 +514,6 @@ const ProjectData = observer(() => {
 								: index > pathArr.length - 4
 								? item
 								: ""}
-							{/* && index > pathArr.length - 4 */}
 							{index === pathArr.length - 1 ||
 							(index <= pathArr.length - 4 && index > 0) ? null : (
 								<i className={style.showPathI}>{">"}</i>
@@ -651,7 +641,10 @@ const ProjectData = observer(() => {
 								variant="outlined"
 								size="small"
 								style={{ marginRight: "12px" }}
-								onClick={handleBatchDelete}
+								onClick={() => {
+									setCurrentOperateFile(null);
+									setDeleteDialogOpen(true);
+								}}
 								disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
 							>
 								批量删除（{selectIds.length}）
@@ -661,7 +654,10 @@ const ProjectData = observer(() => {
 								variant="contained"
 								size="small"
 								style={{ marginRight: "24px" }}
-								onClick={handleBatchMove}
+								onClick={() => {
+									setCurrentOperateFile(null);
+									setDeleteDialogOpen(true);
+								}}
 								disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
 							>
 								批量移动（{selectIds.length}）
@@ -701,6 +697,11 @@ const ProjectData = observer(() => {
 							showList={showList}
 						></MoveFile>
 					)}
+					{showSeeDataset && (
+						<SeeDataset
+							handleClose={() => setShowSeeDataset(false)}
+						></SeeDataset>
+					)}
 				</div>
 			</ThemeProvider>
 		);