feat: Plugin Registry для кастомных вкладок в окне заказа

[biz87]

Описание

На странице товара уже реализован механизм MS3ProductTabsRegistry, позволяющий сторонним компонентам добавлять свои вкладки через событие msOnManagerCustomCssJs. На странице заказа аналогичного механизма нет — вкладки (info, products, address, history) захардкожены в OrderView.vue.

Необходимо реализовать MS3OrderTabsRegistry по аналогии с MS3ProductTabsRegistry.

Мотивация

Сторонние разработчики (доставки, CRM-интеграции, аналитика) хотят добавлять свои вкладки в окно заказа без правки исходников MiniShop3.

План реализации

1. Создать OrderTabsRegistry в vueManager/src/entries/order.js

По аналогии с ProductTabsRegistry из product-tabs.js:

• Класс OrderTabsRegistry с методами register(), _onMounted(), _onUnmounted()
• Глобальный объект window.MS3OrderTabsRegistry
• Поддержка регистрации до и после монтирования Vue

window.MS3OrderTabsRegistry.register({
  key: 'tracking',           // уникальный ключ
  title: 'Отслеживание',     // заголовок вкладки
  type: 'vue' | 'extjs',     // тип компонента
  component: 'TrackingTab',  // Vue component name (для type: 'vue')
  xtype: 'my-panel',         // ExtJS xtype (для type: 'extjs')
  extConfig: {},              // доп. конфиг ExtJS
  props: {},                  // доп. пропсы Vue
  position: 10,               // порядок (default: 100)
  hideOnCreate: true          // скрывать при создании заказа (default: false)
})

2. Модифицировать OrderView.vue

• Добавить реактивный массив pluginTabs
• Добавить метод registerPluginTab() + defineExpose()
• Вычисляемое свойство tabConfig — объединение встроенных и плагинных вкладок с сортировкой по position
• Встроенные табы получают позиции: info=0, products=1, address=2, history=3
• Рендеринг плагинных вкладок через <component :is> (Vue) и div-контейнер (ExtJS)

3. Уведомить Registry при монтировании

В order.js после app.mount():

• Вызвать window.MS3OrderTabsRegistry._onMounted(instance)
• При unmount — _onUnmounted()

4. Пропсы для кастомных вкладок

Все плагинные вкладки автоматически получают:

• orderId — ID заказа
• order — полные данные заказа (включая адрес, статусы)
• config — конфигурация из контроллера
• isCreateMode — режим создания

Файлы для изменения

Файл	Изменение
vueManager/src/entries/order.js	Добавить класс OrderTabsRegistry, глобальный объект, уведомление при mount/unmount
vueManager/src/components/OrderView.vue	Динамические табы, registerPluginTab(), рендеринг плагинных вкладок

Пример использования (для стороннего разработчика)

// Плагин MODX на событие msOnManagerCustomCssJs
if ($page === 'order') {
    $controller->addHtml('<script>
        window.MS3OrderTabsRegistry.register({
            key: "delivery_tracking",
            title: "Отслеживание",
            type: "extjs",
            xtype: "my-delivery-tracking-panel",
            position: 5,
            hideOnCreate: true
        });
    </script>');
}

Референс

Полностью рабочая реализация для товара:

• vueManager/src/entries/product-tabs.js — ProductTabsRegistry
• vueManager/src/components/product/ProductTabs.vue — registerPluginTab(), рендеринг