# ОБЩИЕ ПРАВИЛА ВИЗУАЛЬНОГО ДИЗАЙНА SFERA > 📋 **Базовые принципы дизайна системы управления складами и поставками** --- ## 🎨 **1. ЦВЕТОВАЯ СИСТЕМА** ### 1.1 Основная палитра **PRIMARY COLORS (OKLCH)**: - **Primary**: `oklch(0.65 0.28 315)` - основной фиолетовый - **Primary Foreground**: `oklch(0.985 0 0)` - белый текст - **Secondary**: `oklch(0.94 0.08 315)` - светло-фиолетовый - **Background**: `oklch(0.98 0.02 320)` - светлый фон **GLASS SYSTEM**: - **Base**: `bg-white/10 backdrop-blur border-white/20` - **Cards**: `bg-white/5 backdrop-blur border-white/10` - **Buttons**: `glass-button` / `glass-secondary` ### 1.2 Функциональные цвета **STATUS COLORS**: - 🟢 **Success**: `green-400/500` - завершенные операции - 🔴 **Error**: `red-400/500` - ошибки и критичные состояния - 🟡 **Warning**: `yellow-400/500` - предупреждения - 🔵 **Info**: `blue-400/500` - информационные сообщения - 🟣 **Processing**: `purple-400/500` - процессы в работе **CABINET COLORS**: - **Селлер**: `blue-400` - синий - **Фулфилмент**: `purple-400` - фиолетовый - **Поставщик**: `green-400` - зеленый - **Логистика**: `orange-400` - оранжевый ### 1.3 Иерархическая цветовая схема **УРОВНИ ДЕТАЛИЗАЦИИ (для фулфилмента)**: - 🔵 **Уровень 1 (Магазины)**: уникальные цвета - ТехноМир: `blue-400/500` - Стиль и Комфорт: `pink-400/500` - Зелёный Дом: `emerald-400/500` - 🟢 **Уровень 2 (Товары)**: `green-500` - 🟠 **Уровень 3 (Варианты)**: `orange-500` --- ## 🔤 **2. ТИПОГРАФИКА** ### 2.1 Шрифты **FAMILY**: - **Sans**: `var(--font-geist-sans)` - основной шрифт - **Mono**: `var(--font-geist-mono)` - код и техническая информация ### 2.2 Размеры и веса **HEADINGS**: - **H1**: `text-3xl font-bold text-white` - заголовки страниц - **H2**: `text-2xl font-semibold text-white` - секции - **H3**: `text-xl font-semibold text-white` - подразделы - **H4**: `text-lg font-medium text-white` - карточки **BODY TEXT**: - **Primary**: `text-white` - основной текст - **Secondary**: `text-white/70` - вспомогательный - **Muted**: `text-white/60` - дополнительный - **Disabled**: `text-white/40` - отключенные элементы **CODE & TECHNICAL**: - **Code**: `font-mono text-xs text-white/60` - техническая информация - **Badges**: `text-xs font-medium` - статусы и метки --- ## 🧩 **3. КОМПОНЕНТЫ** ### 3.1 Кнопки **ВАРИАНТЫ**: ```css default: bg-primary hover:bg-primary/90 glass: glass-button (основной стиль) glass-secondary: glass-secondary hover:text-white/90 outline: border hover:bg-accent ghost: hover:bg-accent/50 destructive: bg-destructive hover:bg-destructive/90 ``` **РАЗМЕРЫ**: - **sm**: `h-8 px-3` - компактные формы - **default**: `h-9 px-4` - стандартные - **lg**: `h-10 px-6` - акцентные действия - **icon**: `size-9` - иконочные кнопки **ГРАДИЕНТЫ**: - **Accent**: `bg-gradient-to-r from-purple-600 to-pink-600` - **Success**: `bg-gradient-to-r from-green-500 to-emerald-500` - **Info**: `bg-gradient-to-r from-blue-500 to-cyan-500` ### 3.2 Карточки **БАЗОВЫЕ СТИЛИ**: ```css glass-card: bg-white/5 backdrop-blur border-white/10 hover: border-white/20 transition-all interactive: cursor-pointer group ``` **ИНТЕРАКТИВНОСТЬ**: - **Hover**: `hover:border-white/20 hover:bg-white/10` - **Scale**: `hover:scale-105 transition-transform` - **Shadow**: `hover:shadow-xl hover:shadow-purple-500/20` ### 3.3 Формы **ИНПУТЫ**: ```css glass-input: backdrop-blur border-white/20 placeholder: placeholder:text-white/50 focus: focus-visible:ring-ring/50 invalid: aria-invalid:border-destructive ``` **СОСТОЯНИЯ**: - **Default**: `glass-input text-white` - **Error**: `border-red-500/50 ring-red-500/20` - **Success**: `border-green-500/50 ring-green-500/20` - **Disabled**: `opacity-50 pointer-events-none` --- ## ✨ **4. АНИМАЦИИ И ПЕРЕХОДЫ** ### 4.1 Стандартные переходы **DURATION**: - **Fast**: `duration-200` - hover эффекты - **Normal**: `duration-300` - стандартные переходы - **Slow**: `duration-500` - сложные анимации **EASING**: - **Default**: `transition-all` - универсальный - **Transform**: `transition-transform` - масштабирование - **Colors**: `transition-colors` - смена цветов ### 4.2 Hover эффекты **МАСШТАБИРОВАНИЕ**: ```css hover:scale-105 - легкое увеличение hover:scale-110 - заметное увеличение hover:scale-95 - уменьшение при нажатии hover:-translate-y-1 - поднятие ``` **ЦВЕТОВЫЕ ИЗМЕНЕНИЯ**: ```css hover:bg-white/10 - осветление фона hover:text-white - усиление текста hover:border-white/40 - усиление границ ``` ### 4.3 Системные анимации **LOADING**: - **Spin**: `animate-spin` - индикаторы загрузки - **Pulse**: `animate-pulse` - уведомления - **Bounce**: `animate-bounce` - привлечение внимания - **Ping**: `animate-ping` - статусы онлайн --- ## 📐 **5. СЕТКИ И ОТСТУПЫ** ### 5.1 Spacing система **ВНУТРЕННИЕ ОТСТУПЫ**: - **xs**: `p-2` (8px) - плотные элементы - **sm**: `p-3` (12px) - компактные карточки - **md**: `p-4` (16px) - стандартные карточки - **lg**: `p-6` (24px) - основные секции - **xl**: `p-8` (32px) - страницы **ВНЕШНИЕ ОТСТУПЫ**: - **Между элементами**: `space-y-4` / `gap-4` - **Между секциями**: `space-y-6` / `gap-6` - **Между страницами**: `space-y-8` ### 5.2 Responsive сетки **BREAKPOINTS**: ```css sm: 640px - мобильные md: 768px - планшеты lg: 1024px - десктопы xl: 1280px - широкие экраны ``` **GRID PATTERNS**: ```css grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 flex flex-wrap gap-4 ``` --- ## 🔄 **6. УНИФИКАЦИЯ ИНТЕРФЕЙСОВ** ### 6.1 Раздел "Партнеры" - специальные правила > 📋 **Детальные правила**: См. [partners-rules.md](./partners-rules.md#🎨-uiux-правила-раздела-партнеры) **КРИТИЧЕСКИ ВАЖНО**: Все вкладки раздела "Партнеры" должны иметь единую структуру: #### Обязательные принципы: - **Блоки статистики**: `grid grid-cols-4 gap-3` с отдельными `glass-card` - **ЗАПРЕЩЕНО**: Дополнительные обертки `glass-card` в TabsContent - **Цвета ссылок**: желтая схема (`bg-yellow-500/20`) - **Табличный формат**: вместо карточного grid-layout #### Структура блоков статистики: ```tsx {/* ПРАВИЛЬНО */}
...
{/* ЗАПРЕЩЕНО */}
...
``` --- ## 🎯 **7. СОСТОЯНИЯ И СТАТУСЫ** ### 6.1 Визуальные индикаторы **SUCCESS STATES**: ```css bg-green-500/10 border-green-500/30 text-green-300 CheckCircle - иконка успеха ``` **ERROR STATES**: ```css bg-red-500/10 border-red-500/30 text-red-300 XCircle - иконка ошибки ``` **WARNING STATES**: ```css bg-yellow-500/10 border-yellow-500/30 text-yellow-300 AlertTriangle - иконка предупреждения ``` **INFO STATES**: ```css bg-blue-500/10 border-blue-500/30 text-blue-300 Info - иконка информации ``` ### 6.2 Бейджи и метки **СТАТУСЫ WORKFLOW**: - **Pending**: `bg-yellow-500/20 text-yellow-300` - **Approved**: `bg-green-500/20 text-green-300` - **In Progress**: `bg-blue-500/20 text-blue-300` - **Completed**: `bg-emerald-500/20 text-emerald-300` - **Cancelled**: `bg-red-500/20 text-red-300` --- ## 📱 **7. АДАПТИВНОСТЬ** ### 7.1 Mobile-first подход **ПРИНЦИПЫ**: - Базовые стили для мобильных - Прогрессивное улучшение для больших экранов - Минимальная ширина 320px - Максимальная производительность ### 7.2 Responsive компоненты **SIDEBAR**: ```css Мобильные: overlay sidebar Планшеты: collapsible sidebar Десктоп: full sidebar ``` **CARDS**: ```css Мобильные: 1 колонка Планшеты: 2 колонки Десктоп: 3-4 колонки ``` **FORMS**: ```css Мобильные: stack layout Планшеты: 2-column layout Десктоп: optimized layout ``` --- ## ♿ **8. ДОСТУПНОСТЬ** ### 8.1 Контрастность **МИНИМАЛЬНЫЕ ТРЕБОВАНИЯ**: - Текст на фоне: 4.5:1 - Иконки и элементы: 3:1 - Интерактивные элементы: 4.5:1 **ПРОВЕРКА КОНТРАСТА**: ```css text-white на bg-white/10 ✅ text-white/70 на bg-white/5 ✅ text-white/40 на bg-white/10 ⚠️ ``` ### 8.2 Фокус и навигация **FOCUS STYLES**: ```css focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none ``` **KEYBOARD NAVIGATION**: - Tab order логичен - Все интерактивные элементы доступны - Escape закрывает модалы - Enter активирует кнопки --- ## 🔧 **9. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ** ### 9.1 CSS Architecture **UTILITY-FIRST**: - Tailwind CSS как основа - Custom CSS только для уникальных компонентов - CSS переменные для тем **NAMING CONVENTIONS**: ```css glass-card - основные карточки glass-button - стеклянные кнопки glass-input - поля ввода glass-secondary - вторичные элементы ``` ### 9.2 Performance **ОПТИМИЗАЦИЯ**: - Minimal CSS bundle - Tree-shaking неиспользуемых стилей - Critical CSS inline - Progressive enhancement **LAZY LOADING**: - Изображения: `loading="lazy"` - Компоненты: React.lazy() - Анимации: только при необходимости --- ## 🎯 **10. ПРАВИЛА ИЕРАРХИИ ТАБОВ** ### 10.1 Принцип отдельного блока табов **ОБЯЗАТЕЛЬНЫЕ ПРАВИЛА**: > 1. ТАБЫ ВСЕГДА НАХОДЯТСЯ В ОТДЕЛЬНОМ БЛОКЕ, независимо от количества уровней иерархии > 2. БЛОК ТАБОВ ИМЕЕТ СТИЛИ КАК У САЙДБАРА > 3. ТАБЫ ОТДЕЛЕНЫ ОТ РАБОЧЕГО ПРОСТРАНСТВА **СТИЛИ БЛОКА ТАБОВ**: ```css bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 ``` **СТИЛИ РАБОЧЕГО ПРОСТРАНСТВА**: ```css bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl ``` **ЗАПРЕЩЕНО**: - Размещать табы в блоке с другими модулями - Смешивать табы с основным контентом - Использовать glass-card вместо правильных стилей сайдбара - Объединять блок табов с рабочим пространством ### 10.2 Визуальная иерархия **УРОВЕНЬ 1 (Главные табы)**: ```css h-11 /* Высота 44px */ bg-white/15 /* Контрастный фон */ border-white/30 /* Яркая граница */ rounded-xl /* Крупное скругление */ font-semibold /* Жирный шрифт */ purple-500/40 /* Интенсивный градиент */ shadow-lg /* Глубокая тень */ ``` **УРОВЕНЬ 2 (Подтабы)**: ```css h-9 /* Высота 36px */ bg-white/8 /* Средний фон */ border-white/20 /* Средняя граница */ rounded-lg /* Среднее скругление */ font-medium /* Средний шрифт */ white/15 /* Простая активация */ ml-4 /* Отступ показывает иерархию */ ``` **УРОВЕНЬ 3 (Подподтабы)**: ```css h-8 /* Высота 32px */ bg-white/5 /* Слабый фон */ border-white/15 /* Деликатная граница */ rounded-md /* Мелкое скругление */ font-normal /* Обычный шрифт */ white/10 /* Слабая активация */ ml-8 /* Больший отступ */ text-white/50 /* Приглушенный текст */ ``` ### 10.3 Отступы и spacing **ИЕРАРХИЧЕСКИЕ ОТСТУПЫ**: - **Уровень 1**: `ml-0` - прижат к краю - **Уровень 2**: `ml-4` - показывает подчинение - **Уровень 3**: `ml-8` - максимальная вложенность **ВЕРТИКАЛЬНЫЕ ОТСТУПЫ**: - Между уровнями: `space-y-3` - После TabsList: `mb-3` - В контенте: `space-y-0` (без лишних отступов) ### 10.4 Размеры элементов **ПРОГРЕССИВНОЕ УМЕНЬШЕНИЕ**: - **Высота табов**: 44px → 36px → 32px - **Размер иконок**: 16px → 12px → 10px - **Размер текста**: sm → xs → xs - **Толщина шрифта**: semibold → medium → normal ### 10.5 Цветовая деградация **КОНТРАСТНОСТЬ**: - **Уровень 1**: Максимальная (white/15, border-white/30) - **Уровень 2**: Средняя (white/8, border-white/20) - **Уровень 3**: Минимальная (white/5, border-white/15) **АКТИВАЦИЯ**: - **Уровень 1**: Градиент + тень + border - **Уровень 2**: Простой фон white/15 - **Уровень 3**: Слабый фон white/10 --- ## 📐 **11. ПРАВИЛО ВЫРАВНИВАНИЯ БЛОКОВ С САЙДБАРОМ** ### 11.1 Принцип выравнивания **🎯 ОСНОВНОЙ ПРИНЦИП:** > Все блоки контента справа от сайдбара должны быть выровнены точно по верхнему и нижнему краю сайдбара без отступов. **📐 ВИЗУАЛЬНАЯ СХЕМА:** ``` ┌─────────────────────────────────────┐ │ SIDEBAR │ ← блоки начинаются │ ← ТОП САЙДБАРА │ │ точно здесь │ │ │ │ │ │ [КОНТЕНТ БЛОКИ] │ │ │ │ │ │ ← блоки заканчиваются │ ← НИЗ САЙДБАРА │ │ точно здесь │ └─────────────────────────────────────┘ ``` ### 11.2 Техническая реализация **✅ ПРАВИЛЬНО:** ```jsx
{/* Блоки занимают всю доступную область */}
{/* Блоки без внешних отступов */}
``` **❌ НЕПРАВИЛЬНО:** ```jsx // НЕ ИСПОЛЬЗОВАТЬ px-2 py-2 в main контейнере!
``` ### 11.3 Требования к структуре **MAIN КОНТЕЙНЕР:** - ✅ БЕЗ `px-2 py-2` отступов - ✅ Только `overflow-hidden` и `transition-all duration-300` - ✅ Использовать `${getSidebarMargin()}` для отступа от сайдбара **БЛОКИ КОНТЕНТА:** - ✅ Занимают всю высоту: `h-full flex flex-col` - ✅ Минимальные gap между блоками: `gap-2` - ✅ Начинаются от самого верха экрана - ✅ Заканчиваются у самого низа экрана **SPACING МЕЖДУ БЛОКАМИ:** - ✅ Горизонтальный gap: `gap-2` (8px) - ✅ Вертикальный gap: `gap-2` (8px) - ❌ НЕ использовать внешние отступы `px-* py-*` ### 11.4 Области применения **✅ ПРИМЕНЯЕТСЯ К:** - Все страницы с сайдбаром - Дашборды и кабинеты пользователей - Модальные окна полной высоты - Списки, таблицы и каталоги - Формы создания и редактирования **❌ ИСКЛЮЧЕНИЯ:** - Модальные окна (центрированные) - Всплывающие уведомления (toast) - Dropdown меню - Контекстные меню ### 11.5 Проверка соответствия **КРИТЕРИИ СООТВЕТСТВИЯ:** 1. **Верхний край**: Первый блок начинается на уровне верха сайдбара 2. **Нижний край**: Последний блок заканчивается на уровне низа сайдбара 3. **Без отступов**: Отсутствуют `px-* py-*` отступы в main 4. **Только gap**: Используется только `gap-2` между блоками **ИНСТРУМЕНТЫ ПРОВЕРКИ:** - Инспектор браузера для проверки CSS - Визуальное сравнение с краями сайдбара - Проверка на разных размерах экрана --- ## 📋 **12. ЧЕКЛИСТ ПРИМЕНЕНИЯ** ### 12.1 Перед внедрением компонента - [ ] Соответствует цветовой палитре системы - [ ] Использует правильную типографику - [ ] Имеет корректные состояния (hover, focus, disabled) - [ ] Адаптивен для всех breakpoints - [ ] Соответствует требованиям доступности - [ ] Использует стандартные анимации - [ ] Оптимизирован для производительности - [ ] **Блоки выровнены с сайдбаром (правило 11)** ### 12.2 При создании новых компонентов - [ ] Базируется на существующих паттернах - [ ] Совместим с UI Kit системы - [ ] Документирован в Storybook/UI Kit демо - [ ] Протестирован на различных устройствах - [ ] Соответствует принципам дизайн-системы - [ ] **Применяет правило выравнивания с сайдбаром** --- ## 🎨 **13. ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ** ### 13.1 Базовая карточка ```tsx Заголовок Описание

Содержимое карточки

``` ### 13.2 Интерактивная кнопка ```tsx ``` ### 13.3 Форма с валидацией ```tsx
{error &&

{error}

}
``` ### 13.4 Правильное выравнивание с сайдбаром ```tsx // ✅ ПРАВИЛЬНАЯ структура страницы с сайдбаром function PageWithSidebar() { const { getSidebarMargin } = useSidebar(); return (
{/* Структура из 3 блоков согласно rules1.md */}
{/* Левые блоки */}
{/* Блок 1: Основной контент */}
{/* Блок 2: Дополнительный контент */}
{/* Правый блок */}
{/* Блок 3: Боковая панель */}
); } ``` --- ## 14. 🏢 КАБИНЕТ-СПЕЦИФИЧНЫЕ КОМПОНЕНТЫ > 📌 **СВЯЗАНО С**: [rules-complete.md - Структура кабинетов](#3--структура-кабинетов) ### 14.1 Кабинет фулфилмента #### 14.1.1 Визуальная система 6 модулей склада **ЦВЕТОВОЕ КОДИРОВАНИЕ** (обязательная последовательность): ```css /* 1. ПРОДУКТЫ - готовые к отправке */ .module-products { @apply bg-green-500/20 border-green-400 text-green-100; --icon-color: #10b981; /* emerald-500 */ } /* 2. ТОВАРЫ - базовые товары */ .module-goods { @apply bg-blue-500/20 border-blue-400 text-blue-100; --icon-color: #3b82f6; /* blue-500 */ } /* 3. БРАК - дефектные товары */ .module-defect { @apply bg-red-500/20 border-red-400 text-red-100; --icon-color: #ef4444; /* red-500 */ } /* 4. ВОЗВРАТЫ С ПВЗ - возвращенные товары */ .module-returns { @apply bg-yellow-500/20 border-yellow-400 text-yellow-100; --icon-color: #eab308; /* yellow-500 */ } /* 5. РАСХОДНИКИ СЕЛЛЕРОВ - материалы клиентов */ .module-seller-supplies { @apply bg-purple-500/20 border-purple-400 text-purple-100; --icon-color: #a855f7; /* purple-500 */ } /* 6. РАСХОДНИКИ ФУЛФИЛМЕНТА - операционные материалы (КЛИКАБЕЛЬНЫЙ) */ .module-ff-supplies { @apply bg-orange-500/20 border-orange-400 text-orange-100 cursor-pointer hover:bg-orange-400/30; --icon-color: #f97316; /* orange-500 */ transition: all 0.2s ease-in-out; } ``` #### 14.1.2 3-уровневая иерархия склада **ВИЗУАЛЬНАЯ СТРУКТУРА**: ```tsx // УРОВЕНЬ 1: МАГАЗИНЫ (синий - крупные блоки)
ТехноМир
{/* УРОВЕНЬ 2: ТОВАРЫ (зеленый - средние блоки) */}
Смартфон iPhone 15
{/* УРОВЕНЬ 3: ВАРИАНТЫ (оранжевый - мелкие блоки) */}
128GB Space Black
``` ### 14.2 Статусы поставок - расширенная цветовая система **8 СТАТУСОВ WORKFLOW** (согласно rules-complete.md): ```css /* 1. PENDING - ожидает подтверждения */ .status-pending { @apply bg-gray-500/20 border-gray-400 text-gray-100; --dot-color: #6b7280; } /* 2. SUPPLIER_APPROVED - подтверждено поставщиком */ .status-supplier-approved { @apply bg-blue-500/20 border-blue-400 text-blue-100; --dot-color: #3b82f6; } /* 3. CONFIRMED - подтверждено системой */ .status-confirmed { @apply bg-cyan-500/20 border-cyan-400 text-cyan-100; --dot-color: #06b6d4; } /* 4. LOGISTICS_CONFIRMED - подтверждено логистикой */ .status-logistics-confirmed { @apply bg-indigo-500/20 border-indigo-400 text-indigo-100; --dot-color: #6366f1; } /* 5. SHIPPED - отправлено */ .status-shipped { @apply bg-purple-500/20 border-purple-400 text-purple-100; --dot-color: #a855f7; } /* 6. IN_TRANSIT - в пути */ .status-in-transit { @apply bg-yellow-500/20 border-yellow-400 text-yellow-100; --dot-color: #eab308; } /* 7. DELIVERED - доставлено */ .status-delivered { @apply bg-green-500/20 border-green-400 text-green-100; --dot-color: #22c55e; } /* 8. COMPLETED - завершено (только для фулфилмента) */ .status-completed { @apply bg-emerald-600/20 border-emerald-500 text-emerald-100; --dot-color: #059669; } ``` ### 14.3 Процесс создания продукта - визуальный workflow **ПОШАГОВЫЙ ИНДИКАТОР** (5 шагов согласно rules-complete.md): ```tsx const productCreationSteps = [ { id: 'recipe', label: 'Рецептура задана', status: 'completed' }, { id: 'arrival', label: 'Поступление на склад', status: 'completed' }, { id: 'planning', label: 'Планирование работы', status: 'active' }, { id: 'processing', label: 'Обработка товара', status: 'pending' }, { id: 'quality', label: 'Контроль качества', status: 'pending' }, { id: 'completion', label: 'Завершение', status: 'pending' } ]; // Визуальный компонент
{productCreationSteps.map((step, index) => (
{step.status === 'completed' ? '✓' : index + 1}
{step.label} {index < productCreationSteps.length - 1 && (
)}
))}
``` ### 14.4 Система партнерства - визуальные индикаторы **ТИПЫ ПАРТНЕРОВ**: ```css /* WHOLESALE - поставщики */ .partner-wholesale { @apply bg-emerald-500/20 border-emerald-400; --icon: "🏭"; /* factory */ } /* SELLER - селлеры */ .partner-seller { @apply bg-blue-500/20 border-blue-400; --icon: "🛍️"; /* shopping */ } /* FULFILLMENT - фулфилмент центры */ .partner-fulfillment { @apply bg-purple-500/20 border-purple-400; --icon: "📦"; /* package */ } /* LOGIST - логистические компании */ .partner-logist { @apply bg-orange-500/20 border-orange-400; --icon: "🚚"; /* truck */ } ``` ### 14.5 Кабинет селлера > 📌 **СВЯЗАНО С**: [rules-complete.md - Кабинет селлера](#9--кабинет-селлера-детальные-правила) #### 14.5.1 Трёхблочная архитектура страницы "Мои поставки" **КРИТИЧЕСКИ ВАЖНО**: Правильное выравнивание с сайдбаром ```tsx // ✅ ПРАВИЛЬНАЯ архитектура (согласно rules-complete.md) export function SuppliesPage() { const { getSidebarMargin } = useSidebar(); return (
{/* БЛОК 1: ТАБЫ - фиксированная высота, glass-эффект */}
{/* БЛОК 2: СТАТИСТИКА - контекстные метрики */}
{/* БЛОК 3: ОСНОВНОЙ КОНТЕНТ - до низа sidebar */}
); } // ❌ НЕПРАВИЛЬНО (текущее состояние)
{/* Нарушает архитектуру! */} ``` #### 14.5.2 Контекстная статистика по табам **Для пути "Фулфилмент → Товар → Карточки/Поставщики":** ```tsx const suppliesStats = [ { label: "Всего поставок", value: "24", color: "text-blue-400" }, { label: "Активных поставок", value: "8", color: "text-green-400" }, { label: "Сумма активных поставок", value: "₽142,350", color: "text-yellow-400" }, { label: "В пути", value: "3", color: "text-purple-400" } ]; ``` **Для пути "Фулфилмент → Расходники селлера":** ```tsx const consumablesStats = [ { label: "Всего поставок", value: "12", color: "text-blue-400" }, { label: "Активных поставок", value: "4", color: "text-green-400" }, { label: "Видов расходников", value: "18", color: "text-orange-400" }, { label: "Критические остатки", value: "2", color: "text-red-400" } ]; ``` **Для путей "Маркетплейсы → Wildberries/Ozon":** ```tsx const marketplaceStats = [ { label: "Поставок на маркетплейс", value: "15", color: "text-blue-400" }, { label: "Товаров отправлено", value: "347", color: "text-green-400" }, { label: "Возвраты за неделю", value: "12", color: "text-yellow-400" }, { label: "Эффективность поставок", value: "94%", color: "text-emerald-400" } ]; ``` #### 14.5.3 Система создания поставок **Выбор типа поставки:** ```tsx const supplyTypes = [ { id: 'goods-cards', title: 'Карточки товаров', description: 'Импорт через WB API с автосозданием поставки', icon: '📱', color: 'bg-blue-500/20 border-blue-400' }, { id: 'goods-suppliers', title: 'Поставщики товаров', description: 'Прямой заказ с указанием рецептуры', icon: '🏭', color: 'bg-emerald-500/20 border-emerald-400' }, { id: 'consumables', title: 'Расходники селлера', description: 'Материалы для производства', icon: '🔧', color: 'bg-purple-500/20 border-purple-400' } ]; ``` #### 14.5.4 Интерфейс рецептуры продукта **3-блочная структура создания рецептуры:** ```tsx // БЛОК 1: БАЗОВЫЙ ТОВАР (слева)

1. Базовый товар

// БЛОК 2: УСЛУГИ ФУЛФИЛМЕНТА (центр)

2. Услуги ФФ

// БЛОК 3: РАСХОДНИКИ (справа)

3. Расходники

``` #### 14.5.5 WB интеграция - визуальные индикаторы **Статусы синхронизации с WB API:** ```css /* Успешная синхронизация */ .wb-sync-success { @apply bg-green-500/20 border-green-400 text-green-100; --status-icon: "✅"; } /* Ошибка синхронизации */ .wb-sync-error { @apply bg-red-500/20 border-red-400 text-red-100; --status-icon: "❌"; } /* В процессе синхронизации */ .wb-sync-loading { @apply bg-yellow-500/20 border-yellow-400 text-yellow-100; --status-icon: "⏳"; animation: pulse 2s infinite; } /* Не настроена */ .wb-sync-none { @apply bg-gray-500/20 border-gray-400 text-gray-100; --status-icon: "⚠️"; } ``` --- **📊 СТАТУС**: Действующие правила v1.2 (добавлен кабинет селлера) **🔄 ОБНОВЛЕНО**: Интеграция с rules-complete.md v6.2 **📅 ДАТА**: 2025, полная синхронизация с техническими требованиями ### 🆕 ДОБАВЛЕНИЯ v1.2: - ✅ Детальные правила для кабинета селлера (раздел 14.5) - ✅ Трёхблочная архитектура страницы "Мои поставки" - ✅ Контекстная статистика по типам поставок - ✅ Визуальные компоненты создания рецептуры - ✅ WB интеграция и статусы синхронизации - ✅ Исправление архитектурного нарушения px-2 py-2