UI: 样式优化

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css

-.addTemplateBox {
-	width: 100vw;
-	height: 100vh;
-	position: fixed;
-	top: 0;
-	left: 0;
-	background-color: rgba(0, 0, 0, 0.78);
-	z-index: 100;
-	display: flex;
-	flex-direction: column;
-}
-.closeBox {
-	display: flex;
-	justify-content: flex-end;
-	height: 40px;
-	align-items: center;
-	/* background-color: ; */
-}
 .content {
 	flex: 1;
 	background-color: #fff;

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

 import { useEffect, useState, useMemo, useCallback } from "react";
 import style from "./index.module.css";
 import classNames from "classnames";
-import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 import { Box, Typography } from "@mui/material";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SearchIcon from "@mui/icons-material/Search";
 import MyButton from "@/components/mui/MyButton";
 import OutlinedInput from "@mui/material/OutlinedInput";
+import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
 import Checkbox from "@mui/material/Checkbox";
 import useMyRequest from "@/hooks/useMyRequest";
 import AddIcon from "@mui/icons-material/Add";
-import { useStores } from "@/store";
 import WorkFlowEdit from "@/views/WorkFlowEdit";
 import _ from "lodash";
-import { observer } from "mobx-react-lite";
 import noData from "../../../../../../assets/project/noTemplate.svg";
 import { ICustomTemplate } from "../../interface";
 import { useMessage } from "@/components/MySnackbar";
@@ -21,11 +19,12 @@ import {
 	getAddWorkbenchTemplate,
 	addWorkbenchTemplate,
 } from "@/api/workbench_api";
-import { toJS } from "mobx";
 
 type IAddTemplateProps = {
 	setShowAddTemplate: any;
 	getTemplateInfo: any;
+	projectId: string;
+	productId: string;
 };
 
 const radioOptions = [
@@ -39,12 +38,9 @@ const radioOptions = [
 	},
 ];
 
-const AddTemplate = observer((props: IAddTemplateProps) => {
-	const { currentProjectStore } = useStores();
+const AddTemplate = (props: IAddTemplateProps) => {
 	const Message = useMessage();
-	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
-	const { setShowAddTemplate, getTemplateInfo } = props;
+	const { setShowAddTemplate, getTemplateInfo, projectId, productId } = props;
 	const [title, setTitle] = useState("");
 
 	/** 可增加模板列表 */
@@ -75,7 +71,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 		onSuccess: (result: any) => {
 			Message.success("添加成功");
 			setSelectTemplateData([]);
-			setShowAddTemplate(false);
+			setShowAddTemplate();
 			getTemplateInfo({
 				projectId: projectId as string,
 			});
@@ -151,7 +147,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 		templateType,
 		title,
 	]);
-	// title,
 
 	useEffect(() => {
 		getAddTemplateListFun();
@@ -168,15 +163,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 	}, [addTemplateList, templateType]);
 
 	return (
-		<div className={style.addTemplateBox}>
-			<div className={style.closeBox}>
-				<CloseOutlinedIcon
-					sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
-					onClick={() => {
-						setShowAddTemplate(false);
-					}}
-				/>
-			</div>
+		<FullScreenDrawer handleClose={setShowAddTemplate}>
 			<div className={style.content}>
 				<Typography
 					sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
@@ -336,8 +323,8 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 					}}
 				/>
 			) : null}
-		</div>
+		</FullScreenDrawer>
 	);
-});
+};
 
 export default AddTemplate;

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -32,7 +32,7 @@ import styles from "./index.module.css";
 const ProjectMembers = observer(() => {
 	const { currentProjectStore } = useStores();
 	const projectIdData = toJS(currentProjectStore.currentProjectInfo.id);
-
+	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const isPass = usePass();
 
 	/** 搜索模板名称 */
@@ -187,8 +187,10 @@ const ProjectMembers = observer(() => {
 
 			{showAddTemplate && (
 				<AddTemplate
-					setShowAddTemplate={setShowAddTemplate}
+					setShowAddTemplate={() => setShowAddTemplate(false)}
 					getTemplateInfo={getTemplateInfo}
+					productId={productId as string}
+					projectId={projectIdData as string}
 				/>
 			)}