refactor(plugin-workflow): adjust branch styles (#2922)

packages/plugins/@nocobase/plugin-workflow/src/client/Branch.tsx

@@ -9,11 +9,13 @@ export function Branch({
   entry = null,
   branchIndex = null,
   controller = null,
+  className,
 }: {
   from?: any;
   entry?: any;
   branchIndex?: number | null;
-  controller?: any;
+  controller?: React.ReactNode;
+  className?: string;
 }) {
   const { styles } = useStyles();
 
@@ -23,7 +25,7 @@ export function Branch({
   }
 
   return (
-    <div className={cx(styles.branchClass)}>
+    <div className={cx(styles.branchClass, className)}>
       <div className="workflow-branch-lines" />
       {controller}
       <AddButton upstream={from} branchIndex={branchIndex} />

packages/plugins/@nocobase/plugin-workflow/src/client/CanvasContent.tsx

@@ -1,5 +1,8 @@
 import { Alert } from 'antd';
 import React from 'react';
+
+import { cx, css } from '@nocobase/client';
+
 import { Branch } from './Branch';
 import { lang } from './locale';
 import useStyles from './style';
@@ -16,7 +19,14 @@ export function CanvasContent({ entry }) {
         <Alert type="warning" message={lang('Executed workflow cannot be modified')} showIcon />
       ) : null}
       <TriggerConfig />
-      <div className={styles.branchBlockClass}>
+      <div
+        className={cx(
+          styles.branchBlockClass,
+          css`
+            margin-top: 0 !important;
+          `,
+        )}
+      >
         <Branch entry={entry} />
       </div>
       <div className={styles.terminalClass}>{lang('End')}</div>

packages/plugins/@nocobase/plugin-workflow/src/client/index.tsx

@@ -4,6 +4,7 @@ export * from './FlowContext';
 export * from './nodes';
 export { triggers, useTrigger, getTriggersOptions } from './triggers';
 export { useWorkflowVariableOptions, getCollectionFieldOptions } from './variable';
+export { default as useStyles } from './style';
 
 import { Plugin } from '@nocobase/client';
 import React from 'react';

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/condition.tsx

@@ -423,19 +423,8 @@ export default {
     return (
       <NodeDefaultView data={data}>
         {rejectOnFalse ? null : (
-          <div className={cx(styles.nodeSubtreeClass)}>
-            <div
-              className={cx(
-                styles.branchBlockClass,
-                css`
-                  > * > .workflow-branch-lines {
-                    > button {
-                      display: none;
-                    }
-                  }
-                `,
-              )}
-            >
+          <div className={styles.nodeSubtreeClass}>
+            <div className={styles.branchBlockClass}>
               <Branch from={data} entry={falseEntry} branchIndex={0} />
               <Branch from={data} entry={trueEntry} branchIndex={1} />
             </div>

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/loop.tsx

@@ -91,12 +91,6 @@ export default {
               </div>
             </div>
           </div>
-          <div
-            className={css`
-              position: relative;
-              height: 2em;
-            `}
-          />
         </div>
       </NodeDefaultView>
     );

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/parallel.tsx

@@ -65,8 +65,8 @@ export default {
 
     return (
       <NodeDefaultView data={data}>
-        <div className={cx(styles.nodeSubtreeClass)}>
-          <div className={cx(styles.branchBlockClass)}>
+        <div className={styles.nodeSubtreeClass}>
+          <div className={styles.branchBlockClass}>
             {branches.map((branch) => (
               <Branch key={branch.id} from={data} entry={branch} branchIndex={branch.branchIndex} />
             ))}
@@ -100,34 +100,29 @@ export default {
               />
             ))}
           </div>
-          <div
+          <Tooltip
+            title={lang('Add branch')}
             className={css`
-              position: relative;
-              height: 2em;
+              visibility: ${workflow.executed ? 'hidden' : 'visible'};
             `}
           >
-            <Tooltip
-              title={lang('Add branch')}
+            <Button
+              icon={<PlusOutlined />}
               className={css`
-                visibility: ${workflow.executed ? 'hidden' : 'visible'};
-              `}
-            >
-              <Button
-                icon={<PlusOutlined />}
-                className={css`
-                  position: absolute;
-                  top: calc(50% - 1px);
-                  transform: translateX(-50%) rotate(45deg);
+                position: relative;
+                top: 1em;
+                transform-origin: center;
+                transform: rotate(45deg);
 
-                  .anticon {
-                    transform: rotate(-45deg);
-                  }
-                `}
-                onClick={() => setBranchCount(branchCount + 1)}
-                disabled={workflow.executed}
-              />
-            </Tooltip>
-          </div>
+                .anticon {
+                  transform-origin: center;
+                  transform: rotate(-45deg);
+                }
+              `}
+              onClick={() => setBranchCount(branchCount + 1)}
+              disabled={workflow.executed}
+            />
+          </Tooltip>
         </div>
       </NodeDefaultView>
     );

packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx

@@ -110,6 +110,7 @@ const useStyles = createStyles(({ css, token }) => {
     branchBlockClass: css`
       display: flex;
       position: relative;
+      margin-top: 2em;
 
       :before {
         content: '';
@@ -330,7 +331,6 @@ const useStyles = createStyles(({ css, token }) => {
 
     conditionClass: css`
       position: relative;
-      height: 2em;
       overflow: visible;
 
       > span {