4.3 KiB
Просмотр UI/UX правок
Ветка: codex/ui-ux-guided-tour.
Локальный просмотр с вымышленными данными
Из папки frontend:
npm run build
npm run preview:demo
Откройте http://127.0.0.1:4174. Демо-вход: demo / demo123.
Это отдельный сервер с заявками в памяти; он не подключается к рабочему backend.
Перезапуск сбрасывает демонстрационные изменения. Номера телефонов вымышленные.
Остановить сервер: Ctrl+C. Демо-сервер не входит в production bundle.
Что проверить
- Главная страница: быстрый переход к сегодняшним заявкам, календарь, ближайшие даты.
- Список: соседние дни, поиск, фильтры места загрузки/статуса, сброс фильтров.
- На телефоне дополнительные фильтры раскрываются кнопкой «Фильтры».
- Карточки: адрес и контакты первыми, крупные действия, условия доставки.
- Таблица: товар с загрузкой и клиент с контактами в одной ячейке.
- Изменение статуса сохраняет представление и соседние заявки; блокируется только текущая доставка.
- Перенос заявки сохраняет открытый день: перенесённая заявка исчезает из него, новая дата указана в подтверждении.
- Форма: отдельные группы, прокрутка содержимого, закреплённые действия; ошибки не стирают введённые данные.
- Escape закрывает диалог; с изменёнными данными запрашивается подтверждение. Во время сохранения закрытие и повторная отправка блокируются.
Обучение
Два коротких тура: план доставок (4 шага), список (до 6 шагов). Тур автоматически появляется при первом открытии соответствующего экрана после обновления. Если заявок нет, шаги про конкретную заявку пропускаются. «Пропустить», крестик и Escape завершают показ; «Помощь» повторяет тур текущего экрана.
Результат хранится в localStorage отдельно для каждого пользователя, версии тура и экрана. На другом устройстве подсказки появятся снова. При недоступном хранилище тур остаётся работоспособным, но после перезагрузки может появиться повторно.
Для следующего изменения рабочего процесса увеличьте TOUR_VERSION
в src/components/ui/GuidedTour.tsx и обновите соответствующие шаги.
Версия приложения сама по себе не запускает обучение заново.
Проверки
npm run lint
npm test
npm run build
Регрессионные тесты проверяют перенос даты, проброс ошибки сохранения, независимость обновления счётчиков от сохранения, локальное состояние смены статуса и гонку запросов разных дат.
Для проверки ошибки в демо перед следующим сохранением:
curl -X POST http://127.0.0.1:4174/__demo__/fail-next
Первое сохранение завершится ошибкой, повторное с теми же данными — успешно. Этот служебный адрес существует только в демо-сервере.