Объединены файлы правил системы в единую базу знаний v3.0 с устранением противоречий и дублирования. Создан rules-unified.md на основе rules.md, rules1.md и rules2.md с добавлением всех уникальных разделов. Обновлена терминология системы с соответствием реальной схеме БД (ТОВАР→PRODUCT, РАСХОДНИКИ→CONSUMABLE). Архивированы старые файлы правил в папку archive. Обновлены ссылки в CLAUDE.md и development-checklist.md на новый единый источник истины.
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
@ -495,9 +495,111 @@ text-white/50 /* Приглушенный текст */
|
||||
|
||||
---
|
||||
|
||||
## 📋 **11. ЧЕКЛИСТ ПРИМЕНЕНИЯ**
|
||||
## 📐 **11. ПРАВИЛО ВЫРАВНИВАНИЯ БЛОКОВ С САЙДБАРОМ**
|
||||
|
||||
### 10.1 Перед внедрением компонента
|
||||
### 11.1 Принцип выравнивания
|
||||
|
||||
**🎯 ОСНОВНОЙ ПРИНЦИП:**
|
||||
|
||||
> Все блоки контента справа от сайдбара должны быть выровнены точно по верхнему и нижнему краю сайдбара без отступов.
|
||||
|
||||
**📐 ВИЗУАЛЬНАЯ СХЕМА:**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ SIDEBAR │ ← блоки начинаются │ ← ТОП САЙДБАРА
|
||||
│ │ точно здесь │
|
||||
│ │ │
|
||||
│ │ [КОНТЕНТ БЛОКИ] │
|
||||
│ │ │
|
||||
│ │ ← блоки заканчиваются │ ← НИЗ САЙДБАРА
|
||||
│ │ точно здесь │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 11.2 Техническая реализация
|
||||
|
||||
**✅ ПРАВИЛЬНО:**
|
||||
|
||||
```jsx
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300`}>
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Блоки занимают всю доступную область */}
|
||||
<div className="flex-1 flex gap-2 min-h-0">
|
||||
{/* Блоки без внешних отступов */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
```
|
||||
|
||||
**❌ НЕПРАВИЛЬНО:**
|
||||
|
||||
```jsx
|
||||
// НЕ ИСПОЛЬЗОВАТЬ px-2 py-2 в main контейнере!
|
||||
<main className={`flex-1 ${getSidebarMargin()} px-2 py-2 overflow-hidden`}>
|
||||
```
|
||||
|
||||
### 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 Перед внедрением компонента
|
||||
|
||||
- [ ] Соответствует цветовой палитре системы
|
||||
- [ ] Использует правильную типографику
|
||||
@ -506,20 +608,22 @@ text-white/50 /* Приглушенный текст */
|
||||
- [ ] Соответствует требованиям доступности
|
||||
- [ ] Использует стандартные анимации
|
||||
- [ ] Оптимизирован для производительности
|
||||
- [ ] **Блоки выровнены с сайдбаром (правило 11)**
|
||||
|
||||
### 10.2 При создании новых компонентов
|
||||
### 12.2 При создании новых компонентов
|
||||
|
||||
- [ ] Базируется на существующих паттернах
|
||||
- [ ] Совместим с UI Kit системы
|
||||
- [ ] Документирован в Storybook/UI Kit демо
|
||||
- [ ] Протестирован на различных устройствах
|
||||
- [ ] Соответствует принципам дизайн-системы
|
||||
- [ ] **Применяет правило выравнивания с сайдбаром**
|
||||
|
||||
---
|
||||
|
||||
## 🎨 **11. ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ**
|
||||
## 🎨 **13. ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ**
|
||||
|
||||
### 11.1 Базовая карточка
|
||||
### 13.1 Базовая карточка
|
||||
|
||||
```tsx
|
||||
<Card className="glass-card border-white/10 hover:border-white/20 transition-all">
|
||||
@ -533,7 +637,7 @@ text-white/50 /* Приглушенный текст */
|
||||
</Card>
|
||||
```
|
||||
|
||||
### 11.2 Интерактивная кнопка
|
||||
### 13.2 Интерактивная кнопка
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
@ -546,7 +650,7 @@ text-white/50 /* Приглушенный текст */
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 11.3 Форма с валидацией
|
||||
### 13.3 Форма с валидацией
|
||||
|
||||
```tsx
|
||||
<div className="space-y-2">
|
||||
@ -559,6 +663,43 @@ text-white/50 /* Приглушенный текст */
|
||||
</div>
|
||||
```
|
||||
|
||||
### 13.4 Правильное выравнивание с сайдбаром
|
||||
|
||||
```tsx
|
||||
// ✅ ПРАВИЛЬНАЯ структура страницы с сайдбаром
|
||||
function PageWithSidebar() {
|
||||
const { getSidebarMargin } = useSidebar();
|
||||
|
||||
return (
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300`}>
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Структура из 3 блоков согласно rules1.md */}
|
||||
<div className="flex-1 flex gap-2 min-h-0">
|
||||
{/* Левые блоки */}
|
||||
<div className="flex-1 flex flex-col gap-2 min-h-0">
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl">
|
||||
{/* Блок 1: Основной контент */}
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex-1">
|
||||
{/* Блок 2: Дополнительный контент */}
|
||||
</div>
|
||||
</div>
|
||||
{/* Правый блок */}
|
||||
<div className="w-96 flex-shrink-0">
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl h-full">
|
||||
{/* Блок 3: Боковая панель */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**📊 СТАТУС**: Действующие правила v1.0
|
||||
|
||||
Reference in New Issue
Block a user