VA.ASPEKTER/z51-pug-builder

Z51 Pug Builder — руководство по интерфейсу

Этот файл описывает интерфейс и логику использования конструктора писем. Здесь нет технических деталей реализации — только то, как устроена работа в UI, где что находится и зачем это нужно.

---

1. Общая идея

Конструктор собирает письмо из блоков, взятых из block.pug. Каждый блок — это кусок Pug-кода, размеченный комментарием //Название. В интерфейсе вы выбираете нужные блоки, редактируете только важные поля (текст, ссылки, изображения, ID и т.п.), а на выходе получаете собранный Pug-файл.

Главная выгода: быстро собирать письма без ручного копирования и без риска повредить структуру шаблона.

---

2. Навигация по интерфейсу

Верхняя панель (шапка) содержит:

• Иконка дискеты — открывает поле для названия пресета и сохранение пресета.
• Иконка папки — переход на страницу пресетов.
• Сборка — основная страница сборки письма.
• Настройки — управление проектом и шаблонами.
• Переключатель темы — светлая/тёмная.
• Назад / Сброс — только на странице сборки.

В левом сайдбаре:

• Название проекта (крупно, окрашено акцентом) или логотип.
• Выбор проекта.
• Добавить блок (выпадающий список).
• Быстрые кнопки блоков.
• Счётчик общего количества блоков.

---

3. Страница «Сборка»

Это основной экран для работы с письмом.

3.1. Добавление блоков

• Через выпадающий список «Добавить блок».
• Через быстрые кнопки (настраиваются в настройках проекта).
• Через кнопку «+» внизу каждого блока — добавляет новый блок после текущего.

Новые блоки открываются сразу (развернуты).

---

3.2. Карточка блока

Каждый блок — это карточка с:

• названием блока;
• кнопками вверх / вниз / удалить;
• полями редактирования;
• чекбоксом «Отступ после блока» + поле значения (если включено);
• кнопками «PUG» и «+» (добавление блока после).

В любой момент можно раскрыть/свернуть блок по клику на его заголовок.

---

3.3. Поля редактирования

Интерфейс не показывает весь код, а только полезные поля.

Типы полей:

• Текст — содержимое внутри строк Pug.
• Ссылки — href.
• Картинки — src.
• Кнопки — если в блоке есть +buttonRounded(...), показываются отдельные поля для текста и ссылки.
• Товары — если есть +productsX, показывается поле «ID товаров».

Поля автоматически определяются из шаблона блока, но их можно включать/выключать и переименовывать в настройках.

---

3.4. Форматирование текста

Для текстовых полей есть панель действий:

• T — типограф.
• Ж — жирный текст.
• • — маркер.
• /
— списки.
• A + URL — ссылка.
• Глаз — предпросмотр HTML.

---

3.5. Абзацы в блоке «Текст»

Блок «Текст» поддерживает несколько абзацев:

• Кнопка «Абзац» добавляет новый абзац.
• У каждого дополнительного абзаца есть кнопка удаления.
• Между абзацами автоматически вставляется +spacerLine(20).

---

3.6. Списки (нумерованные и маркированные)

Для блоков списков:

• Редактируются только тексты пунктов.
• Картинки маркеров/цифр скрыты и не редактируются.
• Кнопка «Пункт» добавляет новый пункт.
• Кнопка × удаляет пункт.

При добавлении блока со списком создаётся только первый пункт, остальные добавляются вручную.

---

3.7. Отступы

• Глобальный отступ задаётся в настройках.
• У каждого блока можно включить/выключить отступ и задать своё значение.
• Для некоторых блоков отступ не добавляется автоматически (Разделитель, Отступ 20/40).

---

3.8. Итоговый Pug

Правый блок — это итоговый Pug-код:

• он обновляется при любом изменении;
• можно копировать или скачивать;
• при редактировании блок подсвечивается и прокручивается в Pug-окне.

---

4. Страница «Настройки»

Настройки делятся на вкладки:

4.1. Общие

Источник блоков

• Загрузка нового block.pug.
• Перезагрузка текущего источника.

Поля блока

• Выбор любого блока.
• Включение/выключение полей.
• Переименование подписи поля.

---

4.2. Глобальные блоки

• Список всех блоков проекта.
• Для каждого блока можно редактировать Pug-шаблон напрямую.
• Настроить отступ по умолчанию для конкретного блока.

---

4.3. Текущий проект

Настройки внешнего вида проекта:

• Название проекта (в левом верхнем углу).
• Цвет акцентов (через палитру или HEX).
• Логотип проекта (загрузка изображения).

Логотип хранится в настройках проекта.

---

4.4. Быстрые блоки

• Выбор блоков, которые появятся слева как быстрые кнопки.
• Можно добавлять/удалять элементы.

---

4.5. Новый проект

• Создание нового проекта.
• Каждый проект имеет собственный block.pug, настройки, пресеты и сборки.

---

5. Пресеты

Пресет — это сохранённая сборка письма.

Как работают пресеты

• Сохраняются через иконку дискеты в шапке.
• Открываются через страницу «Пресеты».
• При сохранении, если имя уже существует — система спрашивает, обновить или создать новый.
• При открытии пресета его имя автоматически подставляется в поле сохранения.

На странице пресетов

• Отображаются название и дата/время сохранения.
• Есть поиск по названию.
• Есть сортировка: сначала новые / сначала старые.

---

6. Подсказки и наведение

Все кнопки и поля имеют всплывающие подсказки (title), чтобы быстро понимать назначение элемента.

---

7. Выгоды использования конструктора

• Быстрее сборки — письмо собирается за минуты.
• Нет ошибок в структуре Pug — редактируются только нужные фрагменты.
• Один интерфейс для всех проектов.
• Удобное сохранение и повторное использование через пресеты.
• Гибкая настройка под разные команды и бренды.

---

8. Типовые сценарии

8.1. Быстрая сборка письма с нуля

1. Перейдите в «Сборка».
2. Добавьте блоки через быстрые кнопки или выпадающий список.
3. Заполните поля (текст, ссылки, ID товаров).
4. Проверьте итоговый Pug справа.
5. Скопируйте или скачайте итоговый файл.

8.2. Сборка письма по шаблону (пресету)

1. Откройте страницу «Пресеты».
2. Найдите нужный пресет через поиск.
3. Нажмите «Открыть».
4. Отредактируйте детали и сохраните обратно.

8.3. Обновление существующего пресета

1. Откройте пресет.
2. Внесите изменения.
3. Нажмите иконку дискеты — имя пресета подставится автоматически.
4. Подтвердите обновление в диалоге.

8.4. Настройка быстрых блоков

1. Перейдите в «Настройки» → «Быстрые блоки».
2. Выберите нужные блоки и нажмите «Добавить».
3. Удалите ненужные кнопки через «×».
4. Эти кнопки появятся слева в «Сборке».

8.5. Добавление абзацев в текстовом блоке

1. Откройте блок «Текст».
2. Нажмите «Абзац».
3. Заполните новый пункт текста.
4. При необходимости удалите абзац кнопкой «×».

8.6. Работа со списками

1. Добавьте блок «Маркированный список» или «Нумерованный список».
2. Заполните первый пункт.
3. Добавьте новые пункты кнопкой «Пункт».
4. Удалите лишние пункты кнопкой «×».

8.7. Создание нового проекта

1. Откройте «Настройки» → «Новый проект».
2. Введите имя проекта, нажмите «Добавить».
3. Загрузите block.pug для нового проекта.
4. Настройте быстрые блоки, цвета и поля.

---

Если нужно — могу добавить в интерфейс отдельную страницу «Справка» с этим текстом.