167 lines
10 KiB
Markdown
167 lines
10 KiB
Markdown
|
# 🎯 Визуальная схема: Как работает мультибрендинг
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────────────────────────┐
|
|||
|
|
│ ЗАПУСК ПРИЛОЖЕНИЯ │
|
|||
|
|
└─────────────────────────────────────────────────────────┘
|
|||
|
|
│
|
|||
|
|
├──────────────┬──────────────┐
|
|||
|
|
│ │ │
|
|||
|
|
▼ ▼ ▼
|
|||
|
|
┌──────────────┐ ┌──────────┐ ┌─────────────┐
|
|||
|
|
│ ng serve │ │ng serve │ │ ng build │
|
|||
|
|
│ │ │ --config │ │ --config │
|
|||
|
|
│ (Dexar Dev) │ │ novo │ │novo-product.│
|
|||
|
|
└──────────────┘ └──────────┘ └─────────────┘
|
|||
|
|
│ │ │
|
|||
|
|
▼ ▼ ▼
|
|||
|
|
┌───────────────────────────────────────────────┐
|
|||
|
|
│ ANGULAR.JSON выбирает: │
|
|||
|
|
│ • Какой environment.ts использовать │
|
|||
|
|
│ • Какую тему (SCSS) подключить │
|
|||
|
|
│ • Куда сохранить сборку (dist/) │
|
|||
|
|
└───────────────────────────────────────────────┘
|
|||
|
|
│ │ │
|
|||
|
|
▼ ▼ ▼
|
|||
|
|
┌────────────────────┐ ┌─────────────┐ ┌──────────────┐
|
|||
|
|
│ environment.ts │ │environment. │ │environment. │
|
|||
|
|
│ (Dexar) │ │ novo.ts │ │novo.prod.ts │
|
|||
|
|
│ │ │ (novo) │ │ (novo Prod) │
|
|||
|
|
│ • brandName │ │• brandName │ │• brandName │
|
|||
|
|
│ • apiUrl │ │• apiUrl │ │• apiUrl │
|
|||
|
|
│ • theme: 'dexar' │ │• theme:novo │ │• theme: novo │
|
|||
|
|
│ • colors: purple │ │• colors: │ │• colors: │
|
|||
|
|
│ • email │ │ green 🟢 │ │ green 🟢 │
|
|||
|
|
└────────────────────┘ └─────────────┘ └──────────────┘
|
|||
|
|
│ │ │
|
|||
|
|
▼ ▼ ▼
|
|||
|
|
┌───────────────────────────────────────────────┐
|
|||
|
|
│ ТЕМА (SCSS) загружается: │
|
|||
|
|
│ • dexar.theme.scss → фиолетовый 🟣 │
|
|||
|
|
│ • novo.theme.scss → зеленый 🟢 │
|
|||
|
|
│ │
|
|||
|
|
│ CSS переменные устанавливаются: │
|
|||
|
|
│ --primary-color │
|
|||
|
|
│ --gradient-hero │
|
|||
|
|
│ --shadow-lg и т.д. │
|
|||
|
|
└───────────────────────────────────────────────┘
|
|||
|
|
│
|
|||
|
|
▼
|
|||
|
|
┌────────────────────────────────────────────────┐
|
|||
|
|
│ КОМПОНЕНТЫ читают данные: │
|
|||
|
|
│ │
|
|||
|
|
│ HeaderComponent │
|
|||
|
|
│ brandName = environment.brandFullName │
|
|||
|
|
│ → "Dexar Market" ИЛИ "novo Market" │
|
|||
|
|
│ │
|
|||
|
|
│ FooterComponent │
|
|||
|
|
│ brandName = environment.brandName │
|
|||
|
|
│ email = environment.contactEmail │
|
|||
|
|
│ │
|
|||
|
|
│ HomeComponent │
|
|||
|
|
│ brandName = environment.brandFullName │
|
|||
|
|
│ │
|
|||
|
|
│ ApiService │
|
|||
|
|
│ baseUrl = environment.apiUrl │
|
|||
|
|
│ → api.dexarmarket.ru ИЛИ api.novomarket.ru│
|
|||
|
|
└────────────────────────────────────────────────┘
|
|||
|
|
│
|
|||
|
|
▼
|
|||
|
|
┌─────────────────────────────────────────────────┐
|
|||
|
|
│ РЕЗУЛЬТАТ В БРАУЗЕРЕ: │
|
|||
|
|
│ │
|
|||
|
|
│ 🟣 DEXAR MARKET 🟢 novo MARKET │
|
|||
|
|
│ ──────────────── ───────────── │
|
|||
|
|
│ Название: Dexar Market Название: novo │
|
|||
|
|
│ Цвета: фиолетовый Цвета: зеленый │
|
|||
|
|
│ Hero: фиолетовый фон Hero: зеленый фон │
|
|||
|
|
│ Кнопки: #667eea Кнопки: #10b981 │
|
|||
|
|
│ API: dexarmarket.ru API: novomarket.ru │
|
|||
|
|
│ Email: info@dexarmarket Email: info@novo... │
|
|||
|
|
└─────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🔄 Поток данных:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
Команда запуска → angular.json → Environment файл → Тема (CSS) → Компоненты → Браузер
|
|||
|
|
│ │
|
|||
|
|
├── Переменные ├── CSS vars
|
|||
|
|
│ (JS) │ (SCSS)
|
|||
|
|
│ │
|
|||
|
|
└── brandName └── --primary-color
|
|||
|
|
apiUrl --gradient-hero
|
|||
|
|
email и т.д.
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎨 Цветовая схема:
|
|||
|
|
|
|||
|
|
### Dexar (Фиолетовый) 🟣:
|
|||
|
|
```
|
|||
|
|
Primary: #667eea ███████
|
|||
|
|
Secondary: #764ba2 ███████
|
|||
|
|
Accent: #f093fb ███████
|
|||
|
|
Gradient: #667eea → #764ba2
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### novo (Зеленый) 🟢:
|
|||
|
|
```
|
|||
|
|
Primary: #10b981 ███████
|
|||
|
|
Secondary: #14b8a6 ███████
|
|||
|
|
Accent: #34d399 ███████
|
|||
|
|
Gradient: #10b981 → #14b8a6
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📦 Структура файлов:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
Dexarmarket/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── environments/ ← Конфигурации брендов
|
|||
|
|
│ │ ├── environment.ts (Dexar Dev)
|
|||
|
|
│ │ ├── environment.production.ts (Dexar Prod)
|
|||
|
|
│ │ ├── environment.novo.ts (novo Dev) 🆕
|
|||
|
|
│ │ └── environment.novo.production.ts (novo Prod) 🆕
|
|||
|
|
│ │
|
|||
|
|
│ ├── styles/
|
|||
|
|
│ │ └── themes/ ← Цветовые темы
|
|||
|
|
│ │ ├── dexar.theme.scss (фиолетовый)
|
|||
|
|
│ │ └── novo.theme.scss (зеленый) 🆕
|
|||
|
|
│ │
|
|||
|
|
│ └── app/
|
|||
|
|
│ ├── components/ ← Используют environment
|
|||
|
|
│ │ ├── header/ (brandName)
|
|||
|
|
│ │ └── footer/ (brandName, email)
|
|||
|
|
│ ├── pages/
|
|||
|
|
│ │ └── home/ (brandName)
|
|||
|
|
│ └── services/
|
|||
|
|
│ └── api.service.ts (apiUrl)
|
|||
|
|
│
|
|||
|
|
├── angular.json ← Конфигурации сборки 🔧
|
|||
|
|
├── package.json ← NPM scripts 🔧
|
|||
|
|
│
|
|||
|
|
└── dist/ ← Результаты сборки
|
|||
|
|
├── dexarmarket/ (после build:dexar)
|
|||
|
|
└── novomarket/ (после build:novo) 🆕
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🚀 Команды и их эффект:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# Команда Environment Тема Порт Результат
|
|||
|
|
npm start → environment.ts → dexar.scss → 4200 → Dexar 🟣
|
|||
|
|
npm run start:novo → environment.novo.ts → novo.scss → 4201 → novo 🟢
|
|||
|
|
npm run build:dexar → environment.prod.ts → dexar.scss → dist/dexarmarket/
|
|||
|
|
npm run build:novo → environment.novo... → novo.scss → dist/novomarket/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 💡 Как добавить 3-й бренд (например "Blue Market"):
|
|||
|
|
|
|||
|
|
1. Создать `environment.blue.ts` и `environment.blue.production.ts`
|
|||
|
|
2. Создать `blue.theme.scss` с синими цветами
|
|||
|
|
3. Добавить конфигурации в `angular.json`
|
|||
|
|
4. Добавить скрипты в `package.json`
|
|||
|
|
5. Готово! `npm run start:blue`
|
|||
|
|
|
|||
|
|
Легко! 🎉
|