6.8 KiB
6.8 KiB
🚀 Быстрый старт — Маркетинговый анализ v4.0
Что было сделано
✅ Восстановлена старая архитектура Vue.js из Git
✅ Добавлен новый многошаговый опросник v4.0 с премиальным дизайном
✅ Создан дашборд результатов с графиками и таблицами
✅ Обновлён дизайн Login.vue под новый стиль
✅ Обновлён дизайн маркетинговых страниц
✅ Интегрированы новые роуты в существующий роутер
📦 Запуск проекта
1. Установка зависимостей
npm install
2. Запуск dev-сервера
npm run dev
Открой в браузере: http://localhost:5173 (или порт, который покажет Vite)
🧪 Как протестировать
Шаг 1: Авторизация
- Перейди на
/auth/login - Войди в систему
Шаг 2: Новый опросник v4.0
- Перейди в "Маркетинг" (
/marketing-analysis) - Выбери "Маркетинговый анализ v4.0 (новый)" — первый пункт в меню
- Или перейди напрямую на
/marketing-analysis/v3
Шаг 3: Заполнение опросника
Пройди все 5 шагов:
- Шаг 1: Базовая информация (ниша, название, цель, этап бизнеса)
- Шаг 2: География и чек (города, средний чек)
- Шаг 3: Продукт и поведение (описание, частота покупок, приоритеты клиентов)
- Шаг 4: Текущая ситуация (SMM статус, заявки, ограничения)
- Шаг 5: Ссылки и настройки (соцсети, конкуренты, уровень детализации)
Особенности:
- ✨ Красивые карточки для выбора (Radio Cards)
- 🔢 Ограничение выбора: некоторые поля позволяют выбрать только 1–2 варианта
- 🏙️ Динамические поля для городов (добавляются по Enter)
- 🔗 Динамические ссылки (кнопка "Добавить ссылку")
- 🇰🇿 Казахстанские примеры (Алматы, Астана, Шымкент и т.д.)
Шаг 4: Результаты анализа
- После отправки формы тебя перенаправит на
/marketing-analysis/v3/{analysisId} - Страница автоматически делает поллинг каждые 5 секунд
- Пока статус
QUEUEDилиPROCESSING— показывается красивый лоадер с меняющимися сообщениями - Когда статус
COMPLETED— отображается дашборд с:- 📊 Hero-карточками (Executive Summary)
- 📈 Графиками (сезонность, платформы конкурентов)
- 📋 Таблицей конкурентов с аккордеоном (strengths/weaknesses)
- ✅ Выводами и стратегией
🎨 Новые роуты
/marketing-analysis/v3— новый опросник v4.0/marketing-analysis/v3/:id— страница результатов анализа v4.0
Старый опросник остался доступен:
/marketing-analysis/analysis— старый опросник (не изменён)
📋 Структура новых файлов
src/
├── components/marketing/
│ ├── MarketingBriefWizardV3.vue # Новый опросник v4.0
│ ├── MetricCard.vue # Карточка метрики
│ └── wizard/ # Компоненты для опросника
│ ├── StepSection.vue
│ ├── RadioGroupField.vue
│ ├── CheckboxCardsLimitedField.vue
│ ├── CheckboxCardsField.vue
│ ├── TagArrayField.vue
│ └── DynamicLinksField.vue
├── views/pages/marketing/
│ └── MarketingAnalysisV3.vue # Дашборд результатов v4.0
├── service/
│ └── MarketingV3Service.js # API для v4.0
└── types/
└── marketing-v3.js # Типы и enum'ы
⚙️ API эндпоинты
Новый функционал использует:
POST /api/v3/marketing-analysis/start— запуск анализа v4.0GET /api/v3/marketing-analysis/{id}— получение статуса и результатов
Важно: Убедись, что на бэкенде эти эндпоинты реализованы и возвращают:
POST→{ analysisId: string }GET→MarketingAnalysisV3Documentс полямиstatus,resultData,errorMessage
🎯 Особенности
Дизайн
- ✨ Премиальные карточки для выбора (Radio Cards)
- 🎭 Плавные анимации переходов между шагами
- 📊 Прогресс-бар с градиентом
- ✅ Индикаторы шагов с галочками
Функционал
- 🔄 Автоматический поллинг статуса анализа
- ✅ Валидация формы перед отправкой
- 🏙️ Динамические поля для городов и ссылок
- 🔢 Ограничения на выбор (max 2 для некоторых полей)
Казахстанский контекст
- 🇰🇿 Примеры городов: Алматы, Астана, Шымкент, Караганда, Актобе
- 📱 Примеры ниш: стоматология в Алматы, клиники
- 🔗 Примеры ссылок: Instagram профили, 2ГИС
🐛 Если что-то не работает
-
Ошибки компиляции:
npm install -
Ошибки API:
- Проверь, что бэкенд запущен
- Проверь URL в
src/config/api.js - Убедись, что эндпоинты
/api/v3/marketing-analysis/*реализованы
-
Компоненты не отображаются:
- Проверь консоль браузера
- Убедись, что все компоненты правильно импортированы
Готово! Теперь можно тестировать. 🎉