feat:工作流模板响应式展示

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

@@ -17,8 +17,7 @@
 }
 
 .templateBlock {
-	width: 21.4876%;
-	height: 160px;
+	height: 194px;
 	background: #ffffff;
 	border-radius: 4px;
 	border: 1px solid #ebedf0;
@@ -26,8 +25,39 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	margin: 8px;
+	margin-bottom: 16px;
 	position: relative;
+	box-sizing: border-box;
+}
+
+@media screen and (max-width:1220px) {
+    .templateBlock {
+        width: 49%;
+		margin-right: 2%;
+    }
+	.templateBlock:nth-child(2n){
+		margin-right: 0;
+	}
+}
+
+@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;
+	}
+}
+
+@media screen and (min-width:1600px) {
+    .templateBlock {
+        width: 24%;
+		margin-right: 1.333%;
+    }
+	.templateBlock:nth-child(4n){
+		margin-right: 0;
+	}
 }
 
 .addTemplateMask {

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

@@ -101,12 +101,12 @@ const ProjectMembers = observer(() => {
 		}, 300);
 	}, [templateName, getTemplateInfo, projectIdData]);
 
-    // 回车搜索
+	// 回车搜索
 	const handleKeyWordChangeKeyUp = (e: any) => {
-        if (e.keyCode === 13) {
-            setTemplateName(e.target.value);
-        }
-    }
+		if (e.keyCode === 13) {
+			setTemplateName(e.target.value);
+		}
+	}
 
 	return (
 		<Box className={styles.headerBox}>
@@ -145,7 +145,7 @@ const ProjectMembers = observer(() => {
 				</Box>
 			)}
 			{templateList.length > 0 && (
-				<Box sx={{ display: "flex", flexWrap: "wrap", marginLeft: "-8px" }}>
+				<Box sx={{ display: "flex", flexWrap: "wrap" }}>
 					{templateList &&
 						templateList.length > 0 &&
 						templateList.map((item, key) => {