feat: 批流算子样式修改

src/views/MenuLayout/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-08-02 11:43:28
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-03 19:05:48
+ * @LastEditTime: 2022-09-02 12:01:12
  * @FilePath: /bkunyun/src/views/MenuLayout/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -31,19 +31,19 @@ const MenuLayout = observer(() => {
 
 	const routerIcon = (id: string, isSelect: boolean) => {
 		try {
-      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
-      return result || ''
+			const result = require(`../../assets/project/${id}${
+				isSelect ? "_BLUE" : ""
+			}.svg`);
+			return result || "";
 		} catch (error) {
-      console.log(error)
-    }
+			console.log(error);
 		}
+	};
 
 	return (
 		<Box className={style.container}>
 			<Box className={style.aside}>
-        {
-          pathname.indexOf('userCenter') < 0 && <CurrentProject />
-        }
+				{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
 				<List
 					sx={{
 						paddingTop: 0,
@@ -59,10 +59,26 @@ const MenuLayout = observer(() => {
 										[style.listItem]: true,
 										[style.active]: `/v3${item.path}` === pathname,
 									})}
+									style={
+										`/v3${item.path}` === pathname
+											? { borderLeft: "3px solid #1370ff" }
+											: undefined
+									}
 									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', fontWeight: '500' }}>{item.name}</span>
+									<img
+										className={style.routerIcon}
+										src={
+											routerIcon(
+												item.id || "",
+												`/v3${item.path}` === pathname
+											) || undefined
+										}
+										alt=""
+									/>
+									<span style={{ verticalAlign: "middle", fontWeight: "500" }}>
+										{item.name}
+									</span>
 								</li>
 							);
 						}

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

 .batchNode {
 	background-color: #fff;
 	border-radius: 4px;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 	/* padding: 12px 20px; */
-	border: 1px solid #e6e8eb;
+	/* border: 1px solid #e6e8eb; */
 	border-left: 4px solid #e6e8eb;
 	/* display: flex; */
 	align-items: center;
 }
 
+.batchNode:hover {
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+}
+
 .doneBatchNode {
 	border-left: 4px solid #0dd09b;
 }
@@ -45,7 +50,7 @@
 	/* transform: translateX(-50%) rotate(-90deg); */
 }
 
-.handleBox::before{
+.handleBox::before {
 	content: "";
 	position: absolute;
 	left: -4px;

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

@@ -44,3 +44,9 @@
 	width: 14px;
 	height: 14px;
 }
+
+.handleBox {
+	background: #fff;
+	width: 6px;
+	height: 6px;
+}

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-31 17:09:31
+ * @LastEditTime: 2022-09-02 14:23:07
  * @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
  */
@@ -86,8 +86,6 @@ const FlowNode = (props: any) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
-										border: "1px solid #D1D6DE",
 										...inStyle,
 										left: index * 24 + 16,
 									}}
@@ -98,8 +96,10 @@ const FlowNode = (props: any) => {
 						);
 				  })
 				: null}
-			<div style={{display: 'flex', alignItems: 'center'}}>
-				<span style={{fontSize: '12px', lineHeight: '24px'}}>{title || ""} {showVersion && version}</span>
+			<div style={{ display: "flex", alignItems: "center" }}>
+				<span style={{ fontSize: "12px", lineHeight: "20px" }}>
+					{title || ""} {showVersion && version}
+				</span>
 				{flowType !== "edit" && isCheck ? (
 					<span className={styles.successDot}></span>
 				) : null}
@@ -108,7 +108,7 @@ const FlowNode = (props: any) => {
 				) : null}
 				{getImgUrl(executionStatus) && (
 					<img
-						style={{ marginLeft: "6px" }}
+						style={{ marginLeft: "6px", width: "12px", height: "12px" }}
 						src={getImgUrl(executionStatus)}
 						alt=""
 					/>
@@ -122,8 +122,6 @@ const FlowNode = (props: any) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
-										border: "1px solid #D1D6DE",
 										...outStyle,
 										left: index * 24 + 16,
 									}}

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

@@ -323,12 +323,13 @@ const Flow = (props: IProps) => {
 						style: {
 							...getBatchStyle(item),
 							marginTop: "-44px",
-							padding: "12px 20px",
+							padding: "12px 20px 20px 20px",
 						},
 					},
 					/** 坐标 */
 					position: {
-						x: Number(item.position?.x) || 0,
+						/** 流算子生成的时候多加了15  兼容历史模版数据  直接这边减去15 */
+						x: Number(item.position?.x - 15) || 0,
 						y: Number(item.position?.y) || 0,
 					},
 					/**