# UI/UX Checklist Обозначения: - `[x]` — уже реализовано. - `[ ]` — требуется сделать. - `[~]` — реализовано частично, требуется переработка. ## Текущее состояние - [x] Авторизация оператора. - [x] Список устройств. - [x] Просмотр состояния устройства. - [x] Метрики и предупреждения. - [x] DHCP- и Wi-Fi-клиенты. - [x] Команды и история выполнения. - [x] UCI-конфигурация и staged apply. - [x] Управление пакетами. - [x] Удаленный SSH-доступ и LuCI. - [x] Аудит действий. - [x] Обзор устройства понятен оператору. - [x] История метрик пригодна для быстрого анализа. - [x] Удаленный доступ запускается простым сценарием. - [x] Основные и экспертные функции визуально разделены. ## Этап 0. UX-аудит - [x] Составить полный список текущих экранов, панелей и кнопок. - [x] Для каждого элемента назначить действие: оставить, перенести, объединить или скрыть. - [~] Зафиксировать терминологию для оператора. - [x] Зафиксировать набор статусов и цветов. - [x] Определить основные пользовательские сценарии. - [x] Определить структуру навигации и маршруты страниц. - [ ] Определить desktop и mobile макеты. ## Этап 1. Каркас и объекты - [x] Добавить постоянную основную навигацию. - [x] Добавить верхнюю панель с глобальным обновлением. - [x] Создать полноширинную таблицу объектов. - [x] Добавить статус объекта с текстом и индикатором. - [x] Показывать имя, модель, группу, WAN, клиентов, проблемы и последний контакт. - [x] Добавить поиск по имени, модели, ID, WAN-адресу, группе и тегам. - [x] Добавить фильтр по статусу. - [x] Добавить фильтр по группе. - [x] Добавить фильтр по наличию проблем. - [ ] Добавить сортировку колонок. - [x] Открывать объект кликом по строке. - [~] Показывать массовые действия только после выбора объектов. - [~] Добавить loading, empty и error states таблицы. - [ ] Проверить таблицу на 1366 px и 1920 px. - [ ] Сделать мобильное представление списка объектов. ## Этап 2. Карточка и обзор объекта - [x] Создать верхнюю панель объекта. - [x] Добавить хлебную крошку возврата к объектам. - [x] Добавить вкладки «Обзор», «Клиенты и сеть», «Операции», «Сведения», «Эксперт». - [x] Показать статус и время последнего контакта. - [x] Показать WAN и доступность сервера. - [x] Показать load, память, uptime и число клиентов. - [x] Убрать дублирующиеся и технические метрики. - [~] Показать активные предупреждения с приоритетами. - [x] Добавить компактные графики метрик. - [ ] Добавить выбор периода графиков. - [x] Добавить основную кнопку открытия LuCI. - [x] Добавить кнопку перехода к диагностике. - [~] Перенести перезагрузку и опасные действия в отдельное меню. - [x] Убрать raw inventory с обзорной страницы. - [x] Убрать произвольные команды с обзорной страницы. - [x] Убрать редактирование группы и тегов с обзорной страницы. ## Этап 3. Клиенты - [x] Объединить DHCP leases и Wi-Fi stations в единую модель клиента. - [x] Создать таблицу клиентов. - [~] Показывать online/offline состояние. - [x] Показывать имя, IP, MAC и тип подключения. - [~] Для Wi-Fi показывать сеть, сигнал и скорость. - [ ] Для Ethernet показывать интерфейс или порт, если доступно. - [x] Добавить поиск по имени, IP и MAC. - [~] Добавить фильтры по состоянию и типу подключения. - [x] Добавить понятное состояние отсутствия клиентов. - [x] Проверить длинные имена и неизвестные значения. ## Этап 3. Сеть - [x] Создать сводку WAN-подключения. - [x] Показывать состояние интернет-доступа и внешний IP. - [x] Создать список LAN/WAN/Wi-Fi/VPN интерфейсов. - [~] Показывать адреса, состояние и счетчики трафика. - [~] Показать основные маршруты. - [ ] Показывать Wi-Fi сети и подключенных клиентов. - [~] Спрятать низкоуровневые детали в раскрываемые блоки. - [~] Добавить loading, empty и error states. ## Этап 4. Операции - [x] Объединить отдельные диагностические кнопки в один сценарий. - [~] Показывать прогресс диагностики. - [~] Показывать итог диагностики понятным языком. - [ ] Добавить рекомендации по найденным проблемам. - [x] Упростить создание удаленной сессии до выбора длительности. - [x] Спрятать host, порты и параметры туннеля в дополнительные настройки. - [x] Добавить действия «Открыть LuCI» и «Скопировать SSH». - [~] Показывать оставшееся время удаленной сессии. - [x] Добавить понятное закрытие удаленной сессии. - [x] Объединить Preview и Stage в сценарий «Проверить → Применить». - [x] Показывать изменения перед применением. - [x] Понятно объяснять commit confirmed и автоматический откат. - [x] Добавить безопасные пресеты настроек. - [x] Перенести низкоуровневое управление пакетами в экспертный режим. - [x] Добавить подтверждение опасных операций. ## Этап 5. Сведения - [x] Показать модель, плату и версию OpenWrt. - [x] Показать hostname и идентификатор устройства. - [x] Показать группу и теги. - [x] Добавить редактирование группы и тегов. - [x] Показать даты регистрации и последнего контакта. - [ ] Показать версию агента, когда она будет доступна. - [x] Добавить копирование технических идентификаторов. ## Этап 5. Экспертный режим - [x] Перенести raw inventory. - [x] Перенести произвольные команды. - [x] Перенести raw UCI show/set/commit/revert. - [x] Перенести низкоуровневое управление пакетами. - [x] Перенести полную историю команд. - [x] Сократить основные фильтры истории до «Все», «Выполняются», «Ошибка». - [x] Перенести дополнительные фильтры в меню. - [x] Перенести аудит. - [x] Добавить предупреждение перед опасными действиями. - [ ] Подготовить экспертный режим к разграничению прав. ## Убираем и объединяем - [x] Убрать локальные Reload / Refresh из отдельных панелей. - [x] Добавить автообновление данных. - [x] Оставить одну глобальную кнопку обновления на экране объектов. - [x] Убрать постоянный выбор массовой команды. - [~] Показывать массовые действия только при выбранных объектах. - [x] Объединить дублирующие блоки состояния и метрик. - [x] Объединить диагностические действия. - [x] Объединить Preview и Stage. - [x] Спрятать технические поля удаленного доступа. - [~] Спрятать raw JSON и raw UCI от оператора. - [x] Убрать опасные действия из основных кнопок. ## Общие состояния и качество - [ ] Добавить skeleton loading. - [~] Добавить единый компонент пустого состояния. - [ ] Добавить единый компонент ошибки. - [ ] Добавить toast-уведомления. - [~] Добавить единые диалоги подтверждения. - [ ] Показывать request ID в раскрываемых деталях ошибки. - [ ] Добавить tooltips для непонятных иконок. - [ ] Проверить навигацию клавиатурой. - [ ] Проверить видимый focus state. - [ ] Проверить контраст текста и статусов. - [ ] Проверить отсутствие наложений элементов. - [ ] Проверить отсутствие обрезанного текста. - [ ] Проверить преднамеренность горизонтального скролла таблиц. - [ ] Проверить интерфейс на desktop, tablet и mobile. - [ ] Сделать браузерные скриншоты ключевых экранов. ## Требования к API - [~] Нормализовать данные клиентов. - [ ] Нормализовать состояние интерфейсов. - [x] Подготовить временные ряды для графиков. - [x] Добавить операторские операции поверх сырых команд. - [ ] Добавить серверную пагинацию списка объектов при необходимости. - [ ] Добавить серверный поиск и сортировку при необходимости. ## Приемка редизайна - [~] За 10 секунд видно, какие объекты требуют внимания. - [~] Причина проблемы понятна без raw JSON. - [x] LuCI открывается максимум за два клика. - [x] Диагностика запускается максимум за три клика. - [~] Обычный оператор не видит raw UCI и произвольные команды. - [x] Опасные действия требуют явного подтверждения. - [ ] Основные сценарии работают на ширине 1366 px. - [ ] Основные сценарии работают на ширине 1920 px. - [ ] Основные сценарии доступны на мобильном экране. - [ ] Ошибки API показываются понятным языком.