Новый запуск кампании — целостный концепт

1Что такое концепт B

Builder-flow split-layout — финальный концепт для страницы `/Новый запуск` в дашборде 7leads. Цель: байер собирает запуск кампании через одну страницу с двумя зонами — слева широкий рабочий блок со всеми настройками + пирамидальная визуализация структуры, справа узкая sticky-панель с рекламными материалами (пул креативов + тексты).

Концепт интегрирован в реальный staging dashboard chrome (sidebar 7leads с навигацией ВЕРТИКАЛЬ / ГЛАВНОЕ / СЦЕНАРИИ / УПРАВЛЕНИЕ + topbar с поиском, Health pill, last-updated и notifications + Quickbar floating bottom с 4 actions). При смене вертикали или возврате на страницу — модальное окно черновиков.

2Архитектура страницы

Зоны

Порядок секций (после v9 reorder)

1. Кабинеты — наверху, с balance/spent/sync info по каждому кабинету
2. Структура и распределение — пирамидальная диаграмма + counters + bigcards распределения
3. Цель Meta (поднята выше Денег) — bigcards: Лиды / Трафик / Конверсии / Узнаваемость
4. Деньги и ставка — Бюджет / Cost cap / CBO-ABO / 4 стратегии ставки / Окно атрибуции
5. Аудитория + События жизни (объединены) — Пол / Возраст +/− counter / Языки / DOB-tags
6. География compact — Search input + selected tags с bid-modifier badges + suggestions
7. Расписание — в самом низу, full-width seg (Сейчас/По дате · Круглосуточно/По графику)

3Что реализовано

Pyramidal diagram (главная фича)

Деревообразная визуализация структуры с горизонтальными уровнями. Корень — «ШАБЛОН × N каб» (gradient purple→pink). Дети — кампании (purple-tinted). Внуки — адсеты. Правнуки — ad-dots (мини-квадратики креативов внутри `cB4-pyr-ads-block`).

CSS-only connectors через `:before/:after` pseudo-elements — никаких SVG. Каждый уровень — `

• ` с borders на pseudo-элементах формирует линии-ветви.

  Smart condensed rendering:

  Уровень	Порог	Когда меньше	Когда больше
  Кампании	6	Каждая своим узлом «К 1», «К 2»	«N кампаний» одним dashed-узлом
  Адсеты	4	Каждый своим «A 1», «A 2»	«N адсетов» внутри cmp
  Объявления	6	Отрисованные ad-dots	«N объявл.» текстом

  Settings — унифицированные карточки

  Все секции (Кабинеты, Деньги, Цель, Аудитория, География, Расписание) — в одинаковых `

  ` карточках с background `--bg-elevated`, padding 20-24px, header с icon + name + meta + border-bottom.

  Bigcards с описаниями

  Распределение бюджета (CBO/ABO), Стратегия ставки (Cost cap / Bid cap / Target / Lowest), Цель Meta (Лиды / Трафик / Конверсии / Узнаваемость), Распределение креативов (Свой каждому / Один набор / По кругу / Ручной) — все идут как большие карточки с title + 1-2 строчным описанием вместо тонких pill'ов.

  Кабинеты — детальная карточка

  Каждый кабинет = row с:

  • Имя BM223-A05 + pill «Рабочий» (зелёный) или «Сломан» / «Есть проблемы» / etc.
  • act_id · валюта
  • Баланс ($1 850)
  • Сегодня спущено / лимит ($32 / $50)
  • Last sync (4 мин назад)
  • Право: лимит $/день
  • × remove

  Аудитория + События жизни в одной карточке

  Объединённая секция. Pol/Возраст в первой row (`grid-template-columns: auto 1fr` чтобы пол был узким, возраст с +/− counter — шире). Под ними — Языки/интересы tags. Под ними — DOB events tags (selected + suggestions).

  Возраст с +/− counter

  `[−] [25] [+] — [−] [55] [+] лет` — кнопки сами увеличивают/уменьшают (clamp 13-65). Прямой ввод тоже работает.

  География compact

  Search input «Регион или город — Алматы, Караганда, Шымкент…» + selected tags (Казахстан country-pill, Алматы [+20%], Астана [+15%] с bid-modifier badges) + suggestion chips («+ Шымкент / + Караганда / + Актобе / + ещё 9»).

4Эволюция v4 → v10

5Интерактив и real-time

Counter Кампаний / Адсетов / Объявлений → live pyramid

JS `setupCB4Pyramid()` слушает все `[data-cb4-counter]` кнопки. На каждый клик:

1. Update state {cmp, ads, ad}
2. Recalculate totalAds = cabs.length × cmp × ads × ad
3. Re-render HTML пирамиды в `#cB4-pyr`
4. Update badge «N объявл.»
5. Update «Размер шаблона: N×N×N» в header
6. Update «Запустить · N объявл.» в Quickbar

Описания режимов распределения

Modal черновиков

• Автооткрытие при первом заходе на B (sessionStorage flag)
• Открытие через «Черновики 2» pill в topbar или кнопку «Черновики» в page-head
• 4 mock draft cards с разными relative-time: 5 мин / 2 дня / 3 месяца / 2 года
• Каждая card имеет: имя + source-pill + meta + кнопки «Продолжить →» / 🗑 delete
• Footer: «Закрыть» / «Начать новый запуск» (primary)
• Backdrop click = close
• Все actions работают: continue → toast «Загружен черновик: X», delete → fade-out animation + count update, start-new → close + toast «Создан новый запуск · DD.MM.YYYY · HH:MM»

Empty-state «нет кабинетов»

• При удалении последнего кабинета через × — все остальные секции получают `cB4-disabled-overlay` (opacity 0.4 + не кликаются)
• Подсказка «Сначала выбери кабинеты ↑» появляется поверх каждой disabled-секции
• При добавлении кабинета обратно — overlay автоматически снимается

6Система черновиков (UX)

Правило создания (после правки Тимура от 2026-06-01):

Имя черновика по умолчанию

Новый запуск · DD.MM.YYYY · HH:MM (локальная дата создания). Пользователь может переименовать через inline-edit в page-head.

Relative-time формат

Локализация на русский с правильным склонением через Intl.PluralRules.

Кнопки управления

• «Черновики» (page-head + topbar pill) — открывает modal со списком
• «Сбросить» (page-head) — confirm + DELETE current draft + reload page
• «Запустить» (Quickbar) — POST /launches/drafts/:id/publish → запускает Meta API pipeline через все cabinets

7Backend-спека

Полная спека для партнёра: 2026-06-01-launch-drafts-system.md (rendered как HTML).

Модель LaunchDraft

id          uuid primary
name        text  (default: "Новый запуск · DD.MM.YYYY · HH:MM")
user_id     uuid fk
direction_id uuid fk nullable
source      enum('fb', 'nb', 'sn')
state       jsonb (полное состояние формы)
is_published boolean
published_launch_job_id uuid fk nullable
created_at  timestamptz
updated_at  timestamptz

Endpoints

8Backlog · 29 задач

Полный backlog в 2026-06-01-concept-B-backlog.md. Краткая сводка по приоритетам:

9Что дальше

Все 29 задач backlog'а закрыты в v11. Следующие шаги — про интеграцию и backend:

1. Approval концепта Тимуром → отдать партнёру для интеграции в `dashboard-v2.html`
2. Backend implementation — endpoints по спеке (LaunchDraft model, CRUD endpoints, publish flow)
3. Frontend wiring в реальном staging — заменить mock-state на live API calls с debounced PATCH
4. QA после интеграции — full walkthrough на staging.openclaw.../launch-new
5. Прод-rollout когда staging stable