feat: 优化局部loading组件

src/components/mui/MyCircularProgress.tsx

@@ -4,12 +4,14 @@
 // <MyCircularProgress loading={loading}>children</MyCircularProgress>
 
 // 使用方法2  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
-// <MyCircularProgress loading={loading}/>
+// <div style={{ position: "relative", }} >
+//   <MyCircularProgress loading={loading}/>
+// </div>
 import CircularProgress from "@mui/material/CircularProgress";
 
 type IMyCircularProgressProps = {
-	loading: boolean;
-	children?: React.ReactNode;
+	loading: boolean; // 是否处于loading状态
+	children?: React.ReactNode; // 包裹的子元素
 	minHeight?: string;
 	maxHeight?: string;
 	zIndex?: number;
@@ -61,41 +63,45 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
 				</div>
 			);
 		} else {
-			return (
-				<div
-					style={{
-						width: "100%",
-						height: "100%",
-						position: "absolute",
-						top: 0,
-						zIndex: zIndex,
-						minHeight: minHeight,
-					}}
-				>
+			if (children) {
+				return children;
+			} else {
+				return (
 					<div
 						style={{
 							width: "100%",
 							height: "100%",
 							position: "absolute",
 							top: 0,
-							opacity: 0.6,
-							background: "#fff",
-						}}
-					></div>
-					<div
-						style={{
-							width: "100%",
-							height: "100%",
-							display: "flex",
-							justifyContent: "center",
-							alignItems: "center",
-							maxHeight: maxHeight,
+							zIndex: zIndex,
+							minHeight: minHeight,
 						}}
 					>
-						<CircularProgress></CircularProgress>
+						<div
+							style={{
+								width: "100%",
+								height: "100%",
+								position: "absolute",
+								top: 0,
+								opacity: 0.6,
+								background: "#fff",
+							}}
+						></div>
+						<div
+							style={{
+								width: "100%",
+								height: "100%",
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center",
+								maxHeight: maxHeight,
+							}}
+						>
+							<CircularProgress></CircularProgress>
+						</div>
 					</div>
-				</div>
-			);
+				);
+			}
 		}
 	} else {
 		return null;