logologo
Start
Dokumentacja
Deweloperzy
Wtyczki
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Start
Dokumentacja
Deweloperzy
Wtyczki
API
logologo

Wprowadzenie

Czym jest FlowEngine?
FlowEngine a wtyczki
Szybki start
Ścieżka nauki

Przewodnik

Rejestracja FlowModel
Tworzenie FlowModel
Renderowanie FlowModel
Strumień zdarzeń i konfiguracja FlowModel
Utrwalanie FlowModel
Cykl życia FlowModel
System kontekstu FlowModel
Mechanizm reaktywny: Observable
FlowModel vs React.Component

Definicje

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageActionDefinition
TIP

Ten dokument został przetłumaczony przez AI. W przypadku niedokładności, proszę odnieść się do wersji angielskiej

#Definicja kroku (StepDefinition)

StepDefinition definiuje pojedynczy krok w przepływie pracy. Każdy krok może być akcją, obsługą zdarzeń lub inną operacją. Krok jest podstawową jednostką wykonawczą przepływu pracy.

#Definicja typu

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>);
}

#Sposób użycia

class MyModel extends FlowModel {}

MyModel.registerFlow({
  key: 'pageSettings',
  steps: {
    step1: {
      use: 'actionName',
      title: 'First Step',
      sort: 0,
      preset: true
    },
    step2: {
      handler: async (ctx, params) => {
        // Custom processing logic
        return { result: 'success' };
      },
      title: 'Second Step',
      sort: 1
    }
  }
});

#Opis właściwości

#key

Typ: string
Wymagane: Nie
Opis: Unikalny identyfikator kroku w ramach przepływu pracy.

Jeśli nie zostanie podany, zostanie użyta nazwa klucza kroku w obiekcie steps.

Przykład:

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

#use

Typ: string
Wymagane: Nie
Opis: Nazwa zarejestrowanej definicji akcji (ActionDefinition) do użycia.

Właściwość use umożliwia odwołanie się do zarejestrowanej akcji, co pozwala uniknąć powielania definicji.

Przykład:

// Register the action first
MyModel.registerAction({
  name: 'loadDataAction',
  handler: async (ctx, params) => {
    // Data loading logic
  }
});

// Use it in a step
steps: {
  step1: {
    use: 'loadDataAction',  // Reference the registered action
    title: 'Load Data'
  }
}

#title

Typ: string
Wymagane: Nie
Opis: Tytuł wyświetlany dla kroku.

Używany do wyświetlania w interfejsie użytkownika i debugowania.

Przykład:

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

#sort

Typ: number
Wymagane: Nie
Opis: Kolejność wykonywania kroku. Im mniejsza wartość, tym wcześniej krok zostanie wykonany.

Służy do kontrolowania kolejności wykonywania wielu kroków w tym samym przepływie pracy.

Przykład:

steps: {
  step1: { sort: 0 },  // Executes first
  step2: { sort: 1 },  // Executes next
  step3: { sort: 2 }   // Executes last
}

#handler

Typ: (ctx: FlowRuntimeContext<TModel>, params: any) => Promise<any> | any
Wymagane: Nie
Opis: Funkcja obsługująca krok.

Gdy właściwość use nie jest używana, można bezpośrednio zdefiniować funkcję obsługującą.

Przykład:

handler: async (ctx, params) => {
  // Get context information
  const { model, flowEngine } = ctx;
  
  // Processing logic
  const result = await processData(params);
  
  // Return result
  return { success: true, data: result };
}

#defaultParams

Typ: Record<string, any> | ((ctx: FlowRuntimeContext<TModel>) => Record<string, any> | Promise<Record<string, any>>)
Wymagane: Nie
Opis: Domyślne parametry dla kroku.

Wypełnia parametry wartościami domyślnymi przed wykonaniem kroku.

Przykład:

// Static default parameters
defaultParams: {
  timeout: 5000,
  retries: 3,
  format: 'json'
}

// Dynamic default parameters
defaultParams: (ctx) => {
  return {
    userId: ctx.model.uid,
    timestamp: Date.now()
  }
}

// Asynchronous default parameters
defaultParams: async (ctx) => {
  const config = await loadConfig();
  return {
    apiUrl: config.apiUrl,
    apiKey: config.apiKey
  }
}

#uiSchema

Typ: Record<string, ISchema> | ((ctx: FlowRuntimeContext<TModel>) => Record<string, ISchema> | Promise<Record<string, ISchema>>)
Wymagane: Nie
Opis: Schemat konfiguracji interfejsu użytkownika (UI) dla kroku.

Definiuje sposób wyświetlania kroku w interfejsie oraz jego konfigurację formularza.

Przykład:

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

Typ: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
Wymagane: Nie
Opis: Funkcja haka (hook), która uruchamia się przed zapisaniem parametrów.

Wykonuje się przed zapisaniem parametrów kroku i może być używana do walidacji lub transformacji parametrów.

Przykład:

beforeParamsSave: (ctx, params, previousParams) => {
  // Parameter validation
  if (!params.name) {
    throw new Error('Name is required');
  }
  
  // Parameter transformation
  params.name = params.name.trim().toLowerCase();
}

#afterParamsSave

Typ: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
Wymagane: Nie
Opis: Funkcja haka (hook), która uruchamia się po zapisaniu parametrów.

Wykonuje się po zapisaniu parametrów kroku i może być używana do wyzwalania innych operacji.

Przykład:

afterParamsSave: (ctx, params, previousParams) => {
  // Record logs
  console.log('Step params saved:', params);
  
  // Trigger other operations
  ctx.model.emitter.emit('paramsChanged', params);
}

#uiMode

Typ: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>)
Wymagane: Nie
Opis: Tryb wyświetlania interfejsu użytkownika (UI) dla kroku.

Kontroluje sposób wyświetlania kroku w interfejsie.

Obsługiwane tryby:

  • 'dialog' - Tryb dialogowy (okno dialogowe)
  • 'drawer' - Tryb szuflady (panel boczny)
  • 'embed' - Tryb osadzony
  • Lub niestandardowy obiekt konfiguracyjny

Przykład:

// Simple mode
uiMode: 'dialog'

// Custom configuration
uiMode: {
  type: 'dialog',
  props: {
    width: 800,
    title: 'Step Configuration'
  }
}

// Dynamic mode
uiMode: (ctx) => {
  return ctx.model.isMobile ? 'drawer' : 'dialog';
}

#preset

Typ: boolean
Wymagane: Nie
Opis: Czy jest to krok predefiniowany (preset).

Parametry dla kroków z preset: true muszą być uzupełnione podczas tworzenia. Te bez tej flagi mogą być uzupełnione po utworzeniu modelu.

Przykład:

steps: {
  step1: {
    preset: true,  // Parameters must be filled in at creation time
    use: 'requiredAction'
  },
  step2: {
    preset: false, // Parameters can be filled in later
    use: 'optionalAction'
  }
}

#paramsRequired

Typ: boolean
Wymagane: Nie
Opis: Czy parametry kroku są wymagane.

Jeśli true, okno dialogowe konfiguracji otworzy się przed dodaniem modelu.

Przykład:

paramsRequired: true  // Parameters must be configured before adding the model
paramsRequired: false // Parameters can be configured later

#hideInSettings

Typ: boolean
Wymagane: Nie
Opis: Czy ukryć krok w menu ustawień.

Przykład:

hideInSettings: true  // Hide in settings
hideInSettings: false // Show in settings (default)

#isAwait

Typ: boolean
Wymagane: Nie
Wartość domyślna: true
Opis: Czy czekać na zakończenie funkcji obsługującej.

Przykład:

isAwait: true  // Wait for the handler function to complete (default)
isAwait: false // Do not wait, execute asynchronously

#Kompletny przykład

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'
        }
      }
    }
  }
});