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

6.2 KiB
Raw Permalink Blame History

KRONA Visual QA Audit Report — Design System V3 Correction Pass

Модуль: Коммуникации (/communications)
Дата проведения аудита: 11 сентября 2026 г.
Ветка: \codex/design-system-communications-correction\
Статус проверки: APPROVED (FAIL-CLOSED VERIFIED)

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

Эталонный макет Разрешение / Viewport Ключевые визуальные элементы Статус
\Коммуникация.png\ Desktop (1280, 1440, 1920) 3 приподнятые карточки со скруглением ounded-2xl\ на теплом пергаменте; ботанический водяной знак-гравюра и слоган «Больше, чем общение с поддержкой»; входящие белые пузыри с аватаркой; исходящие оливково-шалфейные (#E8EDE4\ / #2F3A32) пузыри с двойной галочкой; карточка PDF-вложения; чипсы быстрых ответов; бронзово-коньячная кнопка отправки (#9A743D); вертикальная карточка контакта (колонка 3) со сводкой AI, статусом VIP и быстрыми кнопками CRM PASS
\Коммуникация планшет горизонт.png\ Tablet Landscape (1024x768) 2-колоночный адаптивный макет: левая колонка со списком диалогов, правая — активный чат сверху и горизонтальная карточка контакта снизу с бейджем VIP, каналами связи и CRM-действиями PASS
\Коммуникация планшет вертикальный.png\ Tablet Vertical (768x1024) 2-колоночный вертикальный стек: список диалогов слева (300–320px), активный диалог + горизонтальная карточка контакта справа без горизонтального скролла PASS
\Коммуникация телефон.png\ Mobile (360, 390, 430) 1-колоночный 3-уровневый drilldown: Уровень 1 (список диалогов) -> Уровень 2 (активный диалог с нижней тизер-плашкой профиля) -> Уровень 3 (полная карточка контакта со сделками/задачами); фиксированный инпут над нижней навигацией (\pb-16\ / touch targets >= 44x44px) PASS

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

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

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

  1. \rtifacts/visual-qa/parchment-light-mobile-360.png\ (360x800)
  2. \rtifacts/visual-qa/parchment-light-mobile-390.png\ (390x844)
  3. \rtifacts/visual-qa/parchment-light-mobile-430.png\ (430x932)
  4. \rtifacts/visual-qa/parchment-light-tablet-768.png\ (768x1024)
  5. \rtifacts/visual-qa/parchment-light-tablet-1024.png\ (1024x768)
  6. \rtifacts/visual-qa/parchment-light-desktop-1280.png\ (1280x800)
  7. \rtifacts/visual-qa/parchment-light-desktop-1440.png\ (1440x900)
  8. \rtifacts/visual-qa/parchment-light-desktop-1920.png\ (1920x1080)

Noble Green (Благородный зеленый / мягкая тема V3)

  1. \rtifacts/visual-qa/noble-green-mobile-360.png\ (360x800)
  2. \rtifacts/visual-qa/noble-green-mobile-390.png\ (390x844)
  3. \rtifacts/visual-qa/noble-green-mobile-430.png\ (430x932)
  4. \rtifacts/visual-qa/noble-green-tablet-768.png\ (768x1024)
  5. \rtifacts/visual-qa/noble-green-tablet-1024.png\ (1024x768)
  6. \rtifacts/visual-qa/noble-green-desktop-1280.png\ (1280x800)
  7. \rtifacts/visual-qa/noble-green-desktop-1440.png\ (1440x900)
  8. \rtifacts/visual-qa/noble-green-desktop-1920.png\ (1920x1080)

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

  1. \rtifacts/visual-qa/graphite-forest-dark-mobile-360.png\ (360x800)
  2. \rtifacts/visual-qa/graphite-forest-dark-mobile-390.png\ (390x844)
  3. \rtifacts/visual-qa/graphite-forest-dark-mobile-430.png\ (430x932)
  4. \rtifacts/visual-qa/graphite-forest-dark-tablet-768.png\ (768x1024)
  5. \rtifacts/visual-qa/graphite-forest-dark-tablet-1024.png\ (1024x768)
  6. \rtifacts/visual-qa/graphite-forest-dark-desktop-1280.png\ (1280x800)
  7. \rtifacts/visual-qa/graphite-forest-dark-desktop-1440.png\ (1440x900)
  8. \rtifacts/visual-qa/graphite-forest-dark-desktop-1920.png\ (1920x1080)

3. Проверенные интерактивные сценарии

  1. Отправка сообщений: ввод текста в инпут, отправка кнопкой или по Enter, появление исходящего пузыря оливкового цвета со статусом прочтения (двойная галочка).
  2. Шаблоны и быстрые ответы: клик по чипсу («Да, подготовим» и др.) мгновенно вставляет и отправляет сообщение.
  3. AI-ассистент: кнопка с иконкой Sparkles генерирует контекстный черновик сообщения.
  4. CRM-интеграция: создание сделки и задачи прямо из активного диалога и карточки контакта с отображением тоста.
  5. Вкладки раздела: переход по табам Мессенджеры, Email, Каналы, Контакты, Настройки без перезагрузки и с синхронизацией URL query parameter ?tab=.
  6. Отсутствие горизонтальной прокрутки: проверено на всех разрешениях от 360px до 1920px (\scrollWidth <= clientWidth).