fix(ui): адаптировать шапку страницы к узким экранам

2026-09-20 11:49:44 +07:00
1 parent 6a726b13b4
commit 9b3196363c
@@ -20,7 +20,7 @@
 | 3 | Основные таблицы и справочники | Завершён 2026-09-13, границы проверок ниже |
 | 4 | Остальные таблицы, удаление старых API, общая регрессия | Завершён 2026-09-20; границы приёмки ниже |
 | 5 | Состояния данных, свежесть, частичные сбои, гонки polling | Завершён 2026-09-20 для дашборда; границы проверок ниже |
-| 6 | Навигация и дашборд | Не начат |
+| 6 | Навигация и дашборд | В работе: адаптивная шапка готова, далее навигация и очередь проблем |
 | 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Не начат |
 | 8 | Трафик и статистика | Не начат |
 | 9 | VPN, Firewall и Filters | Не начат |
@@ -381,6 +381,14 @@ Internet Path использует успешный серверный сним

 Квота: 41% пятичасовой на старте, 73% после профильных проверок (недельная 11%). Следующий этап 6 — общая оболочка и дашборд: показать одну схему ПК/телефона по App Shell 12/Stats 12, затем улучшать навигацию, контекст и очередь проблем с переходами к объектам. Этот этап сохранить отдельным локальным коммитом без push; настройки skills/AGENTS/.codex не включать.

+## Этап 6 — блок 1: схема и адаптивная шапка (2026-09-20)
+
+Схема ПК/телефона и таблица референсов сохранены в `docs/ux-ui-stage-6.md`. PageHeader сохраняет установленные SidebarTrigger/Breadcrumb/AppsMenu/SystemMonitorPopover: текущая страница видна на телефоне, действия переносятся, фиксированная высота снята. У Breadcrumb корректные прямые li внутри ol и русское доступное имя. Примитивы ReUI, зависимости и backend не менялись.
+
+Проверки: TypeScript и scoped ESLint успешны. Четыре браузерных сценария шапки (320/390/1024/1440 px) прошли: геометрия заголовка/кнопок, меню с клавиатуры, Escape и возврат фокуса. Дополнительно прошли таблица рекурсивных маршрутов и мобильный сценарий серверов. Просмотрены скриншоты 320/1440. Первый запуск теста ошибочно искал banner: header внутри main этой роли не имеет; локатор исправлен без изменения семантики приложения. ReUI validate_usage/checklist получены ранее, используются установленные API и семантические цвета.
+
+Предыдущая попытка запуска была остановлена ошибкой автоматической проверки разрешений из-за исчерпанной квоты; после сброса проверка запуска прошла. На старте этого продолжения использовано 2% пятичасовой и 16% недельной квоты. Этап 6 остаётся открытым. Следующий блок — единый список Sidebar/CommandPalette и стандартное управление фокусом поиска, затем дашборд и ссылки очереди. Локальный коммит без push; файлы настройки другой работы не включать.
+
 ## Карта миграции (исходная инвентаризация этапа 0)

 Исходная связка на этапе 0: @tanstack/react-table ^8.21.3, @tanstack/react-virtual ^3.14.4, base-nova. По итогам этапа 4 используется @tanstack/react-table 9.2.4 с useTable/dataGridFeatures и дерево FilterQuery вместо старого filters/onChange. Список ниже сохранён как историческая инвентаризация.
@@ -445,3 +453,4 @@ Internet Path использует успешный серверный сним
 - `app/(main)/statistics/page.tsx`
 - `components/backups/backups-history.tsx`
 - `components/data-page-toolbar.tsx`
+
@@ -0,0 +1,44 @@
+# Этап 6: общая оболочка и дашборд
+
+Рабочая схема от 2026-09-20. Основа — ui-design-contract.md: ReUI PRO, base-nova, Frame, Sidebar 240 px. Поиск вызывается Ctrl+K/⌘K, тема остаётся в NavUser. Весь этап ещё не завершён.
+
+| Область | Референс | Результат |
+| --- | --- | --- |
+| Оболочка | [App Shell 12](https://reui.io/preview/base/app-shell-12?ref=mcp) | Контекст страницы, доступные действия, меню и поиск с клавиатуры |
+| Сводка | [Stats 12](https://reui.io/preview/base/stats-12?ref=mcp) | KpiStatGrid/IconTile во Frame, предметные подписи, неизвестное значение — «—» |
+| Очередь проблем | [List 9](https://reui.io/preview/base/list-9?ref=mcp) | Проблема → объект → доступное действие |
+
+## ПК
+
+```text
+┌ Навигация 240 px ┬ Путь страницы · Действия · Приложения · Монитор ┐
+│ Обзор           ├ Свежесть / ошибки источников / обновить         │
+│ Данные          ├ Сводка: серверы · туннели · BGP · проверки       │
+│ Управление      ├ Очередь проблем → сервер / профильный раздел    │
+│ Инструменты     ├ Измерения и события                             │
+│ Система         │ Быстрые переходы                               │
+└─────────────────┴─────────────────────────────────────────────────┘
+```
+
+## Телефон
+
+```text
+┌ Меню · Текущая страница                     ┐
+│ Действия с переносом · Приложения · Монитор │
+├ Свежесть / ошибки источников               ┤
+│ Сводка в адаптивной сетке                   │
+│ Очередь проблем → объект                   │
+│ Измерения → события → быстрые переходы     │
+└────────────────────────────────────────────┘
+```
+
+На страницах без действий служебные кнопки остаются рядом с заголовком. При наличии действий и ширине менее 1280 px выделяется дополнительная строка с переносом кнопок. DOM-порядок совпадает с визуальным и клавиатурным, текущий заголовок не скрывается многоточием. На ПК сохраняется компактная строка, при нехватке места шапка растёт по высоте.
+
+## Блоки и приёмка
+
+1. **Шапка.** Убрать фиксированную высоту и обрезку; текущая страница видна на телефоне; корректный список Breadcrumb. Проверить 320/390/1024/1440 px, клавиатуру и Escape.
+2. **Навигация.** Общий источник названий, адресов и поисковых синонимов для Sidebar и CommandPalette. Использовать установленные Command/Dialog для фокуса, поиска, клавиатуры и семантических цветов. Закрывать мобильное меню после перехода. Сверить маршруты с существующими страницами.
+3. **Дашборд.** Уточнить подписи «Флот», «Оверлей», «BGP Rx», «Здоровье». Поднять очередь проблем после сводки, дать контекст и переходы к объектам. Сохранить состояния источников этапа 5; отсутствие данных не считать отсутствием проблем. Быстрые переходы не должны вытеснять проблемы за первый экран.
+4. **Приёмка.** Просмотреть ПК/телефон, проверить переходы, пустое состояние, частичный сбой и клавиатуру; профильные тесты, TypeScript, lint и production build общей оболочки.
+
+HTTP-моки проверяют интерфейс и запросы. Реальные данные, права и RouterOS требуют тестового окружения. Формы и полный URL-контекст сервера относятся к этапу 7; сетевые операции в этапе 6 не менять.