74 lines
6 KiB
Markdown
74 lines
6 KiB
Markdown
# Отчёт о реализации: Исправление мобильного и планшетного интерфейса «Коммуникаций»
|
||
|
||
## 1. Общие сведения
|
||
|
||
- **Проект:** krona-front (`https://git.ochenstarik.ru/ochenstarik/krona-front`)
|
||
- **Рабочая ветка:** `codex/design-system-communications-mobile-tablet-correction`
|
||
- **Базовый коммит:** `49f5a34`
|
||
- **UI-библиотека:** krona-library (`@krona/tokens`, `@krona/themes`, `@krona/ui`)
|
||
- **Стандарт дизайна:** `KRONA_DESIGN_SYSTEM_V3.md`
|
||
- **Эталонные макеты:**
|
||
- `Коммуникация.png` (Desktop 1440/1280)
|
||
- `Коммуникация планшет горизонт.png` (Tablet landscape 1024)
|
||
- `Коммуникация планшет вертикальный.png` (Tablet vertical 768)
|
||
- `Коммуникация телефон.png` (Mobile 360/390/430)
|
||
- **Целевой модуль:** `/communications` («Коммуникации»)
|
||
|
||
---
|
||
|
||
## 2. Ключевые архитектурные решения
|
||
|
||
### 2.1. Адаптивность от реальной ширины рабочей области (Container Queries / ResizeObserver)
|
||
Вместо фиксированных медиа-запросов экрана разметка `MessengersView.tsx` управляется через `ResizeObserver` по фактической ширине контейнера:
|
||
1. **Compact (< 600px):** Строгий 1-колоночный drilldown:
|
||
- **Уровень 1 (Список):** Полноэкранный список диалогов с поиском и фильтрами.
|
||
- **Уровень 2 (Чат):** Окно диалога с кнопкой возврата назад и тизером контакта снизу.
|
||
- **Уровень 3 (Контакт):** Полноэкранная карточка контакта со сделками CRM, задачами и AI-сводкой.
|
||
2. **Medium (600–949px):** 2 колонки:
|
||
- Список диалогов (~280–300px) слева.
|
||
- Активный диалог справа (занимает все оставшееся пространство, min 320px).
|
||
- Сплющенная горизонтальная карточка контакта под чатом **полностью устранена**. Карточка контакта открывается через слайд-овер `Drawer` по кнопке профиля в хедере чата.
|
||
3. **Wide (≥ 950px):** 3 колонки:
|
||
- Список диалогов (310–330px).
|
||
- Активный диалог (min 360px).
|
||
- Вертикальная карточка контакта (320–350px).
|
||
|
||
### 2.2. Семантические токены и ликвидация сырых HEX-кодов
|
||
- Использованы переменные дизайн-системы V3: `var(--krona-primary)`, `var(--krona-surface)`, `var(--krona-primary-soft)`, `var(--krona-border)`, `var(--krona-gold)`.
|
||
- Никаких захардкоженных HEX-кодов в прикладной верстке.
|
||
- В `src/index.css` обеспечен импорт `@import '@krona/ui.css';`.
|
||
|
||
### 2.3. Векторные SVG-портреты
|
||
- В `public/avatars/` сгенерированы 11 легковесных SVG-портретов (`ivan.svg`, `olga.svg`, `alexander.svg`, `elena.svg`, `dmitry.svg`, `maria.svg`, `sergey.svg`, `anna.svg`, `maxim.svg`, `irina.svg`, `artem.svg`).
|
||
- В моковых данных `mockData.ts` все контакты привязаны к соответствующим локальным SVG-аватарам.
|
||
- Компонент `<Avatar src={...} alt={...} initials={...} />` корректно отображает векторные портреты.
|
||
|
||
### 2.4. Предотвращение скролла всего окна при новых сообщениях
|
||
- Заменен вызов `scrollIntoView()` на прямое управление контейнером сообщений:
|
||
`messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;`
|
||
- Это исключило нежелательный скролл всего документа (`window.scrollY === 0`).
|
||
|
||
### 2.5. Устранение наложения мобильной нижней навигации
|
||
- В `AppShell.tsx` для маршрута `/communications` на мобильных устройствах добавлен отступ `pb-16`.
|
||
- Инпут чата и тизер контакта больше не перекрываются фиксированным баром `BottomNav` и доступны для взаимодействия.
|
||
|
||
---
|
||
|
||
## 3. Матрица верификации (Fail-Closed Verification)
|
||
|
||
| Проверка | Команда | Результат | Статус |
|
||
|---|---|---|:---:|
|
||
| **Линтер** | `npm run lint` (`oxlint --deny-warnings`) | 0 warnings, 0 errors (238 файлов) | **PASS** |
|
||
| **Компиляция TypeScript** | `npx tsc -b` | Exit code 0 | **PASS** |
|
||
| **Модульные и интеграционные тесты** | `npm test` (`vitest run`) | 490/490 тестов в 27 файлах прошли | **PASS** |
|
||
| **E2E тесты (Playwright)** | `npx playwright test e2e/13-communications-visual-and-responsive.spec.ts` | 32/32 тестов во всех 8 вьюпортах прошли | **PASS** |
|
||
| **Продакшн сборка** | `npm run build` (`vite build`) | Собрано за 4.39s без предупреждений | **PASS** |
|
||
|
||
---
|
||
|
||
## 4. Артефакты
|
||
|
||
- **Скриншоты тем:** 24 файла (3 темы × 8 вьюпортов) в `artifacts/visual-qa/`
|
||
- **Скриншоты состояний:** 7 файлов (`mobile-list.png`, `mobile-chat.png`, `mobile-contact.png`, `tablet-chat.png`, `tablet-contact-drawer.png`, `desktop-without-krona-ai.png`, `desktop-with-krona-ai.png`)
|
||
- **Манифест скриншотов:** `artifacts/visual-qa/manifest.json`
|
||
- **Отчёт Visual QA:** `VISUAL_QA.md` (Статус: `READY FOR INDEPENDENT REVIEW`)
|