feat: 新增局部loading 组件

src/components/mui/MyCircularProgress.tsx

+// 局部loading组件  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
+import CircularProgress from "@mui/material/CircularProgress";
+
+type IMyCircularProgressProps = {
+	loading: boolean;
+	minHeight?: string;
+	maxHeight?: string;
+	zIndex?: number;
+};
+
+const MyCircularProgress = (props: IMyCircularProgressProps) => {
+	const {
+		loading,
+		minHeight = "none",
+		maxHeight = "100vh",
+		zIndex = "100",
+	} = props;
+	if (loading) {
+		return (
+			<div
+				style={{
+					minHeight: minHeight,
+					width: "100%",
+					height: "100%",
+					position: "absolute",
+					top: 0,
+					zIndex: zIndex,
+				}}
+			>
+				<div
+					style={{
+						width: "100%",
+						height: "100%",
+						position: "absolute",
+						top: 0,
+						opacity: 0.6,
+						background: "#fff",
+					}}
+				></div>
+				<div
+					style={{
+						width: "100%",
+						height: "100%",
+						maxHeight: maxHeight,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<CircularProgress></CircularProgress>
+				</div>
+			</div>
+		);
+	} else {
+		return null;
+	}
+};
+
+export default MyCircularProgress;

src/components/mui/MyPopover.tsx

@@ -11,75 +11,75 @@ import Popover, { PopoverProps } from "@mui/material/Popover";
 import Typography from "@mui/material/Typography";
 
 interface IProps extends Omit<PopoverProps, "open"> {
-  /** 触发行为 */
-  trigger?: "hover" | "click";
-  /** 触发dom */
-  children: React.ReactNode;
-  /** 显示内容 */
-  content: React.ReactNode;
+	/** 触发行为 */
+	trigger?: "hover" | "click";
+	/** 触发dom */
+	children: React.ReactNode;
+	/** 显示内容 */
+	content: React.ReactNode;
 }
 
 const MyPopover = (props: IProps) => {
-  const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+	const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
 
-  const {
-    trigger = "click",
-    children,
-    content,
-    anchorOrigin,
-    transformOrigin,
-  } = props;
+	const {
+		trigger = "click",
+		children,
+		content,
+		anchorOrigin,
+		transformOrigin,
+	} = props;
 
-  const handlePopoverOpen = (event: any) => {
-    setAnchorEl(event.currentTarget);
-  };
+	const handlePopoverOpen = (event: any) => {
+		setAnchorEl(event.currentTarget);
+	};
 
-  const handelClick = (event: any) => {
-    setAnchorEl(event?.currentTarget);
-  };
+	const handelClick = (event: any) => {
+		setAnchorEl(event?.currentTarget);
+	};
 
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
 
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : undefined;
 
-  return (
-    <div>
-      <Typography
-        aria-owns={id}
-        onClick={trigger === "click" ? handelClick : undefined}
-        onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
-        onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
-      >
-        {children}
-      </Typography>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handlePopoverClose}
-        sx={{
-          pointerEvents: trigger === "hover" ? "none" : undefined,
-        }}
-        anchorOrigin={
-          anchorOrigin || {
-            vertical: "bottom",
-            horizontal: "center",
-          }
-        }
-        transformOrigin={
-          transformOrigin || {
-            vertical: "top",
-            horizontal: "center",
-          }
-        }
-      >
-        <Typography sx={{ p: 1 }}>{content}</Typography>
-      </Popover>
-    </div>
-  );
+	return (
+		<div>
+			<Typography
+				aria-owns={id}
+				onClick={trigger === "click" ? handelClick : undefined}
+				onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
+				onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
+			>
+				{children}
+			</Typography>
+			<Popover
+				id={id}
+				open={open}
+				anchorEl={anchorEl}
+				onClose={handlePopoverClose}
+				sx={{
+					pointerEvents: trigger === "hover" ? "none" : undefined,
+				}}
+				anchorOrigin={
+					anchorOrigin || {
+						vertical: "bottom",
+						horizontal: "center",
+					}
+				}
+				transformOrigin={
+					transformOrigin || {
+						vertical: "top",
+						horizontal: "center",
+					}
+				}
+			>
+				<Typography sx={{ p: 1 }}>{content}</Typography>
+			</Popover>
+		</div>
+	);
 };
 
 export default MyPopover;

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

@@ -12,6 +12,9 @@
 	font-weight: 600;
 	margin-bottom: 24px;
 }
+.projectDataHeader {
+	position: relative;
+}
 .projectDataButtonAndSearch {
 	display: flex;
 	justify-content: space-between;

src/views/Project/ProjectData/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
 import classnames from "classnames";
 import { IconButton } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import MyTable from "@/components/mui/MyTable";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
@@ -26,7 +25,6 @@ import { useLocation } from "react-router-dom";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SeeDataset from "./SeeDataset";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
-import MyInput from "@/components/mui/MyInput";
 import MyButton from "@/components/mui/MyButton";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 
@@ -491,10 +489,10 @@ const ProjectData = observer(() => {
 							{index === 0
 								? "ProjectData"
 								: index > pathArr.length - 4
-									? item
-									: ""}
+								? item
+								: ""}
 							{index === pathArr.length - 1 ||
-								(index <= pathArr.length - 4 && index > 0) ? null : (
+							(index <= pathArr.length - 4 && index > 0) ? null : (
 								<i className={style.showPathI}>{">"}</i>
 							)}
 							{index === 1 && "..."}