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
  */
@@ -17,64 +17,80 @@ import classnames from "classnames";
 import { toJS } from "mobx";
 
 const MenuLayout = observer(() => {
-  const { permissionStore, currentProjectStore } = useStores();
-  let pathname = new URL(window.location.href).pathname;
+	const { permissionStore, currentProjectStore } = useStores();
+	let pathname = new URL(window.location.href).pathname;
 
-  const navigate = useNavigate();
+	const navigate = useNavigate();
 
-  const productInfo = toJS(currentProjectStore.currentProductInfo);
+	const productInfo = toJS(currentProjectStore.currentProductInfo);
 
-  // 未选择产品时 直接跳转home页面
-  if (!productInfo.name) {
-    navigate("/home");
-  }
+	// 未选择产品时 直接跳转home页面
+	if (!productInfo.name) {
+		navigate("/home");
+	}
 
-  const routerIcon = (id: string, isSelect: boolean) => {
-    try {
-      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
-      return result || ''
-    } catch (error) {
-      console.log(error)
-    }
-  }
+	const routerIcon = (id: string, isSelect: boolean) => {
+		try {
+			const result = require(`../../assets/project/${id}${
+				isSelect ? "_BLUE" : ""
+			}.svg`);
+			return result || "";
+		} catch (error) {
+			console.log(error);
+		}
+	};
 
-  return (
-    <Box className={style.container}>
-      <Box className={style.aside}>
-        {
-          pathname.indexOf('userCenter') < 0 && <CurrentProject />
-        }
-        <List
-          sx={{
-            paddingTop: 0,
-            paddingBottom: 0,
-          }}
-        >
-          {permissionStore.sidebarRouters.map((item, index) => {
-            if (item.show) {
-              return (
-                <li
-                  key={"sidebar" + index}
-                  className={classnames({
-                    [style.listItem]: true,
-                    [style.active]: `/v3${item.path}` === pathname,
-                  })}
-                  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>
-                </li>
-              );
-            }
-            return null;
-          })}
-        </List>
-      </Box>
-      <Box className={style.content}>
-        <Outlet></Outlet>
-      </Box>
-    </Box>
-  );
+	return (
+		<Box className={style.container}>
+			<Box className={style.aside}>
+				{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
+				<List
+					sx={{
+						paddingTop: 0,
+						paddingBottom: 0,
+					}}
+				>
+					{permissionStore.sidebarRouters.map((item, index) => {
+						if (item.show) {
+							return (
+								<li
+									key={"sidebar" + index}
+									className={classnames({
+										[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>
+								</li>
+							);
+						}
+						return null;
+					})}
+				</List>
+			</Box>
+			<Box className={style.content}>
+				<Outlet></Outlet>
+			</Box>
+		</Box>
+	);
 });
 
 export default MenuLayout;

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,
 					},
 					/**