feat: 自定义算子连线添加接触面

src/components/mui/Tabs.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-04 20:18:17
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-09 18:29:51
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -44,6 +44,9 @@ const theme = createTheme({
 					minWidth: "20px",
 					marginRight: "32px",
 					color: "#8A9099",
+					":hover": {
+						color: "#1E2633",
+					},
 					selected: {
 						color: "#1976d2",
 					},
@@ -95,7 +98,14 @@ const Tabs = (props: IProps) => {
 				) : (
 					""
 				)}
-				<Typography sx={{ fontSize: "14px", lineHeight: "22px", height: "22px", fontWeight: "400" }}>
+				<Typography
+					sx={{
+						fontSize: "14px",
+						lineHeight: "22px",
+						height: "22px",
+						fontWeight: "400",
+					}}
+				>
 					{item.label}
 				</Typography>
 			</Box>

src/views/Project/ProjectJobDetail/index.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-20 14:59:52
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-09 18:28:39
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -124,14 +124,13 @@ const ProjectSubmitWork = observer(() => {
 	/** 返回事件 */
 	const onBack = useCallback(() => {
 		const locationInfo: any = location?.state;
-		if(locationInfo.from==='projectOverview'){
+		if (locationInfo.from === "projectOverview") {
 			navigate("/product/cadd/projectOverview");
-		}else{
+		} else {
 			navigate("/product/cadd/projectWorkbench", {
 				state: { type: "workbenchList" },
 			});
 		}
-		
 	}, [navigate]);
 
 	const outputPathTransform = (path: string) => {
@@ -206,7 +205,8 @@ const ProjectSubmitWork = observer(() => {
 			if (Array.isArray(res.data)) {
 				res.data.forEach((item1) => {
 					if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
-						randerOutputs[index].size = `${item1.size ? storageUnitFromB(Number(item1.size)) : "-"
+						randerOutputs[index].size = `${
+							item1.size ? storageUnitFromB(Number(item1.size)) : "-"
 						}`;
 						setRanderOutputs([...randerOutputs]);
 					}
@@ -388,23 +388,10 @@ const ProjectSubmitWork = observer(() => {
 											{randerOutputs1.map((item, index) => {
 												return (
 													<div key={index} className={styles.outputLi}>
-														{/* <MyPopconfirm
-														title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
-														onConfirm={() =>
-															goToProjectData(getFolderPath(item.path))
-														}
-													> */}
 														<div
 															className={styles.outputLiLeft}
 															onClick={(e: any) => {
-																// handleShowPopper(
-																// 	e,
-																// 	"即将跳转至项目数据内该任务的结果目录，确认继续吗？"
-																// );
-																// setGoToProjectDataPath(
-																// 	getFolderPath(item.path)
-																// );
-																goToProjectData(getFolderPath(item.path))
+																goToProjectData(getFolderPath(item.path));
 															}}
 														>
 															<img
@@ -461,8 +448,7 @@ const ProjectSubmitWork = observer(() => {
 												workFlowJobInfo?.outputPath as string
 											);
 											// goToProjectData(workFlowJobInfo?.outputPath as string)
-										}
-										}
+										}}
 									>
 										{workFlowJobInfo?.outputPath
 											? outputPathTransform(workFlowJobInfo?.outputPath)

src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 15:25:25
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-12 14:09:20
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-09 16:07:33
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+import { useEffect } from "react";
 import Flow from "../../components/Flow";
 import { ITemplateConfig } from "../interface";
 
@@ -17,6 +18,21 @@ interface IProps {
 const WorkFlow = (props: IProps) => {
 	const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
 		props;
+
+	/** 页面刷新提醒 */
+	const pageRefreshTips = (e: any) => {
+		const event: any = window.event || e;
+		event.returnValue = "是否离开网站？";
+	};
+
+	/** 监听页面刷新事件 */
+	useEffect(() => {
+		window.addEventListener("beforeunload", pageRefreshTips, false);
+		return () => {
+			window.removeEventListener("beforeunload", pageRefreshTips, false);
+		};
+	});
+
 	return (
 		<Flow
 			tasks={templateConfigInfo?.tasks}

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 18:34:46
+ * @LastEditTime: 2022-08-09 16:32:42
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -106,17 +106,13 @@ const ProjectMembers = observer(() => {
 		if (e.keyCode === 13) {
 			setTemplateName(e.target.value);
 		}
-	}
+	};
 
 	return (
 		<Box className={styles.headerBox}>
 			<Box className={styles.tabBox}>
-				<SearchInput
-					onKeyUp={handleKeyWordChangeKeyUp}
-					sx={{ width: 340 }}
-				/>
-				{templateList.length > 0 &&
-					isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
+				<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
+				{isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
 					<MyButton
 						text={"添加工作流模版"}
 						img={<Add />}
@@ -126,7 +122,7 @@ const ProjectMembers = observer(() => {
 				)}
 			</Box>
 
-			{templateList.length === 0 && templateName.length > 0 && (
+			{templateList.length === 0 && (
 				<Box
 					sx={{
 						display: "flex",
@@ -140,12 +136,12 @@ const ProjectMembers = observer(() => {
 					<Typography
 						sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
 					>
-						暂未开启模版
+						{templateName ? "暂未相应搜索结果" : "暂未开启模版"}
 					</Typography>
 				</Box>
 			)}
 			{templateList.length > 0 && (
-				<Box sx={{ display: "flex", flexWrap: "wrap", margin:"0 -8px" }}>
+				<Box sx={{ display: "flex", flexWrap: "wrap", margin: "0 -8px" }}>
 					{templateList &&
 						templateList.length > 0 &&
 						templateList.map((item, key) => {
@@ -155,42 +151,16 @@ const ProjectMembers = observer(() => {
 						})}
 				</Box>
 			)}
-			{templateList.length === 0 &&
-				templateName.length === 0 &&
-				isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
-					<Box className={styles.addNewTemplate} onClick={addTemplateBlock}>
-						<Add
-							sx={{
-								color: "#565C66",
-								fontSize: "20px",
-								width: "30px",
-								height: "30px",
-							}}
-						/>
-						<Typography
-							sx={{
-								fontSize: "14px",
-								fontWeight: "400",
-								color: "#8A9099",
-								marginTop: "15px",
-							}}
-						>
-							添加工作流模版
-						</Typography>
-					</Box>
-				)}
 
 			{showAddTemplate && (
 				<AddTemplate
-					setShowAddTemplate={
-						() => {
-							setShowAddTemplate(false)
+					setShowAddTemplate={() => {
+						setShowAddTemplate(false);
 						getTemplateInfo({
 							projectId: projectIdData as string,
 							title: templateName,
 						});
-						}
-					}
+					}}
 					getTemplateInfo={getTemplateInfo}
 					productId={productId as string}
 					projectId={projectIdData as string}

src/views/Project/components/Flow/components/BatchNode/index.module.css

@@ -39,3 +39,12 @@
 .batchRotate {
 	transform: translateX(-50%) rotate(-90deg);
 }
+
+.handleBox::before{
+	content: "";
+	position: absolute;
+	left: -4px;
+	top: -4px;
+	width: 14px;
+	height: 14px;
+}

src/views/Project/components/Flow/components/BatchNode/index.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-22 10:43:28
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-09 11:24:38
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -65,13 +65,14 @@ const BatchNode = (props: IBatchNode) => {
 						return (
 							<MyTooltip title={item.name} key={uuid()}>
 								<Handle
+									className={styles.handleBox}
 									id={item.name}
 									style={{
 										background: "#fff ",
 										border: item.error
 											? "1px solid #FF4E4E"
 											: "1px solid #D1D6DE",
-										left: index * 20 + 20,
+										left: index * 24 + 20,
 									}}
 									type="target"
 									position={Position.Top}
@@ -95,11 +96,12 @@ const BatchNode = (props: IBatchNode) => {
 						return (
 							<MyTooltip title={item.name} key={uuid()}>
 								<Handle
+									className={styles.handleBox}
 									id={item.name}
 									style={{
 										background: "#fff ",
 										border: "1px solid #D1D6DE",
-										left: index * 20 + 20,
+										left: index * 24 + 20,
 									}}
 									type="source"
 									position={Position.Bottom}

src/views/Project/components/Flow/components/FlowNode/index.module.css

@@ -34,3 +34,12 @@
 	border-radius: 8px;
 	margin-left: 8px;
 }
+
+.handleBox::before{
+	content: "";
+	position: absolute;
+	left: -4px;
+	top: -4px;
+	width: 14px;
+	height: 14px;
+}
\ No newline at end of file

src/views/Project/components/Flow/components/FlowNode/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:29:46
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-08 18:43:35
+ * @LastEditTime: 2022-08-09 19:06:43
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -77,18 +77,24 @@ const FlowNode = (props: any) => {
 			})}
 		>
 			{dotStatus?.isInput ? (
-				<Handle style={inStyle} type="target" position={Position.Top} />
+				<Handle
+					className={styles.handleBox}
+					style={inStyle}
+					type="target"
+					position={Position.Top}
+				/>
 			) : null}
 			{inParamsArr?.length
 				? inParamsArr.map((item: any, index: number) => {
 						return (
 							<MyTooltip title={item.name} key={uuid()}>
 								<Handle
+									className={styles.handleBox}
 									id={item.name}
 									style={{
 										background: "#fff ",
 										border: "1px solid #D1D6DE",
-										left: index * 20 + 20,
+										left: index * 24 + 20,
 										...inStyle,
 									}}
 									type="target"
@@ -115,18 +121,24 @@ const FlowNode = (props: any) => {
 				)}
 			</div>
 			{dotStatus?.isOutput ? (
-				<Handle style={outStyle} type="source" position={Position.Bottom} />
+				<Handle
+					className={styles.handleBox}
+					style={outStyle}
+					type="source"
+					position={Position.Bottom}
+				/>
 			) : null}
 			{outParamsArr?.length
 				? outParamsArr.map((item: any, index: number) => {
 						return (
 							<MyTooltip title={item.name} key={uuid()}>
 								<Handle
+									className={styles.handleBox}
 									id={item.name}
 									style={{
 										background: "#fff ",
 										border: "1px solid #D1D6DE",
-										left: index * 20 + 20,
+										left: index * 24 + 20,
 										...outStyle,
 									}}
 									type="source"

src/views/WorkFlowEdit/index.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-20 15:01:18
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-09 15:49:59
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -101,6 +101,20 @@ const WorkFlowEdit = observer((props: IProps) => {
 		}
 	}, [id, fetchTemplateConfigInfoRun]);
 
+	/** 页面刷新提醒 */
+	const pageRefreshTips = (e: any) => {
+		const event: any = window.event || e;
+		event.returnValue = "确定回退页面吗？";
+	};
+
+	/** 监听页面刷新事件 */
+	useEffect(() => {
+		window.addEventListener("beforeunload", pageRefreshTips, false);
+		return () => {
+			window.removeEventListener("beforeunload", pageRefreshTips, false);
+		};
+	});
+
 	// 确认弹窗相对位置
 	const [anchorEl, setAnchorEl] = useState<any>(null);
 	// 隐藏确认弹窗，   确认弹窗点击取消