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:
@ -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) - Визуальные правила
|
||||
|
Reference in New Issue
Block a user