Концепция UI

Концепция 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 режим поддерживаются как базовая опция.

Содержание