Конструктор писем VipAvenue (Svelte)

1. Запуск и окружение

1. npm install — установка зависимостей.
2. npm run dev — запуск dev-сервера.
3. Открыть адрес из терминала (обычно http://localhost:5173).

Все состояния (блоки, настройки, тема, кастомные пресеты) хранятся в localStorage.

2. Макет интерфейса

• Топбар: переключатель темы (тёмная/светлая, сохраняется).
• Левая колонка — Конструктор:
  • Папка изображений — глобальный префикс URL.
  • Цены в товарах — общий флажок для всех товарных блоков.
  • Тип блока — добавление нового блока.
  • Собрать мужское / Собрать женское — обмен сегментов относительно разделителя.
  • Сохранить как пресет — сохраняет текущее состояние (блоки + настройки).
  • Сбросить — удаляет все блоки и код.
• Левая колонка — Пресеты: Новинки, Акция, Новые коллекции, Мои пресеты.
• Правая колонка: живой Pug-код, кнопки копирования/экспорта (дублируются сверху и снизу).
• Футер: цитата и ссылка на инструкцию.

3. Блоки и сегменты

• Сегменты: O — общий, Ж — женский, М — мужской. Меняются кликом по бейджу в заголовке.
• Перетаскивание: за «ручку» или кнопки ↑/↓.
• Все поля блока моментально обновляют Pug справа.
• Опция «Убрать отступ после блока» позволяет стыковать плотнее.
• Глобальный флажок «Цены в товарах» управляет всеми товарными блоками, включая «3 товара + картинка».

4. Сборка женской/мужской версии

• dividerVA — центр обмена сегментов.
• Общие блоки до/после разделителя остаются на местах.
• При «Собрать мужское» блоки М поднимаются над разделителем, блоки Ж опускаются под него.
• При «Собрать женское» порядок возвращается (запоминается при переключении на мужскую).

5. Перечень блоков

• Заголовки/текст: АКТУАЛЬНЫЙ заголовок, Текстовый блок (поддержка <br>,  , —, жирный через <span style="font-weight:700;">). Есть HTML-превью.
• Кнопки: одиночная, двойная, тройная. Настройки ширины/высоты/цветов/шрифта/отступов.
• Баннеры: с ссылкой/без, 2/3 баннера (с/без текста). Имя файла + расширение, префикс берётся из «Папка изображений».
• Товары:
  • 4 в ряд, 3 в ряд.
  • Товары + картинка слева/справа; 3 товара + картинка слева/справа.
  • Цены регулируются глобальным флажком.
• Текст + картинка: картинка слева/справа, кнопка под текстом.
• Сервис: Отступ, Разделитель (dividerVA), Размерная сетка, Промокод.

6. Картинки

• Заполните «Папка изображений» (например, https://email-files.vipavenue.ru/newsletter_2025/2025_12_07/).
• В блоках — только имя файла и расширение (.png по умолчанию). При необходимости есть поля расширения и прямой URL (fallback).
• URL собирается автоматически: префикс + имя файла + расширение.

7. Пресеты

• Новинки: 16 женских + 16 мужских ID, заголовок, подзаголовок, кнопки, ссылки размерных сеток, кнопки «Больше новинок». Цены — глобальным флажком.
• Акция: баннер, два блока товаров (жен/муж), разделитель, кнопки «Подборка для неё/него».
• Новые коллекции: похожий набор с отдельными текстами/ссылками/баннером.
• Мои пресеты: сохранённые состояния конструктора (блоки + настройки). Доступны загрузка/удаление.
• Кнопки «Женская версия» / «Мужская версия» применяют пресет и возвращают на вкладку Конструктор.

8. Экспорт Pug

• Поле справа всегда содержит актуальный Pug.
• «Скопировать код» — в буфер; «Экспорт .pug» — скачивает файл letter.pug.
• Кнопки копирования/экспорта продублированы сверху и снизу панели кода.

9. Хранение данных (localStorage)

• vip_letter_editor_blocks_v1 — блоки.
• vip_letter_editor_settings_v1 — настройки (включая imageBaseUrl, showPrices).
• vip_letter_editor_theme — тема.
• vip_letter_editor_custom_presets_v1 — пользовательские пресеты.

10. Практические советы

• Следите, чтобы dividerVA стоял на месте, если используете сборку мужской/женской версии.
• После «Собрать мужское» вернуться на женскую можно той же кнопкой (текст меняется).
• Для плотного стыка блоков снимайте «Отступ после блока».
• В текстовых блоках включайте HTML-превью, если хотите увидеть рендер <br>/ /— и жирного текста.