156 lines
6.8 KiB
Markdown
156 lines
6.8 KiB
Markdown
# 🚀 Быстрый старт — Маркетинговый анализ v4.0
|
||
|
||
## Что было сделано
|
||
|
||
✅ **Восстановлена старая архитектура Vue.js** из Git
|
||
✅ **Добавлен новый многошаговый опросник v4.0** с премиальным дизайном
|
||
✅ **Создан дашборд результатов** с графиками и таблицами
|
||
✅ **Обновлён дизайн Login.vue** под новый стиль
|
||
✅ **Обновлён дизайн маркетинговых страниц**
|
||
✅ **Интегрированы новые роуты** в существующий роутер
|
||
|
||
---
|
||
|
||
## 📦 Запуск проекта
|
||
|
||
### 1. Установка зависимостей
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 2. Запуск dev-сервера
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
Открой в браузере: **http://localhost:5173** (или порт, который покажет Vite)
|
||
|
||
---
|
||
|
||
## 🧪 Как протестировать
|
||
|
||
### Шаг 1: Авторизация
|
||
1. Перейди на `/auth/login`
|
||
2. Войди в систему
|
||
|
||
### Шаг 2: Новый опросник v4.0
|
||
1. Перейди в **"Маркетинг"** (`/marketing-analysis`)
|
||
2. Выбери **"Маркетинговый анализ v4.0 (новый)"** — первый пункт в меню
|
||
3. Или перейди напрямую на `/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.0
|
||
- `GET /api/v3/marketing-analysis/{id}` — получение статуса и результатов
|
||
|
||
**Важно:** Убедись, что на бэкенде эти эндпоинты реализованы и возвращают:
|
||
- `POST` → `{ analysisId: string }`
|
||
- `GET` → `MarketingAnalysisV3Document` с полями `status`, `resultData`, `errorMessage`
|
||
|
||
---
|
||
|
||
## 🎯 Особенности
|
||
|
||
### Дизайн
|
||
- ✨ Премиальные карточки для выбора (Radio Cards)
|
||
- 🎭 Плавные анимации переходов между шагами
|
||
- 📊 Прогресс-бар с градиентом
|
||
- ✅ Индикаторы шагов с галочками
|
||
|
||
### Функционал
|
||
- 🔄 Автоматический поллинг статуса анализа
|
||
- ✅ Валидация формы перед отправкой
|
||
- 🏙️ Динамические поля для городов и ссылок
|
||
- 🔢 Ограничения на выбор (max 2 для некоторых полей)
|
||
|
||
### Казахстанский контекст
|
||
- 🇰🇿 Примеры городов: Алматы, Астана, Шымкент, Караганда, Актобе
|
||
- 📱 Примеры ниш: стоматология в Алматы, клиники
|
||
- 🔗 Примеры ссылок: Instagram профили, 2ГИС
|
||
|
||
---
|
||
|
||
## 🐛 Если что-то не работает
|
||
|
||
1. **Ошибки компиляции:**
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
2. **Ошибки API:**
|
||
- Проверь, что бэкенд запущен
|
||
- Проверь URL в `src/config/api.js`
|
||
- Убедись, что эндпоинты `/api/v3/marketing-analysis/*` реализованы
|
||
|
||
3. **Компоненты не отображаются:**
|
||
- Проверь консоль браузера
|
||
- Убедись, что все компоненты правильно импортированы
|
||
|
||
---
|
||
|
||
Готово! Теперь можно тестировать. 🎉
|