92 lines
13 KiB
Markdown
92 lines
13 KiB
Markdown
# 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](artifacts/visual-qa/parchment-light-mobile-360.png) (360×800)
|
||
2. [parchment-light-mobile-390.png](artifacts/visual-qa/parchment-light-mobile-390.png) (390×844)
|
||
3. [parchment-light-mobile-430.png](artifacts/visual-qa/parchment-light-mobile-430.png) (430×932)
|
||
4. [parchment-light-tablet-768.png](artifacts/visual-qa/parchment-light-tablet-768.png) (768×1024)
|
||
5. [parchment-light-tablet-1024.png](artifacts/visual-qa/parchment-light-tablet-1024.png) (1024×768)
|
||
6. [parchment-light-desktop-1280.png](artifacts/visual-qa/parchment-light-desktop-1280.png) (1280×800)
|
||
7. [parchment-light-desktop-1440.png](artifacts/visual-qa/parchment-light-desktop-1440.png) (1440×900)
|
||
8. [parchment-light-desktop-1920.png](artifacts/visual-qa/parchment-light-desktop-1920.png) (1920×1080)
|
||
|
||
### 3.2. Noble Green (Благородный зелёный / фирменная тема V3)
|
||
1. [noble-green-mobile-360.png](artifacts/visual-qa/noble-green-mobile-360.png) (360×800)
|
||
2. [noble-green-mobile-390.png](artifacts/visual-qa/noble-green-mobile-390.png) (390×844)
|
||
3. [noble-green-mobile-430.png](artifacts/visual-qa/noble-green-mobile-430.png) (430×932)
|
||
4. [noble-green-tablet-768.png](artifacts/visual-qa/noble-green-tablet-768.png) (768×1024)
|
||
5. [noble-green-tablet-1024.png](artifacts/visual-qa/noble-green-tablet-1024.png) (1024×768)
|
||
6. [noble-green-desktop-1280.png](artifacts/visual-qa/noble-green-desktop-1280.png) (1280×800)
|
||
7. [noble-green-desktop-1440.png](artifacts/visual-qa/noble-green-desktop-1440.png) (1440×900)
|
||
8. [noble-green-desktop-1920.png](artifacts/visual-qa/noble-green-desktop-1920.png) (1920×1080)
|
||
|
||
### 3.3. Graphite Forest Dark (Тёмная графитово-лесная тема V3)
|
||
1. [graphite-forest-dark-mobile-360.png](artifacts/visual-qa/graphite-forest-dark-mobile-360.png) (360×800)
|
||
2. [graphite-forest-dark-mobile-390.png](artifacts/visual-qa/graphite-forest-dark-mobile-390.png) (390×844)
|
||
3. [graphite-forest-dark-mobile-430.png](artifacts/visual-qa/graphite-forest-dark-mobile-430.png) (430×932)
|
||
4. [graphite-forest-dark-tablet-768.png](artifacts/visual-qa/graphite-forest-dark-tablet-768.png) (768×1024)
|
||
5. [graphite-forest-dark-tablet-1024.png](artifacts/visual-qa/graphite-forest-dark-tablet-1024.png) (1024×768)
|
||
6. [graphite-forest-dark-desktop-1280.png](artifacts/visual-qa/graphite-forest-dark-desktop-1280.png) (1280×800)
|
||
7. [graphite-forest-dark-desktop-1440.png](artifacts/visual-qa/graphite-forest-dark-desktop-1440.png) (1440×900)
|
||
8. [graphite-forest-dark-desktop-1920.png](artifacts/visual-qa/graphite-forest-dark-desktop-1920.png) (1920×1080)
|
||
|
||
---
|
||
|
||
## 4. Скриншоты состояний (State Captures — 7 скриншотов)
|
||
|
||
1. **Мобильный уровень 1 (Список диалогов):** [mobile-list.png](artifacts/visual-qa/mobile-list.png) — отображает только список чатов, строку поиска, быстрые фильтры и пилюли каналов.
|
||
2. **Мобильный уровень 2 (Активный диалог):** [mobile-chat.png](artifacts/visual-qa/mobile-chat.png) — окно переписки с кнопкой возврата назад, сообщениями, полем ввода и нижней плашкой-тизером контакта.
|
||
3. **Мобильный уровень 3 (Карточка контакта):** [mobile-contact.png](artifacts/visual-qa/mobile-contact.png) — развернутая карточка контакта со сделками CRM, задачами, AI-анализом и кнопкой «Назад к диалогу».
|
||
4. **Планшет (Активный диалог):** [tablet-chat.png](artifacts/visual-qa/tablet-chat.png) — 2-колоночный вид: список чатов + полноразмерный диалог.
|
||
5. **Планшет (Боковой Drawer контакта):** [tablet-contact-drawer.png](artifacts/visual-qa/tablet-contact-drawer.png) — открытый слайд-овер `Drawer` с профилем клиента поверх чата.
|
||
6. **Десктоп (3 колонки):** [desktop-without-krona-ai.png](artifacts/visual-qa/desktop-without-krona-ai.png) — 3 полноценные карточки без боковой панели AI.
|
||
7. **Десктоп с открытым Krona AI:** [desktop-with-krona-ai.png](artifacts/visual-qa/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. |
|