Редактор товарной инфографики в админке inSales на Vue

Задача

В карточке товара inSales для работы с фото был только диалог на CropperJS: картинку можно было обрезать, и всё. Инфографику с заголовком, плашками и чистым фоном продавцы делали в другом сервисе, скачивали и загружали обратно.

Нужен был редактор, который открывается прямо из карточки и закрывает задачу целиком: собрать картинку, при необходимости обработать её с помощью AI, сохранить проект редактируемым и вернуть готовое изображение в каталог.

Моя роль

Frontend продукта был на мне. Спроектировал архитектуру Vue-приложения, сверстал интерфейс по готовым макетам из Figma, подключил библиотеку редактора и согласовал API-контракты с backend-разработчиком, который делал серверную часть. Ещё писал технические задания и сценарии для QA, добавил трекинг AI-действий в Mixpanel и готовил описания новых функций для поддержки. В команде были продакт, дизайнер, backend-разработчик и тестировщик.

Сам canvas работает на моей отдельной библиотеке на TypeScript и FabricJS. Здесь речь о продукте поверх неё: панели, диалоги, серверные сценарии, лимиты, ошибки и всё, что происходит между кликом и сохранённым товаром.

Что я сделал

Два сохранения и два состояния проекта

У сохранения две границы. Продавец жмёт «Сохранить» в редакторе, а потом должен сохранить и саму карточку товара. Если он закроет карточку без сохранения, новая картинка не применится. И её редактируемый проект не должен заменить тот, что соответствует опубликованному изображению.

Вместе с backend-разработчиком договорились о модели из двух состояний. Сохранение в редакторе создаёт новую версию картинки и кладёт проект в draft_state. Сохранение карточки переводит черновик в origin_state. Редактор всегда открывает подтверждённое состояние, поэтому брошенная правка не перезапишет то, что продавец действительно опубликовал.

Разделил корневой компонент по сценариям

С новыми функциями корневой диалог разросся примерно до 3 500 строк. Я разнёс логику по 22 composables: сессия и runtime, жизненный цикл изображения, работа с canvas, шаблоны, AI и массовый перенос.

Главное ограничение — одновременно живут два редактора: видимый и скрытый, который нужен для массового переноса. Поэтому composables работают с конкретной сессией редактора. Видимый редактор использует одну, массовый перенос создаёт для скрытого свою. Фоновая обработка не может изменить то, что продавец видит на экране.

Долгие операции с понятными состояниями

Сохранение — это цепочка шагов: экспорт, проверка размера, загрузка частями для файлов больше 10 МБ, серверная обработка с polling, итоговый URL и замена фото в галерее товара. На всё уходит примерно 5–10 секунд. Всё это время редактор заблокирован, чтобы продавец не менял версию, которую сервер ещё обрабатывает.

AI-действия устроены так же. Vue ставит редактирование на паузу, показывает прогресс прямо на картинке, опрашивает сервер, затем подставляет результат с прежними размерами и положением и обновляет остаток запросов. Окно запроса для генерации текста сбрасывается при смене выделения: текст, написанный для одного блока, не попадёт в другой.

Массовый перенос — до 10 изображений за раз

Продавец оформляет одну фотографию и переносит композицию на другие фото товара, до 10 за раз, при желании с удалением фона. Для каждой выбранной фотографии скрытый редактор применяет размеры исходного изображения, восстанавливает композицию, сохраняет редактируемый проект и итоговую картинку и очищается перед следующей.

Отмена тоже должна быть безопасной. Если фото уже в обработке, очередь остановится только после него, а необработанные снимаются сразу. Если исходная композиция изменилась, когда продавец уже выбирает фото, режим переноса закрывается, чтобы не применить устаревшее состояние.

Один редактор в двух местах продукта

Сначала редактор был завязан на медиа товара. Чтобы использовать его в визуальном редакторе сайта, я вынес товарную логику за пределы компонента. Теперь каждое место, откуда открывается редактор, передаёт тип сущности, нормализованные данные изображения, список доступных картинок, обработчик сохранения и рекомендуемые пропорции crop. В визуальном редакторе один экземпляр диалога монтируется на верхнем уровне, а набор функций зависит от контекста: генерация текста по данным товара есть только в карточке, а при правке картинки сайта создаётся новый файл, исходный остаётся как был.

Результат

• Редактором пользуются больше 3 000 активных клиентов inSales — это данные продуктовой аналитики.
• Через редактор проходит 800+ AI-операций в день: быстрое и точное удаление фона, улучшение качества, генерация текста.
• Одни и те же правки для 10 изображений вручную занимали 5–10 минут, с массовым переносом — 2–3 минуты. Функция вышла в июле 2026 года.
• С сентября 2026 года тот же компонент редактирует картинки в визуальном редакторе сайта, то есть один редактор работает в двух production-сценариях.

Где попробовать

Редактор сделан только для десктопа: проверял его в Chrome, Firefox и Safari на Windows и macOS, а на мобильных кнопка открытия скрыта. Попробовать редактор может любой: зарегистрируйте магазин на inSales, добавьте товар, загрузите фото и откройте редактор из карточки товара в браузере на компьютере. Без регистрации можно попробовать open-source движок, на котором он работает: открыть живое демо или посмотреть исходный код на GitHub.