ochenstarik/krona-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
krona-front/VISUAL_QA.md

13 KiB
Raw Permalink Blame History

KRONA Visual QA Audit Report — Mobile & Tablet Correction Pass

Модуль: Коммуникации (/communications)
Дата проведения аудита: 11 сентября 2026 г.
Рабочая ветка: codex/design-system-communications-mobile-tablet-correction
Базовый коммит: 49f5a34
Статус проверки: READY FOR INDEPENDENT REVIEW

1. Матрица устранения дефектов (Defect Resolution Matrix)

# Дефект предыдущей реализации Решение в текущей ветке (codex/design-system-communications-mobile-tablet-correction) Статус проверки
1 Мобильный интерфейс (< 600px): отображение нескольких секций одновременно приводило к сжатию и нехватке места. Реализован строгий 1-колоночный 3-уровневый drilldown: Уровень 1 (Список чатов) → Уровень 2 (Активный чат) → Уровень 3 (Полная карточка контакта). На экране виден ровно один уровень. Переходы осуществляются через клик по диалогу, тизер профиля и кнопки «Назад». PASS
2 Планшет (600–949px): сплющенная горизонтальная карточка контакта под окном чата сжимала переписку и ломала верстку. Горизонтальная карточка под чатом полностью удалена. Реализован 2-колоночный макет: колонка со списком диалогов (~280–300px) + колонка активного чата (все оставшееся пространство, min 320px). Карточка контакта открывается по кнопке в хедере чата через боковой слайд-овер Drawer с полным набором данных и CRM-действиями. PASS
3 Десктоп (≥ 950px): узкие колонки при фиксированных брейкпоинтах окна. Переход на 3 независимые колонки по ширине рабочей области: Список диалогов (310–330px) + Активный чат (min 360px) + Карточка контакта (320–350px). При открытии боковой панели Krona AI карточки пропорционально масштабируются без горизонтальной прокрутки. PASS
4 Аватары: использование плейсхолдеров и инициалов вместо визуальных портретов. Созданы и интегрированы 11 векторных локальных SVG-портретов в public/avatars/*.svg с уникальной цветовой дифференциацией. Отображаются в списках, чате, тизере и карточке контакта. PASS
5 Соблюдение дизайн-системы V3: использование сырых HEX-кодов в стилях. Код полностью переведен на семантические CSS-переменные дизайн-системы V3 (var(--krona-primary), var(--krona-surface), var(--krona-primary-soft), var(--krona-border), var(--krona-gold)). Сырые HEX-значения устранены. PASS
6 Вкладки и кнопки на мобильных устройствах: перенос строк и наплыв кнопок. Вкладки размещены в единую строку с горизонтальным скроллом и градиентным индикатором края. На мобильных кнопка создания контакта/канала сворачивается в компактную touch-friendly иконку 40×40px. PASS
7 Наложение мобильной нижней навигации: инпут чата и тизер профиля перекрывались нижним баром BottomNav. Для страницы /communications на мобильных экранах добавлен нижний отступ pb-16, гарантирующий свободный доступ ко всем интерактивным элементам без блокировки BottomNav. PASS

2. Соответствие эталонным макетам

Эталонный макет Разрешение / Viewport Ключевые визуальные элементы Статус
Коммуникация.png Desktop (1280, 1440, 1920) 3 приподнятые карточки (rounded-2xl) на пергаментном фоне; водяной знак и слоган «Больше, чем общение с поддержкой»; входящие светлые пузыри с аватаром; исходящие пузыри с двойной галочкой; карточка PDF-вложения; чипсы быстрых ответов; бронзово-золотая кнопка отправки; вертикальная карточка контакта справа (колонка 3) с AI-сводкой, статусом VIP и CRM-действиями. PASS
Коммуникация планшет горизонт.png Tablet Landscape (1024x768) 3-колоночный или просторный 2-колоночный макет с полноразмерным чатом без горизонтального сжатия. PASS
Коммуникация планшет вертикальный.png Tablet Vertical (768x1024) 2-колоночный макет: список диалогов слева (~280-300px), активный диалог справа. Карточка контакта открывается через правый Drawer. PASS
Коммуникация телефон.png Mobile (360, 390, 430) 1-колоночный drilldown: Уровень 1 (список диалогов) → Уровень 2 (активный диалог с нижней плашкой контакта) → Уровень 3 (карточка контакта); фиксированный инпут над навигацией (pb-16 / touch targets ≥ 44×44px). PASS

3. Матрица скриншотов (8 Viewports × 3 Themes = 24 Screenshots)

Все скриншоты сохранены в директории artifacts/visual-qa/ с манифестом artifacts/visual-qa/manifest.json:

3.1. Parchment Light (Светлый пергамент — основная тема V3)

  1. parchment-light-mobile-360.png (360×800)
  2. parchment-light-mobile-390.png (390×844)
  3. parchment-light-mobile-430.png (430×932)
  4. parchment-light-tablet-768.png (768×1024)
  5. parchment-light-tablet-1024.png (1024×768)
  6. parchment-light-desktop-1280.png (1280×800)
  7. parchment-light-desktop-1440.png (1440×900)
  8. parchment-light-desktop-1920.png (1920×1080)

3.2. Noble Green (Благородный зелёный / фирменная тема V3)

  1. noble-green-mobile-360.png (360×800)
  2. noble-green-mobile-390.png (390×844)
  3. noble-green-mobile-430.png (430×932)
  4. noble-green-tablet-768.png (768×1024)
  5. noble-green-tablet-1024.png (1024×768)
  6. noble-green-desktop-1280.png (1280×800)
  7. noble-green-desktop-1440.png (1440×900)
  8. noble-green-desktop-1920.png (1920×1080)

3.3. Graphite Forest Dark (Тёмная графитово-лесная тема V3)

  1. graphite-forest-dark-mobile-360.png (360×800)
  2. graphite-forest-dark-mobile-390.png (390×844)
  3. graphite-forest-dark-mobile-430.png (430×932)
  4. graphite-forest-dark-tablet-768.png (768×1024)
  5. graphite-forest-dark-tablet-1024.png (1024×768)
  6. graphite-forest-dark-desktop-1280.png (1280×800)
  7. graphite-forest-dark-desktop-1440.png (1440×900)
  8. graphite-forest-dark-desktop-1920.png (1920×1080)

4. Скриншоты состояний (State Captures — 7 скриншотов)

  1. Мобильный уровень 1 (Список диалогов): mobile-list.png — отображает только список чатов, строку поиска, быстрые фильтры и пилюли каналов.
  2. Мобильный уровень 2 (Активный диалог): mobile-chat.png — окно переписки с кнопкой возврата назад, сообщениями, полем ввода и нижней плашкой-тизером контакта.
  3. Мобильный уровень 3 (Карточка контакта): mobile-contact.png — развернутая карточка контакта со сделками CRM, задачами, AI-анализом и кнопкой «Назад к диалогу».
  4. Планшет (Активный диалог): tablet-chat.png — 2-колоночный вид: список чатов + полноразмерный диалог.
  5. Планшет (Боковой Drawer контакта): tablet-contact-drawer.png — открытый слайд-овер Drawer с профилем клиента поверх чата.
  6. Десктоп (3 колонки): desktop-without-krona-ai.png — 3 полноценные карточки без боковой панели AI.
  7. Десктоп с открытым Krona AI: desktop-with-krona-ai.png — сохранение целостности 3 колонок при выдвинутой панели оркестратора Krona AI.

5. Результаты автоматизированных детерминированных проверок

Тип проверки Команда Результат Подробности
E2E Visual & Responsive npx playwright test e2e/13-communications-visual-and-responsive.spec.ts PASS (32/32) Все 8 проектов (360, 390, 430, 768, 1024, 1280, 1440, 1920) прошли без ошибок (1.7m).
Unit & Integration npm test PASS (490/490) 27 тестовых файлов, включая модуль коммуникаций, без сбоев (45.8s).
Linter npm run lint PASS (0/0) 0 warnings, 0 errors на 238 файлах (oxlint --deny-warnings).
Type Check npx tsc -b PASS Exit code 0, строгая типизация TypeScript.
Production Build npm run build PASS Сборка Vite завершена успешно за 4.39s.