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 и плагинов
Быстрый старт
План обучения

Руководство

Регистрация FlowModel
Создание FlowModel
Рендеринг FlowModel
Поток событий и конфигурация FlowModel
Персистентность FlowModel
Жизненный цикл FlowModel
Система контекста FlowModel
Реактивный механизм: Observable
FlowModel vs React.Component

Определения

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageРендеринг FlowModel
Next PageПерсистентность FlowModel
Уведомление о переводе ИИ

Эта документация была автоматически переведена ИИ.

#FlowModel: Потоки событий и конфигурирование

FlowModel предлагает подход, основанный на «потоках событий» (Flow), для реализации логики конфигурирования компонентов. Это делает поведение и настройку компонентов более расширяемыми и наглядными.

#Пользовательская модель

Вы можете создать пользовательскую модель компонента, унаследовав её от FlowModel. Модель должна реализовать метод render(), чтобы определить логику рендеринга компонента.

class MyModel extends FlowModel {
  render() {
    return <Button {...this.props} />;
  }
}

#Регистрация потока (Flow)

Каждая модель может зарегистрировать один или несколько потоков (Flow), которые описывают логику конфигурирования и шаги взаимодействия компонента.

MyModel.registerFlow({
  key: 'buttonSettings',
  title: 'Настройки кнопки',
  steps: {
    general: {
      title: 'Общие настройки',
      uiSchema: {
        title: {
          type: 'string',
          title: 'Заголовок кнопки',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
      defaultParams: {
        type: 'primary',
      },
      handler(ctx, params) {
        ctx.model.setProps('children', params.title);
        ctx.model.setProps('type', params.type);
      },
    },
  },
});

Описание

  • key: Уникальный идентификатор потока.
  • title: Название потока, используемое для отображения в пользовательском интерфейсе.
  • steps: Определяет шаги конфигурации (Step). Каждый шаг включает:
    • title: Заголовок шага.
    • uiSchema: Структура формы конфигурации (совместима с Formily Schema).
    • defaultParams: Параметры по умолчанию.
    • handler(ctx, params): Вызывается при сохранении для обновления состояния модели.

#Рендеринг модели

При рендеринге модели компонента вы можете использовать параметр showFlowSettings, чтобы контролировать, следует ли включать функцию конфигурирования. Если showFlowSettings включен, в правом верхнем углу компонента автоматически появится точка входа для настроек (например, значок или кнопка настроек).

<FlowModelRenderer model={model} showFlowSettings />

#Открытие формы конфигурации вручную с помощью openFlowSettings

Помимо открытия формы конфигурации через встроенную точку входа для взаимодействия, вы также можете вызвать openFlowSettings() вручную в коде.

flowSettings.open(options: FlowSettingsOpenOptions): Promise<boolean>;
model.openFlowSettings(options?: Omit<FlowSettingsOpenOptions, 'model'>): Promise<boolean>;

#Определение параметров

interface FlowSettingsOpenOptions {
  model: FlowModel;               // Обязательно, экземпляр модели, к которой относится
  preset?: boolean;               // Отображает только шаги, помеченные как preset=true (по умолчанию false)
  flowKey?: string;               // Указывает один поток (Flow)
  flowKeys?: string[];            // Указывает несколько потоков (игнорируется, если также указан flowKey)
  stepKey?: string;               // Указывает один шаг (обычно используется в сочетании с flowKey)
  uiMode?: 'dialog' | 'drawer';   // Контейнер для отображения формы, по умолчанию 'dialog'
  onCancel?: () => void;          // Коллбэк при нажатии кнопки «Отмена»
  onSaved?: () => void;           // Коллбэк после успешного сохранения конфигурации
}

#Пример: Открытие формы конфигурации для конкретного потока в режиме Drawer

await model.openFlowSettings({
  flowKey: 'buttonSettings',
  uiMode: 'drawer',
  onSaved: () => {
    console.log('Настройки кнопки сохранены');
  },
});