UI-слоты (app.uiSlots)
Реестр app.uiSlots — точки встраивания Vue-компонентов в заранее определённые regions экранов хоста.
Регистрация
ts
import { getExtensionRegistry, type ExtensionUiSlotItem } from '@artiroute/extension-sdk/extension';
getExtensionRegistry<ExtensionUiSlotItem>('app.uiSlots').register(
'layout.sidebar.footer__my-ext', // key — уникален глобально
{
region: 'layout.sidebar.footer',
order: 100,
component: MyFooterWidget,
},
100
);В manifest:
js
{ registryId: 'app.uiSlots', keys: ['layout.sidebar.footer__my-ext'] }registry-test генерирует keys через regionRegistryKey(region) — рекомендуется тот же паттерн: {region}__{extensionSlug}.
Монтирование в хосте
Хост использует:
vue
<ExtensionSlotHost region="layout.sidebar.footer" />Компонент хоста фильтрует entries реестра app.uiSlots по полю region.
Каталог regions
Layout
| Region | Файл хоста |
|---|---|
layout.sidebar.before | AppSidebar.vue |
layout.sidebar.after | AppSidebar.vue |
layout.sidebar.footer | AppSidebar.vue |
layout.topbar.actions | AppTopbar.vue |
layout.topbar.title-suffix | AppTopbar.vue |
layout.main.before | MainLayout.vue |
layout.main.after | MainLayout.vue |
layout.overlay | MainLayout.vue |
app.root | App.vue |
Dashboard
| Region | Файл хоста |
|---|---|
dashboard.toolbar | DashboardScreen.vue |
dashboard.widget.header-after | DashboardWidgetRenderer.vue |
dashboard.empty | DashboardScreen.vue |
Projects
| Region | Файл хоста |
|---|---|
project.header.actions | ProjectDetailHeader.vue |
project.tabs.after | ProjectWorkspaceScreen.vue |
project.workspace.toolbar | ProjectWorkspaceScreen.vue |
project.widget.header-after | WidgetRenderer.vue |
project.settings.drawer | ProjectSettingsDrawer.vue |
projects.list.toolbar | ProjectsListScreen.vue |
Artifact editor
| Region | Файл хоста |
|---|---|
artifact-editor.toolbar | ArtifactEditorScreen.vue |
artifact-editor.sidebar | ArtifactEditorScreen.vue |
artifact-editor.editor-overlay | ArtifactEditorScreen.vue |
artifact-editor.generation.panel | ArtifactEditorScreen.vue |
Entity lists / forms
| Region | Файл хоста |
|---|---|
entity-list.toolbar.extra | list screens |
entity-form.toolbar | form screens |
entity-form.footer | form screens |
template-editor.sidebar | TemplateEditorScreen.vue |
preset-editor.sidebar | PresetEditorScreen.vue |
preset-editor.node-inspector | PresetEditorScreen.vue |
Settings / auth
| Region | Файл хоста |
|---|---|
settings.profile.after | SettingsProfilePanel.vue |
settings.appearance.after | SettingsAppearancePanel.vue |
login.form.after | LoginScreen.vue |
Рекомендации
- Используйте лёгкие компоненты в слотах — они рендерятся на каждом соответствующем экране
- Не дублируйте функциональность core UI — слоты для дополнений
- Для smoke-test всех regions см. registry-test
Payload: ExtensionUiSlotItem
| Поле | Описание |
|---|---|
region | Строка region (см. таблицы выше) |
component | Vue component |
order | Порядок при нескольких компонентах в одном region |
props | Статические props (опционально) |
resolveProps | (ctx) => props для динамического контекста (опционально) |