feat: 丰富loading组件使用方法

src/components/mui/MyCircularProgress.tsx

-// 局部loading组件  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
+// 局部loading组件
+
+// 使用方法1  用一个div包裹children，在children上加一个蒙层和loading
+// <MyCircularProgress loading={loading}>children</MyCircularProgress>
+
+// 使用方法2  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
+// <MyCircularProgress loading={loading}/>
 import CircularProgress from "@mui/material/CircularProgress";
 
 type IMyCircularProgressProps = {
 	loading: boolean;
+	children?: React.ReactNode;
 	minHeight?: string;
 	maxHeight?: string;
 	zIndex?: number;
@@ -14,18 +21,56 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
 		minHeight = "none",
 		maxHeight = "100vh",
 		zIndex = "100",
+		children,
 	} = props;
 	if (loading) {
+		if (children) {
 			return (
 				<div
 					style={{
-					minHeight: minHeight,
+						position: "relative",
+					}}
+				>
+					<div
+						style={{
 							width: "100%",
 							height: "100%",
 							position: "absolute",
 							top: 0,
+							opacity: 0.6,
+							background: "#fff",
 							zIndex: zIndex,
 						}}
+					></div>
+					<div
+						style={{
+							width: "100%",
+							height: "100%",
+							display: "flex",
+							justifyContent: "center",
+							alignItems: "center",
+							position: "absolute",
+							top: 0,
+							zIndex: zIndex,
+							maxHeight: maxHeight,
+						}}
+					>
+						<CircularProgress></CircularProgress>
+					</div>
+					{children}
+				</div>
+			);
+		} else {
+			return (
+				<div
+					style={{
+						width: "100%",
+						height: "100%",
+						position: "absolute",
+						top: 0,
+						zIndex: zIndex,
+						minHeight: minHeight,
+					}}
 				>
 					<div
 						style={{
@@ -41,16 +86,17 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
 						style={{
 							width: "100%",
 							height: "100%",
-						maxHeight: maxHeight,
 							display: "flex",
 							justifyContent: "center",
 							alignItems: "center",
+							maxHeight: maxHeight,
 						}}
 					>
 						<CircularProgress></CircularProgress>
 					</div>
 				</div>
 			);
+		}
 	} else {
 		return null;
 	}