Разработка интерфейса (Frontend)

Разработка фронтенда в Pano строится на Svelte и использует Bootstrap 5 и Animate.css для стилизации. Взаимодействие вашего плагина с фронтендом происходит в основном через @panomc/sdk.

📂 Структура каталогов

Прежде чем приступать к коду, важно понять, где должны находиться ваши файлы.

src/
├── panel/                  # Компоненты и страницы для Панели Администратора
│   ├── components/         # Переиспользуемые компоненты панели
│   ├── modals/             # Модальные окна
│   └── pages/              # Основные страницы маршрутов
├── theme/                  # Компоненты и страницы для Публичной Темы
│   ├── components/         # Переиспользуемые компоненты темы
│   ├── modals/             # Модальные окна
│   └── pages/              # Основные страницы маршрутов
└── main.js                 # Точка входа: Регистрирует маршруты и навигацию

• panel/: Содержит все, что относится к интерфейсу администратора (дашборд).
• theme/: Содержит все, что относится к тому, что видят обычные пользователи на сайте.
• main.js: Это самый важный файл. Он сообщает Pano, где находятся ваши страницы, и добавляет ссылки в меню навигации.

---

🛠️ Разработка с использованием @panomc/sdk

Пакет @panomc/sdk — это ваш набор инструментов для взаимодействия с Pano. Он предоставляет все необходимое для создания приложений, которые ощущаются как родные: от компонентов пользовательского интерфейса до сетевых запросов.

1. Регистрация страниц

Чтобы добавить новую страницу в панель администратора или на веб-сайт, вы используете функцию pano.ui.page.register.

import { PanoPlugin } from '@panomc/sdk';

export default class AnnouncementPlugin extends PanoPlugin {
    onLoad(pano) {
        // Регистрация страницы в Панели Администратора
        pano.ui.page.register({
            name: 'announcements',
            path: '/announcements', // URL: /panel/announcements
            view: () => import('./panel/pages/AnnouncementsPage.svelte'),
            scopes: ['admin'] // Видно только администраторам
        });
    }
}

2. Добавление ссылок навигации

Создание страницы не добавляет ее автоматически в меню. Вам нужно вручную добавить ее в боковую панель или навигационную строку.

pano.ui.nav.site.editNavLinks((navLinks) => {
    navLinks.push({
        id: 'announcements',
        title: 'Announcements',
        uipath: '/announcements', // Должно совпадать с путем зарегистрированной страницы
        icon: 'fas fa-bullhorn', // Иконка FontAwesome
        scopes: ['admin']
    });
    return navLinks;
});

3. Использование нативных компонентов

Вместо того чтобы создавать стандартные элементы интерфейса с нуля, используйте нативные компоненты Pano. Это гарантирует, что ваш плагин будет выглядеть и ощущаться как часть основной платформы.

<script>
    // Импорт компонентов из SDK
    import { Button, Card, Input } from '@panomc/sdk/components/panel';
</script>

<Card title="Новое объявление">
    <Input label="Заголовок" placeholder="Введите заголовок..." />
    <Button color="primary">Создать</Button>
</Card>

4. Выполнение API запросов

Используйте ApiUtil для связи с вашим бэкендом. Он автоматически обрабатывает аутентификацию и базовые URL.

import { ApiUtil } from '@panomc/sdk/utils/api';

// GET запрос
const announcements = await ApiUtil.get('/api/announcement/list');

// POST запрос
await ApiUtil.post('/api/announcement/create', {
    title: 'Привет, мир',
    content: 'Это новое объявление.'
});

5. Локализация

Pano по умолчанию поддерживает многоязычность. Используйте функцию _ (подчеркивание) для перевода текстовых строк.

<script>
    import { _ } from '@panomc/sdk/utils/language';
</script>

<h1>{_('announcement.welcome_title')}</h1>
<p>{_('announcement.description')}</p>

6. Уведомления (Toasts)

Обеспечивайте обратную связь с пользователями, используя встроенную систему уведомлений.

// Сообщение об успехе
pano.utils.toast.success(_('announcement.created_success'));

// Сообщение об ошибке
pano.utils.toast.error(_('announcement.created_error'));

📝 Стиль кода и лучшие практики

• Порядок в Svelte: Упорядочивайте блоки следующим образом: <styles>, <html>, <script>.
• Динамическая загрузка: Всегда используйте динамический импорт (например, () => import(...)) при регистрации страниц, чтобы сохранить размер начального пакета небольшим.
• Производительность: Избегайте тяжелых вычислений на фронтенде. Переносите сложную логику на бэкенд API.
• Визуальная согласованность: Изучите репозитории panel-ui и vanilla-theme, чтобы увидеть, как структурированы стандартные страницы (например, макеты таблиц, заголовки).