Merge branch 'feat-20220908-dataset' into 'release'

cn-style: ui优化

See merge request !105

src/components/mui/MyMultipleMenu.tsx

@@ -66,6 +66,13 @@ const theme = createTheme({
 				},
 			},
 		},
+		MuiPaper: {
+			styleOverrides: {
+				root: {
+					boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+				},
+			},
+		},
 	},
 });
 

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

@@ -66,8 +66,8 @@
 	line-height: 22px;
 }
 .datasetLiDataLi {
-	height: 20px;
-	line-height: 20px;
+	height: 28px;
+	line-height: 28px;
 	color: rgba(30, 38, 51, 1);
 	font-size: 12px;
 	padding: 0 16px;

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

@@ -73,18 +73,14 @@ const DatasetCardTable = (props: IDatasetCardTableProps) => {
 										)}
 									</div>
 									<div className={style.datasetLiBottom}>
-										<div className={style.datasetLiTitle} title={item.smiles}>
+										{/* <div className={style.datasetLiTitle} title={item.smiles}>
 											{item.smiles}
-										</div>
+										</div> */}
 										{showData.length !== 0 && (
 											<div className={style.datasetLiDataList}>
 												{Object.keys(item)
 													.filter((key) => showData.indexOf(key) !== -1)
 													.map((key, index) => {
-														// 在分子卡片模式下，删除2D/3D图像下面的smiles展示。
-														if (key === "smiles") {
-															return null;
-														}
 														return (
 															<div
 																className={style.datasetLiDataLi}
@@ -124,14 +120,18 @@ const DatasetCardTable = (props: IDatasetCardTableProps) => {
 										<Checkbox
 											size="small"
 											sx={{
-												padding: "0px",
 												position: "absolute",
 												top: "16px",
 												right: "20px",
 												zIndex: 1,
-												background: "RGBA(30, 38, 51, 1)",
-												border: "1px solid #565C66",
 												borderRadius: "2px",
+												width: "16px",
+												height: "16px",
+												padding: "0px",
+												background: "RGBA(30, 38, 51, 1)",
+												":hover": {
+													background: "#136EFA",
+												},
 											}}
 											checked={selectItems.includes(item.id)}
 										/>

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

-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import MyTable from "@/components/mui/MyTableNew";
 import { sortState } from "@/components/mui/MyTableNew";
 
@@ -22,12 +22,19 @@ const DatasetTable = (props: IDatasetTableProps) => {
 		setSortState,
 		loading,
 	} = props;
+	const [innerWidth, setInnerWidth] = useState(window.innerWidth);
+	useEffect(() => {
+		window.addEventListener("resize", () => {
+			setInnerWidth(window.innerWidth);
+		});
+	}, []);
+
 	const headCells = useMemo(() => {
 		let width =
 			showData.length === 0
-				? window.innerWidth - 112
-				: `${(window.innerWidth - 112) / showData.length}`;
-		return showData.map((item, index) => {
+				? innerWidth - 112
+				: `${(innerWidth - 112) / showData.length}`;
+		return showData.map((item) => {
 			return {
 				id: item,
 				label: item,
@@ -36,7 +43,7 @@ const DatasetTable = (props: IDatasetTableProps) => {
 				sort: true,
 			};
 		});
-	}, [showData]);
+	}, [showData, innerWidth]);
 	return (
 		<MyTable
 			rows={list}

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

@@ -8,10 +8,16 @@
 	height: 100%;
 }
 .datasetBoxShowFoot {
-	padding-bottom: 64px;
+	padding-bottom: 76px;
 }
 .top {
-	margin-bottom: 16px;
+	position: relative;
+	margin: 0 -32px;
+	padding: 0 32px 16px;
+}
+.topBoxShadow {
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
+	z-index: 10;
 }
 .title {
 	line-height: 22px;
@@ -60,7 +66,7 @@
 .searchBox {
 	width: 662px;
 	background-color: #fff;
-	padding: 20px 24px 24px;
+	padding: 20px 0 24px 24px;
 	box-sizing: border-box;
 }
 .deleteIcon {
@@ -90,7 +96,9 @@
 	width: 180px;
 }
 .searchList {
-	margin-bottom: 24px;
+	margin-bottom: 8px;
+	max-height: 300px;
+	overflow-y: overlay;
 }
 .searchLi {
 	display: flex;
@@ -102,6 +110,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	padding-right: 24px;
 }
 .searchFooterLeft {
 	color: rgba(19, 112, 255, 1);
@@ -122,15 +131,17 @@
 	overflow-y: overlay;
 	display: flex;
 	flex-direction: column;
+	margin: 0 -32px;
+	padding: 0 32px;
 }
 .foot {
 	position: absolute;
+	z-index: 1;
 	bottom: 0;
 	background-color: #fff;
 	width: calc(100vw - 64px);
 	box-sizing: border-box;
 	height: 76px;
-	padding: 0 32px;
 	margin: 0 32px;
 	display: flex;
 	justify-content: flex-end;

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

@@ -69,6 +69,20 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 	const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
 	const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
 
+	// 滚轮是否到顶,判断是否显示阴影
+	const [isTop, setIsTop] = useState(true);
+
+	// 滚动滚轮时监听是否到顶
+	const onscroll = (e: any) => {
+		if (e.target.scrollTop <= 0) {
+			console.log(1);
+			setIsTop(true);
+		} else {
+			console.log(2);
+			setIsTop(false);
+		}
+	};
+
 	// 页码改变
 	const pageChange = (value: number) => {
 		getList(value - 1);
@@ -331,7 +345,12 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 					[style.datasetBoxShowFoot]: true,
 				})}
 			>
-				<div className={style.top}>
+				<div
+					className={classNames({
+						[style.top]: true,
+						[style.topBoxShadow]: !isTop,
+					})}
+				>
 					<div className={style.title}>{name}</div>
 					<div className={style.screens}>
 						<div className={style.screensLeft}>
@@ -432,7 +451,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 						</div>
 					</div>
 				</div>
-				<div className={style.table}>
+				<div className={style.table} onScroll={onscroll}>
 					{tableType === "table" && (
 						<DatasetTable
 							list={list}

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

@@ -175,7 +175,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 		return (
 			<MyButton
 				text="删除"
-				style={{ position: "relative", left: "-18px" }}
+				style={{ position: "relative", left: "-18px", height: "22px" }}
 				variant="text"
 				size="small"
 				color="error"

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

 .projectData {
 	position: relative;
+	height: calc(100vh - 57px);
 }
 .projectDataStickyTop {
+	height: 100%;
 	padding: 28px 24px 64px;
 	position: relative;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+.projectDataStickyTopPadding {
+	padding: 28px 24px 24px;
 }
 .projectDataTitle {
 	font-size: 18px;
@@ -15,6 +23,11 @@
 .projectDataHeader {
 	position: relative;
 }
+
+.tableBox {
+	/* flex: 1; */
+	height: calc(100% - 146px);
+}
 .projectDataButtonAndSearch {
 	display: flex;
 	justify-content: space-between;
@@ -116,6 +129,3 @@
 	line-height: 22px;
 	color: #8a9099;
 }
-.tableBox {
-	height: calc(100vh - 300px);
-}

src/views/Project/ProjectData/index.tsx

@@ -359,6 +359,7 @@ const ProjectData = observer(() => {
 							position: "relative",
 							left: "-10px",
 							minWidth: "10px",
+							height: "22px",
 							padding: "0 10px",
 							visibility:
 								item.type !== "dataSet" && item.type !== "directory"
@@ -377,6 +378,7 @@ const ProjectData = observer(() => {
 						position: "relative",
 						left: "-10px",
 						minWidth: "10px",
+						height: "22px",
 						padding: "0 10px",
 					}}
 					variant="text"
@@ -396,6 +398,7 @@ const ProjectData = observer(() => {
 						position: "relative",
 						left: "-10px",
 						minWidth: "10px",
+						height: "22px",
 						padding: "0 10px",
 					}}
 					variant="text"
@@ -515,7 +518,13 @@ const ProjectData = observer(() => {
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
 			<div className={style.projectData}>
-				<div className={style.projectDataStickyTop}>
+				{/* <div className={style.projectDataStickyTop}> */}
+				<div
+					className={classnames({
+						[style.projectDataStickyTop]: true,
+						[style.projectDataStickyTopPadding]: selectIds.length === 0,
+					})}
+				>
 					<div className={style.projectDataTitle}>项目数据</div>
 					<div className={style.projectDataHeader}>
 						<div className={style.projectDataButtonAndSearch}>

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -123,6 +123,7 @@ const AddMember = observer((props: IProps) => {
 
 	useEffect(() => {
 		if (addMemberDialog) {
+			setProjectMember("");
 			getProjectPower();
 		}
 	}, [addMemberDialog, getProjectPower]);