# Концепция UI

## 1. Стек UI

- Frontend: Vue 3 + Vite (референсный runtime `../ioot-pro-cabinet`).
- Контуры: tenant UI, master UI, локальный HMI.
- Архитектура экрана: двухколоночный layout (`Sidebar`, `Content`) с popup Infobar.
- Runtime маршрутов: универсальный контейнер экрана (RouteContent-подход).
- Фактический статус runtime: базовые карточные модули и auth/passkey flow реализованы, а shell baseline уже вынесен в отдельные layout/components/composables с viewport-contained scroll surface и явным frontend typing baseline.

## 2. UX-принципы

- Mobile-oriented UI.
- Mobile-first адаптивная сетка.
- Единый UX на телефон/планшет/десктоп.
- Минимизация глубины навигации для операторских сценариев.
- Согласованное поведение UI в модульной карточной модели: карточка/карта.

## 3. Модульная модель UI

- Модули представлены в основном окне приложения, каждый модуль — отдельная карточка.
- Карточка имеет три состояния:
  - свёрнутая (`минимальный виджет`);
  - развернутая (`рабочий виджет`);
  - полноэкранная (`работа в карточке`).
- По объекту карточки открывается инфобар в popup с полным набором инструментов.
- Справочник, настройки и дополнительные элементы скрыты в бургер-меню.
- Отдельные полноэкранные представления (карта, пульт) размещаются кнопками быстрого вызова в верхнем правом углу интерфейса.

## 4. Базовая компоновка

- Базовый layout:
  - навигация;
  - рабочая зона схем/графиков/состояний (карточки модулей).
- Навигация и виджеты управляются конфигурацией (schema-driven, JSON-driven).
- Карты используются для объектов с геопривязкой.
- Infobar реализуется как popup и используется для детального объекта и истории.

## 5. Экранные роли

- Оператор: мониторинг, тревоги, команды.
- Инженер: диагностика, параметры, профили устройств.
- Администратор: подписки, политики, доступы.

## 6. Нефункциональные требования UI

- Работа в деградированном канале связи.
- Предсказуемое поведение при частичной недоступности backend.
- Стабильная работа на 10" HMI и мобильных устройствах.

## 7. Контракты UI -> API

- Глобальный контракт данных UI:
  - `GET /api/v1/<resource>/list`
  - `GET /api/v1/<resource>/scheme`
- Контекст маршрута в заголовках:
  - `X-Route-Path`
  - `X-Route-Module`
  - `X-Route-Filter`
- Версия клиента в заголовках:
  - `X-Client-Version`
  - `X-Client-Build-Time`

## 8. Рантайм навигации

- Состав модулей, папок и меню приходит с backend-каталога.
- Каталог модулей использует параметры:
  - `display_module`
  - `show_filters`
  - `module_view`
- Разрешено расширение каталога новыми параметрами без изменения базового каркаса.

## 9. Контроль качества

- Обязательные проверки перед релизом UI:
  - i18n check;
  - unit/integration tests;
  - production build;
  - smoke основных endpoint-ов.
- i18n-политика:
  - русский как source-locale;
  - синхронизация ключей на поддерживаемые языки.
- PWA:
  - service worker, auto-update, offline-ready режим поддерживаются как базовая опция.