feat: 标题横向

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

@@ -4,7 +4,7 @@
 	/* padding: 12px 20px; */
 	border: 1px solid #e6e8eb;
 	border-left: 4px solid #e6e8eb;
-	display: flex;
+	/* display: flex; */
 	align-items: center;
 }
 
@@ -37,7 +37,11 @@
 }
 
 .batchRotate {
-	transform: translateX(-50%) rotate(-90deg);
+	margin-bottom: 20px;
+	line-height: 22px;
+	font-size: 14px;
+	/* text-align: center; */
+	/* transform: translateX(-50%) rotate(-90deg); */
 }
 
 .handleBox::before{

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-09 11:24:38
+ * @LastEditTime: 2022-08-22 11:45:44
  * @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
  */
@@ -68,11 +68,12 @@ const BatchNode = (props: IBatchNode) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
+										backgroundColor: "rgba(19, 112, 255, 1)",
 										border: item.error
 											? "1px solid #FF4E4E"
-											: "1px solid #D1D6DE",
+											: "1px solid #fff",
 										left: index * 24 + 20,
+										top: '-47px',
 									}}
 									type="target"
 									position={Position.Top}
@@ -99,8 +100,8 @@ const BatchNode = (props: IBatchNode) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
-										border: "1px solid #D1D6DE",
+										backgroundColor: "rgba(19, 112, 255, 1)",
+										border: "1px solid #FFF",
 										left: index * 24 + 20,
 									}}
 									type="source"

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

@@ -151,13 +151,13 @@ const BatchOperatorFlow = (props: IProps) => {
 							},
 							inStyle: {
 								backgroundColor: "rgba(19, 112, 255, 1)",
-								border: "none",
+								border: "1px solid #FFF",
 								left: 12,
 								top: "-2px",
 							},
 							outStyle: {
 								backgroundColor: "rgba(19, 112, 255, 1)",
-								border: "none",
+								border: "1px solid #FFF",
 								left: 12,
 								bottom: "-2px",
 							},

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

@@ -270,14 +270,14 @@ const Flow = (props: IProps) => {
 				return a - b;
 			});
 			let width = 176,
-				height = 22;
+				height = 66;
 			if (positionXArr?.length) {
-				const val = positionXArr[positionXArr.length - 1] + 150;
+				const val = positionXArr[positionXArr.length - 1] + 144;
 				width = val > 176 ? val : width;
 			}
 			if (positionYArr?.length) {
-				const val = positionYArr[positionYArr.length - 1] + 6;
-				height = val > 22 ? val : height;
+				const val = positionYArr[positionYArr.length - 1] + 74;
+				height = val > 66 ? val : height;
 			}
 			return {
 				width,
@@ -318,7 +318,8 @@ const Flow = (props: IProps) => {
 						/** 样式 */
 						style: {
 							...getBatchStyle(item),
-							padding: isFlowNode(item.id) ? "20px" : "12px 20px",
+							marginTop: '-44px',
+							padding: "12px 20px",
 						},
 					},
 					/** 坐标 */