Страницы
Pages — это легковесный способ добавить кастомную страницу в навигацию Frame. В отличие от модулей, Pages не требуют composer-пакета, ServiceProvider или бэкенд-логики — всё настраивается на фронтенде.
Когда использовать
| Pages | Модули | |
|---|---|---|
| Бэкенд | Нет | ServiceProvider, Controller, routes |
| Навигация | Секция «Разделы» | Секция «Модули» |
| Авторизация | Нет (или вручную) | Gate через ModuleManager |
| Поиск | Автоматически в глобальном поиске | Через SearchService |
| Пакетизация | Нет | Composer-пакет |
| Use case | Дашборды, гайды, статические страницы | Аудит, интеграции, сложная логика |
Быстрый старт
Для добавления страницы нужны две вещи: регистрация в навигации через useMenu() и регистрация роута через extendRoutes().
import { useMenu } from '@frame/core'
import { extendRoutes, DashboardLayout } from '@frame/vue'
import { IconChartBar } from '@tabler/icons-vue'
const { addPage } = useMenu()
addPage({
name: 'analytics',
label: 'Аналитика',
icon: IconChartBar,
to: '/analytics',
caption: 'Статистика и графики',
})
extendRoutes([{
path: '/analytics',
name: 'analytics',
component: () => import('./pages/AnalyticsPage.vue'),
meta: { layout: DashboardLayout },
}])
app.use(FramePlugin, ...) — роуты должны быть добавлены до создания роутера.useMenu()
Composable с реактивным состоянием. Можно вызывать из любого места — навигация обновится автоматически.
import { useMenu } from '@frame/core'
const { pages, addPage, removePage, clear } = useMenu()
Методы
name уже существует — обновляет её.MenuPage
translate().@tabler/icons-vue)./analytics).0. Меньше — выше.Навигация
Зарегистрированные страницы появляются в навигации в секции Разделы — выпадающий список, аналогичный секции «Модули».
Глобальный поиск
Страницы автоматически индексируются в глобальном поиске. Поиск производится по label и caption на стороне фронтенда.
Компонент страницы
<template>
<Page
:title="translate('Аналитика')"
:breadcrumbs="[
{ label: translate('Home'), to: '/' },
{ label: translate('Аналитика') },
]"
>
<!-- содержимое страницы -->
</Page>
</template>
<script lang="ts" setup>
import { translate } from '@frame/core'
import { Page } from '@frame/vue'
</script>
Используйте компонент Page из @frame/vue для единообразного оформления с breadcrumbs и заголовком.