logologo
开始
手册
开发
插件
API
English
简体中文
开始
手册
开发
插件
API
English
简体中文
logologo

简介

什么是 FlowEngine?
FlowEngine 与插件的关系
快速开始
学习路线图

指南

注册 FlowModel
创建 FlowModel
渲染 FlowModel
FlowModel 事件流与配置化
FlowModel 持久化
FlowModel 生命周期
FlowModel 的上下文体系
响应式机制:Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageActionDefinition

#StepDefinition

StepDefinition 定义了流中的单个步骤,每个步骤可以是一个动作、事件处理或其他操作。步骤是流的基本执行单元。

#类型定义

interface StepDefinition<TModel extends FlowModel = FlowModel>
  extends Partial<Omit<ActionDefinition<TModel, FlowRuntimeContext<TModel>>, 'name'>> {
  key?: string;
  isAwait?: boolean;
  use?: string;
  sort?: number;
  preset?: boolean;
  paramsRequired?: boolean;
  hideInSettings?: boolean;
  uiMode?: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>);
}

#使用方式

class MyModel extends FlowModel {}

MyModel.registerFlow({
  key: 'pageSettings',
  steps: {
    step1: {
      use: 'actionName',
      title: 'First Step',
      sort: 0,
      preset: true
    },
    step2: {
      handler: async (ctx, params) => {
        // 自定义处理逻辑
        return { result: 'success' };
      },
      title: 'Second Step',
      sort: 1
    }
  }
});

#属性说明

#key

类型: string
必需: 否
描述: 步骤在流中的唯一标识符

如果不提供,将使用步骤在 steps 对象中的键名。

示例:

steps: {
  loadData: {  // key 为 'loadData'
    use: 'loadDataAction'
  }
}

#use

类型: string
必需: 否
描述: 要使用的已注册 ActionDefinition 名称

通过 use 属性可以引用已注册的动作,避免重复定义。

示例:

// 先注册动作
MyModel.registerAction({
  name: 'loadDataAction',
  handler: async (ctx, params) => {
    // 加载数据逻辑
  }
});

// 在步骤中使用
steps: {
  step1: {
    use: 'loadDataAction',  // 引用已注册的动作
    title: 'Load Data'
  }
}

#title

类型: string
必需: 否
描述: 步骤的显示标题

用于界面展示和调试。

示例:

title: 'Load Data'
title: 'Process Information'
title: 'Save Results'

#sort

类型: number
必需: 否
描述: 步骤执行顺序,数值越小越先执行

用于控制同一流中多个步骤的执行顺序。

示例:

steps: {
  step1: { sort: 0 },  // 最先执行
  step2: { sort: 1 },  // 其次执行
  step3: { sort: 2 }   // 最后执行
}

#handler

类型: (ctx: FlowRuntimeContext<TModel>, params: any) => Promise<any> | any
必需: 否
描述: 步骤的处理函数

当不使用 use 属性时,可以直接定义处理函数。

示例:

handler: async (ctx, params) => {
  // 获取上下文信息
  const { model, flowEngine } = ctx;
  
  // 处理逻辑
  const result = await processData(params);
  
  // 返回结果
  return { success: true, data: result };
}

#defaultParams

类型: Record<string, any> | ((ctx: FlowRuntimeContext<TModel>) => Record<string, any> | Promise<Record<string, any>>)
必需: 否
描述: 步骤的默认参数

在步骤执行前,为参数填充默认值。

示例:

// 静态默认参数
defaultParams: {
  timeout: 5000,
  retries: 3,
  format: 'json'
}

// 动态默认参数
defaultParams: (ctx) => {
  return {
    userId: ctx.model.uid,
    timestamp: Date.now()
  }
}

// 异步默认参数
defaultParams: async (ctx) => {
  const config = await loadConfig();
  return {
    apiUrl: config.apiUrl,
    apiKey: config.apiKey
  }
}

#uiSchema

类型: Record<string, ISchema> | ((ctx: FlowRuntimeContext<TModel>) => Record<string, ISchema> | Promise<Record<string, ISchema>>)
必需: 否
描述: 步骤的 UI 配置模式

定义步骤在界面中的显示方式和表单配置。

示例:

uiSchema: {
  'x-component': 'Form',
  'x-component-props': {
    layout: 'vertical'
  },
  properties: {
    name: {
      type: 'string',
      title: 'Name',
      'x-component': 'Input'
    },
    age: {
      type: 'number',
      title: 'Age',
      'x-component': 'InputNumber'
    }
  }
}

#beforeParamsSave

类型: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
必需: 否
描述: 参数保存前的钩子函数

在步骤参数保存前执行,可以用于参数验证或转换。

示例:

beforeParamsSave: (ctx, params, previousParams) => {
  // 参数验证
  if (!params.name) {
    throw new Error('Name is required');
  }
  
  // 参数转换
  params.name = params.name.trim().toLowerCase();
}

#afterParamsSave

类型: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
必需: 否
描述: 参数保存后的钩子函数

在步骤参数保存后执行,可以用于触发其他操作。

示例:

afterParamsSave: (ctx, params, previousParams) => {
  // 记录日志
  console.log('Step params saved:', params);
  
  // 触发其他操作
  ctx.model.emitter.emit('paramsChanged', params);
}

#uiMode

类型: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>)
必需: 否
描述: 步骤的 UI 显示模式

控制步骤在界面中的显示方式。

支持的模式:

  • 'dialog' - 对话框模式
  • 'drawer' - 抽屉模式
  • 'embed' - 嵌入模式
  • 或自定义配置对象

示例:

// 简单模式
uiMode: 'dialog'

// 自定义配置
uiMode: {
  type: 'dialog',
  props: {
    width: 800,
    title: 'Step Configuration'
  }
}

// 动态模式
uiMode: (ctx) => {
  return ctx.model.isMobile ? 'drawer' : 'dialog';
}

#preset

类型: boolean
必需: 否
描述: 是否为预设步骤

preset: true 的步骤参数需要在创建时填写,没有标记的可以创建模型后再填写。

示例:

steps: {
  step1: {
    preset: true,  // 创建时必须填写参数
    use: 'requiredAction'
  },
  step2: {
    preset: false, // 可以后续填写参数
    use: 'optionalAction'
  }
}

#paramsRequired

类型: boolean
必需: 否
描述: 步骤参数是否必需

如果为 true,在添加模型前会打开配置对话框。

示例:

paramsRequired: true  // 添加模型前必须配置参数
paramsRequired: false // 可以后续配置参数

#hideInSettings

类型: boolean
必需: 否
描述: 是否在设置菜单中隐藏步骤

示例:

hideInSettings: true  // 在设置中隐藏
hideInSettings: false // 在设置中显示(默认)

#isAwait

类型: boolean
必需: 否
默认值: true
描述: 是否等待处理函数完成

示例:

isAwait: true  // 等待处理函数完成(默认)
isAwait: false // 不等待,异步执行

#完整示例

class DataProcessingModel extends FlowModel {}

DataProcessingModel.registerFlow({
  key: 'dataProcessing',
  title: 'Data Processing',
  steps: {
    loadData: {
      use: 'loadDataAction',
      title: 'Load Data',
      sort: 0,
      preset: true,
      paramsRequired: true,
      defaultParams: {
        source: 'api',
        timeout: 5000
      },
      uiMode: 'dialog'
    },
    processData: {
      handler: async (ctx, params) => {
        const data = await ctx.model.getData();
        return processData(data, params);
      },
      title: 'Process Data',
      sort: 1,
      defaultParams: (ctx) => ({
        userId: ctx.model.uid,
        timestamp: Date.now()
      }),
      beforeParamsSave: (ctx, params) => {
        if (!params.processor) {
          throw new Error('Processor is required');
        }
      },
      afterParamsSave: (ctx, params) => {
        ctx.model.emitter.emit('dataProcessed', params);
      }
    },
    saveData: {
      use: 'saveDataAction',
      title: 'Save Data',
      sort: 2,
      hideInSettings: false,
      uiMode: {
        type: 'drawer',
        props: {
          width: 600,
          title: 'Save Configuration'
        }
      }
    }
  }
});