feat: support event setting panel

packages/core/client/src/block-provider/hooks/useSubmitEvents.ts

@@ -42,14 +42,14 @@ export function useSubmitEvents() {
       {
         name: 'afterSubmit',
         title: '表单提交后',
-        params: {
+        // params: {
-          values: {
+        //   values: {
-            title: '表单值',
+        //     title: '表单值',
-            type: 'object',
+        //     type: 'object',
-            description: '表单提交后的值',
+        //     description: '表单提交后的值',
-            properties: fieldsMap,
+        //     properties: fieldsMap,
-          },
+        //   },
-        },
+        // },
       },
     ],
   });

packages/core/client/src/event-flow/EventSettingItem/ActionsSetting/ActionParamSelect.tsx

@@ -22,5 +22,5 @@ export function ActionParamSelect(props: { action: EventActionSetting }) {
     value: params[key]?.name || key,
     ...params[key],
   }));
-  return <Select options={options} {...rest}></Select>;
+  return <Select options={options} {...rest} style={{ minWidth: 150 }}></Select>;
 }

packages/core/client/src/event-flow/EventSettingItem/ActionsSetting/ActionSelect.tsx

@@ -30,5 +30,14 @@ export const ActionSelect = observer((props: any) => {
     }
   };
   const _value = value ? [value.definition, `${value.definition}.${value.event}.${value.uid}`] : [];
-  return <Cascader placeholder="请选择动作" options={options} onChange={_onChange} value={_value} {...rest} />;
+  return (
+    <Cascader
+      placeholder="请选择动作"
+      options={options}
+      onChange={_onChange}
+      value={_value}
+      style={{ minWidth: 300 }}
+      {...rest}
+    />
+  );
 });

packages/core/client/src/event-flow/EventSettingItem/ActionsSetting/ConditionSelect.tsx

@@ -0,0 +1,89 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { Filter, useFilterOptions } from '../Filter';
+import { ArrayBase } from '@formily/antd-v5';
+import { css } from '@emotion/css';
+import { getShouldChange } from '../../../schema-settings/VariableInput';
+import { DynamicComponentProps } from '../../../schema-component/antd/filter/DynamicComponent';
+import { VariableInput } from '../../../schema-settings/VariableInput';
+import { uniqBy } from 'lodash';
+import { useVariableOptions } from './hooks/useVariableOptions';
+
+export default function ConditionSelect(props: any) {
+  const recordValues = ArrayBase.useRecord();
+  const filterOptions = useFilterOptions(recordValues);
+  const variableOptions = useVariableOptions();
+  console.log('filterOptions', filterOptions, props);
+
+  return (
+    <Filter
+      className={css`
+        position: relative;
+        width: 100%;
+        margin-left: 10px;
+      `}
+      dynamicComponent={(props: DynamicComponentProps) => {
+        const { collectionField } = props;
+        return (
+          <VariableInput
+            {...props}
+            // form={form}
+            // record={record}
+            shouldChange={getShouldChange({
+              // collectionField,
+              // variables,
+              // localVariables,
+              // getAllCollectionsInheritChain,
+            })}
+            returnScope={(scope) => {
+              return uniqBy([...scope, ...variableOptions], 'key');
+            }}
+          />
+        );
+      }}
+      {...props}
+    />
+  );
+}
+
+// 'x-use-component-props': () => {
+//   return {
+//     options: filterOptions,
+//     className: css`
+//       position: relative;
+//       width: 100%;
+//       margin-left: 10px;
+//     `,
+//   };
+// },
+
+// 'x-component-props': {
+//   collectionName,
+//   dynamicComponent: (props: DynamicComponentProps) => {
+//     const { collectionField } = props;
+//     return (
+//       <VariableInput
+//         {...props}
+//         form={form}
+//         record={record}
+//         shouldChange={getShouldChange({
+//           collectionField,
+//           variables,
+//           localVariables,
+//           getAllCollectionsInheritChain,
+//         })}
+//         returnScope={(scope) => {
+//           return uniqBy([...scope, ...variableOptions], 'key');
+//         }}
+//       />
+//     );
+//   },
+// },

packages/core/client/src/event-flow/EventSettingItem/ActionsSetting/index.tsx

@@ -8,7 +8,7 @@
  */
 
 import { css } from '@emotion/css';
-import { observer, useFieldSchema } from '@formily/react';
+import { observer, useField, useFieldSchema, useForm } from '@formily/react';
 import React, { useMemo } from 'react';
 import { useCollectionManager_deprecated } from '../../../collection-manager';
 import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
@@ -24,7 +24,7 @@ import { ActionsField } from './Actions';
 import { FormProvider, createSchemaField } from '@formily/react';
 import { ArrayCollapse } from '../components/LinkageHeader';
 import { Filter } from '../Filter';
-import { ArrayBase } from '@formily/antd-v5';
+import { ArrayBase, Select, DatePicker, Editable, Input, ArrayItems, FormItem } from '@formily/antd-v5';
 import { useFilterOptions } from './hooks/useFilterOptions';
 import { EventDefinition, EventSetting } from '../../types';
 import { useVariableOptions } from './hooks/useVariableOptions';
@@ -32,7 +32,34 @@ import { uniqBy } from 'lodash';
 import { AddBtn, DeleteBtn } from './AddBtn';
 import { ActionSelect } from './ActionSelect';
 import { ActionParamSelect } from './ActionParamSelect';
+import { Space } from 'antd';
+import { useFormBlockContext } from '../../../block-provider';
+import ConditionSelect from './ConditionSelect';
+import { actionsSchema } from './schemas/actions';
 
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    DatePicker,
+    Editable,
+    Space, // 使用antd包内的Space组件，包含Compact
+    Compact: Space.Compact,
+    Input,
+    Select,
+    ArrayItems,
+    ArrayCollapse,
+    Filter,
+    ActionSelect,
+    ActionParamSelect,
+    ConditionSelect,
+  },
+  scope: {
+    emptyParams(field, target) {
+      const params = field.query('.params').take(1);
+      params.value = [];
+    },
+  },
+});
 export interface Props {
   dynamicComponent: any;
   definitions: EventDefinition[];
@@ -44,25 +71,26 @@ export const ActionsSetting = withDynamicSchemaProps(
     const array = ArrayBase.useArray();
     const recordValues = ArrayBase.useRecord();
     const index = ArrayBase.useIndex();
-    const {
+    const { definitions, options, defaultValues, collectionName, variables, localVariables, record, dynamicComponent } =
-      definitions,
+      props;
-      options,
-      defaultValues,
-      collectionName,
-      form,
-      variables,
-      localVariables,
-      record,
-      dynamicComponent,
-    } = props;
     const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
     const parentRecordData = useCollectionParentRecordData();
-
+    const { form } = useFormBlockContext();
     const filterOptions = useFilterOptions(recordValues);
     const variableOptions = useVariableOptions();
     console.log('variableOptions', variableOptions);
+    const components = useMemo(
+      () => ({
+        ArrayCollapse,
+        Filter,
+        Space,
+        ActionParamSelect,
+        ActionSelect,
+        ConditionSelect,
+      }),
+      [],
+    );
 
-    const components = useMemo(() => ({ ArrayCollapse, Filter }), []);
     const schema = useMemo(
       () => ({
         type: 'object',
@@ -102,129 +130,13 @@ export const ActionsSetting = withDynamicSchemaProps(
                       'x-content': '{{ t("Condition") }}',
                     },
                     condition: {
-                      'x-component': 'Filter',
+                      'x-component': 'ConditionSelect',
-                      'x-use-component-props': () => {
-                        return {
-                          options: filterOptions,
-                          className: css`
-                            position: relative;
-                            width: 100%;
-                            margin-left: 10px;
-                          `,
-                        };
-                      },
-                      'x-component-props': {
-                        collectionName,
-                        dynamicComponent: (props: DynamicComponentProps) => {
-                          const { collectionField } = props;
-                          return (
-                            <VariableInput
-                              {...props}
-                              form={form}
-                              record={record}
-                              shouldChange={getShouldChange({
-                                collectionField,
-                                variables,
-                                localVariables,
-                                getAllCollectionsInheritChain,
-                              })}
-                              returnScope={(scope) => {
-                                return uniqBy([...scope, ...variableOptions], 'key');
-                              }}
-                            />
-                          );
-                        },
-                      },
                     },
                     actionsTitle: {
                       'x-component': 'h4',
                       'x-content': '{{ t("动作") }}',
                     },
-                    actionsBlock: {
+                    actionsBlock: actionsSchema,
-                      type: 'void',
-                      properties: {
-                        actions: {
-                          type: 'array',
-                          'x-component': 'ArrayItems',
-                          items: {
-                            type: 'object',
-                            'x-component': 'Space',
-                            properties: {
-                              action: {
-                                type: 'string',
-                                'x-component': ActionSelect,
-                              },
-
-                              params: {
-                                type: 'array',
-                                'x-component': 'ArrayItems',
-                                items: {
-                                  type: 'object',
-                                  'x-component': 'Space',
-                                  'x-component-props': {
-                                    direction: 'vertical',
-                                    style: {
-                                      marginBottom: '10px',
-                                    },
-                                  },
-                                  properties: {
-                                    key: {
-                                      type: 'string',
-                                      'x-component': ActionParamSelect,
-                                      'x-reactions': {
-                                        dependencies: ['...action'],
-                                        fulfill: {
-                                          schema: {
-                                            'x-component-props': {
-                                              action: '{{$deps[0]}}',
-                                            },
-                                          },
-                                        },
-                                      },
-                                    },
-                                    value: {
-                                      type: 'string',
-                                      'x-component': 'Input',
-                                      'x-reactions': {
-                                        dependencies: ['...action'],
-                                        fulfill: {
-                                          schema: {
-                                            'x-component-props': {
-                                              action: '{{$deps[0]}}',
-                                            },
-                                          },
-                                        },
-                                      },
-                                    },
-                                    delete: {
-                                      type: 'void',
-                                      'x-component': DeleteBtn,
-                                    },
-                                  },
-                                },
-                              },
-                              add: {
-                                type: 'void',
-                                'x-component': AddBtn,
-                                'x-component-props': {
-                                  addKey: '.params',
-                                  text: '{{ t("添加参数") }}',
-                                },
-                              },
-                            },
-                          },
-                        },
-                        add: {
-                          type: 'void',
-                          'x-component': AddBtn,
-                          'x-component-props': {
-                            addKey: '.actions',
-                            text: '{{ t("添加动作") }}',
-                          },
-                        },
-                      },
-                      // 'x-component': ActionsField,
-                    },
                   },
                 },
                 remove: {
@@ -236,7 +148,7 @@ export const ActionsSetting = withDynamicSchemaProps(
             properties: {
               add: {
                 type: 'void',
-                title: '{{ t("Add actions") }}',
+                title: '{{ t("添加规则") }}',
                 'x-component': 'ArrayCollapse.Addition',
                 'x-reactions': {
                   dependencies: ['rules'],
@@ -269,7 +181,18 @@ export const ActionsSetting = withDynamicSchemaProps(
       [dynamicComponent, fieldSchema, options],
     );
 
-    return <SchemaComponent components={components} schema={schema} />;
+    return (
+      <SchemaComponent
+        components={components}
+        schema={schema}
+        scope={{
+          emptyParams: (field, target) => {
+            const params = field.query('.params').take(1);
+            params.value = [];
+          },
+        }}
+      />
+    );
 
     // return (
     //   // 这里使用 SubFormProvider 包裹，是为了让子表格的联动规则中 “当前对象” 的配置显示正确

packages/core/client/src/event-flow/EventSettingItem/ActionsSetting/schemas/actions.ts

@@ -0,0 +1,103 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+const actionParamsSchema = {
+  type: 'void',
+  properties: {
+    params: {
+      type: 'array',
+      'x-component': 'ArrayItems',
+      items: {
+        type: 'object',
+        'x-decorator': 'Space.Compact',
+        'x-decorator-props': {
+          style: {
+            marginBottom: 8,
+          },
+        },
+        properties: {
+          key: {
+            type: 'string',
+            'x-component': 'ActionParamSelect',
+            'x-reactions': {
+              dependencies: ['...action'],
+              fulfill: {
+                schema: {
+                  'x-component-props': {
+                    action: '{{$deps[0]}}',
+                  },
+                },
+              },
+            },
+          },
+          value: { type: 'string', 'x-component': 'Input' },
+          removeBtn: {
+            type: 'void',
+            'x-component': 'ArrayItems.Remove',
+            'x-component-props': { type: 'default', style: { paddingRight: 6 } },
+          },
+        },
+      },
+      properties: {
+        addBtn: {
+          type: 'void',
+          'x-component': 'ArrayItems.Addition',
+          title: '{{ t("添加参数") }}',
+          'x-component-props': { block: false, type: 'link' },
+        },
+      },
+    },
+  },
+};
+
+export const actionsSchema = {
+  type: 'void',
+  properties: {
+    actions: {
+      type: 'array',
+      'x-component': 'ArrayItems',
+      items: {
+        type: 'object',
+        'x-component': 'Space',
+        'x-component-props': {
+          align: 'start',
+          style: {
+            marginBottom: 8,
+          },
+        },
+        properties: {
+          action: {
+            type: 'string',
+            'x-component': 'ActionSelect',
+            'x-reactions': {
+              effects: ['onFieldValueChange'],
+              fulfill: {
+                run: 'emptyParams($self,$target)',
+              },
+            },
+          },
+          paramsBlock: actionParamsSchema,
+          removeBtn: {
+            type: 'void',
+            'x-component': 'ArrayItems.Remove',
+          },
+        },
+      },
+      properties: {
+        add: {
+          type: 'void',
+          'x-component': 'ArrayItems.Addition',
+          title: '{{ t("添加动作") }}',
+          'x-component-props': { block: false, type: 'link' },
+        },
+      },
+    },
+  },
+  // 'x-component': ActionsField,
+};

packages/core/client/src/event-flow/EventSettingItem/EventSelect.tsx

@@ -44,7 +44,7 @@ export default function EventSelect(props: {
     <TreeSelect
       value={selectedEvent}
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-      placeholder="Please select"
+      placeholder="选择事件"
       allowClear
       treeDefaultExpandAll
       onChange={(value) => {

packages/core/client/src/event-flow/EventSettingItem/_/index copy 2.tsx

@@ -0,0 +1,424 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css } from '@emotion/css';
+import { observer, useField, useFieldSchema, useForm } from '@formily/react';
+import React, { useMemo } from 'react';
+import { useCollectionManager_deprecated } from '../../../collection-manager';
+import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
+import { CollectionProvider } from '../../../data-source/collection/CollectionProvider';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
+import { RecordProvider } from '../../../record-provider';
+import { SchemaComponent, useProps } from '../../../schema-component';
+import { SubFormProvider } from '../../../schema-component/antd/association-field/hooks';
+import { DynamicComponentProps } from '../../../schema-component/antd/filter/DynamicComponent';
+import { FilterContext } from '../../../schema-component/antd/filter/context';
+import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
+import { ActionsField } from './Actions';
+import { FormProvider, createSchemaField } from '@formily/react';
+import { ArrayCollapse } from '../components/LinkageHeader';
+import { Filter } from '../Filter';
+import { ArrayBase, Select, DatePicker, Editable, Input, ArrayItems, FormItem } from '@formily/antd-v5';
+import { useFilterOptions } from './hooks/useFilterOptions';
+import { EventDefinition, EventSetting } from '../../types';
+import { useVariableOptions } from './hooks/useVariableOptions';
+import { uniqBy } from 'lodash';
+import { AddBtn, DeleteBtn } from './AddBtn';
+import { ActionSelect } from './ActionSelect';
+import { ActionParamSelect } from './ActionParamSelect';
+import { Space } from 'antd';
+import { useFormBlockContext } from '../../../block-provider';
+import ConditionSelect from './ConditionSelect';
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    DatePicker,
+    Editable,
+    Space, // 使用antd包内的Space组件，包含Compact
+    Compact: Space.Compact,
+    Input,
+    Select,
+    ArrayItems,
+    ArrayCollapse,
+    Filter,
+    ActionSelect,
+    ActionParamSelect,
+    ConditionSelect,
+  },
+  scope: {
+    emptyParams(field, target) {
+      const params = field.query('.params').take(1);
+      params.value = [];
+    },
+  },
+});
+export interface Props {
+  dynamicComponent: any;
+  definitions: EventDefinition[];
+}
+
+export const ActionsSetting = withDynamicSchemaProps(
+  observer((props: Props) => {
+    const fieldSchema = useFieldSchema();
+    const array = ArrayBase.useArray();
+    const recordValues = ArrayBase.useRecord();
+    const index = ArrayBase.useIndex();
+    const { definitions, options, defaultValues, collectionName, variables, localVariables, record, dynamicComponent } =
+      props;
+    const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
+    const parentRecordData = useCollectionParentRecordData();
+    const { form } = useFormBlockContext();
+    const filterOptions = useFilterOptions(recordValues);
+    const variableOptions = useVariableOptions();
+    console.log('variableOptions', variableOptions);
+    const components = useMemo(() => ({ ArrayCollapse, Filter }), []);
+
+    const schema = useMemo(
+      () => ({
+        type: 'object',
+        properties: {
+          rules: {
+            type: 'array',
+            // default: defaultValues,
+            'x-component': 'ArrayCollapse',
+            'x-decorator': 'FormItem',
+            'x-component-props': {
+              accordion: true,
+              titleRender: (item: any, index: number) => {
+                return `动作 ${index + 1}`;
+              },
+              showEmpty: false,
+            },
+            items: {
+              type: 'object',
+              'x-component': 'ArrayCollapse.CollapsePanel',
+              'x-component-props': {
+                // extra: <EnableLinkage />,
+              },
+              properties: {
+                layout: {
+                  type: 'void',
+                  'x-component': 'FormLayout',
+                  'x-component-props': {
+                    labelStyle: {
+                      marginTop: '6px',
+                    },
+                    labelCol: 8,
+                    wrapperCol: 16,
+                  },
+                  properties: {
+                    conditionsTitle: {
+                      'x-component': 'h4',
+                      'x-content': '{{ t("Condition") }}',
+                    },
+                    condition: {
+                      'x-component': 'Filter',
+                      'x-use-component-props': () => {
+                        return {
+                          options: filterOptions,
+                          className: css`
+                            position: relative;
+                            width: 100%;
+                            margin-left: 10px;
+                          `,
+                        };
+                      },
+                      'x-component-props': {
+                        collectionName,
+                        dynamicComponent: (props: DynamicComponentProps) => {
+                          const { collectionField } = props;
+                          return (
+                            <VariableInput
+                              {...props}
+                              form={form}
+                              record={record}
+                              shouldChange={getShouldChange({
+                                collectionField,
+                                variables,
+                                localVariables,
+                                getAllCollectionsInheritChain,
+                              })}
+                              returnScope={(scope) => {
+                                return uniqBy([...scope, ...variableOptions], 'key');
+                              }}
+                            />
+                          );
+                        },
+                      },
+                    },
+                    actionsTitle: {
+                      'x-component': 'h4',
+                      'x-content': '{{ t("动作") }}',
+                    },
+                    actionsBlock: {
+                      type: 'void',
+                      properties: {
+                        actions: {
+                          type: 'array',
+                          'x-component': 'ArrayItems',
+                          items: {
+                            type: 'object',
+                            'x-component': 'Space',
+                            properties: {
+                              action: {
+                                type: 'string',
+                                'x-component': ActionSelect,
+                              },
+
+                              params: {
+                                type: 'array',
+                                'x-component': 'ArrayItems',
+                                items: {
+                                  type: 'object',
+                                  'x-component': 'Space',
+                                  'x-component-props': {
+                                    direction: 'vertical',
+                                    style: {
+                                      marginBottom: '10px',
+                                    },
+                                  },
+                                  properties: {
+                                    key: {
+                                      type: 'string',
+                                      'x-component': ActionParamSelect,
+                                      'x-reactions': {
+                                        dependencies: ['...action'],
+                                        fulfill: {
+                                          schema: {
+                                            'x-component-props': {
+                                              action: '{{$deps[0]}}',
+                                            },
+                                          },
+                                        },
+                                      },
+                                    },
+                                    value: {
+                                      type: 'string',
+                                      'x-component': 'Input',
+                                      'x-reactions': {
+                                        dependencies: ['...action'],
+                                        fulfill: {
+                                          schema: {
+                                            'x-component-props': {
+                                              action: '{{$deps[0]}}',
+                                            },
+                                          },
+                                        },
+                                      },
+                                    },
+                                    delete: {
+                                      type: 'void',
+                                      'x-component': DeleteBtn,
+                                    },
+                                  },
+                                },
+                              },
+                              add: {
+                                type: 'void',
+                                'x-component': AddBtn,
+                                'x-component-props': {
+                                  addKey: '.params',
+                                  text: '{{ t("添加参数") }}',
+                                },
+                              },
+                            },
+                          },
+                        },
+                        add: {
+                          type: 'void',
+                          'x-component': AddBtn,
+                          'x-component-props': {
+                            addKey: '.actions',
+                            text: '{{ t("添加动作") }}',
+                          },
+                        },
+                      },
+                      // 'x-component': ActionsField,
+                    },
+                  },
+                },
+                remove: {
+                  type: 'void',
+                  'x-component': 'ArrayCollapse.Remove',
+                },
+              },
+            },
+            properties: {
+              add: {
+                type: 'void',
+                title: '{{ t("Add actions") }}',
+                'x-component': 'ArrayCollapse.Addition',
+                'x-reactions': {
+                  dependencies: ['rules'],
+                  fulfill: {
+                    state: {
+                      // disabled: '{{$deps[0].length >= 3}}',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }),
+      [
+        collectionName,
+        defaultValues,
+        form,
+        getAllCollectionsInheritChain,
+        localVariables,
+        options,
+        props,
+        record,
+        variables,
+        filterOptions,
+      ],
+    );
+    const value = useMemo(
+      () => ({ field: options, fieldSchema, dynamicComponent, options: options || [] }),
+      [dynamicComponent, fieldSchema, options],
+    );
+
+    console.log('schema filterOptions', filterOptions);
+
+    return (
+      <SchemaField>
+        <SchemaField.Array
+          name="rules"
+          x-component="ArrayCollapse"
+          x-component-props={{ accordion: true, titleRender: (item: any, index: number) => `动作 ${index + 1}` }}
+        >
+          <SchemaField.Object>
+            <SchemaField.Void x-component="ArrayCollapse.Remove" />
+            <SchemaField.Void x-component="h4" x-content="条件" />
+            <SchemaField.Object
+              name="condition"
+              x-component="ConditionSelect"
+              x-use-component-props={() => {
+                return {
+                  options: filterOptions,
+                  className: css`
+                    position: relative;
+                    width: 100%;
+                    margin-left: 10px;
+                  `,
+                };
+              }}
+              x-component-props={{
+                collectionName,
+                dynamicComponent: (props: DynamicComponentProps) => {
+                  const { collectionField } = props;
+                  return (
+                    <VariableInput
+                      {...props}
+                      // form={form}
+                      record={record}
+                      shouldChange={getShouldChange({
+                        collectionField,
+                        variables,
+                        localVariables,
+                        getAllCollectionsInheritChain,
+                      })}
+                    />
+                  );
+                },
+              }}
+            />
+
+            <SchemaField.Void x-component="h4" x-content="动作" />
+
+            <SchemaField.Array name="actions" x-component="ArrayItems">
+              <SchemaField.Object
+                x-decorator="Space"
+                x-decorator-props={{
+                  align: 'start',
+                  style: {
+                    marginBottom: 8,
+                  },
+                }}
+              >
+                <SchemaField.String
+                  name="action"
+                  x-component="ActionSelect"
+                  x-reactions={{
+                    effects: ['onFieldValueChange'],
+                    fulfill: {
+                      run: 'emptyParams($self,$target)',
+                    },
+                  }}
+                />
+                <SchemaField.Array name="params" x-component="ArrayItems">
+                  <SchemaField.Object
+                    x-decorator="Space.Compact"
+                    x-decorator-props={{
+                      style: {
+                        marginBottom: 8,
+                      },
+                    }}
+                  >
+                    <SchemaField.String
+                      name="key"
+                      x-component="ActionParamSelect"
+                      x-reactions={{
+                        dependencies: ['...action'],
+                        fulfill: {
+                          schema: {
+                            'x-component-props': {
+                              action: '{{$deps[0]}}',
+                            },
+                          },
+                        },
+                      }}
+                    />
+                    <SchemaField.String name="value" x-component="Input" />
+                    <SchemaField.Void
+                      x-component="ArrayItems.Remove"
+                      x-component-props={{ type: 'default', style: { paddingRight: 6 } }}
+                    />
+                  </SchemaField.Object>
+                  <SchemaField.Void
+                    x-component="ArrayItems.Addition"
+                    title="添加参数"
+                    x-component-props={{ block: false, type: 'link' }}
+                  />
+                </SchemaField.Array>
+                <SchemaField.Void x-component="ArrayItems.Remove" />
+              </SchemaField.Object>
+              <SchemaField.Void
+                x-component="ArrayItems.Addition"
+                title="添加动作"
+                x-component-props={{ block: false, type: 'link' }}
+              />
+            </SchemaField.Array>
+          </SchemaField.Object>
+          <SchemaField.Void x-component="ArrayCollapse.Addition" title="添加规则" />
+        </SchemaField.Array>
+      </SchemaField>
+    );
+
+    // return <SchemaComponent components={components} schema={schema} />;
+
+    // return (
+    //   // 这里使用 SubFormProvider 包裹，是为了让子表格的联动规则中 “当前对象” 的配置显示正确
+    //   // <FormProvider form={form}>
+    //   <SubFormProvider value={{ value: null, collection: { name: collectionName } as any }}>
+    //     <RecordProvider record={record} parent={parentRecordData}>
+    //       <FilterContext.Provider value={value}>
+    //         <CollectionProvider name={collectionName}>
+    //           <SchemaComponent components={components} schema={schema} />
+    //         </CollectionProvider>
+    //       </FilterContext.Provider>
+    //     </RecordProvider>
+    //   </SubFormProvider>
+    //   // </FormProvider>
+    // );
+  }),
+  { displayName: 'ActionsSetting' },
+);

packages/core/client/src/event-flow/EventSettingItem/_/index copy.tsx

@@ -0,0 +1,290 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css } from '@emotion/css';
+import { observer, useFieldSchema } from '@formily/react';
+import React, { useMemo } from 'react';
+import { useCollectionManager_deprecated } from '../../../collection-manager';
+import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
+import { CollectionProvider } from '../../../data-source/collection/CollectionProvider';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
+import { RecordProvider } from '../../../record-provider';
+import { SchemaComponent, useProps } from '../../../schema-component';
+import { SubFormProvider } from '../../../schema-component/antd/association-field/hooks';
+import { DynamicComponentProps } from '../../../schema-component/antd/filter/DynamicComponent';
+import { FilterContext } from '../../../schema-component/antd/filter/context';
+import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
+import { ActionsField } from './Actions';
+import { FormProvider, createSchemaField } from '@formily/react';
+import { ArrayCollapse } from '../components/LinkageHeader';
+import { Filter } from '../Filter';
+import { ArrayBase } from '@formily/antd-v5';
+import { useFilterOptions } from './hooks/useFilterOptions';
+import { EventDefinition, EventSetting } from '../../types';
+import { useVariableOptions } from './hooks/useVariableOptions';
+import { uniqBy } from 'lodash';
+import { AddBtn, DeleteBtn } from './AddBtn';
+import { ActionSelect } from './ActionSelect';
+import { ActionParamSelect } from './ActionParamSelect';
+
+export interface Props {
+  dynamicComponent: any;
+  definitions: EventDefinition[];
+}
+
+export const ActionsSetting = withDynamicSchemaProps(
+  observer((props: Props) => {
+    const fieldSchema = useFieldSchema();
+    const array = ArrayBase.useArray();
+    const recordValues = ArrayBase.useRecord();
+    const index = ArrayBase.useIndex();
+    const {
+      definitions,
+      options,
+      defaultValues,
+      collectionName,
+      form,
+      variables,
+      localVariables,
+      record,
+      dynamicComponent,
+    } = props;
+    const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
+    const parentRecordData = useCollectionParentRecordData();
+
+    const filterOptions = useFilterOptions(recordValues);
+    const variableOptions = useVariableOptions();
+    console.log('variableOptions', variableOptions);
+
+    const components = useMemo(() => ({ ArrayCollapse, Filter }), []);
+    const schema = useMemo(
+      () => ({
+        type: 'object',
+        properties: {
+          rules: {
+            type: 'array',
+            // default: defaultValues,
+            'x-component': 'ArrayCollapse',
+            'x-decorator': 'FormItem',
+            'x-component-props': {
+              accordion: true,
+              titleRender: (item: any, index: number) => {
+                return `动作 ${index + 1}`;
+              },
+              showEmpty: false,
+            },
+            items: {
+              type: 'object',
+              'x-component': 'ArrayCollapse.CollapsePanel',
+              'x-component-props': {
+                // extra: <EnableLinkage />,
+              },
+              properties: {
+                layout: {
+                  type: 'void',
+                  'x-component': 'FormLayout',
+                  'x-component-props': {
+                    labelStyle: {
+                      marginTop: '6px',
+                    },
+                    labelCol: 8,
+                    wrapperCol: 16,
+                  },
+                  properties: {
+                    conditionsTitle: {
+                      'x-component': 'h4',
+                      'x-content': '{{ t("Condition") }}',
+                    },
+                    condition: {
+                      'x-component': 'Filter',
+                      'x-use-component-props': () => {
+                        return {
+                          options: filterOptions,
+                          className: css`
+                            position: relative;
+                            width: 100%;
+                            margin-left: 10px;
+                          `,
+                        };
+                      },
+                      'x-component-props': {
+                        collectionName,
+                        dynamicComponent: (props: DynamicComponentProps) => {
+                          const { collectionField } = props;
+                          return (
+                            <VariableInput
+                              {...props}
+                              form={form}
+                              record={record}
+                              shouldChange={getShouldChange({
+                                collectionField,
+                                variables,
+                                localVariables,
+                                getAllCollectionsInheritChain,
+                              })}
+                              returnScope={(scope) => {
+                                return uniqBy([...scope, ...variableOptions], 'key');
+                              }}
+                            />
+                          );
+                        },
+                      },
+                    },
+                    actionsTitle: {
+                      'x-component': 'h4',
+                      'x-content': '{{ t("动作") }}',
+                    },
+                    actionsBlock: {
+                      type: 'void',
+                      properties: {
+                        actions: {
+                          type: 'array',
+                          'x-component': 'ArrayItems',
+                          items: {
+                            type: 'object',
+                            'x-component': 'Space',
+                            properties: {
+                              action: {
+                                type: 'string',
+                                'x-component': ActionSelect,
+                              },
+
+                              params: {
+                                type: 'array',
+                                'x-component': 'ArrayItems',
+                                items: {
+                                  type: 'object',
+                                  'x-component': 'Space',
+                                  'x-component-props': {
+                                    direction: 'vertical',
+                                    style: {
+                                      marginBottom: '10px',
+                                    },
+                                  },
+                                  properties: {
+                                    key: {
+                                      type: 'string',
+                                      'x-component': ActionParamSelect,
+                                      'x-reactions': {
+                                        dependencies: ['...action'],
+                                        fulfill: {
+                                          schema: {
+                                            'x-component-props': {
+                                              action: '{{$deps[0]}}',
+                                            },
+                                          },
+                                        },
+                                      },
+                                    },
+                                    value: {
+                                      type: 'string',
+                                      'x-component': 'Input',
+                                      'x-reactions': {
+                                        dependencies: ['...action'],
+                                        fulfill: {
+                                          schema: {
+                                            'x-component-props': {
+                                              action: '{{$deps[0]}}',
+                                            },
+                                          },
+                                        },
+                                      },
+                                    },
+                                    delete: {
+                                      type: 'void',
+                                      'x-component': DeleteBtn,
+                                    },
+                                  },
+                                },
+                              },
+                              add: {
+                                type: 'void',
+                                'x-component': AddBtn,
+                                'x-component-props': {
+                                  addKey: '.params',
+                                  text: '{{ t("添加参数") }}',
+                                },
+                              },
+                            },
+                          },
+                        },
+                        add: {
+                          type: 'void',
+                          'x-component': AddBtn,
+                          'x-component-props': {
+                            addKey: '.actions',
+                            text: '{{ t("添加动作") }}',
+                          },
+                        },
+                      },
+                      // 'x-component': ActionsField,
+                    },
+                  },
+                },
+                remove: {
+                  type: 'void',
+                  'x-component': 'ArrayCollapse.Remove',
+                },
+              },
+            },
+            properties: {
+              add: {
+                type: 'void',
+                title: '{{ t("Add actions") }}',
+                'x-component': 'ArrayCollapse.Addition',
+                'x-reactions': {
+                  dependencies: ['rules'],
+                  fulfill: {
+                    state: {
+                      // disabled: '{{$deps[0].length >= 3}}',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }),
+      [
+        collectionName,
+        defaultValues,
+        form,
+        getAllCollectionsInheritChain,
+        localVariables,
+        options,
+        props,
+        record,
+        variables,
+        filterOptions,
+      ],
+    );
+    const value = useMemo(
+      () => ({ field: options, fieldSchema, dynamicComponent, options: options || [] }),
+      [dynamicComponent, fieldSchema, options],
+    );
+
+    return <SchemaComponent components={components} schema={schema} />;
+
+    // return (
+    //   // 这里使用 SubFormProvider 包裹，是为了让子表格的联动规则中 “当前对象” 的配置显示正确
+    //   // <FormProvider form={form}>
+    //   <SubFormProvider value={{ value: null, collection: { name: collectionName } as any }}>
+    //     <RecordProvider record={record} parent={parentRecordData}>
+    //       <FilterContext.Provider value={value}>
+    //         <CollectionProvider name={collectionName}>
+    //           <SchemaComponent components={components} schema={schema} />
+    //         </CollectionProvider>
+    //       </FilterContext.Provider>
+    //     </RecordProvider>
+    //   </SubFormProvider>
+    //   // </FormProvider>
+    // );
+  }),
+  { displayName: 'ActionsSetting' },
+);

packages/core/client/src/event-flow/EventSettingItem/index.tsx

@@ -47,12 +47,11 @@ export const EventSettingItem = (props) => {
   const collectionName = 't_aierml1wni1';
   const options = useLinkageCollectionFilterOptions(collectionName);
   const linkageOptions = useLinkageCollectionFieldOptions(collectionName, readPretty);
-  const { form } = useFormBlockContext();
+  const ff = useFormBlockContext();
   const variables = useVariables();
   const localVariables = useLocalVariables();
   const { type: formBlockType } = useFormBlockType();
   const record = useRecord();
-
   return (
     <SchemaSettingsModalItem
       title={'Event Setting'}
@@ -122,7 +121,7 @@ export const EventSettingItem = (props) => {
                             category: 'default',
                             elementType: 'field',
                             collectionName,
-                            form,
+                            // form,
                             variables,
                             localVariables,
                             record,

packages/core/client/src/event-flow/types/index.ts

@@ -75,7 +75,7 @@ export interface EventSetting {
 }
 export interface EventActionSetting {
   definition: string;
-  event: string;
+  action: string;
   uid?: string;
   params?: Array<EventActionSettingParams>;
 }