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`
|
||
|
||
Легко! 🎉
|