docs: обновление правил UI Kit и блока поставщиков + новые glass компоненты

- Добавлены правила анализа UI Kit компонентов (interaction-integrity-rules.md)
- Обновлены правила блока 1: убран заголовок, добавлена кнопка навигации (rules-complete.md)
- Детальная спецификация плавающей кнопки "Назад" (seller-ui-rules.md)
- Новые компоненты: GlassDatePicker и GlassSelect для UI Kit
- Улучшены hover/focus эффекты в DatePicker

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
2025-08-12 18:08:24 +03:00
parent c586ddc868
commit c5cd75cdb9
6 changed files with 323 additions and 8 deletions

View File

@ -17,7 +17,7 @@
**СЕЛЛЕР (`SELLER`)** имеет доступ к следующим разделам:
- **Мои поставки** (`/my-supplies`) - управление поставками
- **Маркет** (`/market`) - просмотр глобального каталога
- **Маркет** (`/market`) - просмотр глобального каталога
- **Партнеры** (`/partners`) - управление контрагентами
- **Мессенджер** (`/messenger`) - связь с партнерами
- **Настройки** (`/settings`) - профиль и настройки
@ -56,11 +56,48 @@ switch (user?.organization?.type) {
### 2.2 Детальные правила горизонтального скролла поставщиков
**СТРУКТУРА И ОТОБРАЖЕНИЕ:**
**КНОПКА НАВИГАЦИИ "НАЗАД":**
**Архитектура размещения:**
- **Расположение**: Между сайдбаром и основным контентом
- **Контейнер**: Отдельный `<div className="relative">`
- **НЕ является частью блока 1** - независимый навигационный элемент
- **Позиционирование**: `absolute left-0 top-6`
- **z-index**: 10 (поверх контента)
**Визуальный дизайн:**
```tsx
className =
'absolute left-0 top-6 z-10 w-8 h-8 bg-white/10 backdrop-blur-xl border border-white/20 hover:border-white/40 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/20 group'
```
**Параметры кнопки:**
- **Размер**: 32×32px (`w-8 h-8`)
- **Форма**: Круглая (`rounded-full`)
- **Фон**: `bg-white/10` с эффектом размытия `backdrop-blur-xl`
- **Граница**: `border border-white/20`, при hover `border-white/40`
- **Иконка**: `ArrowLeft` 16×16px (`h-4 w-4`), цвет `text-white/70`
- **Hover эффекты**:
- Масштабирование `scale-110`
- Изменение фона `bg-white/20`
- Иконка становится белой и увеличивается до `h-5 w-5`
- **Анимация**: `transition-all duration-300`
**Функциональность:**
- **onClick**: Переход на `/supplies?tab=goods&subTab=suppliers`
- **aria-label**: "Вернуться к поставщикам"
- **Семантика**: Кнопка возврата к списку поставок
**СТРУКТУРА И ОТОБРАЖЕНИЕ БЛОКА 1:**
- **БЕЗ ЗАГОЛОВКА** - блок начинается сразу с поиска и контента
- **Источник данных**: Партнеры типа `WHOLESALE` из раздела "Партнеры"
- **Контейнер**: Фиксированная высота 176px (h-44) с горизонтальным скроллом
- **Блок поставщиков**: Общая высота 180px, включает заголовок + контейнер скролла
- **Блок поставщиков**: Общая высота 180px
- **Направление**: Слева направо (LTR)
- **Поведение**: Плавный скролл с автоскрытием полосы прокрутки
@ -382,6 +419,8 @@ height: calc(100vh - headerHeight - tabsHeight - statsHeight - margins);
**БЛОК 1: ПОСТАВЩИКИ** _(обязательный, 180px)_:
- БЕЗ заголовка - сразу функциональный контент
- Кнопка навигации "Назад" - между сайдбаром и блоком (см. раздел 2.2)
- Карточки поставщиков из раздела "Партнеры"
- Горизонтальный скролл при превышении ширины
- Выбор только одного поставщика одновременно
@ -448,6 +487,7 @@ height: calc(100vh - headerHeight - tabsHeight - statsHeight - margins);
### 3.1 React компоненты селлера
**Основные компоненты:**
- `SellerHomePage` - главная страница селлера (4 типо-зависимых компонента)
- `SellerEconomicsPage` - экономическая аналитика селлера
@ -497,4 +537,4 @@ query GetSellerCards {
**Связанные файлы**:
- [rules-complete.md](./rules-complete.md) - Общие бизнес-правила
- [visual-design-rules.md](./visual-design-rules.md) - Визуальные правила
- [visual-design-rules.md](./visual-design-rules.md) - Визуальные правила