Merge branch 'feat-20220801' of http://120.77.149.83/root/bkunyun into feat-20220801

src/components/mui/MyDialog.tsx

@@ -122,12 +122,16 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					"& .MuiPaper-root": {
 						// 设置最大宽度， 实际宽度让子元素撑大
 						maxWidth: "1920px",
+						borderRadius: "8px"
 					},
 				},
 			}}
 		>
 			{isHideHeader ? null : (
-				<DialogTitle id="alert-dialog-title">
+				<DialogTitle
+					id="alert-dialog-title"
+					sx={{ padding: "20px 24px" }}
+				>
 					<div
 						style={{
 							display: "flex",
@@ -136,10 +140,10 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 							fontWeight: 600,
 						}}
 					>
-						<span style={{fontSize: 16, lineHeight: '24px', color: '#1E2633'}}>{title}</span>
+						<span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
 						<CloseIcon
 							onClick={onClose}
-							sx={{ color: "#C2C6CC", cursor: "pointer",  ":hover": { background: "#f0f2f5", borderRadius:'2px' } }}
+							sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
 						/>
 					</div>
 				</DialogTitle>

src/components/mui/MyPopconfirm.tsx

@@ -68,7 +68,8 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 				zIndex: 2000,
 				bgcolor: "#fff",
 				minWidth: "200px",
-				borderRadius: "2px",
+				borderRadius: "4px",
+				fontSize:"14px",
 				padding: "20px 16px",
 				boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
 			}}

src/views/CustomOperator/components/OperatorList/index.module.css

@@ -81,3 +81,12 @@
 	height: 2px;
 	background-color: rgba(86, 92, 102, 1);
 }
+.loading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	line-height: 20px;
+	font-size: 12px;
+	color: rgba(86, 92, 102, 1);
+	padding: 4px;
+}

src/views/CustomOperator/components/OperatorList/index.tsx

@@ -5,6 +5,7 @@ import cloneDeep from "lodash/cloneDeep";
 import { getScrollLoader } from "@/utils/util";
 import { useState, useCallback, useEffect } from "react";
 import { getOperatorList } from "@/api/project_api";
+import CircularProgress from "@mui/material/CircularProgress";
 import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
@@ -17,7 +18,6 @@ type IProps = {
 	setOperatorList: any;
 };
 
-let isInRequest = false;
 const OperatorList = (props: IProps) => {
 	const { operatorList, setOperatorList } = props; // 流程图中流算子列表
 	const { currentProjectStore } = useStores();
@@ -27,11 +27,9 @@ const OperatorList = (props: IProps) => {
 	const [dragItem, setDragItem] = useState<any>({}); // 拖拽的算子
 	const [page, setPage] = useState(0); //
 	const [isLastPage, setIsLastPage] = useState(false);
-	const { run: getOperatorListRun } = useMyRequest(getOperatorList, {
+	// todo 加载中   没有更多了样式
+	const { run: getOperatorListRun, loading } = useMyRequest(getOperatorList, {
 		onSuccess: (res) => {
-			isInRequest = false;
-
-			console.log("res", res);
 			let arr = res?.data?.content;
 			setIsLastPage(res?.data?.last);
 			arr.forEach((item: any, index: number) => {
@@ -42,7 +40,7 @@ const OperatorList = (props: IProps) => {
 					classTypeName: "String",
 					defaultValue: null,
 					description: "",
-					domType: "INPUT",
+					domType: "dataset",
 					hidden: false,
 					isnull: false,
 					level: null,
@@ -65,7 +63,7 @@ const OperatorList = (props: IProps) => {
 					classTypeName: "String",
 					defaultValue: null,
 					description: "",
-					domType: "INPUT",
+					domType: "dataset",
 					hidden: false,
 					isnull: false,
 					level: null,
@@ -81,26 +79,20 @@ const OperatorList = (props: IProps) => {
 					validators: [],
 				});
 			});
-			setList(arr);
+			setList([...list, ...arr]);
 			// setList(res?.data?.content || []);
 		},
-		onError: () => {
-			isInRequest = false;
-		},
 	});
 
 	const getOperatorListFun = useCallback(
 		(keyword: string = "", page = 0) => {
-			if (isInRequest) {
-				return;
-			} else {
-				getOperatorListRun({
-					productId: productId as string,
-					keyword,
-					page,
-					size: 5,
-				});
-			}
+			getOperatorListRun({
+				productId: productId as string,
+				keyword,
+				page,
+				size: 5,
+			});
+			// size: 20   todo
 		},
 		[productId, getOperatorListRun]
 	);
@@ -109,8 +101,15 @@ const OperatorList = (props: IProps) => {
 		getOperatorListFun();
 	}, [getOperatorListFun]);
 
+	const keywordChange = (e: any) => {
+		if (e.target.value.length <= 30) {
+			setKeyword(e.target.value);
+		}
+	};
+
 	const handleKeywordKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
+			setList([]);
 			setKeyword(e.target.value);
 			setPage(0);
 			getOperatorListFun(e.target.value, 0);
@@ -170,7 +169,7 @@ const OperatorList = (props: IProps) => {
 	const handleScroll = (e: any) => {
 		if (getScrollLoader(e)) {
 			console.log("加载1");
-			if (isInRequest || isLastPage) {
+			if (loading || isLastPage) {
 				return;
 			} else {
 				console.log("加载2");
@@ -316,8 +315,8 @@ const OperatorList = (props: IProps) => {
 				<InputBase
 					className={styles.searchInput}
 					placeholder="请输入算子名称"
-					// value={keyword}
-					// onChange={keywordChange}
+					value={keyword}
+					onChange={keywordChange}
 					onKeyUp={handleKeywordKeyUp}
 				/>
 			</div>
@@ -341,6 +340,19 @@ const OperatorList = (props: IProps) => {
 						</div>
 					);
 				})}
+				{!loading && (
+					<div className={styles.loading}>
+						<CircularProgress
+							size={12}
+							sx={{
+								color: "rgba(19, 112, 255, 1)",
+								marginRight: "8px",
+							}}
+						/>
+						加载中...
+					</div>
+				)}
+				{!isLastPage && <div className={styles.loading}>已经到底了</div>}
 			</div>
 		</div>
 	);

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -2,46 +2,40 @@ import { saveUserSpec } from "@/api/workbench_api";
 import MyDialog from "@/components/mui/MyDialog";
 import MyInput from "@/components/mui/MyInput";
 import { checkIsNumberLetterChinese } from "@/utils/util";
+import _ from "lodash";
 import { useState } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
+import { saveBatchActor } from "@/api/project_api";
 import { useStores } from "@/store";
 
-import styles from "./index.module.css";
+// import styles from "./index.module.css";
 import { useMessage } from "@/components/MySnackbar";
 import { toJS } from "mobx";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 interface IProps {
 	saveFormDialog: boolean;
 	setSaveFormDialog: (val: boolean) => void;
-	onBack?: () => void;
-	title: string;
-	setTitle: (val: string) => void;
-	version: string;
-	setVersion: (val: string) => void;
-	description: string;
-	setDescription: (val: string) => void;
-	creator?: string;
-	templateConfigInfo: ITask[];
-	id?: string;
+	operatorList: ITask[];
 }
 const SaveOperator = (props: IProps) => {
-	const {
-		saveFormDialog,
-		setSaveFormDialog,
-		onBack,
-		title,
-		setTitle,
-		version,
-		setVersion,
-		description,
-		setDescription,
-		templateConfigInfo,
-		creator,
-		id,
-	} = props;
+	const { saveFormDialog, setSaveFormDialog, operatorList } = props;
 	const { currentProjectStore } = useStores();
 	const Message = useMessage();
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const [title, setTitle] = useState("");
+	const [version, setVersion] = useState("1.0.0");
+	const [description, setDescription] = useState("");
+
+	// 保存批算子
+	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
+		onSuccess: (res) => {
+			Message.success("保存算子成功");
+			setSaveFormDialog(false);
+			sessionStorage.setItem("operatorList", "[]");
+			console.log("res", res);
+		},
+	});
+
 	const [titleHelper, setTitleHelper] = useState({
 		// 算子名称错误提示
 		error: false,
@@ -53,14 +47,6 @@ const SaveOperator = (props: IProps) => {
 		helperText: "",
 	});
 
-	// 算子保存方法
-	const { run: saveUserSpecRun } = useMyRequest(saveUserSpec, {
-		onSuccess: (res) => {
-			Message.success("保存成功!");
-			onBack && onBack();
-		},
-	});
-
 	// 关闭表单弹窗
 	const handleCloseDialog = () => {
 		setSaveFormDialog(false);
@@ -124,6 +110,7 @@ const SaveOperator = (props: IProps) => {
 				error: false,
 				helperText: "",
 			});
+			return true;
 		} else {
 			setVersionHelper({
 				error: true,
@@ -133,28 +120,63 @@ const SaveOperator = (props: IProps) => {
 		}
 	};
 
+	// 坐标转换
+	const positionTransform = () => {
+		const copyOperatorList: ITask[] = _.cloneDeep(operatorList);
+		const positionXArr = copyOperatorList.map((operatorLi) => {
+			return operatorLi.position.x;
+		});
+		const positionYArr = copyOperatorList.map((operatorLi) => {
+			return operatorLi.position.y;
+		});
+		let minPositionX = Math.min(...positionXArr);
+		let minPositionY = Math.min(...positionYArr);
+		let startingPointX = minPositionX - 40;
+		let startingPointY = minPositionY - 10;
+		return copyOperatorList.map((operatorLi) => {
+			return {
+				...operatorLi,
+				position: {
+					x: operatorLi.position.x - startingPointX,
+					y: operatorLi.position.y - startingPointY,
+				},
+			};
+		});
+	};
+
 	// 表单弹窗确定，新建算子
 	const handleOncofirm = () => {
+		console.log(operatorList);
 		if (checkTitle(title) && checkVersion(version)) {
-			if (id) {
-				saveUserSpecRun({
-					title,
-					version,
-					description,
-					tasks: templateConfigInfo,
-					productId,
-					id,
-					creator,
-				});
-			} else {
-				saveUserSpecRun({
-					title,
-					version,
-					description,
-					tasks: templateConfigInfo,
-					productId,
-				});
-			}
+			saveBatchActorRun({
+				query: {
+					productId: productId as string,
+					batchName: title,
+					batchVersion: version,
+					description: description,
+				},
+				body: positionTransform(),
+			});
+			// operatorList
+			// if (id) {
+			// 	saveUserSpecRun({
+			// 		title,
+			// 		version,
+			// 		description,
+			// 		tasks: templateConfigInfo,
+			// 		productId,
+			// 		id,
+			// 		creator,
+			// 	});
+			// } else {
+			// 	saveUserSpecRun({
+			// 		title,
+			// 		version,
+			// 		description,
+			// 		tasks: templateConfigInfo,
+			// 		productId,
+			// 	});
+			// }
 		}
 	};
 
@@ -165,7 +187,7 @@ const SaveOperator = (props: IProps) => {
 			onClose={handleCloseDialog}
 			onConfirm={handleOncofirm}
 		>
-			<div className={styles.saveBox}>
+			<div style={{ width: "388px" }}>
 				<MyInput
 					value={title}
 					label="算子名称"
@@ -174,7 +196,6 @@ const SaveOperator = (props: IProps) => {
 					error={titleHelper.error}
 					helperText={titleHelper.helperText}
 					style={{ margin: "20px 0" }}
-					disabled={id ? true : false}
 				></MyInput>
 				<MyInput
 					value={version}

src/views/CustomOperator/index.tsx

@@ -4,12 +4,9 @@ import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
 import MyButton from "@/components/mui/MyButton";
 import OperatorList from "./components/OperatorList";
 // import Flow from "../Project/components/Flow";
-import useMyRequest from "@/hooks/useMyRequest";
-import { saveBatchActor } from "@/api/project_api";
 import { useMessage } from "@/components/MySnackbar";
-import { useStores } from "@/store";
 import BatchOperatorFlow from "../Project/components/Flow/components/BatchOperatorFlow";
-import { toJS } from "mobx";
+import SaveOperator from "./components/SaveOperator";
 import { ITask } from "../Project/ProjectSubmitWork/interface";
 import _ from "lodash";
 import styles from "./index.module.css";
@@ -21,9 +18,13 @@ type IProps = {
 const CustomOperator = observer((props: IProps) => {
 	const { setShowCustomOperator } = props;
 	const Message = useMessage();
-	const [operatorList, setOperatorList] = useState<ITask[]>([]);
-	const { currentProjectStore } = useStores();
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const sessionStorageOperatorList = JSON.parse(
+		sessionStorage.getItem("operatorList") || "[]"
+	);
+	const [operatorList, setOperatorList] = useState<ITask[]>(
+		sessionStorageOperatorList
+	);
+	const [saveFormDialog, setSaveFormDialog] = useState(false);
 	// const [showCustomOperator, setShowCustomOperator] = useState(false);
 
 	/** 设置选中唯一标识符 */
@@ -32,25 +33,6 @@ const CustomOperator = observer((props: IProps) => {
 		// console.log(val);
 	}, []);
 
-	// 保存批算子
-	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
-		onSuccess: (res) => {
-			console.log("res", res);
-		},
-	});
-
-	const handleSave = useCallback(() => {
-		saveBatchActorRun({
-			query: {
-				productId: productId as string,
-				batchName: "123456",
-				batchVersion: "1.0.0",
-				description: "",
-			},
-			body: [],
-		});
-	}, [saveBatchActorRun, productId]);
-
 	// 判断   每个流算子必须至少有一条连接线。
 	const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
 		const all = _.uniq([...sourceArr, ...targetArr]);
@@ -124,6 +106,10 @@ const CustomOperator = observer((props: IProps) => {
 		return check;
 	};
 
+	useEffect(() => {
+		sessionStorage.setItem("operatorList", JSON.stringify(operatorList));
+	}, [operatorList]);
+
 	const handleCheck = () => {
 		if (operatorList.length === 0) {
 			Message.error("内容不能为空！");
@@ -137,18 +123,25 @@ const CustomOperator = observer((props: IProps) => {
 				edge.target && targetArr.push(edge.target);
 			});
 		});
+		console.log("operatorList", operatorList);
+		console.log("sourceArr", sourceArr);
+		console.log("targetArr", targetArr);
 		if (!checkHasOneLine([...sourceArr], [...targetArr])) {
+			console.log("checkHasOneLine");
 			Message.error("内容校验未通过，请检查！");
 			return;
 		}
 		if (!checkIn([...targetArr])) {
+			console.log("checkIn");
 			Message.error("内容校验未通过，请检查！");
 			return;
 		}
 		if (!checkOut([...sourceArr])) {
+			console.log("checkOut");
 			Message.error("内容校验未通过，请检查！");
 			return;
 		}
+		setSaveFormDialog(true);
 	};
 
 	return (
@@ -162,6 +155,11 @@ const CustomOperator = observer((props: IProps) => {
 							handleCheck();
 						}}
 					></MyButton>
+					<SaveOperator
+						saveFormDialog={saveFormDialog}
+						setSaveFormDialog={setSaveFormDialog}
+						operatorList={operatorList}
+					></SaveOperator>
 				</div>
 				<div className={styles.coContent} id="customOperatorFlow">
 					<OperatorList

src/views/MenuLayout/index.tsx

@@ -41,7 +41,7 @@ const MenuLayout = observer(() => {
   return (
     <Box className={style.container}>
       <Box className={style.aside}>
-      {
+        {
           pathname.indexOf('userCenter') < 0 && <CurrentProject />
         }
         <List
@@ -62,7 +62,7 @@ const MenuLayout = observer(() => {
                   onClick={() => item.type === "page" && navigate(item.path)}
                 >
                   <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
-                  <span style={{ verticalAlign: 'middle' }}>{item.name}</span>
+                  <span style={{ verticalAlign: 'middle', fontWeight: '500' }}>{item.name}</span>
                 </li>
               );
             }

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

@@ -97,7 +97,7 @@ const AddFolder = (props: IAddFolderProps) => {
 			<MyButton
 				text="新建文件夹"
 				variant="outlined"
-				size="small"
+				size="medium"
 				onClick={() => setDeleteDialogOpen(true)}
 				disabled={
 					selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")

src/views/Project/ProjectData/index.tsx

@@ -515,7 +515,7 @@ const ProjectData = observer(() => {
 								<MyButton
 									text="上传文件"
 									variant="contained"
-									size="small"
+									size="medium"
 									style={{ marginRight: "12px" }}
 									onClick={() => setUploaderDialogOpen(true)}
 									disabled={

src/views/Project/ProjectSetting/BaseInfo/index.module.css

@@ -17,7 +17,7 @@
   line-height: 22px;
   font-size: 14px;
   font-weight: 550;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 .projectInfoName::after {
   content: "*";

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

@@ -429,6 +429,9 @@ const BaseInfo = observer(() => {
 						className={style.updateButton}
 						onClick={handleClickUpdate}
 						loading={updateLoading}
+						sx={{
+							height:"32px"
+						}}
 					>
 						保存修改
 					</LoadingButton>

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

@@ -164,7 +164,7 @@ const ProjectMembers = observer(() => {
 						variant="contained"
 						onClick={onAddMember}
 						startIcon={<Add />}
-						size="small"
+						size="medium"
 					/>
 				) : null}
 			</Box>

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

@@ -28,86 +28,88 @@ const TemplateBox = (props: any) => {
 	);
 
 	return (
-		<Box className={styles.templateBlock}>
-			<Box>
-				<Box
-					sx={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					}}
-				>
-					<Typography
+		<Box className={styles.template}>
+			<Box className={styles.templateBlock}>
+				<Box>
+					<Box
 						sx={{
-							fontSize: "14px",
-							fontWeight: "600",
-							color: "#1E2633",
-							marginBottom: "4px",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
 						}}
 					>
-						{info.title}
-					</Typography>
-					{info.creator !== "root" && (
-						<Box
+						<Typography
+							sx={{
+								fontSize: "14px",
+								fontWeight: "600",
+								color: "#1E2633",
+								marginBottom: "4px",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+							}}
+						>
+							{info.title}
+						</Typography>
+						{info.creator !== "root" && (
+							<Box
+								sx={{
+									backgroundColor: "rgba(227, 250, 236, 1)",
+									color: "rgba(2, 171, 131, 1)",
+									lineHeight: "20px",
+									padding: "1px 9px",
+									fontSize: "12px",
+								}}
+							>
+								自定义
+							</Box>
+						)}
+					</Box>
+					<Box sx={{ display: "flex", marginBottom: "8px" }}>
+						<Typography
 							sx={{
-								backgroundColor: "rgba(227, 250, 236, 1)",
-								color: "rgba(2, 171, 131, 1)",
-								lineHeight: "20px",
-								padding: "1px 9px",
 								fontSize: "12px",
+								fontWeight: "400",
+								color: "#1370FF",
+								marginRight: "24px",
 							}}
 						>
-							自定义
-						</Box>
-					)}
-				</Box>
-				<Box sx={{ display: "flex", marginBottom: "8px" }}>
-					<Typography
-						sx={{
-							fontSize: "12px",
-							fontWeight: "400",
-							color: "#1370FF",
-							marginRight: "24px",
-						}}
-					>
-						版本：{info.version}
-					</Typography>
-					<Typography
-						sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
-					>
-						更新时间：{info.updatedTime}
+							版本：{info.version}
+						</Typography>
+						<Typography
+							sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
+						>
+							更新时间：{info.updatedTime}
+						</Typography>
+					</Box>
+					<Typography className={styles.templateDescText}>
+						{info.description ? info.description : "此模板暂无描述。"}
 					</Typography>
 				</Box>
-				<Typography className={styles.templateDescText}>
-					{info.description ? info.description : "此模板暂无描述。"}
-				</Typography>
-			</Box>
-			<Box
-				sx={{
-					display: "flex",
-					justifyContent: "end",
-				}}
-			>
-				{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
-					<MyButton
-						size={"small"}
-						text={"删除模版"}
-						onClick={() => {
-							props.startDialog(info.id);
-						}}
-						style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
-					/>
-				)}
-				{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
-					<MyButton
-						size={"small"}
-						text={"使用模版"}
-						onClick={() => addTemplateBlock(info.id)}
-						style={{ marginLeft: "12px" }}
-					/>
-				)}
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "end",
+					}}
+				>
+					{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
+						<MyButton
+							size="medium"
+							text="删除模版"
+							onClick={() => {
+								props.startDialog(info.id);
+							}}
+							style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
+						/>
+					)}
+					{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
+						<MyButton
+							size="medium"
+							text="使用模版"
+							onClick={() => addTemplateBlock(info.id)}
+							style={{ marginLeft: "12px" }}
+						/>
+					)}
+				</Box>
 			</Box>
 		</Box>
 	);

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

@@ -16,10 +16,15 @@
 	margin-bottom: 24px;
 }
 
+.template {
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+
 .templateBlock {
 	height: 194px;
 	background: #ffffff;
-	box-shadow: 0px 3px 10px 0px rgba(0,24,57,0.0400);
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.0400);
 	border-radius: 4px;
 	border: 1px solid #ebedf0;
 	padding: 16px 20px;
@@ -32,32 +37,20 @@
 }
 
 @media screen and (max-width:1220px) {
-    .templateBlock {
-        width: 49%;
-		margin-right: 2%;
-    }
-	.templateBlock:nth-child(2n){
-		margin-right: 0;
+	.template {
+		width: 50%;
 	}
 }
 
 @media screen and (min-width:1220px) and (max-width:1600px) {
-    .templateBlock {
-        width: 32.423%;
-		margin-right: 1.365%;
-    }
-	.templateBlock:nth-child(3n){
-		margin-right: 0;
+	.template {
+		width: 33.33333%;
 	}
 }
 
 @media screen and (min-width:1600px) {
-    .templateBlock {
-        width: 24%;
-		margin-right: 1.333%;
-    }
-	.templateBlock:nth-child(4n){
-		margin-right: 0;
+	.template {
+		width: 25%;
 	}
 }
 
@@ -120,4 +113,4 @@
 	align-items: center;
 	flex-direction: column;
 	cursor: pointer;
-}
+}
\ No newline at end of file

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

@@ -121,7 +121,7 @@ const ProjectMembers = observer(() => {
 							text={"添加工作流模版"}
 							img={<Add />}
 							onClick={addTemplateBlock}
-							size={"small"}
+							size={"medium"}
 						/>
 					)}
 			</Box>
@@ -145,7 +145,7 @@ const ProjectMembers = observer(() => {
 				</Box>
 			)}
 			{templateList.length > 0 && (
-				<Box sx={{ display: "flex", flexWrap: "wrap" }}>
+				<Box sx={{ display: "flex", flexWrap: "wrap", margin:"0 -8px" }}>
 					{templateList &&
 						templateList.length > 0 &&
 						templateList.map((item, key) => {

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

@@ -229,7 +229,7 @@ const SaveCustomTemplate = (props: IProps) => {
 					required
 					error={titleHelper.error}
 					helperText={titleHelper.helperText}
-					style={{ margin: "20px 0" }}
+					style={{ margin: "8px 0 20px" }}
 					disabled={id ? true : false}
 				></MyInput>
 				<MyInput

src/views/WorkFlowEdit/index.tsx

@@ -237,6 +237,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 				anchorEl={anchorEl}
 				onCancel={handleCancel}
 				onConfirm={handleConfirm}
+	            placement="bottom-end"
 			/>
 			{saveFormDialog && (
 				<SaveCustomTemplate