92 lines
10 KiB
Markdown
92 lines
10 KiB
Markdown
# Отчёт о реализации: Перевод Krona Front на дизайн-систему v3.0 и модуль «Коммуникации» (Correction Pass)
|
||
|
||
## 1. Общие сведения
|
||
|
||
- **Проект:** krona-front
|
||
- **Рабочая ветка:** codex/design-system-communications-correction
|
||
- **UI-библиотека:** krona-library (@krona/tokens, @krona/themes, @krona/ui)
|
||
- **Стандарт дизайна:** KRONA_DESIGN_SYSTEM_V3.md (версия 3.0: «Благородный зелёный», «Светлый пергамент», «Графитовый тёмный лес»)
|
||
- **Эталонные макеты:**
|
||
- Коммуникация.png (Desktop 1440/1280)
|
||
- Коммуникация планшет горизонт.png (Tablet landscape 1024)
|
||
- Коммуникация планшет вертикальный.png (Tablet vertical 768)
|
||
- Коммуникация телефон.png (Mobile 360/390/430)
|
||
- **Целевой модуль:** /communications («Коммуникации»)
|
||
|
||
---
|
||
|
||
## 2. Архитектура интеграции с дизайн-системой v3.0
|
||
|
||
### 2.1. Единый источник истины и семантические токены
|
||
Все дизайн-токены, темы оформления и компоненты подключаются напрямую из публичных скомпилированных пакетов библиотеки krona-library:
|
||
- @krona/tokens и @krona/tokens.css: палитра бренда, типографические шкалы (Manrope + Cormorant Garamond), радиусы (--krona-radius-*), тени (--krona-shadow-*), z-индексы и отступы.
|
||
- @krona/themes и @krona/themes.css: системные темы оформления v3:
|
||
1. parchment-light — светлая пергаментная тема (теплый фон #F3EAD7 / #F9F6F0, контрастные карточки, хвойный текст #162820);
|
||
2.
|
||
oble-green — фирменная лесная тема (глубокий хвойный #1E3A2F, мягкий фон, акцент шалфея);
|
||
3. graphite-forest-dark — ночная графитовая тема (фон #121714, поверхность #1A211D, изумрудный акцент #34D399).
|
||
- @krona/ui (dist/index.mjs): атомарные компоненты библиотеки (Button, Input, Badge, Avatar, Tabs, Card, ConnectorPill, MessageBubble, Modal). Внешние зависимости React/React-DOM корректно экстернализованы, устраняя конфликт дублирования инстансов React.
|
||
|
||
### 2.2. Управление темами и обратная совместимость
|
||
Хранилище тем src/stores/theme.ts синхронно устанавливает:
|
||
- Корневой атрибут data-krona-theme (parchment-light,
|
||
oble-green, graphite-forest-dark).
|
||
- Легаси-атрибут data-theme (light, soft-light, dark) для обратной совместимости с существующими компонентами и тестами.
|
||
- Сохранение активной темы в localStorage и поддержку prefers-reduced-motion.
|
||
|
||
---
|
||
|
||
## 3. Точная реализация макетов модуля «Коммуникации»
|
||
|
||
### 3.1. Десктоп (>= 1280px) — по макету Коммуникация.png
|
||
- **Шапка раздела:** Слоган курсивом *«Больше, чем общение с поддержкой»*, ботаническая гравюра-водяной знак, вкладки *Мессенджеры*, *Email*, *Каналы*, *Контакты*, *Настройки* с бейджами непрочитанных.
|
||
- **Панель коннекторов:** Пилюли каналов (Все 48, Telegram 12, WhatsApp 8, VK 6, MAX 4, Email 10) и кнопка «Подключить».
|
||
- **3 приподнятые скругленные карточки (
|
||
ounded-2xl):**
|
||
1. **Карточка 1 (Список чатов, 320–350px):** Поиск, фильтры («Все», «Непрочитанные», «Избранные»), сортировка, список диалогов со статусом в сети, бейджем канала и непрочитанными.
|
||
2. **Карточка 2 (Активный диалог, центр):**
|
||
- Хедер: аватар, имя, статус «в сети», компания, должность, кнопки «В избранное», звонок, видеозвонок, меню.
|
||
- Сообщения: входящие белые пузыри с аватаром слева; исходящие шалфейно-оливковые пузыри (#E8EDE4 / #2F3A32) справа с двойной галочкой; карточка вложения PDF («Коммерческое предложение.pdf») с кнопкой «Скачать».
|
||
- Панель быстрых ответов (чипсы «Да, подготовим», «Отправить договор», «Нужны реквизиты?», «Назначить встречу» и др.).
|
||
- Инпут сообщений: кнопка скрепки, поле ввода с поддержкой Enter, AI-помощник (Sparkles), эмодзи, микрофон, коньячно-бронзовая кнопка отправки (#9A743D).
|
||
3. **Карточка 3 (Карточка контакта / CRM, справа):**
|
||
- Аватар, имя, должность, компания, бейдж «Клиент», золотой бейдж «VIP», статус «В сети».
|
||
- Подключенные каналы (Telegram, WhatsApp, Email) с кнопкой «+ Канал».
|
||
- Вкладки: «Инфо», «✦ AI-сводка», «Связи (5)».
|
||
- Поля: телефон, email, ответственный менеджер, часовой пояс, заметки.
|
||
- Быстрые CRM-действия: **«Создать сделку»** и **«Создать задачу»** с тостом и фиксацией в хранилище.
|
||
|
||
### 3.2. Планшет (768px – 1279px) — по макетам Коммуникация планшет вертикальный.png и Коммуникация планшет горизонт.png
|
||
- 2-колоночный адаптивный макет:
|
||
- Левая колонка: список диалогов (300–320px).
|
||
- Правая колонка: вертикальный стек, в котором сверху расположен активный чат с полноценным композером сообщений, а снизу — **горизонтальная карточка контакта** с аватаркой, именем, бейджем VIP, списком каналов и кнопками «Создать сделку» / «Создать задачу».
|
||
|
||
### 3.3. Мобильные устройства (< 768px) — по макету Коммуникация телефон.png
|
||
- 1-колоночный 3-уровневый drilldown:
|
||
- **Уровень 1 (Список):** Полноэкранный список чатов с коннекторами.
|
||
- **Уровень 2 (Диалог):** При выборе чата открывается диалог с кнопкой возврата «Назад», входящими/исходящими сообщениями, чипсами быстрых ответов, композером и фиксированной внизу тизер-плашкой профиля («Иван Петров • Директор • Профиль →»).
|
||
- **Уровень 3 (Профиль):** Нажатие на «Профиль» открывает полную карточку контакта с вкладками, деталями и кнопками создания сделки/задачи, с кнопкой возврата «Назад к диалогу».
|
||
- Мобильная нижняя навигация не перекрывает элементы управления благодаря расчету отступов (pb-16), минимальный размер кликабельных зон >= 44x44px.
|
||
|
||
---
|
||
|
||
## 4. Результаты верификации качества
|
||
|
||
| Проверка | Инструмент | Результат | Комментарий |
|
||
|---|---|---|---|
|
||
| **Линтер** | oxlint --deny-warnings | **0 warnings, 0 errors** (238 файлов) | Строгий режим без подавлений |
|
||
| **Типизация** | sc -b | **0 errors** (exit code 0) | Строгая проверка TypeScript проектных ссылок |
|
||
| **Unit-тесты** | itest run | **27 test files, 490 passed** (exit code 0) | Включая 11/11 тестов модуля Communications и дизайн-системы V3 |
|
||
| **Production Build** |
|
||
pm run build | **Успешно** (exit code 0) | Оптимизированные бандлы, чанки CSS и JS скомпилированы без ошибок |
|
||
| **Playwright Suite 13** | playwright test e2e/13-* | **32/32 passed (1.5m)** (exit code 0) | 8 вьюпортов x 4 сценария, включая интерактивный обмен сообщениями и навигацию |
|
||
| **Visual QA Capture** | Playwright artifacts | **24 скриншота + manifest.json** | Зафиксированы все 8 вьюпортов во всех 3 темах оформления V3 |
|
||
|
||
---
|
||
|
||
## 5. Документация и артефакты
|
||
|
||
- VISUAL_QA.md: полный протокол визуального аудита и матрица скриншотов.
|
||
- rtifacts/visual-qa/: скриншоты всех экранов и manifest.json.
|
||
- UI_LIBRARY_USAGE.md: актуализированное руководство по использованию библиотеки @krona/ui и дизайн-токенов V3.
|
||
- COMMUNICATIONS_HANDOFF.md: спецификация передачи модуля в эксплуатацию.
|