@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/settings/wrappers/contextual/StepSettingsDialog.tsx

@@ -0,0 +1,217 @@
+/**
+ * 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 { createForm } from '@formily/core';
+import { createSchemaField, FormProvider, ISchema, observer } from '@formily/react';
+import { autorun, toJS } from '@formily/reactive';
+import { Button, Space } from 'antd';
+import React, { useEffect } from 'react';
+import { FlowSettingsContextProvider, useFlowSettingsContext } from '../../../../hooks/useFlowSettingsContext';
+import { StepSettingsDialogProps } from '../../../../types';
+import { compileUiSchema, FlowExitException, getT, resolveDefaultParams, resolveStepUiSchema } from '../../../../utils';
+
+const SchemaField = createSchemaField();
+
+/**
+ * StepSettingsDialog组件 - 使用 FormDialog 显示单个步骤的配置界面
+ * @param props.model 模型实例
+ * @param props.flowKey 流程Key
+ * @param props.stepKey 步骤Key
+ * @param props.dialogWidth 对话框宽度，默认为600
+ * @param props.dialogTitle 自定义对话框标题，默认使用step的title
+ * @returns Promise<any> 返回表单提交的值
+ */
+const openStepSettingsDialog = async ({
+  model,
+  flowKey,
+  stepKey,
+  dialogWidth = 600,
+  dialogTitle,
+  mode = 'dialog',
+  ctx,
+  uiModeProps,
+  cleanup,
+}: StepSettingsDialogProps): Promise<any> => {
+  const t = getT(model);
+  const message = model.context.message;
+  if (!model) {
+    message.error(t('Invalid model provided'));
+    throw new Error(t('Invalid model provided'));
+  }
+
+  // 获取流程和步骤信息
+  const flow = model.getFlow(flowKey);
+  const step = flow?.steps?.[stepKey];
+
+  if (!flow) {
+    message.error(t('Flow with key {{flowKey}} not found', { flowKey }));
+    throw new Error(t('Flow with key {{flowKey}} not found', { flowKey }));
+  }
+
+  if (!step) {
+    message.error(t('Step with key {{stepKey}} not found', { stepKey }));
+    throw new Error(t('Step with key {{stepKey}} not found', { stepKey }));
+  }
+
+  let title = step.title;
+  let beforeParamsSave = step.beforeParamsSave;
+  let afterParamsSave = step.afterParamsSave;
+
+  let actionDefaultParams = {};
+  if (step.use) {
+    const action = model.flowEngine?.getAction?.(step.use);
+    if (action) {
+      actionDefaultParams = action.defaultParams || {};
+      title = title || action.title;
+      beforeParamsSave = beforeParamsSave || action.beforeParamsSave;
+      afterParamsSave = afterParamsSave || action.afterParamsSave;
+    }
+  }
+
+  // 获取流程定义
+  const flowDefinition = model.getFlow(flowKey);
+
+  const mergedUiSchema = await resolveStepUiSchema(model, flowDefinition, step);
+
+  // 如果没有可配置的UI Schema，显示提示
+  if (!mergedUiSchema) {
+    message.info(t('This step has no configurable parameters'));
+    return {};
+  }
+
+  const flowRuntimeContext = ctx;
+
+  // 确保上下文中设置了当前步骤
+  if (!flowRuntimeContext.currentStep || flowRuntimeContext.currentStep !== step) {
+    flowRuntimeContext.defineProperty('currentStep', { value: step });
+  }
+
+  const flowEngine = model.flowEngine;
+  const scopes = {
+    useFlowSettingsContext,
+    ...flowEngine.flowSettings?.scopes,
+  };
+
+  // 获取初始值
+  const stepParams = model.getStepParams(flowKey, stepKey) || {};
+
+  // 解析 defaultParams
+  const resolvedDefaultParams = await resolveDefaultParams(step.defaultParams, flowRuntimeContext);
+  const resolveActionDefaultParams = await resolveDefaultParams(actionDefaultParams, flowRuntimeContext);
+  const initialValues = { ...toJS(resolveActionDefaultParams), ...toJS(resolvedDefaultParams), ...toJS(stepParams) };
+
+  // 保存旧参数用于 onParamsChange 回调
+  const previousParams = { ...toJS(stepParams) };
+
+  // 构建表单Schema
+  const formSchema: ISchema = {
+    type: 'object',
+    properties: {
+      layout: {
+        type: 'void',
+        'x-component': 'FormLayout',
+        'x-component-props': {
+          layout: 'vertical', // 垂直布局
+        },
+        properties: mergedUiSchema,
+      },
+    },
+  };
+
+  const openView = model.context.viewer[mode].bind(model.context.viewer);
+
+  const form = createForm({
+    initialValues: compileUiSchema(scopes, initialValues),
+  });
+
+  openView({
+    title: dialogTitle || t(title),
+    width: dialogWidth,
+    destroyOnClose: true,
+    ...toJS(uiModeProps),
+    onClose: () => {
+      if (cleanup) {
+        cleanup();
+      }
+    },
+    content: (currentDialog) => {
+      const FlowStepSettings = observer(() => {
+        useEffect(() => {
+          return autorun(() => {
+            const dynamicProps = toJS(uiModeProps);
+            currentDialog.update(dynamicProps);
+          });
+        }, []);
+
+        const compiledFormSchema = compileUiSchema(scopes, formSchema);
+        return (
+          <FormProvider form={form}>
+            <FlowSettingsContextProvider value={flowRuntimeContext}>
+              <SchemaField
+                schema={compiledFormSchema}
+                components={{
+                  ...flowEngine.flowSettings?.components,
+                }}
+                scope={scopes}
+              />
+              <currentDialog.Footer>
+                <Space align="end">
+                  <Button
+                    type="default"
+                    onClick={() => {
+                      currentDialog.close();
+                    }}
+                  >
+                    {t('Cancel')}
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={async () => {
+                      try {
+                        await form.submit();
+                        const currentValues = form.values;
+                        model.setStepParams(flowKey, stepKey, currentValues);
+
+                        // Call beforeParamsSave callback if it exists
+                        if (beforeParamsSave) {
+                          await beforeParamsSave(flowRuntimeContext, currentValues, previousParams);
+                        }
+
+                        currentDialog.close();
+                        await model.saveStepParams();
+                        message.success(t('Configuration saved'));
+                        // Call afterParamsSave callback if it exists
+                        if (afterParamsSave) {
+                          await afterParamsSave(flowRuntimeContext, currentValues, previousParams);
+                        }
+                      } catch (error) {
+                        if (error instanceof FlowExitException) {
+                          currentDialog.close();
+                          return;
+                        }
+                        console.error(t('Error saving configuration'), ':', error);
+                        message.error(t('Error saving configuration, please check console'));
+                      }
+                    }}
+                  >
+                    {t('OK')}
+                  </Button>
+                </Space>
+              </currentDialog.Footer>
+            </FlowSettingsContextProvider>
+          </FormProvider>
+        );
+      });
+
+      return <FlowStepSettings />;
+    },
+  });
+};
+
+export { openStepSettingsDialog };

package/src/components/settings/wrappers/contextual/StepSettingsDrawer.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { StepSettingsDrawerProps } from '../../../../types';
+import { openStepSettingsDialog } from './StepSettingsDialog';
+
+/**
+ * StepSettingsDrawer组件 - 使用自定义 Drawer 显示单个步骤的配置界面
+ * @param props.model 模型实例
+ * @param props.flowKey 流程Key
+ * @param props.stepKey 步骤Key
+ * @param props.drawerWidth 抽屉宽度，默认为600
+ * @param props.drawerTitle 自定义抽屉标题，默认使用step的title
+ * @returns Promise<any> 返回表单提交的值
+ */
+const openStepSettingsDrawer = async (options: StepSettingsDrawerProps): Promise<any> => {
+  const { drawerWidth, drawerTitle, cleanup, ...restOptions } = options;
+  return openStepSettingsDialog({
+    ...restOptions,
+    mode: 'drawer',
+    dialogWidth: drawerWidth,
+    dialogTitle: drawerTitle,
+    cleanup,
+  });
+};
+
+export { openStepSettingsDrawer };

package/src/components/settings/wrappers/contextual/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+export * from './FlowsContextMenu';
+export * from './FlowsFloatContextMenu';
+export * from './StepSettingsDialog';
+export * from './StepSettingsDrawer';
+export * from './StepSettings';
+export * from './StepRequiredSettingsDialog';

package/src/components/settings/wrappers/embedded/FlowSettings.tsx

@@ -0,0 +1,258 @@
+/**
+ * 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 { Alert, Form, Input, InputNumber, Select, Switch } from 'antd';
+import React, { useCallback, useEffect } from 'react';
+// TODO: ISchema may need to be imported from a different package or refactored.
+import { observer } from '@formily/react';
+import { FlowRuntimeContext } from '../../../../flowContext';
+import { useFlowModelById } from '../../../../hooks';
+import { FlowModel } from '../../../../models';
+import { resolveDefaultParams, setupRuntimeContextSteps } from '../../../../utils';
+
+const { Item: FormItem } = Form;
+
+// 创建两个组件版本，一个使用props传递的model，一个使用hook获取model
+interface ModelProvidedProps {
+  model: FlowModel;
+  flowKey: string;
+}
+
+interface ModelByIdProps {
+  uid: string;
+  flowKey: string;
+  modelClassName: string;
+}
+
+type FlowSettingsProps = ModelProvidedProps | ModelByIdProps;
+
+// 判断是否是通过ID获取模型的props
+const isModelByIdProps = (props: FlowSettingsProps): props is ModelByIdProps => {
+  return 'uid' in props && 'modelClassName' in props && Boolean(props.uid) && Boolean(props.modelClassName);
+};
+
+/**
+ * FlowSettings组件 - 单个流程的详细配置表单（embedded版本）
+ *
+ * 特点：
+ * - 实时保存到model
+ * - 适用于嵌入式配置界面
+ *
+ * 支持两种使用方式：
+ * 1. 直接提供model: <FlowSettings model={myModel} flowKey="workflow1" />
+ * 2. 通过uid和modelClassName获取model: <FlowSettings uid="model1" modelClassName="MyModel" flowKey="workflow1" />
+ */
+const FlowSettings: React.FC<FlowSettingsProps> = (props) => {
+  if (isModelByIdProps(props)) {
+    return <FlowSettingsWithModelById {...props} />;
+  } else {
+    return <FlowSettingsWithModel {...props} />;
+  }
+};
+
+// 使用传入的model
+const FlowSettingsWithModel: React.FC<ModelProvidedProps> = observer(({ model, flowKey }) => {
+  if (!model) {
+    return <Alert message="提供的模型无效" type="error" />;
+  }
+
+  return <FlowSettingsContent model={model} flowKey={flowKey} />;
+});
+
+// 通过useModelById hook获取model
+const FlowSettingsWithModelById: React.FC<ModelByIdProps> = observer(({ uid, flowKey, modelClassName }) => {
+  const model = useFlowModelById(uid, modelClassName);
+
+  if (!model) {
+    return <Alert message={`未找到ID为 ${uid} 的模型`} type="error" />;
+  }
+
+  return <FlowSettingsContent model={model} flowKey={flowKey} />;
+});
+
+// 提取核心渲染逻辑到一个共享组件
+interface FlowSettingsContentProps {
+  model: FlowModel;
+  flowKey: string;
+}
+
+const FlowSettingsContent: React.FC<FlowSettingsContentProps> = observer(({ model, flowKey }) => {
+  const [form] = Form.useForm();
+
+  // 获取流程定义
+  const flows = model.getFlows();
+  const flow = flows.get(flowKey);
+
+  // 获取可配置的步骤
+  const configurableSteps = Object.entries(flow?.steps || {})
+    .map(([stepKey, actionStep]) => {
+      // 如果步骤设置了 hideInSettings: true，则跳过此步骤
+      if (actionStep.hideInSettings) {
+        return null;
+      }
+
+      // 从step获取uiSchema（如果存在）
+      const stepUiSchema = actionStep.uiSchema || {};
+
+      // 如果step使用了action，也获取action的uiSchema
+      let actionUiSchema = {};
+      if (actionStep.use) {
+        const action = model.flowEngine?.getAction?.(actionStep.use);
+        if (action && action.uiSchema) {
+          actionUiSchema = action.uiSchema;
+        }
+      }
+
+      // 合并uiSchema，确保step的uiSchema优先级更高
+      const mergedUiSchema = { ...actionUiSchema };
+
+      // 将stepUiSchema中的字段合并到mergedUiSchema
+      Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+        if (mergedUiSchema[fieldKey]) {
+          mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+        } else {
+          mergedUiSchema[fieldKey] = schema;
+        }
+      });
+
+      // 如果没有可配置的UI Schema，返回null
+      if (Object.keys(mergedUiSchema).length === 0) {
+        return null;
+      }
+
+      return { stepKey, step: actionStep, uiSchema: mergedUiSchema };
+    })
+    .filter(Boolean);
+
+  // 获取当前流程的参数 - 从model中获取实际参数
+  const getCurrentParams = useCallback(async () => {
+    const params = {};
+
+    // 从model中获取每个步骤的参数，如果为空则使用默认参数
+    for (const { stepKey, step } of configurableSteps) {
+      const stepParams = model.getStepParams(flowKey, stepKey) || {};
+
+      const flowRuntimeContext = new FlowRuntimeContext(model, flowKey, 'settings');
+      const flow = model.getFlow(flowKey);
+      setupRuntimeContextSteps(flowRuntimeContext, flow?.steps || {}, model, flowKey);
+      // 解析 defaultParams
+      const resolvedDefaultParams = await resolveDefaultParams(step.defaultParams, flowRuntimeContext);
+
+      // 合并默认参数和当前参数，当前参数优先
+      const mergedParams = { ...resolvedDefaultParams, ...stepParams };
+
+      if (Object.keys(mergedParams).length > 0) {
+        params[stepKey] = mergedParams;
+      }
+    }
+
+    return params;
+  }, [model, flowKey, configurableSteps]);
+
+  // 初始化表单值
+  useEffect(() => {
+    const loadParams = async () => {
+      try {
+        const currentParams = await getCurrentParams();
+        form.setFieldsValue(currentParams);
+      } catch (error) {
+        console.error('Error loading default params:', error);
+      }
+    };
+
+    loadParams();
+  }, [flowKey, form, getCurrentParams]);
+
+  // 处理表单值变化 - 实时保存
+  const handleValuesChange = useCallback(
+    (changedValues: any, allValues: any) => {
+      // 实时保存到model
+      Object.entries(allValues).forEach(([stepKey, stepValues]: [string, any]) => {
+        if (stepValues && typeof stepValues === 'object') {
+          // 使用setStepParams保存步骤参数
+          model.setStepParams(flowKey, stepKey, stepValues);
+        }
+      });
+    },
+    [model, flowKey],
+  );
+
+  if (!flow) {
+    return <Alert message={`未找到Key为 ${flowKey} 的流程`} type="error" />;
+  }
+
+  if (configurableSteps.length === 0) {
+    return <Alert message="此流程没有可配置的参数" type="info" />;
+  }
+
+  // 渲染表单字段
+  const renderFormFields = () => {
+    return configurableSteps.map(({ stepKey, uiSchema }) => {
+      return Object.entries(uiSchema).map(([fieldKey, schema]: [string, any]) => {
+        const fieldName = `${stepKey}.${fieldKey}`;
+
+        // 根据schema类型渲染不同的组件
+        const renderField = () => {
+          switch (schema['x-component']) {
+            case 'Select':
+              return (
+                <Select
+                  placeholder={schema['x-component-props']?.placeholder || `请选择${schema.title}`}
+                  options={schema.enum || []}
+                  {...(schema['x-component-props'] || {})}
+                />
+              );
+            case 'InputNumber':
+              return (
+                <InputNumber
+                  placeholder={schema['x-component-props']?.placeholder || `请输入${schema.title}`}
+                  {...(schema['x-component-props'] || {})}
+                />
+              );
+            case 'Switch':
+              return <Switch {...(schema['x-component-props'] || {})} />;
+            case 'Input.TextArea':
+              return (
+                <Input.TextArea
+                  placeholder={schema['x-component-props']?.placeholder || `请输入${schema.title}`}
+                  {...(schema['x-component-props'] || {})}
+                />
+              );
+            default:
+              return (
+                <Input
+                  placeholder={schema['x-component-props']?.placeholder || `请输入${schema.title}`}
+                  {...(schema['x-component-props'] || {})}
+                />
+              );
+          }
+        };
+
+        return (
+          <Form.Item
+            key={fieldName}
+            name={[stepKey, fieldKey]}
+            label={schema.title || fieldKey}
+            rules={schema.required ? [{ required: true, message: `请输入${schema.title || fieldKey}` }] : []}
+          >
+            {renderField()}
+          </Form.Item>
+        );
+      });
+    });
+  };
+
+  return (
+    <Form form={form} layout="vertical" onValuesChange={handleValuesChange}>
+      {renderFormFields()}
+    </Form>
+  );
+});
+
+export { FlowSettings };

package/src/components/settings/wrappers/embedded/FlowsSettings.tsx

@@ -0,0 +1,111 @@
+/**
+ * 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 { Alert } from 'antd';
+import { useFlowModelById } from '../../../../hooks';
+import { observer } from '@formily/react';
+import FlowsSettingsContent from './FlowsSettingsContent';
+
+// 简单的流程设置组件接口
+interface ModelProvidedProps {
+  model: any;
+  expandAll?: boolean; // 是否展开所有Collapse，默认为false
+  children?: React.ReactNode; // 子组件，如果提供则作为wrapper模式
+}
+
+interface ModelByIdProps {
+  uid: string;
+  modelClassName: string;
+  expandAll?: boolean; // 是否展开所有Collapse，默认为false
+  children?: React.ReactNode; // 子组件，如果提供则作为wrapper模式
+}
+
+type FlowsSettingsProps = ModelProvidedProps | ModelByIdProps;
+
+// 判断是否是通过ID获取模型的props
+const isModelByIdProps = (props: FlowsSettingsProps): props is ModelByIdProps => {
+  return 'uid' in props && 'modelClassName' in props && Boolean(props.uid) && Boolean(props.modelClassName);
+};
+
+/**
+ * FlowsSettings组件 - 简单的流程配置界面
+ *
+ * 功能特性：
+ * - 流程配置界面
+ * - Wrapper 模式支持
+ *
+ * 支持两种使用方式：
+ * 1. 直接提供model: <FlowsSettings model={myModel} />
+ * 2. 通过uid和modelClassName获取model: <FlowsSettings uid="model1" modelClassName="MyModel" />
+ *
+ * 支持两种模式：
+ * 1. 独立设置界面: <FlowsSettings model={myModel} />
+ * 2. Wrapper模式: <FlowsSettings model={myModel}>{children}</FlowsSettings>
+ *
+ * @param props.expandAll 是否展开所有Collapse，默认为false
+ * @param props.children 子组件，如果提供则作为wrapper模式
+ */
+const FlowsSettings: React.FC<FlowsSettingsProps> = (props) => {
+  if (isModelByIdProps(props)) {
+    return <FlowsSettingsWithModelById {...props} />;
+  } else {
+    return <FlowsSettingsWithModel {...props} />;
+  }
+};
+
+// 使用传入的model
+const FlowsSettingsWithModel: React.FC<ModelProvidedProps> = observer(({ model, expandAll = false, children }) => {
+  if (!model) {
+    return <Alert message="提供的模型无效" type="error" />;
+  }
+
+  const settingsContent = <FlowsSettingsContent model={model} expandAll={expandAll} />;
+
+  // 如果有children，作为wrapper模式
+  if (children) {
+    return (
+      <div>
+        {settingsContent}
+        {children}
+      </div>
+    );
+  }
+
+  // 如果没有children，返回设置内容
+  return settingsContent;
+});
+
+// 通过useModelById hook获取model
+const FlowsSettingsWithModelById: React.FC<ModelByIdProps> = observer(
+  ({ uid, modelClassName, expandAll = false, children }) => {
+    const model = useFlowModelById(uid, modelClassName);
+
+    if (!model) {
+      return <Alert message={`未找到ID为 ${uid} 的模型`} type="error" />;
+    }
+
+    const settingsContent = <FlowsSettingsContent model={model} expandAll={expandAll} />;
+
+    // 如果有children，作为wrapper模式
+    if (children) {
+      return (
+        <div>
+          {settingsContent}
+          {children}
+        </div>
+      );
+    }
+
+    // 如果没有children，返回设置内容
+    return settingsContent;
+  },
+);
+
+export { FlowsSettings };