## 🎯 ПОЛНЫЙ ПРОМТ ДЛЯ РАЗРАБОТКИ ИНТЕРНЕТ-МАГАЗИНА "БРАЕР-КОЛОР" ### 📋 ТЕХНИЧЕСКОЕ ЗАДАНИЕ **ВАЖНО:** `debug` является глобально объявленной переменной во всем приложении. НЕ используйте `debug = require 'debug'` в компонентах. ### 🎯 КОНТЕКСТ ПРОЕКТА **Название:** Интернет-магазин лакокрасочной продукции "Браер-Колор" **Тип:** SPA (Single Page Application) с современным минималистичным дизайном **Аналоги:** Функциональность m-kraski.ru с дизайном https://braer-color.ru/ **Архитектура:** Мультидоменная, мультиязычная PWA с офлайн-режимом **GIT репозитарий:** https://gogs.osvoj.ru/oleg/s5l.ru-crm **Текущая версия промта** https://gogs.osvoj.ru/oleg/s5l.ru-crm/raw/master/README.md ## 📊 ОБРАЗЕЦ CSV ФАЙЛА ДЛЯ ИМПОРТА ### 📝 СПЕЦИФИКАЦИЯ CSV **Разделитель:** `;` (точка с запятой) **Кодировка:** UTF-8 **Обязательные поля:** `Артикул*`, `Название товара`, `Цена, руб.*` ### 🎯 ПРИМЕР CSV СТРОКИ ```csv №;Артикул*;Название товара;Цена, руб.*;Цена до скидки, руб.;НДС, %*;Рассрочка;Баллы за отзывы;SKU;Штрихкод (Серийный номер / EAN);Вес в упаковке, г*;Ширина упаковки, мм*;Высота упаковки, мм*;Длина упаковки, мм*;Ссылка на главное фото*;Ссылки на дополнительные фото;Ссылки на фото 360;Артикул фото;Бренд*;Название модели (для объединения в одну карточку)*;Единиц в одном товаре;Цвет товара;Название цвета;Тип*;Класс опасности товара*;Степень блеска покрытия;Работы;Вес товара, г;Количество товара в УЕИ;#Хештеги;Аннотация;Rich-контент JSON;Название группы;Образец цвета;Партномер;Гарантия;Страна-изготовитель;Комплектация;ТН ВЭД коды ЕАЭС;Срок годности в днях;Количество заводских упаковок;Вид краски;Объем, л;Время высыхания, часов;Вес, кг;Расход, л/м2;Назначение грунтовки;Рекомендуемое количество слоев;Расход, кг/м2;Область применения состава;Количество компонентов;Особенности ЛКМ;Макс. температура эксплуатации, С°;Материал основания;Основа краски;Основа грунтовки;Способ нанесения;Форма выпуска средства;Назначение;Тип помещения;Возможность колеровки;Вид выпуска товара;Тип растворителя;Эффект краски;Марка эмали;Можно мыть;Базис;Аэрозоль;Помещение;Название модели для шаблона наименования;Ошибка;Предупреждение 1;4673764201943;Грунтовка глубокого проникновения для стен под обои и покраску ЭкоКрас 1кг;528,00;1 056,00;20;Да;Нет;;4673764201943;1000;100;55;250;https://cdn1.ozone.ru/s3/multimedia-1-o/7663357104.jpg;"https://cdn1.ozone.ru/s3/multimedia-1-8/7663357124.jpg https://cdn1.ozone.ru/s3/multimedia-1-w/7663352504.jpg https://cdn1.ozone.ru/s3/multimedia-1-r/7663357179.jpg https://cdn1.ozone.ru/s3/multimedia-1-b/7663352483.jpg https://cdn1.ozone.ru/s3/multimedia-1-c/7663352556.jpg https://cdn1.ozone.ru/s3/multimedia-1-t/7663352537.jpg https://cdn1.ozone.ru/s3/multimedia-1-o/7663352496.jpg https://cdn1.ozone.ru/s3/multimedia-1-k/7663352492.jpg https://cdn1.ozone.ru/s3/multimedia-1-y/7663365970.jpg https://cdn1.ozone.ru/s3/multimedia-1-m/7663365922.jpg https://cdn1.ozone.ru/s3/multimedia-1-1/7663365937.jpg https://cdn1.ozone.ru/s3/multimedia-1-p/7663352533.jpg";;;ЭкоКрас;4673764201943;1;прозрачный;;Грунтовка;Не опасен;;"Внутренние;Наружные";;;#Грунтовка #ГрунтДляСтен #АкриловаяГрунтовка #СтроительныеМатериалы #ГлубокогоПроникновения #УниверсальнаяГрунтовка #АдгезионнаяГрунтовка #АнтисептическаяГрунтовка #ДляВнутреннихРабот #ДляНаружныхРабот #ДляБетона #ДляГипсокартона #ДляДерева #Быстросохнущая #Водостойкая #Укрепляющая #Противогрибковая #БелаяГрунтовка #ПодОбои #ПодШтукатурку #ПодПокраску #ПодПлитку #ДляРовныхСтен #РемонтДома #ОтделкаПомещений #СтроительныеРаботы #КачественныйРемонт #СтроительныеТовары #профессиональная_грунтовка #грунтовка_концентрат_премиум;"Премиум грунтовка глубокого проникновения для подготовки поверхностей перед финишной отделкой...";"{""content"": [{""widgetName"": ""raTextBlock"", ""title"": {""items"": [{""type"": ""text"", ""content"": ""Грунтовка глубокого проникновения PRIMER 1:4 концентрат ImPasto 1кг""}], ""size"": ""size5"", ""color"": ""color1""}, ""theme"": ""primary"", ""padding"": ""type2"", ""gapSize"": ""m"", ""text"": {""size"": ""size2"", ""align"": ""left"", ""color"": ""color1"", ""items"": [{""type"": ""text"", ""content"": ""Премиум грунтовка глубокого проникновения для подготовки поверхностей перед финишной отделкой...""}]}}], ""version"": 0.3}";экокрас;https://cdn1.ozone.ru/s3/multimedia-1-q/7218190898.jpg;;2 года;Россия;Грунтовка глубокого проникновения ЭкоКрас 1кг- 1шт;;990;1;;1;24;1;0,05;"Глубокого проникновения;Обеспыливающая;Пропиточная;Укрепляющая;Универсальная";;;"По бетону;Для фасадов;Для хобби и творчества;Для швов;По кирпичу;По штукатурке;Универсальная";;;;"Бетон;Газобетон;Кирпич;Пенобетон;Штукатурка";;Акриловая;"Валик;Кисть;Краскопульт;Пистолет";Готовый раствор;;"С повышенной влажностью;С умеренной влажностью;Сухое";;;;;;;;;;;; ``` ### 🔧 ОБРАБОТКА НЕОБЯЗАТЕЛЬНЫХ ПОЛЕЙ **ВАЖНО:** Система должна обрабатывать ЛЮБЫЕ необязательные поля, даже с неизвестными именами. Все дополнительные поля сохраняются в атрибуты товара. ```coffee # Пример обработки произвольных полей extractAllAttributes: (csvRow) -> attributes = {} # Обязательные технические поля requiredFields = [ 'Вес в упаковке, г*', 'Ширина упаковки, мм*', 'Высота упаковки, мм*', 'Длина упаковки, мм*', 'Объем, л', 'Время высыхания, часов' ] # Обрабатываем все поля CSV for key, value of csvRow if value and value.toString().trim() != '' # Сохраняем все поля, кроме системных if not key in ['№', 'Артикул*', 'Название товара', 'Цена, руб.*', 'Ссылка на главное фото*', 'Ссылки на дополнительные фото'] attributes[key] = value.toString().trim() log "Извлечено атрибутов: #{Object.keys(attributes).length}" return attributes ``` ## 🎯 ПОДРОБНОЕ ЛОГГИРОВАНИЕ ### 📝 ТРЕБОВАНИЯ К ЛОГГИРОВАНИЮ **Обязательно логировать:** - Начало и завершение всех основных операций - Ошибки с полным стектрейсом - Прогресс длительных операций (импорт, синхронизация) - Пользовательские действия (добавление в корзину, авторизация) - Изменения состояния приложения - Запросы к базе данных **Пример детального логгирования:** ```coffee importFromCSV: (file, domain, onProgress) -> log "🚀 Начало импорта CSV файла: #{file.name}" log "📊 Домен для импорта: #{domain}" log "📁 Размер файла: #{file.size} байт" return new Promise (resolve, reject) => reader = new FileReader() reader.onload = (e) => try log "✅ Файл успешно прочитан, начало парсинга CSV" results = Papa.parse(e.target.result, { header: true delimiter: ';' skipEmptyLines: true encoding: 'UTF-8' }) log "📈 CSV распарсен: #{results.data.length} строк найдено" validProducts = results.data.filter (row) => isValid = row and row['Артикул*'] and row['Название товара'] and row['Цена, руб.*'] if not isValid log "⚠️ Пропущена строка из-за отсутствия обязательных полей: #{JSON.stringify(row)}" return isValid log "✅ Валидных товаров для импорта: #{validProducts.length}" this.processProductsInBatches(validProducts, domain, onProgress) .then (results) => log "🎉 Импорт успешно завершен: #{results.length} товаров обработано" resolve(results) .catch (error) => log "❌ Ошибка в процессе импорта: #{error.message}" reject(error) catch error log "💥 Критическая ошибка парсинга CSV: #{error.message}" log "🔍 Stack trace:", error.stack reject(new Error("Ошибка парсинга CSV: #{error.message}")) reader.onerror = (error) -> log "❌ Ошибка чтения файла: #{error}" reject(new Error('Ошибка чтения файла')) reader.readAsText(file, 'UTF-8') ``` ## 🛠 ТЕХНИЧЕСКИЙ СТЕК - **Шаблонизатор:** Pug с Vue компонентами - **Стилизация:** Stylus + CSS переменные + BEM методология - **Логика:** CoffeeScript + Vue.js 3 (runtime + compiler) - **Маршрутизация:** Vue Router - **База данных:** PouchDB (клиент) + CouchDB (сервер) - **Анимации:** CSS transitions/transforms + Vue transitions ## 🚨 КРИТИЧЕСКИЕ ПРАВИЛА РАЗРАБОТКИ ### ❌ **ЗАПРЕЩЕНО:** 1. Использование rgba() функций в стилях 2. Прямое использование console.log (только глобальный log) 3. Многострочные атрибуты в Pug 4. @import в стилях компонентов 5. JavaScript операторы в CoffeeScript 6. Объявление debug в компонентах ### ✅ **ОБЯЗАТЕЛЬНО:** 1. Полные листинги файлов компонентов 2. Адаптивная верстка (mobile-first) 3. BEM методология именования классов 4. CSS переменные для цветов и прозрачностей 5. Подробное логгирование всех операций 6. Обработка всех необязательных полей CSV ## 📅 ПОЭТАПНЫЙ ПЛАН РАЗРАБОТКИ ### 🎯 ЭТАП 1: БАЗОВАЯ АРХИТЕКТУРА ✅ - [ ] Настройка сборки и конфигурации - [ ] Базовая структура Vue приложения - [ ] PouchDB сервис и дизайн-документы - [ ] Главный layout и система стилей - [ ] Система типов и интерфейсов ### 🎯 ЭТАП 2: АДМИН-ПАНЕЛЬ ⚠️ В РАБОТЕ - [ ] Layout админ-панели - [ ] Компонент управления товарами - [ ] **ТЕКУЩАЯ ЗАДАЧА: Система импорта товаров** - [ ] Редактор категорий с загрузкой изображений - [ ] Управление слайдами главной страницы - [ ] Управление статьями блога - [ ] Настройки доменов и мультиязычности ### 🎯 ЭТАП 3: КЛИЕНТСКАЯ ЧАСТЬ - [ ] Главная страница с адаптивным дизайном - [ ] Каталог товаров с фильтрацией - [ ] Страница товара с галереей - [ ] Корзина и оформление заказа - [ ] Блог и система статей ### 🎯 ЭТАП 4: ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ - [ ] Поиск по товарам - [ ] Система отзывов и рейтингов - [ ] Личный кабинет пользователя - [ ] Система скидок и промокодов - [ ] Интеграция с платежными системами ### 🎯 ЭТАП 5: ОПТИМИЗАЦИЯ И ТЕСТИРОВАНИЕ - [ ] PWA функциональность (офлайн-режим) - [ ] Оптимизация производительности - [ ] Тестирование на разных устройствах - [ ] Деплой и настройка продакшн-окружения ## 📊 ТЕКУЩОЕ СОСТОЯНИЕ ПРОЕКТА ### ✅ ВЫПОЛНЕНО ### 🎯 БЛИЖАЙШИЕ ЗАДАЧИ 2. **Работа с данными** - PouchDB сервис с синхронизацией - Дизайн-документы для CouchDB - Система типов данных 3. **Базовые компоненты** - Главный layout приложения - Layout админ-панели - Система уведомлений 4. **Стили и дизайн** - CSS переменные и дизайн-система - Адаптивная верстка - Темная/светлая темы 1. **Система импорта товаров** ⚠️ ПРИОРИТЕТ - Компонент загрузки CSV файлов - Парсинг и валидация данных - Пакетная обработка товаров - Создание категорий на лету 2. **Админ-панель** - Управление товарами - Система прогресса операций - Обработка ошибок импорта 1. Завершить компонент импорта товаров 2. Реализовать редактор категорий 3. Создать компонент управления слайдами 4. Разработать главную страницу магазина ### 🔄 В РАБОТЕ СЕЙЧАС отвечай на русском Анализировать реализованный код, по git репозитарию https://gogs.osvoj.ru/oleg/s5l.ru-crm.git Проверяй промт и изменения в нём по адресу https://gogs.osvoj.ru/oleg/s5l.ru-crm/raw/master/README.md 1. **Базовая архитектура** - Напиши базовые файлы системы - Система роутинга - Глобальная конфигурация - Напиши следущую задачу на выполнение (после завершения отладки, созданых файлов)