ADOLF CONTENT FACTORY — Раздел 8: UI/UX Guidelines

Проект: Генерация SEO-контента для карточек товаров Модуль: Content Factory Версия: 1.0 Дата: Февраль 2026

8.1 Назначение

Данный раздел описывает правила и паттерны пользовательского интерфейса для модуля Content Factory. Эти правила обязательны для соблюдения при любых доработках UI.

8.2 Общие принципы

Принцип	Описание
Минимализм	Только необходимая информация на экране
Консистентность	Единые паттерны во всех модулях ADOLF
Контекстность	Кнопки и действия релевантны текущей задаче
AI-first	Рутина автоматизирована, человек принимает решения
Human-in-the-loop	Критические действия требуют подтверждения

8.3 Библиотека компонентов

8.3.1 shadcn-svelte

Все UI-компоненты должны использовать shadcn-svelte — портированную версию shadcn/ui для Svelte.

Компонент	Использование
`Button`	Все кнопки (навигация, действия, формы)
`Card`	Обёртки контентных блоков
`Table`	Таблицы данных
`Badge`	Статусы, теги, метки маркетплейсов
`Input`	Текстовые поля
`Slider`	Настройки (порог качества)

8.3.2 Стили кнопок

Вариант	Использование	Пример
`default`	Основное действие	«Утвердить», «Да, поехали»
`outline`	Вторичное действие, кнопки в таблице	«Авто», «Ручная», «Перегенерировать»
`ghost`	Отмена, вспомогательные	«Отмена», навигация назад
`destructive`	Удаление, исключение	Hover на кнопке ✕

8.3.3 Svelte 5 / Svelte 4 совместимость

Компонент	Событие	Пример
shadcn `<Button>` (Svelte 5 runes)	`onclick`	`<Button onclick={handler}>`
bits-ui `DropdownMenu.Item`	`onclick`	`<DropdownMenu.Item onclick={handler}>`
Нативные элементы (`<button>`, `<div>`)	`on:click`	`<button on:click={handler}>`

Важно: Никогда не использовать on:click на shadcn/bits-ui компонентах и onclick на нативных элементах.

8.4 Навигация модулей

8.4.1 Правило: навигация под хедером

Разделы модуля размещаются под хедером по центру, а не в статус-баре (хедере). Хедер содержит только: логотип, название модуля, статистику и кнопку настроек.

┌──────────────────────────────────────────────────────┐
│  [logo] Название модуля       Статистика          ⚙  │  ← Header (фиксированный)
├──────────────────────────────────────────────────────┤
│        [ Раздел 1 ]  [ Раздел 2 ]  [ Раздел N ]     │  ← Nav (центрированный)
├──────────────────────────────────────────────────────┤
│                                                      │
│                  Контент раздела                      │
│                                                      │
└──────────────────────────────────────────────────────┘

8.4.2 Стиль вкладок

Активная: variant="default" (заливка)
Неактивная: variant="outline" (контур)
Размер: size="sm"
Текст: text-xs, whitespace-nowrap
Отступы: gap-1.5, px-3 py-2.5

8.4.3 Минимальность

Показывать в навигации только реально работающие разделы. Скрытые или недоработанные разделы НЕ выносить в навигацию — они могут быть доступны программно (через кнопки в контенте).

8.5 Иконки

8.5.1 Библиотека: Lucide

Все иконки — из пакета @lucide/svelte (Lucide icons).

8.5.2 Правила

Правило	Описание
`stroke="currentColor"`	Всегда. Без hardcoded цветов
Размеры	`size-3` (12px) в таблицах, `size-4` (16px) стандарт, `size-7` (28px) крупные
Анимация	`animate-spin` для Loader2 (спиннер загрузки)

8.5.3 Иконки модулей ADOLF

Модуль	Иконка Lucide
Knowledge	`database`
Content Factory	`shirt`
CFO	`chart-candlestick`
Reputation	`thumbs-up`
Logistic	`truck`
Watcher	`hat-glasses`
Marketing	`target`
Scout	`binoculars`
Lex	`scale`
Office	`building-2`
Shop	`shopping-cart`

8.6 Цветовая схема

8.6.1 Content Factory: Amber

Акцентный цвет модуля Content Factory — #F59E0B (amber-500).

Элемент	Класс
Слайдер порога качества	`accent-amber-500`
Бейдж маркетплейса	contextual (без amber)
Кнопки действий в таблице	`border-input` (без цвета, outline)

8.6.2 Общие правила цветов

Нет hardcoded цветов в SVG-иконках — только currentColor
Используйте CSS-переменные shadcn: bg-background, text-foreground, border-input, bg-muted
Тёмная тема поддерживается автоматически через CSS-переменные
Кнопки в таблицах — без цветных фонов, только outline стиль

8.7 Диалоги и модальные окна

8.7.1 Паттерн: ConfirmDialog

Для критических действий (генерация, публикация, удаление) — кастомный диалог подтверждения.

Требования:

Модальное окно вне основного scroll-контейнера (отдельный top-level элемент в Svelte)
Оверлей: bg-black/60 (без backdrop-blur на оверлее)
Карточка: bg-white/95 dark:bg-gray-950/95 backdrop-blur-sm (frosted glass на карточке)
Закрытие: клик по оверлею + кнопка ✕ + кнопка «Отмена»
Z-index: z-[9999]

Почему вне контейнера: Основной <div> страницы имеет overflow-x-hidden overflow-y-auto transition-all, что ломает position: fixed у вложенных элементов.

8.7.2 Паттерн: Toast

Информационные уведомления (успех, ошибка) — через svelte-sonner (toast). Не требуют взаимодействия пользователя.

8.8 Таблицы

8.8.1 Фиксированная высота

Таблица dashboard всегда отображает 8 строк. Если данных меньше — пустые строки заполняются прочерками (—).

8.8.2 Кнопки в таблице

Стиль: нативные <button> с классами, имитирующими shadcn outline
Размер текста: text-xs
Padding: px-2.5 py-1
Иконки: size-3 (12px)
Событие: on:click|stopPropagation (предотвращение клика по строке)

8.8.3 Бейджи маркетплейсов

Маркетплейс	Размер	Стиль
WB	`size-7`	Фиолетовый фон, белый текст
Ozon	`size-7`	Синий фон, белый текст
YM	`size-7`	Жёлтый/красный фон

8.9 Формы

8.9.1 Текстовые поля

Счётчики символов: /60 для названия, общий счёт для описания
Enter-key support: ввод артикула поддерживает нажатие Enter
Взаимоисключающие поля: заполнение одного очищает другое (SKU ↔ URL)

8.9.2 Маркетплейс-селектор

Активные маркетплейсы — полноценные кнопки
«В разработке» — оверлей bg-background/60 backdrop-blur-[1px] с текстом поверх карточки

8.10 Адаптивность

Breakpoint	Поведение
Mobile	Sidebar скрыт, гамбургер-меню, одноколоночная раскладка
Tablet	Sidebar коллапсируется, таблица со скроллом
Desktop	Sidebar виден, двухколоночная раскладка (фото + контент)

PWA

Приложение поддерживает PWA и должно корректно работать в любой ориентации экрана (portrait/landscape).

8.11 Локализация

Все тексты интерфейса — на русском языке.

Элемент	Пример
Кнопки навигации	«Информация», «Ручная обработка»
Кнопки действий	«Авто», «Ручная», «Утвердить», «Перегенерировать»
Диалог подтверждения	«Да, поехали», «Отмена»
Подписи	«Действие нельзя будет отменить.»
Placeholder	«Введите артикул...»
Toast	«Автогенерация завершена: {title}»
Ошибки	«Ошибка: {message}»

8.12 Static-файлы

При добавлении новых SVG, иконок или статических ресурсов:

Файл должен быть в обеих директориях:
- static/ (для dev-сервера)
- backend/open_webui/static/ (для production-сервера)
Production-сервер раздаёт файлы из backend/open_webui/static/

Документ подготовлен: Февраль 2026 Версия: 1.0 Статус: Актуальный

ADOLF CONTENT FACTORY — Раздел 8: UI/UX Guidelines ​

8.1 Назначение ​

8.2 Общие принципы ​

8.3 Библиотека компонентов ​

8.3.1 shadcn-svelte ​

8.3.2 Стили кнопок ​

8.3.3 Svelte 5 / Svelte 4 совместимость ​

8.4 Навигация модулей ​

8.4.1 Правило: навигация под хедером ​

8.4.2 Стиль вкладок ​

8.4.3 Минимальность ​

8.5 Иконки ​

8.5.1 Библиотека: Lucide ​

8.5.2 Правила ​

8.5.3 Иконки модулей ADOLF ​

8.6 Цветовая схема ​

8.6.1 Content Factory: Amber ​

8.6.2 Общие правила цветов ​

8.7 Диалоги и модальные окна ​

8.7.1 Паттерн: ConfirmDialog ​

8.7.2 Паттерн: Toast ​

8.8 Таблицы ​

8.8.1 Фиксированная высота ​

8.8.2 Кнопки в таблице ​

8.8.3 Бейджи маркетплейсов ​

8.9 Формы ​

8.9.1 Текстовые поля ​

8.9.2 Маркетплейс-селектор ​

8.10 Адаптивность ​

PWA ​

8.11 Локализация ​

8.12 Static-файлы ​