fix:条件节点和并行节点样式修复

Author: 昔梦

packages/x-flow/src/nodes/node-parallel/ParallelBuildInNodeWidget.tsx

@@ -8,7 +8,6 @@ import { useStore } from '../../hooks/useStore';
 import { uuid } from '../../utils';
 import './index.less';
 
-
 export default memo((props: any) => {
   const {
     data,
@@ -38,13 +37,21 @@ export default memo((props: any) => {
 
   const renderTitle = (item, index) => {
     const defTitle = item?.title || `事件${index}`;
-    const title = parallelExtra?.titleKey
-      ? item[parallelExtra?.titleKey]
-      : defTitle;
+    // const title = parallelExtra?.titleKey
+    //   ? item[parallelExtra?.titleKey]
+    //   : defTitle;
+    const title = item[parallelExtra?.titleKey] ?? defTitle;
     return (
       <div className="item-header">
         <div className="item-title">
-          {title && <TextEllipsis text={title} rows={1} type="paragraph" />}
+          {title && (
+            <TextEllipsis
+              text={title}
+              // rows={1}
+              // type="paragraph"
+              className="item-content-in"
+            />
+          )}
         </div>
         <SourceHandle
           position={position}
@@ -73,9 +80,13 @@ export default memo((props: any) => {
         {CustomNodeWidget ? (
           <CustomNodeWidget data={item} index={index} />
         ) : (
-          <>
-            {value && <TextEllipsis text={value} rows={5} type="paragraph" />}
-          </>
+          <div>
+            {value && (
+              <div className="item-content-in">
+                <TextEllipsis text={value} rows={5} type="paragraph" />
+              </div>
+            )}
+          </div>
         )}
       </div>
     );

packages/x-flow/src/nodes/node-parallel/index.less

@@ -43,7 +43,12 @@
     }
 
     .item-handle {
-      right: -12px;
+      right: -11px;
+      top: 9px;
+
+      .xflow-node-add-box {
+        right: 4px;
+      }
     }
   }
 
@@ -67,6 +72,7 @@
 
   .node-parallel-bottom-item {
     width: 100px;
+
     .item-header {
       .item-title {
         text-align: center;
@@ -77,8 +83,9 @@
           margin-bottom: 0;
         }
       }
+
       .item-handle {
-        bottom: -4px;
+        top: 0px;
       }
     }
   }

packages/x-flow/src/nodes/node-parallel/setting/index.tsx

@@ -12,14 +12,10 @@ interface INodeSwitchSettingPorps {
 const schema: Schema = {
   type: 'object',
   displayType:'row',
-  // span: 24,
   properties: {
     list: {
       type: 'array',
       widget: 'simpleList',
-      // display: 'block',
-      // min: 2,
-      default:[{},{}],
       props: {
         hideCopy: true,
         hideMove: true,

packages/x-flow/src/nodes/node-switch/SwitchBuildInNodeWidget.tsx

@@ -32,9 +32,10 @@ export default memo((props: any) => {
 
   const renderTitle = (item, index) => {
     const defTitle = item?.title || `条件${index}`;
-    const title = switchExtra?.titleKey
-      ? item[switchExtra?.titleKey]
-      : defTitle;
+    // const title = switchExtra?.titleKey
+    //   ? item[switchExtra?.titleKey]
+    //   : defTitle;
+    const title = item[switchExtra?.titleKey] ?? defTitle;
     return (
       <div className="item-header">
         <div className="item-title">{title}</div>
@@ -66,9 +67,9 @@ export default memo((props: any) => {
         {CustomNodeWidget ? (
           <CustomNodeWidget data={item} index={index} />
         ) : (
-          <>
-            {value && <TextEllipsis text={value} rows={5} type="paragraph" />}
-          </>
+            <div>
+              {value && <div className='item-content-in'><TextEllipsis text={value} rows={5} type="paragraph" /></div>}
+          </div>
         )}
       </div>
     );

packages/x-flow/src/nodes/node-switch/index.less

@@ -34,10 +34,11 @@
     .item-title {
       text-align: right;
       font-weight: 600;
+      padding-right: 5px;
     }
 
     .item-handle {
-      right: -16px;
+      right: -12px;
     }
   }
 

packages/x-flow/src/nodes/node-switch/setting/index.tsx

@@ -18,8 +18,6 @@ const schema: Schema = {
       type: 'array',
       widget: 'simpleList',
       display: 'block',
-      min: 1,
-      default:[{}],
       props: {
         hideCopy: true,
         hideMove: true,