logologo
Начало
Руководство
Разработка
Плагины
API
Главная
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Начало
Руководство
Разработка
Плагины
API
Главная
logologo

Введение

Что такое FlowEngine?
Связь FlowEngine и плагинов
Быстрый старт
План обучения

Руководство

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

Определения

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('Настройки кнопки сохранены');
  },
});