Appearance
Экраны и layouts
Последняя сверка с кодом: 2026-06-12
Аудитория: дизайнеры, QA (визуальная проверка)
UI-kit: docs/09-ui-kit.md · docs/ui-kit/ · dev-стенд/dev/ui-kit
1. Layouts
| Layout | Файл | Header | Sidebar | Footer | Где |
|---|---|---|---|---|---|
landing | layouts/landing.vue | AppSiteHeader (public) | — | SiteFooter | /, /pricing, terms |
default | layouts/default.vue | AppSiteHeader (public) | — | — | /:id, share, join |
cabinet | `layout: account) | AdminSidebar | — | Аккаунт, админка события, платформа | |
fullscreen | layouts/fullscreen.vue | — | — | — | /:id/wall |
auth | layouts/auth.vue | — | — | — | Не используется в prod (редиректы) |
AppSiteHeader (public): лого, навигация (как работает / тарифы / FAQ), login / register или «Мои события» + выход.
AppSiteHeader (cabinet): бургер на мобиле, лого, имя→/profile, выход.
AdminSidebar: дерево навигации через useAdminNav (global + event + platform).
2. Глобальные элементы (на всех страницах)
| Элемент | Компонент | Описание |
|---|---|---|
| Auth-модалка | AuthModal.vue | Поверх всего, управляется useAuthModal |
| Toast | UiToastContainer.vue | Правый нижний угол, auto-dismiss |
| Ошибка страницы (inline) | UiPageError.vue | Внутри cabinet main, не отдельная страница |
3. Экраны (страница за страницей)
/ — Лендинг
Layout: landing
Блоки: hero (title + lead + CreateEventForm), как работает (#how), pricing (#pricing через LandingPricingSection), FAQ (#faq)
Состояния: залогинен → «Мои события» в header; не залогинен → login/register
CreateEventForm: при нажатии без auth → открывает AuthModal
/pricing — Тарифы
Layout: landing
Блоки: LandingPricingSection compact, ссылка назад
Данные: GET /api/plans → PricingPlanCard
/terms, /privacy — Legal
Layout: landing
Блоки: статичный текст
/:id — Альбом
Layout: default
Блоки: заголовок события (title, date, branding), upload-зона (UploadButton), сетка медиа (MediaGrid + MediaCard), лайтбокс (PhotoSwipe)
Состояния:
| Состояние | UI |
|---|---|
| Загрузка | AlbumHeadSkeleton + MediaGridSkeleton |
| Пусто | Пустой альбом с призывом загрузить |
| qrAccess=ALL | Показывается без логина |
| qrAccess=MEMBERS_ONLY | UiPageError 401/403 с loginPath |
| Ошибка сети | UiPageError offline + retry |
| 404 | UiPageError not-found |
Брендинг: useEventBrandingStyles → CSS переменные фона/цвета из EventSettings.
/:id/share — QR и ссылки
Layout: default
Блоки: QR-код (QrShare), три ссылки (ShareLinks): альбом / wall / admin
Действия: copy, download QR
/:id/wall — Слайдшоу
Layout: fullscreen
Блоки: SlideshowPlayer, SSE подключение
Состояния: пустой альбом → ждёт первого фото; new media → следующий слайд
/:id/join — Вступление MEMBER
Layout: default
Блоки: название события, кнопка join
Состояния: не залогинен → AuthModal; уже MEMBER → redirect в альбом
/account — Дашборд организатора
Layout: cabinet
Блоки: статистика (события, медиа), список событий с кнопками управления
Sidebar: global items (cabinet / my-events / profile)
Состояния: loading skeleton, пустой список с CTA создать
/my-events — Список событий
Layout: cabinet
Блоки: список карточек событий (title, date, mediaCount, кнопки)
/profile — Аккаунт
Layout: cabinet
Блоки: изменить имя, сменить пароль (текущий + новый + повтор + сила пароля), «Выйти на других устройствах»
/:id/manage — Управление альбомом (OWNER/MODERATOR)
Layout: cabinet
Sidebar: event items
Блоки: stats, список медиа (manage view), delete, ZIP-скачивание (все / выбранные), ссылки
/:id/settings — Настройки события (только OWNER)
Layout: cabinet
Блоки: доступ (qrAccess, albumVisibility, zipAccess), upload (allowedMedia, maxFilesPerGuest, uploadEnabled), брендинг (лого / фон / цвет), модерация
Состояния: поля, недоступные на плане FREE — скрыты или disabled
/:id/members — Команда (OWNER/MODERATOR)
Layout: cabinet
Блоки: список участников (email, роль, дата), форма добавления MODERATOR, invite-ссылка MEMBER (copy / regenerate)
/:id/moderate — Модерация (OWNER/MODERATOR)
Layout: cabinet
Блоки: очередь PENDING медиа, кнопки Approve/Reject
Состояния: пустая очередь; moderation выключена → сообщение
/admin/users — Пользователи платформы
Layout: cabinet
Sidebar: platform items
Блоки: AdminDataTable (PrimeVue) — email, план, роль, дата регистрации
/admin/events — События платформы
Layout: cabinet
Блоки: AdminDataTable — title, owner, mediaCount, createdAt
/admin/plans — Тарифы платформы
Layout: cabinet
Блоки: PlatformPlanCard с PlatformPlanLimit — таблица лимитов по плану
4. Состояния ошибок (UiPageError)
| Иконка | Когда | Действия |
|---|---|---|
locked (401) | Не залогинен на защищённом | Кнопка «Войти» (loginPath) |
locked (403) | Нет прав | — |
not-found (404) | Событие не найдено | — |
offline | Нет сети | Retry |
error | Прочая ошибка | Retry |
5. Мобильный адаптив
| Элемент | Мобиль |
|---|---|
| Sidebar (cabinet) | Выдвижной drawer + backdrop |
| MediaGrid | 1 колонка |
| AppSiteHeader | Бургер + имя пользователя скрыто |
Брейкпоинты: mobile 480px, tablet 768px, desktop 1024px — frontend/app/assets/styles/mixins/_breakpoints.scss.
6. Dev UI-kit стенд
/dev/ui-kit — все компоненты с примерами./dev/api — тест API-запросов.
Доступно только при NODE_ENV=development.