113 lines
15 KiB
Markdown
113 lines
15 KiB
Markdown
# План реализации UX/UI по пятичасовым окнам
|
||
|
||
Общий план проекта MikrotikManager. Основан на согласованном плане из задачи; состояние на 2026-09-24. Источник фактического прогресса, проверок и ограничений — [журнал реализации](ux-ui-progress.md). Этот документ задаёт объём и критерии завершения, журнал фиксирует результат.
|
||
|
||
## Цель и обязательные требования
|
||
|
||
Информативный, лаконичный и интуитивно понятный интерфейс с полноценной обработкой API, ошибок, прав и состояний данных. ReUI PRO, Frame и стиль `base-nova`; переиспользование установленных компонентов и общих композиций KpiStatGrid, ServerTileRail, CodeExportSheet. Основной сценарий — ПК с адаптацией для телефона; доступность обязательна.
|
||
|
||
Изменения выполняются как fullstack-работа: проверять контракт и поведение backend, а не только внешний вид. Не показывать успешную операцию до подтверждения API, не подменять неизвестные значения нулями. Локальные проверки используют реальные HTTP-пути с подменой ответов. Моки достаточны для локальной проверки UI и обработки ответов, но не доказывают применение конфигурации RouterOS, работу JWT в реальном окружении или точность IPFIX.
|
||
|
||
## Распределение работы и лимиты
|
||
|
||
- Пятичасовое окно — квота использования, а не пять часов непрерывной разработки. Расход заранее неизвестен; этап ограничивается конкретным результатом и проверками.
|
||
- По умолчанию один крупный этап на окно. Небольшие блоки объединять после проверки доступной квоты. Учитывать и общий недельный лимит аккаунта.
|
||
- Проверять квоту в начале этапа и после законченного блока. Базовый резерв — 25% пятичасового окна: не начинать новый блок, завершать проверки и сохранять состояние.
|
||
- Последующие прямые указания пользователя «до конца лимитов» разрешают работать ниже базового резерва, сохраняя возможность завершить проверки, журнал и коммит. Не начинать блок, который нельзя безопасно закончить.
|
||
- Работать последовательно, без параллельных агентских задач. Не менять модель посреди этапа без необходимости.
|
||
- После каждого завершённого этапа или самостоятельного проверенного блока делать локальный коммит. **Без push.** Сообщение коммита — по AGENTS.md, с русским subject после префикса.
|
||
- Исторические проценты и даты сброса из первоначального плана не являются текущими: перед работой получать актуальные лимиты.
|
||
|
||
## Этапы и критерии завершения
|
||
|
||
| Этап | Объём | Точка завершения | Распределение |
|
||
| --- | --- | --- | --- |
|
||
| 0. Подготовка | Зафиксировать состояние проекта, базовые проверки, таблицы и потребителей Filters, исходные экраны | Журнал, исходные ошибки, карта миграции | Первое окно |
|
||
| 1. Достоверность операций | Сохранение, удаление, опрос серверов; сохранение формы и данных при ошибках | Проверены успех, ошибка API, отсутствие доступа, повторное нажатие | Вместе с 0 при достаточном резерве |
|
||
| 2. Основа миграции | Связанная группа ReUI Data Grid/TanStack, общая оболочка, одна таблица серверов, подготовка Filters | Эталонная таблица, зависимости и образец миграции | Отдельное окно |
|
||
| 3. Основные таблицы | Обзор, серверы, мониторинг, трафик, статистика, справочники | Проверены таблицы группы, оставшиеся потребители перечислены | Отдельное окно |
|
||
| 4. Остальные таблицы | VPN, маршрутизация, управление, системные разделы; удаление старого API Filters | Нет смешения старого и нового API, общие проверки проходят | Отдельное окно |
|
||
| 5. Состояния данных | Частичные сбои дашборда, последние данные, свежесть, гонки запросов | Проверены первоначальная ошибка, частичный сбой, фоновое обновление | Отдельное окно |
|
||
| 6. Оболочка и дашборд | Навигация, контекст, подписи, сводка, очередь проблем, переходы к объектам | Проверены схемы и экраны ПК/телефона, переходы работают | Отдельное окно |
|
||
| 7. Серверы и мониторинг | Единый UX таблиц, деталей и форм; URL-контекст, права | Сценарий «проблема → сервер → действие → возврат» работает | Отдельное окно |
|
||
| 8. Трафик и статистика | Периоды, единицы, фильтры среза, связь графиков и таблиц, пустые состояния | Нет смешения live/истории и подмены неизвестных значений нулями | Отдельное окно; допускается несколько блоков |
|
||
| 9. VPN и сетевые операции | WireGuard, IPsec, GRE, VXLAN, Firewall, Filters; выбор устройства, формы | Контекст устройства сохраняется, результат операций подтверждён API | Отдельное окно |
|
||
| 10. Маршрутизация и диагностика | BGP, OSPF, рекурсивные маршруты, оптимизатор, диагностика, карта, терминал | Проверены профильные сценарии без изменения правил сетевых операций | Отдельное окно |
|
||
| 11. Администрирование | Пользователи, контейнеры, сертификаты, резервирование, оповещения, сбор данных, релизы, настройки | Общие шаблоны применены, ошибки операций и интеграций понятны | Разделено на 11А и 11Б |
|
||
| 12. Итоговая приёмка | Доступность, адаптивность, права, производительность, сквозная регрессия | Production build, тесты, ReUI checklist, список ограничений | Отдельное окно |
|
||
|
||
Это 13 контрольных этапов, а не обещание уложиться в 13 окон. Основная неопределённость — миграция компонентов и применение изменений в сетевых разделах.
|
||
|
||
Этапы 2–4 выполняются в отдельной ветке миграции (`codex/reui-v9-migration`). Промежуточные остановки допустимы с точным перечнем ошибок; выпуск до завершения этапа 4 не допускается. Само завершение этапа не является разрешением на push или deployment.
|
||
|
||
## Референсы и схемы
|
||
|
||
Для каждой группы экранов сначала использовать одну схему как эталон, затем применять её последовательно. Не пересобирать весь визуальный план в каждом окне.
|
||
|
||
| Этапы | Референсы ReUI PRO | Схема доработки |
|
||
| --- | --- | --- |
|
||
| 6 | [App Shell 12](https://reui.io/preview/base/app-shell-12?ref=mcp), [Stats 12](https://reui.io/preview/base/stats-12?ref=mcp) | Навигация → сводка → проблемы → измерения |
|
||
| 2–4, 7–8 | [Data Grid Filtering 2](https://reui.io/preview/base/data-grid-filtering-2?ref=mcp) | Фильтры → таблица → детали → результат |
|
||
| 7, 9–10 | [List 9](https://reui.io/preview/base/list-9?ref=mcp), [Sheet 8](https://reui.io/preview/base/sheet-8?ref=mcp) | Сервер → объект → форма → подтверждение API |
|
||
| 11 | [Settings 16](https://reui.io/preview/base/settings-16?ref=mcp) | Секция → состояние → действие → результат |
|
||
|
||
```mermaid
|
||
flowchart LR
|
||
A["0–1: подготовка и операции"] --> B["2–4: миграция ReUI"]
|
||
B --> C["5: достоверность данных"]
|
||
C --> D["6–8: основные экраны"]
|
||
D --> E["9–10: сетевые разделы"]
|
||
E --> F["11: администрирование"]
|
||
F --> G["12: приёмка"]
|
||
```
|
||
|
||
```text
|
||
ПК: [Навигация] [Контекст и действия ]
|
||
[Период / фильтры ]
|
||
[Сводка ]
|
||
[Список объектов] [Детали / результат]
|
||
|
||
Телефон: [Навигация и контекст]
|
||
[Действия / фильтры ]
|
||
[Сводка ]
|
||
[Список объектов ]
|
||
[Детали / результат ]
|
||
|
||
Данные: контекст → загрузка → подтверждённые данные
|
||
↘ ошибка + повтор
|
||
новый контекст ≠ старые данные; неизвестное ≠ ноль
|
||
```
|
||
|
||
## Текущая точка продолжения
|
||
|
||
По журналу этапы 0–7 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 8 в работе, этапы 9–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки.
|
||
|
||
Подробные планы: [этап 6](ux-ui-stage-6.md), [этап 7](ux-ui-stage-7.md), [этап 8](ux-ui-stage-8.md).
|
||
|
||
Для этапа 8 уже выполнены блоки периодов/URL статистики, ошибок и гонок трафика, месячного отчёта, адаптивности, неизвестных метрик, пустой истории и разрывов графиков. Проверены смена flow-сервера, отмена SSE до ответа, позднее чтение открытого SSE на управляемом ReadableStream и смена backend через настройки. Точный состав тестов и оговорки — в журнале, блоки 8.1–8.4О. В flow добавлены отметки получения API/SSE; свежесть остальных видов трафика ещё требует реализации.
|
||
|
||
Ближайший оставшийся объём:
|
||
|
||
1. Задержанное чтение открытого SSE проверено в блоке 8.4Н; продолжить со свежести данных ниже.
|
||
2. Свежесть данных трафика: ясное различие времени получения, истории и текущего live-измерения.
|
||
3. Сводная приёмка этапа 8 и оставшихся ограничений (включая выбор архивных серверов месячного отчёта), профильная регрессия и ReUI checklist.
|
||
4. После фиксации результата этапа 8 — этап 9.
|
||
|
||
## Порядок продолжения и журналирования
|
||
|
||
Перед работой читать этот план, начало журнала, git status и последние коммиты; сохранять чужие изменения. Затем проверить квоту и выбрать завершённый по смыслу блок текущего этапа.
|
||
|
||
После блока записать в `ux-ui-progress.md`:
|
||
|
||
- результат и затронутые компоненты;
|
||
- выполненные проверки и известные ошибки;
|
||
- оставшийся объём и точный следующий шаг;
|
||
- решения по API и совместимости;
|
||
- границы локальной проверки и текущую квоту.
|
||
|
||
Профильные проверки выполнять после каждого блока. Полная регрессия — после миграции и при итоговой приёмке; между этапами расширять её при изменении общей основы. Не объявлять этап завершённым только по успешной сборке или тестам на моках.
|
||
|
||
Для новой задачи:
|
||
|
||
> Продолжи UX/UI-план из docs/ux-ui-plan.md по журналу docs/ux-ui-progress.md. Сначала проверь состояние файлов и остаток лимита. Выполни следующий незавершённый блок, проверь результат, обнови журнал и сделай локальный коммит без push.
|