feat: 弹窗组件替换

src/components/BusinessComponents/FileSelect/index.tsx

 import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
-import MyDialog from "../../mui/Dialog";
+import MyDialog from "../../mui/MyDialog";
 import { useStores } from "@/store";
 import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";

src/components/BusinessComponents/NoProject/NoProject.tsx

@@ -3,14 +3,11 @@ import noData from "@/assets/project/noData.svg";
 import { Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import AddProject from "@/views/Project/components/AddProject";
-import React from "react";
+import React, { useState } from "react";
 
 const NoProject = () => {
-  let addProjectRef: any = React.createRef();
-
-  const handleClickOpen = () => {
-    addProjectRef.current.handleClickOpen();
-  };
+	// 新建弹窗显示控制
+	const [addOpen, setAddOpen] = useState(false);
 
 	return (
 		<div className={style.noProject}>
@@ -22,12 +19,12 @@ const NoProject = () => {
 				size="large"
 				className={style.button}
 				startIcon={<AddIcon />}
-        onClick={handleClickOpen}
+				onClick={() => setAddOpen(true)}
 				style={{ backgroundColor: "#1370ff", color: "#fff" }}
 			>
 				创建项目
 			</Button>
-      <AddProject onRef={addProjectRef} />
+			<AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
 		</div>
 	);
 };

src/components/mui/DeleteMyDialog.tsx

+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  IconButton,
+  DialogTitle,
+} from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import CloseIcon from "@mui/icons-material/Close";
+
+import { useState } from "react";
+import { useImperativeHandle } from "react";
+const MyDialog = (props: any) => {
+  const [open, setOpen] = useState(false);
+  const {
+    title,
+    handleSubmit,
+    submitloading,
+    submitStyle = { backgroundColor: "#1370FF" },
+    showCloseButton = true,
+    submitText = "确定",
+  } = props;
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event: any = {}, reason: any = "other") => {
+    // 点击弹窗外不关闭弹窗
+    if (reason === "backdropClick") {
+      return;
+    }
+    setOpen(false);
+  };
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      handleClickOpen: handleClickOpen,
+      handleClose: handleClose,
+    };
+  });
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      className="aaa"
+      aria-labelledby="form-dialog-title"
+      sx={{
+        "& .MuiDialog-container": {
+          "& .MuiPaper-root": {
+            // 设置最大宽度， 实际宽度让子元素撑大
+            maxWidth: "1920px",
+          },
+        },
+      }}
+    >
+      {title && (
+        <DialogTitle id="form-dialog-title" sx={{ fontWeight: "600" }}>
+          {title}
+        </DialogTitle>
+      )}
+      <DialogContent
+        sx={{
+          minWidth: "400px",
+        }}
+      >
+        {props.children}
+        <IconButton
+          aria-label="delete"
+          style={{ position: "absolute", top: "10px", right: "12px" }}
+          onClick={handleClose}
+        >
+          <CloseIcon style={{ color: "#C2C6CC" }} />
+        </IconButton>
+      </DialogContent>
+      <DialogActions style={{ padding: "16px 24px" }}>
+        {showCloseButton && (
+          <Button
+            onClick={handleClose}
+            color="inherit"
+            variant="contained"
+            style={{ color: "#1E2633", backgroundColor: "#fff" }}
+            size="small"
+          >
+            取消
+          </Button>
+        )}
+        <LoadingButton
+          loading={submitloading}
+          onClick={handleSubmit}
+          color="primary"
+          variant="contained"
+          style={submitStyle}
+          size="small"
+        >
+          {submitText}
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default MyDialog;

src/components/mui/Dialog.tsx

-import React from "react";
-
-import {
-	Button,
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogTitle,
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-
-export interface IDialogProps {
-	/** 自定义类名 */
-	className?: string;
-	/** 自定义样式 */
-	style?: React.CSSProperties;
-	/** 弹窗的标题 */
-	title?: string;
-	/** 是否显示弹窗 */
-	open: boolean;
-	isHideHeader?: boolean;
-	/** 是否隐藏弹窗底部按钮部分 */
-	isHideFooter?: boolean;
-	/** 自定义底部按钮 */
-	footerRender?: () => React.ReactNode;
-	/** 是否显示取消按钮 */
-	showCancel?: boolean;
-	/** 是否显示确定按钮 */
-	showConfirm?: boolean;
-	/** 关闭弹窗时的回调函数 */
-	onClose?: () => void;
-	/** 点击确定按钮时的回调函数 */
-	onConfirm?: () => void;
-	/** 取消按钮文案 */
-	cancelText?: string;
-	/** 确认按钮文案 */
-	okText?: string;
-	/** 是否禁用确认按钮 */
-	disabledConfirm?: boolean;
-	children: React.ReactNode;
-	/** 点击遮罩是否关闭  默认为false*/
-	clickMaskClose?: boolean;
-}
-
-const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
-	const {
-		title,
-		open,
-		style,
-		onClose,
-		onConfirm,
-		isHideFooter,
-		isHideHeader,
-		children,
-		footerRender,
-		className,
-		showCancel = true,
-		/** 是否显示确定按钮 */
-		showConfirm = true,
-		cancelText,
-		okText,
-		disabledConfirm,
-		clickMaskClose = false,
-	} = props;
-
-	const handelClose = (
-		event: {},
-		reason: "backdropClick" | "escapeKeyDown"
-	) => {
-		if (reason === "backdropClick" && !clickMaskClose) {
-			return;
-		}
-		onClose && onClose();
-	};
-
-	const Footer = () => {
-		if (isHideFooter) return null;
-		return footerRender ? (
-			footerRender()
-		) : (
-			<DialogActions style={{ padding: "0 24px 24px 24px" }}>
-				{showCancel ? (
-					<Button onClick={onClose} variant="outlined" size="small">
-						{cancelText || "取消"}
-					</Button>
-				) : null}
-				{showConfirm ? (
-					<Button
-						onClick={onConfirm}
-						variant="contained"
-						size="small"
-						disabled={disabledConfirm}
-					>
-						{okText || "确定"}
-					</Button>
-				) : null}
-			</DialogActions>
-		);
-	};
-	return (
-		<Dialog
-			open={open}
-			onClose={handelClose}
-			style={style}
-			className={className}
-			aria-labelledby="alert-dialog-title"
-			aria-describedby="alert-dialog-description"
-			sx={{
-				"& .MuiDialog-container": {
-					"& .MuiPaper-root": {
-						// 设置最大宽度， 实际宽度让子元素撑大
-						maxWidth: "1920px",
-					},
-				},
-			}}
-		>
-			{isHideHeader ? null : (
-				<DialogTitle id="alert-dialog-title">
-					<div
-						style={{
-							display: "flex",
-							justifyContent: "space-between",
-							alignItems: "center",
-						}}
-					>
-						<span>{title}</span>
-						<CloseIcon
-							onClick={onClose}
-							style={{ color: "#C2C6CC", cursor: "pointer" }}
-						/>
-					</div>
-				</DialogTitle>
-			)}
-			<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
-			{Footer()}
-		</Dialog>
-	);
-};
-
-export default MyDialog;

src/components/mui/MyDialog.tsx

+import React from "react";
+
 import {
 	Button,
 	Dialog,
 	DialogActions,
 	DialogContent,
-  IconButton,
 	DialogTitle,
 } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
 import CloseIcon from "@mui/icons-material/Close";
 
-import { useState } from "react";
-import { useImperativeHandle } from "react";
-const MyDialog = (props: any) => {
-  const [open, setOpen] = useState(false);
+export interface IDialogProps {
+	/** 自定义类名 */
+	className?: string;
+	/** 自定义样式 */
+	style?: React.CSSProperties;
+	/** 弹窗的标题 */
+	title?: string;
+	/** 是否显示弹窗 */
+	open: boolean;
+	isHideHeader?: boolean;
+	/** 是否隐藏弹窗底部按钮部分 */
+	isHideFooter?: boolean;
+	/** 自定义底部按钮 */
+	footerRender?: () => React.ReactNode;
+	/** 是否显示取消按钮 */
+	showCancel?: boolean;
+	/** 是否显示确定按钮 */
+	showConfirm?: boolean;
+	/** 关闭弹窗时的回调函数 */
+	onClose?: () => void;
+	/** 点击确定按钮时的回调函数 */
+	onConfirm?: () => void;
+	/** 取消按钮文案 */
+	cancelText?: string;
+	/** 确认按钮文案 */
+	okText?: string;
+	/** 是否禁用确认按钮 */
+	disabledConfirm?: boolean;
+	children: React.ReactNode;
+	/** 点击遮罩是否关闭  默认为false*/
+	clickMaskClose?: boolean;
+	/** 确认按钮样式*/
+	okSx?: any;
+}
+
+const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 	const {
 		title,
-    handleSubmit,
-    submitloading,
-    submitStyle = { backgroundColor: "#1370FF" },
-    showCloseButton = true,
-    submitText = "确定",
+		open,
+		style,
+		onClose,
+		onConfirm,
+		isHideFooter,
+		isHideHeader,
+		children,
+		footerRender,
+		className,
+		showCancel = true,
+		/** 是否显示确定按钮 */
+		showConfirm = true,
+		cancelText,
+		okText,
+		disabledConfirm,
+		clickMaskClose = false,
+		okSx = {},
 	} = props;
 
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (event: any = {}, reason: any = "other") => {
-    // 点击弹窗外不关闭弹窗
-    if (reason === "backdropClick") {
+	const handelClose = (
+		event: {},
+		reason: "backdropClick" | "escapeKeyDown"
+	) => {
+		if (reason === "backdropClick" && !clickMaskClose) {
 			return;
 		}
-    setOpen(false);
+		onClose && onClose();
 	};
 
-  useImperativeHandle(props.onRef, () => {
-    return {
-      handleClickOpen: handleClickOpen,
-      handleClose: handleClose,
+	const Footer = () => {
+		if (isHideFooter) return null;
+		return footerRender ? (
+			footerRender()
+		) : (
+			<DialogActions style={{ padding: "0 24px 24px 24px" }}>
+				{showCancel ? (
+					<Button onClick={onClose} variant="outlined" size="small">
+						{cancelText || "取消"}
+					</Button>
+				) : null}
+				{showConfirm ? (
+					<Button
+						onClick={onConfirm}
+						variant="contained"
+						size="small"
+						disabled={disabledConfirm}
+						sx={{ ...okSx }}
+					>
+						{okText || "确定"}
+					</Button>
+				) : null}
+			</DialogActions>
+		);
 	};
-  });
-
 	return (
 		<Dialog
 			open={open}
-      onClose={handleClose}
-      className="aaa"
-      aria-labelledby="form-dialog-title"
+			onClose={handelClose}
+			style={style}
+			className={className}
+			aria-labelledby="alert-dialog-title"
+			aria-describedby="alert-dialog-description"
 			sx={{
 				"& .MuiDialog-container": {
 					"& .MuiPaper-root": {
@@ -56,48 +118,25 @@ const MyDialog = (props: any) => {
 				},
 			}}
 		>
-      {title && (
-        <DialogTitle id="form-dialog-title" sx={{ fontWeight: "600" }}>
-          {title}
-        </DialogTitle>
-      )}
-      <DialogContent
-        sx={{
-          minWidth: "400px",
+			{isHideHeader ? null : (
+				<DialogTitle id="alert-dialog-title">
+					<div
+						style={{
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
 						}}
 					>
-        {props.children}
-        <IconButton
-          aria-label="delete"
-          style={{ position: "absolute", top: "10px", right: "12px" }}
-          onClick={handleClose}
-        >
-          <CloseIcon style={{ color: "#C2C6CC" }} />
-        </IconButton>
-      </DialogContent>
-      <DialogActions style={{ padding: "16px 24px" }}>
-        {showCloseButton && (
-          <Button
-            onClick={handleClose}
-            color="inherit"
-            variant="contained"
-            style={{ color: "#1E2633", backgroundColor: "#fff" }}
-            size="small"
-          >
-            取消
-          </Button>
+						<span>{title}</span>
+						<CloseIcon
+							onClick={onClose}
+							style={{ color: "#C2C6CC", cursor: "pointer" }}
+						/>
+					</div>
+				</DialogTitle>
 			)}
-        <LoadingButton
-          loading={submitloading}
-          onClick={handleSubmit}
-          color="primary"
-          variant="contained"
-          style={submitStyle}
-          size="small"
-        >
-          {submitText}
-        </LoadingButton>
-      </DialogActions>
+			<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
+			{Footer()}
 		</Dialog>
 	);
 };

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

 import React, { useState, useEffect } from "react";
 
 import { TextField, Button } from "@mui/material";
-import MyDialog from "@/components/mui/Dialog";
+import MyDialog from "@/components/mui/MyDialog";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
 import CloudEController from "@/api/fileserver/CloudEController";

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

 import React, { useMemo } from "react";
 
-import MyDialog from "@/components/mui/Dialog";
+import MyDialog from "@/components/mui/MyDialog";
 import { useMessage } from "@/components/MySnackbar";
 import { getDataFileDelPackage } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";

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

 import React, { useState, useCallback, useMemo, useEffect } from "react";
 
 import style from "./index.module.css";
-import MyDialog from "@/components/mui/Dialog";
+import MyDialog from "@/components/mui/MyDialog";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
 import { useMessage } from "@/components/MySnackbar";

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

 import React, { useState, useCallback, useMemo, useEffect } from "react";
 
 import style from "./index.module.css";
-import MyDialog from "@/components/mui/Dialog";
+import MyDialog from "@/components/mui/MyDialog";
 import { Button } from "@mui/material";
 import { uuid } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -50,6 +50,8 @@ const BaseInfo = observer(() => {
 	const currentUserName = JSON.parse(
 		localStorage.getItem("userInfo") || "{}"
 	).name;
+	// 弹窗显示控制
+	const [dialogOpen, setDialogOpen] = useState(false);
 	// 是否拥有编辑权限
 	const hasEditAuth = useMemo(() => {
 		if (!currentUserName) {
@@ -193,12 +195,10 @@ const BaseInfo = observer(() => {
 		}
 	};
 
-	const { run: deleteProjectRun, loading: deleteLoading } = useMyRequest(
-		deleteProject,
-		{
+	const { run: deleteProjectRun } = useMyRequest(deleteProject, {
 		onSuccess: async (result: any) => {
 			message.success("删除成功");
-				DialogRef.current.handleClose();
+			setDialogOpen(false);
 			const projectList = await getProjectList();
 			currentProjectStore.setProjectList(projectList);
 			// 项目删完了
@@ -207,9 +207,7 @@ const BaseInfo = observer(() => {
 				localStorage.setItem("fileServerEndPoint", "");
 				setProjectInfo({});
 			} else {
-					projectList[0].filetoken = getFiletokenAccordingToId(
-						projectList[0].id
-					);
+				projectList[0].filetoken = getFiletokenAccordingToId(projectList[0].id);
 				currentProjectStore.changeProject(projectList[0]);
 				setFileServerEndPointLocalStorage(projectList[0].zoneId);
 				getFiletokenAccordingToId(projectList[0].id).then((res) => {
@@ -219,15 +217,7 @@ const BaseInfo = observer(() => {
 				setProjectInfo(projectList[0]);
 			}
 		},
-		}
-	);
-
-	let DialogRef: any = React.createRef();
-	// 显示删除弹窗
-	const handleClickDelete = () => {
-		DialogRef.current.handleClickOpen();
-		setDeleteProjectName("");
-	};
+	});
 
 	const deleteProjectNameChange = (e: any) => {
 		setDeleteProjectName(e.target.value);
@@ -356,7 +346,7 @@ const BaseInfo = observer(() => {
 					<Button
 						variant="contained"
 						className={style.updateButton}
-						onClick={handleClickDelete}
+						onClick={() => setDialogOpen(true)}
 						style={{
 							backgroundColor: "#fff",
 							color: "#FF4E4E",
@@ -367,11 +357,11 @@ const BaseInfo = observer(() => {
 					</Button>
 				</div>
 				<MyDialog
-					handleSubmit={handleSubmitDelete}
-					onRef={DialogRef}
+					open={dialogOpen}
+					onConfirm={handleSubmitDelete}
+					onClose={() => setDialogOpen(false)}
 					title="删除项目"
-					submitloading={deleteLoading}
-					submitStyle={{ background: "#FF4E4E", color: "#fff" }}
+					okSx={{ background: "#FF4E4E", color: "#fff" }}
 				>
 					<div className={style.deleteBox}>
 						<div className={style.deleteText1}>

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

@@ -11,7 +11,7 @@ import { observer } from "mobx-react-lite";
 import _ from "lodash";
 
 import Table from "@/components/Material.Ui/Table";
-import Dialog from "@/components/mui/Dialog";
+import Dialog from "@/components/mui/MyDialog";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";

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

@@ -12,7 +12,7 @@ import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 
 import MySelect, { IOption } from "@/components/mui/MySelect";
-import Dialog from "@/components/mui/Dialog";
+import Dialog from "@/components/mui/MyDialog";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store/index";
 import { IDialogInfo } from "../interface";

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

@@ -8,7 +8,7 @@
  */
 // import Dialog from "@/components/Material.Ui/Dialog";
 import { IResponse, useHttp } from "@/api/http";
-import Dialog from "@/components/mui/Dialog";
+import Dialog from "@/components/mui/MyDialog";
 import { useMessage } from "@/components/MySnackbar";
 import { useStores } from "@/store";
 import { toJS } from "mobx";

src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx

 import { memo } from "react";
 import { Box, Typography } from "@mui/material";
-import Dialog from "@/components/mui/Dialog";
+import Dialog from "@/components/mui/MyDialog";
 
 const SimpleDialog = (props: any) => {
 	const { openDialog, closeDialog, onConfirm, text, title } = props;

src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@/components/mui/Button";
-import Dialog from "@/components/mui/Dialog";
+import Dialog from "@/components/mui/MyDialog";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SearchIcon from "@mui/icons-material/Search";

src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx

 import { memo } from "react";
 import { Box, Typography } from "@mui/material";
-import Dialog from "@/components/mui/Dialog";
+import Dialog from "@/components/mui/MyDialog";
 
 const SimpleDialog = (props: any) => {
 	const { openDialog, closeDialog, onConfirm, text, title } = props;

src/views/Project/components/AddProject/index.tsx

 import style from "./index.module.css";
 import { TextField, MenuItem } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
-import React, { useState, useEffect, useImperativeHandle } from "react";
+import React, { useState, useEffect } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
 import { hpczone, addProject } from "@/api/project_api";
 import { useMessage } from "@/components/MySnackbar";
@@ -18,10 +18,15 @@ type zoneIdOption = {
 	name: string;
 };
 
-const AddProject = (props: any) => {
+type IAddProjectProps = {
+	addOpen: boolean;
+	setAddOpen: any;
+};
+
+const AddProject = (props: IAddProjectProps) => {
+	const { addOpen, setAddOpen } = props;
 	const { currentProjectStore } = useStores();
 	const message = useMessage();
-	let DialogRef: any = React.createRef();
 	const [name, setName] = useState("");
 	const [nameCheck, setNameCheck] = useState({
 		error: false,
@@ -34,12 +39,6 @@ const AddProject = (props: any) => {
 	});
 	const [zoneId, setZoneId] = useState("");
 	const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
-	const [submitloading, setSubmitloading] = useState(false);
-	useImperativeHandle(props.onRef, () => {
-		return {
-			handleClickOpen: handleClickOpen,
-		};
-	});
 
 	// 设置计算区
 	const { run } = useMyRequest(hpczone, {
@@ -49,13 +48,9 @@ const AddProject = (props: any) => {
 		},
 	});
 	const { run: addProjectRun } = useMyRequest(addProject, {
-		onBefore: () => {
-			setSubmitloading(true);
-		},
 		onSuccess: async (result: any) => {
 			if (result.data) {
-				setSubmitloading(false);
-				DialogRef.current.handleClose();
+				setAddOpen(false);
 				message.success("新建项目成功");
 				const projectList = await getProjectList();
 				currentProjectStore.setProjectList(projectList);
@@ -74,7 +69,7 @@ const AddProject = (props: any) => {
 			}
 		},
 		onError: () => {
-			setSubmitloading(false);
+			setAddOpen(false);
 		},
 	});
 
@@ -82,18 +77,15 @@ const AddProject = (props: any) => {
 		run();
 	}, [run]);
 
-	const handleClickOpen = () => {
-		DialogRef.current.handleClickOpen();
-		initData();
-	};
-
-	const initData = () => {
+	useEffect(() => {
+		if (addOpen) {
 			setName("");
 			setDesc("");
 			if (zoneIdOptions.length > 0) {
 				setZoneId(zoneIdOptions[0].id);
 			}
-	};
+		}
+	}, [addOpen, setZoneId, zoneIdOptions]);
 
 	const checkName = (name: string) => {
 		if (name) {
@@ -167,10 +159,10 @@ const AddProject = (props: any) => {
 
 	return (
 		<MyDialog
-			handleSubmit={handleSubmit}
-			onRef={DialogRef}
+			open={addOpen}
+			onConfirm={handleSubmit}
+			onClose={() => setAddOpen(false)}
 			title="新建项目"
-			submitloading={submitloading}
 		>
 			<div className={style.formBox} onClick={handleFromBox}>
 				<TextField

src/views/Project/components/CurrentProject/index.tsx

@@ -14,12 +14,9 @@ import {
 
 const CurrentProject = observer(() => {
 	const { currentProjectStore } = useStores();
-  let addProjectRef: any = React.createRef();
 	const [projectListOpen, setProjectListOpen] = useState(false);
-  // const [addProjectOpen, setAddProjectOpen] = useState(false);
 	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
-  // 结合handleShowProjectList中的event.nativeEvent.stopImmediatePropagation();实现点击空白区域隐藏项目列表
 	useEffect(() => {
 		document.addEventListener("click", (e) => {
 			setProjectListOpen(false);
@@ -44,10 +41,13 @@ const CurrentProject = observer(() => {
 	};
 
 	const openAddProject = () => {
-    addProjectRef.current.handleClickOpen();
+		setAddOpen(true);
 		setProjectListOpen(false);
 	};
 
+	// 新建弹窗显示控制
+	const [addOpen, setAddOpen] = useState(false);
+
 	return (
 		<div>
 			<div
@@ -72,7 +72,7 @@ const CurrentProject = observer(() => {
 					style={{ fontSize: 12 }}
 				/>
 			</div>
-      <AddProject onRef={addProjectRef} />
+			<AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
 			<Popper
 				id={id}
 				open={projectListOpen}

src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { saveUserSpec } from "@/api/workbench_api";
-import MyDialog from "@/components/mui/Dialog";
+import MyDialog from "@/components/mui/MyDialog";
 import MyInput from "@/components/mui/MyInput";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useState } from "react";