feat: 调整查看数据集页面细节

src/components/BusinessComponents/KekuleView/index.tsx

 // 2d分子结构图
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { Box } from "@mui/material";
 import { useMessage } from "@/components/MySnackbar";
 var Kekule = require("kekule").Kekule;
@@ -34,7 +34,7 @@ const KekuleView = (props: IKekuleViewProps) => {
 	} = props;
 	const Message = useMessage();
 
-	useEffect(() => {
+	const rander = useCallback(() => {
 		if (smi) {
 			try {
 				let molecule = Kekule.IO.loadFormatData(
@@ -60,16 +60,23 @@ const KekuleView = (props: IKekuleViewProps) => {
 				Message.error("分子结构图渲染失败，请刷新重试。");
 			}
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [smi]);
+	}, [smi, Message, id, height, width, backgroundColor, toolbar]);
+
+	useEffect(() => {
+		rander();
+	}, [rander]);
+
+	window.onresize = () => {
+		rander();
+	};
 
 	return (
 		<Box
 			id={id}
 			sx={{
 				cursor: onClick ? "pointer" : "unset",
-				width: "100%",
-				height: "100%",
+				width: "99%",
+				height: "99%",
 				...style,
 			}}
 			onClick={onClick}

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

@@ -39,7 +39,7 @@
 }
 .table {
 	flex: 1;
-	overflow: auto;
+	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 }
@@ -73,6 +73,55 @@
 .datasetLi:nth-last-child(4) {
 	margin-bottom: 0;
 }
+.datasetLiTop {
+	height: 55%;
+	box-sizing: border-box;
+}
+.datasetLiBottom {
+	height: 45%;
+	box-sizing: border-box;
+	background-color: RGBA(247, 248, 250, 1);
+	display: flex;
+	flex-direction: column;
+}
+.datasetLiTitle {
+	height: 38px;
+	line-height: 38px;
+	color: rgba(19, 112, 255, 1);
+	font-size: 14px;
+	text-align: center;
+	font-weight: 600;
+}
+.datasetLiDataList {
+	flex: 1;
+	overflow: auto;
+}
+.datasetLiDataLi {
+	height: 20px;
+	line-height: 20px;
+	color: rgba(30, 38, 51, 1);
+	font-size: 12px;
+	padding: 0 16px;
+	display: flex;
+	justify-content: space-between;
+}
+.datasetLiDataLi:nth-child(2n) {
+	background-color: rgba(235, 237, 240, 1);
+}
+.datasetLiDataLiKey {
+	max-width: 50%;
+	white-space: nowrap;
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.datasetLiDataLiValue {
+	max-width: 50%;
+	white-space: nowrap;
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 .pagination {
 	height: 76px;
 	min-height: 76px;
@@ -93,3 +142,6 @@
 	align-items: center;
 	box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
 }
+.nullBox {
+	visibility: hidden;
+}

src/views/Project/ProjectData/index.tsx

@@ -87,6 +87,8 @@ const ProjectData = observer(() => {
 	const [uploaderDialogOpen, setUploaderDialogOpen] = useState(false);
 	// 查看数据集（数据集详情）显示控制
 	const [showSeeDataset, setShowSeeDataset] = useState(false);
+	// 查看的数据集的数据集名称
+	const [seeDatasetName, setSeeDatasetName] = useState("");
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
@@ -333,6 +335,7 @@ const ProjectData = observer(() => {
 	// 查看数据集
 	const handleSeeDataset = (item: any) => {
 		console.log(item);
+		setSeeDatasetName(item.name);
 		setShowSeeDataset(true);
 	};
 
@@ -700,6 +703,10 @@ const ProjectData = observer(() => {
 					{showSeeDataset && (
 						<SeeDataset
 							handleClose={() => setShowSeeDataset(false)}
+							name={seeDatasetName}
+							path={path}
+							fileToken={fileToken as string}
+							projectId={projectId as string}
 						></SeeDataset>
 					)}
 				</div>