64 lines
6.2 KiB
Markdown
64 lines
6.2 KiB
Markdown
# 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\).
|