5.0 KiB
5.0 KiB
Этап 6: общая оболочка и дашборд
Рабочая схема от 2026-09-20. Основа — ui-design-contract.md: ReUI PRO, base-nova, Frame, Sidebar 240 px. Поиск вызывается Ctrl+K/⌘K, тема остаётся в NavUser. Весь этап ещё не завершён.
| Область | Референс | Результат |
|---|---|---|
| Оболочка | App Shell 12 | Контекст страницы, доступные действия, меню и поиск с клавиатуры |
| Сводка | Stats 12 | KpiStatGrid/IconTile во Frame, предметные подписи, неизвестное значение — «—» |
| Очередь проблем | List 9 | Проблема → объект → доступное действие |
ПК
┌ Навигация 240 px ┬ Путь страницы · Действия · Приложения · Монитор ┐
│ Обзор ├ Свежесть / ошибки источников / обновить │
│ Данные ├ Сводка: серверы · туннели · BGP · проверки │
│ Управление ├ Очередь проблем → сервер / профильный раздел │
│ Инструменты ├ Измерения и события │
│ Система │ Быстрые переходы │
└─────────────────┴─────────────────────────────────────────────────┘
Телефон
┌ Меню · Текущая страница ┐
│ Действия с переносом · Приложения · Монитор │
├ Свежесть / ошибки источников ┤
│ Сводка в адаптивной сетке │
│ Очередь проблем → объект │
│ Измерения → события → быстрые переходы │
└────────────────────────────────────────────┘
На страницах без действий служебные кнопки остаются рядом с заголовком. При наличии действий и ширине менее 1280 px выделяется дополнительная строка с переносом кнопок. DOM-порядок совпадает с визуальным и клавиатурным, текущий заголовок не скрывается многоточием. На ПК сохраняется компактная строка, при нехватке места шапка растёт по высоте.
Блоки и приёмка
- Шапка. Убрать фиксированную высоту и обрезку; текущая страница видна на телефоне; корректный список Breadcrumb. Проверить 320/390/1024/1440 px, клавиатуру и Escape.
- Навигация. Общий источник названий, адресов и поисковых синонимов для Sidebar и CommandPalette. Использовать установленные Command/Dialog для фокуса, поиска, клавиатуры и семантических цветов. Закрывать мобильное меню после перехода. Сверить маршруты с существующими страницами.
- Дашборд. Уточнить подписи «Флот», «Оверлей», «BGP Rx», «Здоровье». Поднять очередь проблем после сводки, дать контекст и переходы к объектам. Сохранить состояния источников этапа 5; отсутствие данных не считать отсутствием проблем. Быстрые переходы не должны вытеснять проблемы за первый экран.
- Приёмка. Просмотреть ПК/телефон, проверить переходы, пустое состояние, частичный сбой и клавиатуру; профильные тесты, TypeScript, lint и production build общей оболочки.
HTTP-моки проверяют интерфейс и запросы. Реальные данные, права и RouterOS требуют тестового окружения. Формы и полный URL-контекст сервера относятся к этапу 7; сетевые операции в этапе 6 не менять.