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

מבוא

מהו FlowEngine?
FlowEngine והקשר ל-Plugin
התחלה מהירה
מפת דרכים ללמידה

מדריך

רישום FlowModel
יצירת FlowModel
רינדור FlowModel
FlowModel: זרימת אירועים וקונפיגורציה
FlowModel Persistence
FlowModel Lifecycle
מערכת הקונטקסט של FlowModel
מנגנון ריאקטיבי: Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageEventDefinition
Next PageStepDefinition
TIP

מסמך זה תורגם על ידי בינה מלאכותית. לכל אי דיוק, אנא עיין בגרסה האנגלית

#ActionDefinition

ActionDefinition מגדיר פעולות שניתן לעשות בהן שימוש חוזר, ושניתן להפנות אליהן במספר תהליכי עבודה ושלבים. פעולה היא יחידת הביצוע המרכזית ב-FlowEngine, המכילה לוגיקה עסקית ספציפית.

#הגדרת טיפוס

interface ActionDefinition<TModel extends FlowModel = FlowModel, TCtx extends FlowContext = FlowContext> {
  name: string;
  title?: string;
  handler: (ctx: TCtx, params: any) => Promise<any> | any;
  uiSchema?: Record<string, ISchema> | ((ctx: TCtx) => Record<string, ISchema> | Promise<Record<string, ISchema>>);
  defaultParams?: Record<string, any> | ((ctx: TCtx) => Record<string, any> | Promise<Record<string, any>>);
  beforeParamsSave?: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>;
  afterParamsSave?: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>;
  useRawParams?: boolean | ((ctx: TCtx) => boolean | Promise<boolean>);
  uiMode?: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>);
  scene?: ActionScene | ActionScene[];
  sort?: number;
}

#שיטת רישום

// רישום גלובלי (באמצעות FlowEngine)
const engine = new FlowEngine();
engine.registerAction({
  name: 'loadDataAction',
  title: 'Load Data',
  handler: async (ctx, params) => {
    // לוגיקת טיפול
  }
});

// רישום ברמת מודל (באמצעות FlowModel)
class MyModel extends FlowModel {}
MyModel.registerAction({
  name: 'processDataAction',
  title: 'Process Data',
  handler: async (ctx, params) => {
    // לוגיקת טיפול
  }
});

// שימוש בתהליך עבודה
MyModel.registerFlow({
  key: 'dataFlow',
  steps: {
    step1: {
      use: 'loadDataAction',  // הפניה לפעולה גלובלית
    },
    step2: {
      use: 'processDataAction', // הפניה לפעולה ברמת מודל
    }
  }
});

#תיאורי מאפיינים

#name

טיפוס: string
נדרש: כן
תיאור: מזהה ייחודי לפעולה

משמש להפניה לפעולה בשלב מסוים באמצעות המאפיין use.

דוגמה:

name: 'loadDataAction'
name: 'processDataAction'
name: 'saveDataAction'

#title

טיפוס: string
נדרש: לא
תיאור: כותרת התצוגה של הפעולה

משמש לתצוגה בממשק המשתמש ולניפוי באגים.

דוגמה:

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

#handler

טיפוס: (ctx: TCtx, params: any) => Promise<any> | any
נדרש: כן
תיאור: פונקציית הטיפול של הפעולה

זוהי לוגיקת הליבה של הפעולה, המקבלת את ההקשר והפרמטרים, ומחזירה את תוצאת הטיפול.

דוגמה:

handler: async (ctx, params) => {
  const { model, flowEngine } = ctx;
  
  try {
    // בצע לוגיקה ספציפית
    const result = await performAction(params);
    
    // החזר תוצאה
    return {
      success: true,
      data: result,
      message: 'Action completed successfully'
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

#defaultParams

טיפוס: Record<string, any> | ((ctx: TCtx) => Record<string, any> | Promise<Record<string, any>>)
נדרש: לא
תיאור: פרמטרי ברירת המחדל של הפעולה

ממלא את הפרמטרים בערכי ברירת מחדל לפני ביצוע הפעולה.

דוגמה:

// פרמטרי ברירת מחדל סטטיים
defaultParams: {
  timeout: 5000,
  retries: 3,
  format: 'json'
}

// פרמטרי ברירת מחדל דינמיים
defaultParams: (ctx) => {
  return {
    userId: ctx.model.uid,
    timestamp: Date.now(),
    version: ctx.flowEngine.version
  }
}

// פרמטרי ברירת מחדל אסינכרוניים
defaultParams: async (ctx) => {
  const config = await loadConfiguration();
  return {
    apiUrl: config.apiUrl,
    apiKey: config.apiKey,
    timeout: config.timeout
  }
}

#uiSchema

טיפוס: Record<string, ISchema> | ((ctx: TCtx) => Record<string, ISchema> | Promise<Record<string, ISchema>>)
נדרש: לא
תיאור: סכמת תצורת ממשק המשתמש עבור הפעולה

מגדיר כיצד הפעולה מוצגת בממשק המשתמש ואת תצורת הטופס שלה.

דוגמה:

uiSchema: {
  'x-component': 'Form',
  'x-component-props': {
    layout: 'vertical',
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  },
  properties: {
    url: {
      type: 'string',
      title: 'API URL',
      'x-component': 'Input',
      'x-decorator': 'FormItem',
      required: true
    },
    method: {
      type: 'string',
      title: 'HTTP Method',
      'x-component': 'Select',
      'x-decorator': 'FormItem',
      enum: ['GET', 'POST', 'PUT', 'DELETE'],
      default: 'GET'
    },
    timeout: {
      type: 'number',
      title: 'Timeout (ms)',
      'x-component': 'InputNumber',
      'x-decorator': 'FormItem',
      default: 5000
    }
  }
}

#beforeParamsSave

טיפוס: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
נדרש: לא
תיאור: פונקציית Hook המופעלת לפני שמירת פרמטרים

מופעלת לפני שמירת פרמטרי הפעולה, וניתן להשתמש בה לאימות או המרה של פרמטרים.

דוגמה:

beforeParamsSave: (ctx, params, previousParams) => {
  // אימות פרמטרים
  if (!params.url) {
    throw new Error('URL is required');
  }
  
  // המרת פרמטרים
  params.url = params.url.trim();
  if (!params.url.startsWith('http')) {
    params.url = 'https://' + params.url;
  }
  
  // תיעוד שינויים
  console.log('Parameters changed:', {
    from: previousParams,
    to: params
  });
}

#afterParamsSave

טיפוס: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
נדרש: לא
תיאור: פונקציית Hook המופעלת לאחר שמירת פרמטרים

מופעלת לאחר שמירת פרמטרי הפעולה, וניתן להשתמש בה להפעלת פעולות אחרות.

דוגמה:

afterParamsSave: (ctx, params, previousParams) => {
  // תיעוד לוג
  console.log('Action params saved:', params);
  
  // הפעלת אירוע
  ctx.model.emitter.emit('actionParamsChanged', {
    actionName: 'loadDataAction',
    params,
    previousParams
  });
  
  // עדכון מטמון
  ctx.model.updateCache('actionParams', params);
}

#useRawParams

טיפוס: boolean | ((ctx: TCtx) => boolean | Promise<boolean>)
נדרש: לא
תיאור: האם להשתמש בפרמטרים גולמיים

אם true, הפרמטרים הגולמיים יועברו ישירות לפונקציית הטיפול ללא כל עיבוד.

דוגמה:

// תצורה סטטית
useRawParams: true

// תצורה דינמית
useRawParams: (ctx) => {
  return ctx.model.isDebugMode;
}

#uiMode

טיפוס: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>)
נדרש: לא
תיאור: מצב תצוגת ממשק המשתמש עבור הפעולה

שולט באופן שבו הפעולה מוצגת בממשק המשתמש.

מצבים נתמכים:

  • 'dialog' - מצב דיאלוג
  • 'drawer' - מצב מגירה
  • 'embed' - מצב מוטבע
  • או אובייקט תצורה מותאם אישית

דוגמה:

// מצב פשוט
uiMode: 'dialog'

// תצורה מותאמת אישית
uiMode: {
  type: 'dialog',
  props: {
    width: 800,
    title: 'Action Configuration',
    maskClosable: false
  }
}

// מצב דינמי
uiMode: (ctx) => {
  return ctx.model.isMobile ? 'drawer' : 'dialog';
}

#scene

טיפוס: ActionScene | ActionScene[]
נדרש: לא
תיאור: תרחישי השימוש עבור הפעולה

מגביל את השימוש בפעולה לתרחישים ספציפיים בלבד.

תרחישים נתמכים:

  • 'settings' - תרחיש הגדרות
  • 'runtime' - תרחיש זמן ריצה
  • 'design' - תרחיש זמן עיצוב

דוגמה:

scene: 'settings'  // שימוש רק בתרחיש ההגדרות
scene: ['settings', 'runtime']  // שימוש בתרחישי הגדרות וזמן ריצה

#sort

טיפוס: number
נדרש: לא
תיאור: משקל המיון של הפעולה

שולט בסדר התצוגה של הפעולה ברשימה. ערך קטן יותר פירושו מיקום גבוה יותר (מוקדם יותר).

דוגמה:

sort: 0  // המיקום הגבוה ביותר
sort: 10 // מיקום בינוני
sort: 100 // מיקום נמוך יותר

#דוגמה מלאה

class DataProcessingModel extends FlowModel {}

// רישום פעולת טעינת נתונים
DataProcessingModel.registerAction({
  name: 'loadDataAction',
  title: 'Load Data',
  handler: async (ctx, params) => {
    const { url, method = 'GET', timeout = 5000 } = params;
    
    try {
      const response = await fetch(url, {
        method,
        timeout,
        headers: {
          'Content-Type': 'application/json'
        }
      });
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const data = await response.json();
      
      return {
        success: true,
        data,
        message: 'Data loaded successfully'
      };
    } catch (error) {
      return {
        success: false,
        error: error.message
      };
    }
  },
  defaultParams: {
    method: 'GET',
    timeout: 5000
  },
  uiSchema: {
    'x-component': 'Form',
    properties: {
      url: {
        type: 'string',
        title: 'API URL',
        'x-component': 'Input',
        'x-decorator': 'FormItem',
        required: true
      },
      method: {
        type: 'string',
        title: 'HTTP Method',
        'x-component': 'Select',
        'x-decorator': 'FormItem',
        enum: ['GET', 'POST', 'PUT', 'DELETE']
      },
      timeout: {
        type: 'number',
        title: 'Timeout (ms)',
        'x-component': 'InputNumber',
        'x-decorator': 'FormItem'
      }
    }
  },
  beforeParamsSave: (ctx, params) => {
    if (!params.url) {
      throw new Error('URL is required');
    }
    params.url = params.url.trim();
  },
  afterParamsSave: (ctx, params) => {
    ctx.model.emitter.emit('dataSourceChanged', params);
  },
  uiMode: 'dialog',
  scene: ['settings', 'runtime'],
  sort: 0
});

// רישום פעולת עיבוד נתונים
DataProcessingModel.registerAction({
  name: 'processDataAction',
  title: 'Process Data',
  handler: async (ctx, params) => {
    const { data, processor, options = {} } = params;
    
    try {
      const processedData = await processData(data, processor, options);
      
      return {
        success: true,
        data: processedData,
        message: 'Data processed successfully'
      };
    } catch (error) {
      return {
        success: false,
        error: error.message
      };
    }
  },
  defaultParams: (ctx) => ({
    processor: 'default',
    options: {
      format: 'json',
      encoding: 'utf8'
    }
  }),
  uiSchema: {
    'x-component': 'Form',
    properties: {
      processor: {
        type: 'string',
        title: 'Processor',
        'x-component': 'Select',
        'x-decorator': 'FormItem',
        enum: ['default', 'advanced', 'custom']
      },
      options: {
        type: 'object',
        title: 'Options',
        'x-component': 'Form',
        'x-decorator': 'FormItem',
        properties: {
          format: {
            type: 'string',
            title: 'Format',
            'x-component': 'Select',
            enum: ['json', 'xml', 'csv']
          },
          encoding: {
            type: 'string',
            title: 'Encoding',
            'x-component': 'Select',
            enum: ['utf8', 'ascii', 'latin1']
          }
        }
      }
    }
  },
  scene: 'runtime',
  sort: 1
});