feat: 新增暂无数据组件

src/components/BusinessComponents/NoData/index.module.css

+.noDataBox {
+	background-color: #fff;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+}
+.noDataText {
+	margin-top: 8px;
+	font-size: 14px;
+	line-height: 22px;
+	color: #8a9099;
+}

src/components/BusinessComponents/NoData/index.tsx

+import noFile from "@/assets/project/noFile.svg";
+import style from "./index.module.css";
+
+type INoDataProps = {
+	text?: string;
+	noDataBoxStyle?: any;
+};
+
+const NoData = (props: INoDataProps) => {
+	return (
+		<div className={style.noDataBox} style={{ ...props.noDataBoxStyle }}>
+			<img className={style.noDataImg} src={noFile} alt="" />
+			<span className={style.noDataText}>
+				{props.text ? props.text : "暂无数据"}
+			</span>
+		</div>
+	);
+};
+
+export default NoData;

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

@@ -17,6 +17,7 @@ import { useStores } from "@/store";
 import { toJS } from "mobx";
 import classNames from "classnames";
 import Save from "./save";
+import NoData from "@/components/BusinessComponents/NoData";
 import Download from "./download";
 import style from "./index.module.css";
 
@@ -62,7 +63,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 		setSort(e);
 	};
 	const handleKeywordChange = (e: any) => {
+		if (e.target.value.length <= 30) {
 			setKeyword(e.target.value);
+		}
 	};
 
 	const pageChange = (value: number) => {
@@ -248,6 +251,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 					</div>
 				</div>
 				<div className={style.table}>
+					{list.length !== 0 && (
+						<>
 							<div className={style.list}>
 								{list.map((item, index) => {
 									return (
@@ -269,7 +274,10 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 												</div>
 											)}
 											<div className={style.datasetLiBottom}>
-										<div className={style.datasetLiTitle} title={item.smiles}>
+												<div
+													className={style.datasetLiTitle}
+													title={item.smiles}
+												>
 													{item.smiles}
 												</div>
 												{showData.length !== 0 && (
@@ -285,7 +293,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 																		<span className={style.datasetLiDataLiKey}>
 																			{key}
 																		</span>
-																<span className={style.datasetLiDataLiValue}>
+																		<span
+																			className={style.datasetLiDataLiValue}
+																		>
 																			{item.meta[key]}
 																		</span>
 																	</div>
@@ -341,9 +351,17 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 									);
 								})}
 							</div>
+
 							<div className={style.pagination}>
-						<MyPagination page={page} pageChange={pageChange} count={count} />
+								<MyPagination
+									page={page}
+									pageChange={pageChange}
+									count={count}
+								/>
 							</div>
+						</>
+					)}
+					{list.length === 0 && <NoData></NoData>}
 				</div>
 			</div>
 			<div className={style.foot}>