refactor(plugin-workflow): adjust canvas style

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

@@ -10,6 +10,7 @@
 import { useForm } from '@formily/react';
 import { Cascader } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
+import { BarChartOutlined } from '@ant-design/icons';
 
 import {
   SchemaComponentContext,
@@ -169,6 +170,7 @@ export default class extends Instruction {
   type = 'aggregate';
   group = 'collection';
   description = `{{t("Counting, summing, finding maximum, minimum, and average values for multiple records of a collection or associated data of a record.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<BarChartOutlined style={{}} />);
   fieldset = {
     aggregator: {
       type: 'string',

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

@@ -9,8 +9,10 @@
 
 import React from 'react';
 import { InputNumber, Select } from 'antd';
-import { css, useCompile, usePlugin } from '@nocobase/client';
+import { HourglassOutlined } from '@ant-design/icons';
-import WorkflowPlugin, { Instruction, JOB_STATUS } from '@nocobase/plugin-workflow/client';
+
+import { css, useCompile } from '@nocobase/client';
+import { Instruction, JOB_STATUS } from '@nocobase/plugin-workflow/client';
 
 import { NAMESPACE } from '../locale';
 
@@ -68,6 +70,7 @@ export default class extends Instruction {
   type = 'delay';
   group = 'control';
   description = `{{t("Delay a period of time and then continue or exit the process. Can be used to set wait or timeout times in parallel branches.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<HourglassOutlined style={{}} />);
   fieldset = {
     duration: {
       type: 'number',

packages/plugins/@nocobase/plugin-workflow-dynamic-calculation/src/client/DynamicCalculation.tsx

@@ -8,6 +8,7 @@
  */
 
 import React from 'react';
+import { FunctionOutlined } from '@ant-design/icons';
 
 import { SchemaInitializerItemType, Variable, useCollectionManager_deprecated } from '@nocobase/client';
 import {
@@ -47,6 +48,7 @@ export default class extends Instruction {
   type = 'dynamic-calculation';
   group = 'calculation';
   description = `{{t("Calculate an expression based on a calculation engine and obtain a value as the result. Variables in the upstream nodes can be used in the expression. The expression is dynamic one from an expression collections.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<FunctionOutlined />);
   fieldset = {
     expression: {
       type: 'string',

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

@@ -8,7 +8,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { ArrowUpOutlined } from '@ant-design/icons';
+import { ArrowUpOutlined, RollbackOutlined } from '@ant-design/icons';
 import { Card, Checkbox } from 'antd';
 import { FormLayout, FormItem } from '@formily/antd-v5';
 import { useForm } from '@formily/react';
@@ -28,7 +28,6 @@ import {
   Instruction,
   RadioWithTooltip,
   renderEngineReference,
-  RadioWithTooltipOption,
   CalculationConfig,
   useWorkflowVariableOptions,
   UseVariableOptions,
@@ -246,6 +245,7 @@ export default class extends Instruction {
   type = 'loop';
   group = 'control';
   description = `{{t("By using a loop node, you can perform the same operation on multiple sets of data. The source of these sets can be either multiple records from a query node or multiple associated records of a single record. Loop node can also be used for iterating a certain number of times or for looping through each character in a string. However, excessive looping may cause performance issues, so use with caution.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<RollbackOutlined style={{}} />);
   fieldset = {
     target: {
       type: 'string',
@@ -381,7 +381,7 @@ export default class extends Instruction {
             className={cx(
               styles.branchBlockClass,
               css`
-                padding-left: 20em;
+                padding-left: 16em;
               `,
             )}
           >
@@ -389,7 +389,7 @@ export default class extends Instruction {
 
             <div className={styles.branchClass}>
               <div className="workflow-branch-lines" />
-              <div className={cx(styles.addButtonClass, styles.loopLineClass)}>
+              <div className={styles.loopLineClass}>
                 <ArrowUpOutlined />
               </div>
             </div>

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

@@ -7,6 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { MailOutlined } from '@ant-design/icons';
 import { ArrayItems } from '@formily/antd-v5';
 
 import { SchemaComponentContext, css } from '@nocobase/client';
@@ -32,6 +34,7 @@ export default class extends Instruction {
   type = 'mailer';
   group = 'extended';
   description = `{{t("Send email. You can use the variables in the upstream nodes as receivers, subject and content of the email.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<MailOutlined style={{}} />);
   fieldset = {
     provider: {
       type: 'object',

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

@@ -7,6 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { SolutionOutlined } from '@ant-design/icons';
+
 import { SchemaInitializerItemType, useCollectionManager_deprecated, useCompile, usePlugin } from '@nocobase/client';
 
 import {
@@ -75,6 +78,7 @@ export default class extends Instruction {
   type = 'manual';
   group = 'manual';
   description = `{{t("Could be used for manually submitting data, and determine whether to continue or exit. Workflow will generate a todo item for assigned user when it reaches a manual node, and continue processing after user submits the form.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<SolutionOutlined />);
   fieldset = {
     assignees: {
       type: 'array',

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

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 import React from 'react';
+import { NotificationOutlined } from '@ant-design/icons';
 import { Instruction, useWorkflowVariableOptions } from '@nocobase/plugin-workflow/client';
 import { MessageConfigForm } from '@nocobase/plugin-notification-manager/client';
 
@@ -22,6 +23,7 @@ export default class extends Instruction {
   type = 'notification';
   group = 'extended';
   description = `{{t("Send notification. You can use the variables in the upstream nodes as content and ohter config.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<NotificationOutlined />);
   fieldset = {
     message: {
       type: 'void',

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

@@ -9,7 +9,7 @@
 
 import React, { useState } from 'react';
 import { Button, Tooltip } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { ApartmentOutlined, PlusOutlined } from '@ant-design/icons';
 
 import { css } from '@nocobase/client';
 
@@ -30,6 +30,7 @@ export default class extends Instruction {
   type = 'parallel';
   group = 'control';
   description = `{{t("Run multiple branch processes in parallel.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<ApartmentOutlined style={{}} />);
   fieldset = {
     mode: {
       type: 'string',

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

@@ -11,7 +11,9 @@ import { onFieldValueChange } from '@formily/core';
 import { uid } from '@formily/shared';
 import { useForm, useField, useFormEffects } from '@formily/react';
 import { ArrayItems } from '@formily/antd-v5';
+import { GlobalOutlined } from '@ant-design/icons';
 
+import { SchemaComponent, css } from '@nocobase/client';
 import {
   Instruction,
   WorkflowVariableJSON,
@@ -21,7 +23,6 @@ import {
 } from '@nocobase/plugin-workflow/client';
 
 import { NAMESPACE, useLang } from '../locale';
-import { SchemaComponent, css } from '@nocobase/client';
 
 const BodySchema = {
   'application/json': {
@@ -155,6 +156,7 @@ export default class extends Instruction {
   type = 'request';
   group = 'extended';
   description = `{{t("Send HTTP request to a URL. You can use the variables in the upstream nodes as request headers, parameters and request body.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<GlobalOutlined />);
   fieldset = {
     method: {
       type: 'string',

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

@@ -12,6 +12,7 @@ import { DEFAULT_DATA_SOURCE_KEY, css } from '@nocobase/client';
 import { Instruction, WorkflowVariableRawTextArea, defaultFieldNames } from '@nocobase/plugin-workflow/client';
 
 import React from 'react';
+import { ConsoleSqlOutlined } from '@ant-design/icons';
 import { Trans } from 'react-i18next';
 import { NAMESPACE } from '../locale';
 
@@ -20,6 +21,7 @@ export default class extends Instruction {
   type = 'sql';
   group = 'collection';
   description = `{{t("Execute a SQL statement in database.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<ConsoleSqlOutlined style={{}} />);
   fieldset = {
     dataSource: {
       type: 'string',

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

@@ -14,6 +14,7 @@ import { observer, useForm } from '@formily/react';
 import {
   ActionContextProvider,
   css,
+  cx,
   SchemaComponent,
   useActionContext,
   useAPIClient,
@@ -68,6 +69,7 @@ export function AddButton(props: AddButtonProps) {
             'aria-label': item.type,
             key: item.type,
             label: item.title,
+            icon: item.icon,
           })),
         };
       })
@@ -89,7 +91,7 @@ export function AddButton(props: AddButtonProps) {
   }
 
   return (
-    <div className={styles.addButtonClass}>
+    <div className={cx(styles.addButtonClass, 'workflow-add-node-button')}>
       <Dropdown
         menu={{
           items: groups,
@@ -101,6 +103,10 @@ export function AddButton(props: AddButtonProps) {
             max-height: 30em;
             overflow-y: auto;
           }
+          .ant-dropdown-menu-item-group-list {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+          }
         `}
       >
         <Button

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

@@ -43,8 +43,8 @@ export function Branch({
     <div className={cx('workflow-branch', styles.branchClass, className)}>
       <div className="workflow-branch-lines" />
       {controller}
-      <AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
       <div className="workflow-node-list">
+        <AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
         {list.map((item) => (
           <Node data={item} key={item.id} />
         ))}

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

@@ -7,6 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { CalculatorOutlined } from '@ant-design/icons';
+
 import { SchemaInitializerItemType } from '@nocobase/client';
 import { Evaluator, evaluators, getOptions } from '@nocobase/evaluators/client';
 
@@ -22,6 +25,7 @@ export default class extends Instruction {
   type = 'calculation';
   group = 'calculation';
   description = `{{t("Calculate an expression based on a calculation engine and obtain a value as the result. Variables in the upstream nodes can be used in the expression.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<CalculatorOutlined style={{}} />);
   fieldset = {
     engine: {
       type: 'string',

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

@@ -19,6 +19,7 @@ import { lang, NAMESPACE } from '../locale';
 import useStyles from '../style';
 import { useWorkflowVariableOptions, WorkflowVariableTextArea } from '../variable';
 import { CalculationConfig } from '../components/Calculation';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 const BRANCH_INDEX = {
   DEFAULT: null,
@@ -31,6 +32,7 @@ export default class extends Instruction {
   type = 'condition';
   group = 'control';
   description = `{{t('Based on boolean result of the calculation to determine whether to "continue" or "exit" the process, or continue on different branches of "yes" and "no".', { ns: "${NAMESPACE}" })}}`;
+  icon = (<QuestionCircleOutlined style={{}} />);
   fieldset = {
     rejectOnFalse: {
       type: 'boolean',

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

@@ -7,6 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { FileAddOutlined } from '@ant-design/icons';
+
 import { SchemaInitializerItemType, parseCollectionName, useCollectionDataSource, useCompile } from '@nocobase/client';
 
 import { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
@@ -52,6 +55,7 @@ export default class extends Instruction {
   type = 'create';
   group = 'collection';
   description = `{{t("Add new record to a collection. You can use variables from upstream nodes to assign values to fields.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<FileAddOutlined style={{}} />);
   fieldset = {
     collection: {
       ...collection,

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

@@ -7,6 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+
 import { useCollectionDataSource } from '@nocobase/client';
 import { isValidFilter } from '@nocobase/utils/client';
 
@@ -20,6 +23,7 @@ export default class extends Instruction {
   type = 'destroy';
   group = 'collection';
   description = `{{t("Delete records of a collection. Could use variables in workflow context as filter. All records match the filter will be deleted.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<DeleteOutlined style={{}} />);
   fieldset = {
     collection: {
       ...collection,

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

@@ -7,6 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { StopOutlined } from '@ant-design/icons';
+
 import { Instruction } from '.';
 import { NAMESPACE } from '../locale';
 import { JOB_STATUS } from '../constants';
@@ -16,6 +19,7 @@ export default class extends Instruction {
   type = 'end';
   group = 'control';
   description = `{{t("End the process immediately, with set status.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<StopOutlined style={{}} />);
   fieldset = {
     endStatus: {
       type: 'number',

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

@@ -60,6 +60,7 @@ export abstract class Instruction {
   type: string;
   group: string;
   description?: string;
+  icon?: JSX.Element;
   /**
    * @deprecated migrate to `presetFieldset` instead
    */
@@ -612,7 +613,7 @@ export function NodeDefaultView(props) {
       >
         <div className={styles.nodeHeaderClass}>
           <div className={cx(styles.nodeMetaClass, 'workflow-node-meta')}>
-            <Tag>{typeTitle}</Tag>
+            <Tag icon={instruction.icon}>{typeTitle}</Tag>
             <span className="workflow-node-id">{data.id}</span>
           </div>
           <div className="workflow-node-actions">
@@ -648,15 +649,15 @@ export function NodeDefaultView(props) {
                 type: 'void',
                 properties: {
                   ...(instruction.view ? { view: instruction.view } : {}),
-                  button: {
+                  // button: {
-                    type: 'void',
+                  //   type: 'void',
-                    'x-content': detailText,
+                  //   'x-content': detailText,
-                    'x-component': Button,
+                  //   'x-component': Button,
-                    'x-component-props': {
+                  //   'x-component-props': {
-                      type: 'link',
+                  //     type: 'link',
-                      className: 'workflow-node-config-button',
+                  //     className: 'workflow-node-config-button',
-                    },
+                  //   },
-                  },
+                  // },
                   [data.id]: {
                     type: 'void',
                     title: (

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

@@ -7,6 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React from 'react';
+import { FileSearchOutlined } from '@ant-design/icons';
 import { ArrayItems } from '@formily/antd-v5';
 
 import {
@@ -62,6 +64,7 @@ export default class extends Instruction {
   type = 'query';
   group = 'collection';
   description = `{{t("Query records from a collection. You can use variables from upstream nodes as query conditions.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<FileSearchOutlined style={{}} />);
   fieldset = {
     collection: {
       ...collection,

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

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { uid } from '@formily/shared';
+import React from 'react';
+import { EditOutlined } from '@ant-design/icons';
 
 import { useCollectionDataSource } from '@nocobase/client';
 import { isValidFilter } from '@nocobase/utils/client';
@@ -26,6 +27,7 @@ export default class extends Instruction {
   type = 'update';
   group = 'collection';
   description = `{{t("Update records of a collection. You can use variables from upstream nodes as query conditions and field values.", { ns: "${NAMESPACE}" })}}`;
+  icon = (<EditOutlined style={{}} />);
   fieldset = {
     collection: {
       ...collection,

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

@@ -150,11 +150,22 @@ const useStyles = createStyles(({ css, token }) => {
       flex-direction: column;
       align-items: center;
       position: relative;
-      min-width: 20em;
+      min-width: 16em;
       padding: 0 2em;
 
       .workflow-node-list {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        > :last-child {
+          > .workflow-add-node-button {
+            &:after {
+              display: none;
+            }
+          }
+        }
       }
 
       .workflow-branch-lines {
@@ -240,7 +251,7 @@ const useStyles = createStyles(({ css, token }) => {
 
     nodeCardClass: css`
       position: relative;
-      width: 20em;
+      width: 16em;
       background: ${token.colorBgContainer};
       padding: 1em;
       box-shadow: ${token.boxShadowTertiary};
@@ -361,14 +372,32 @@ const useStyles = createStyles(({ css, token }) => {
     `,
 
     addButtonClass: css`
+      position: relative;
       flex-shrink: 0;
-      padding: 2em 0;
+      padding: 1em 0;
 
       > .ant-btn {
         &:disabled {
           visibility: hidden;
         }
       }
+
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0.1em;
+        left: calc(50% - 0.25em);
+        width: 0.5em;
+        height: 0.5em;
+        border: 1px solid ${token.colorBorder};
+        border-width: 0 1px 1px 0;
+        transform: rotate(45deg);
+      }
+
+      &:first-child:last-child:after {
+        display: none;
+      }
     `,
 
     conditionClass: css`
@@ -394,6 +423,9 @@ const useStyles = createStyles(({ css, token }) => {
       transform: translateY(-50%);
       width: 2em;
       height: 6em;
+      flex-shrink: 0;
+      padding: 2em 0;
+      font-size: 14px;
     `,
 
     terminalClass: css`

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

@@ -301,15 +301,15 @@ export const TriggerConfig = () => {
               name: `workflow-trigger-${workflow.id}`,
               type: 'void',
               properties: {
-                config: {
+                // config: {
-                  type: 'void',
+                //   type: 'void',
-                  'x-content': detailText,
+                //   'x-content': detailText,
-                  'x-component': Button,
+                //   'x-component': Button,
-                  'x-component-props': {
+                //   'x-component-props': {
-                    type: 'link',
+                //     type: 'link',
-                    className: 'workflow-node-config-button',
+                //     className: 'workflow-node-config-button',
-                  },
+                //   },
-                },
+                // },
                 drawer: {
                   type: 'void',
                   title: titleText,