• Русский

      • Обзор

      Клиентские плагины NocoBase позволяют регистрировать новые страницы, писать пользовательские компоненты, вызывать API сервера, добавлять блоки и поля, а также расширять кнопки действий. Все эти возможности организованы через единую точку входа плагина.

      Если у вас уже есть опыт разработки на React, начать будет проще: в большинстве сценариев достаточно написать обычные React-компоненты и подключить их к NocoBase через возможности контекста, например запросы и интернационализацию. Изучать FlowEngine нужно только тогда, когда компонент должен появиться в визуальном интерфейсе настройки NocoBase.

      Примечание

      NocoBase переходит с client (v1) на client-v2. Сейчас client-v2 все еще находится в разработке. Материалы этого раздела предназначены для раннего ознакомления и не рекомендуются для использования в production. Для новых плагинов используйте каталог src/client-v2/ и API @nocobase/client-v2.

      Путь изучения

      Рекомендуется изучать разработку клиентских плагинов в следующем порядке, от простого к более сложному:

      Plugin (точка входа) -> Router (страницы) -> Component (компоненты) -> Context (контекст) -> FlowEngine (расширения UI)

      Подробно:

      1. Plugin: входной класс плагина. В методах жизненного цикла, таких как load(), регистрируются маршруты, модели и другие ресурсы.
      2. Router: регистрация маршрутов страниц через router.add() и страниц настроек плагина через pluginSettingsManager.
      3. Component: маршруты монтируют React-компоненты. По умолчанию можно использовать React + Antd, как в обычной frontend-разработке.
      4. Context: в плагинах контекст доступен через this.context, а в компонентах через useFlowContext(). Он дает доступ к возможностям NocoBase: запросам (ctx.api), интернационализации (ctx.t), логированию (ctx.logger) и другим сервисам.
      5. FlowEngine: если компонент должен появляться в меню "Добавить блок / поле / действие" и поддерживать визуальную настройку пользователями, его нужно обернуть в FlowModel.

      Первые четыре шага покрывают большинство сценариев разработки плагинов. Пятый шаг нужен только для глубокой интеграции с системой настройки UI NocoBase. Если вы не уверены, какой подход выбрать, см. Component vs FlowModel.

      Краткий указатель

      Что нужно сделатьГде посмотреть
      Понять базовую структуру клиентского плагинаPlugin
      Добавить самостоятельную страницуRouter
      Добавить страницу настроек плагинаRouter
      Написать обычный React-компонентComponent
      Найти переиспользуемые компоненты форм, фильтров и таблицОбщие компоненты
      Вызывать API сервера и использовать встроенные возможности NocoBaseContext - распространенные возможности
      Настроить стили компонентовStyles & Themes
      Добавить новый блокFlowEngine - расширение блоков
      Добавить новый компонент поляFlowEngine - расширение полей
      Добавить новую кнопку действияFlowEngine - расширение действий
      Выбрать между Component и FlowModelComponent vs FlowModel
      Посмотреть полный пример плагинаПримеры плагинов

      Связанные ссылки