refactor(plugin-workflow): add end property to branch (#2928)

packages/plugins/@nocobase/plugin-workflow/package.json

@@ -9,7 +9,6 @@
   "main": "./dist/server/index.js",
   "devDependencies": {
     "@ant-design/icons": "5.x",
-    "@emotion/css": "^11.7.1",
     "@formily/antd-v5": "1.x",
     "@formily/core": "2.x",
     "@formily/react": "2.x",

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

@@ -1,5 +1,8 @@
-import { cx } from '@nocobase/client';
 import React from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+
+import { css, cx } from '@nocobase/client';
+
 import { AddButton } from './AddButton';
 import { useGetAriaLabelOfAddButton } from './hooks/useGetAriaLabelOfAddButton';
 import { Node } from './nodes';
@@ -11,12 +14,14 @@ export function Branch({
   branchIndex = null,
   controller = null,
   className,
+  end,
 }: {
   from?: any;
   entry?: any;
   branchIndex?: number | null;
   controller?: React.ReactNode;
   className?: string;
+  end?: boolean;
 }) {
   const { styles } = useStyles();
   const { getAriaLabel } = useGetAriaLabelOfAddButton(from, branchIndex);
@@ -26,7 +31,7 @@ export function Branch({
   }
 
   return (
-    <div className={cx(styles.branchClass, className)}>
+    <div className={cx('workflow-branch', styles.branchClass, className)}>
       <div className="workflow-branch-lines" />
       {controller}
       <AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
@@ -35,6 +40,11 @@ export function Branch({
           <Node data={item} key={item.id} />
         ))}
       </div>
+      {end ? (
+        <div className="end-sign">
+          <CloseOutlined />
+        </div>
+      ) : null}
     </div>
   );
 }

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

@@ -50,7 +50,6 @@ export interface Instruction {
   scope?: { [key: string]: any };
   components?: { [key: string]: any };
   component?(props): JSX.Element;
-  endding?: boolean;
   useVariables?(node, options?): VariableOption;
   useScopeVariables?(node, options?): VariableOptions;
   useInitializers?(node): SchemaInitializerItemOptions | null;
@@ -139,36 +138,13 @@ export function useUpstreamScopes(node) {
 export function Node({ data }) {
   const { styles } = useStyles();
   const { getAriaLabel } = useGetAriaLabelOfAddButton(data);
-  const { component: Component = NodeDefaultView, endding } = instructions.get(data.type);
+  const { component: Component = NodeDefaultView } = instructions.get(data.type);
 
   return (
     <NodeContext.Provider value={data}>
       <div className={cx(styles.nodeBlockClass)}>
         <Component data={data} />
-        {!endding ? (
-          <AddButton aria-label={getAriaLabel()} upstream={data} />
-        ) : (
-          <div
-            className={css`
-              flex-grow: 1;
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              width: 1px;
-              height: 6em;
-              padding: 2em 0;
-              background-color: var(--nb-box-bg);
-
-              .anticon {
-                font-size: 1.5em;
-                line-height: 100%;
-              }
-            `}
-          >
-            <CloseOutlined />
-          </div>
-        )}
+        <AddButton aria-label={getAriaLabel()} upstream={data} />
       </div>
     </NodeContext.Provider>
   );

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

@@ -1,8 +1,9 @@
-import { css } from '@emotion/css';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { observer, useField, useFieldSchema, useForm } from '@formily/react';
 import { Space, Spin, Tag } from 'antd';
 import dayjs from 'dayjs';
-import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { css } from '@nocobase/client';
 
 import {
   CollectionManagerProvider,

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

@@ -182,6 +182,24 @@ const useStyles = createStyles(({ css, token }) => {
           width: 50%;
         }
       }
+
+      .end-sign {
+        position: relative;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 0;
+        height: 6em;
+        padding: 2em 0;
+        border-left: 1px dashed ${token.colorBgLayout};
+
+        .anticon {
+          font-size: 1.5em;
+          line-height: 100%;
+        }
+      }
     `,
 
     nodeBlockClass: css`