10 KiB
10 KiB
🎯 Визуальная схема: Как работает мультибрендинг
┌─────────────────────────────────────────────────────────┐
│ ЗАПУСК ПРИЛОЖЕНИЯ │
└─────────────────────────────────────────────────────────┘
│
├──────────────┬──────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌──────────┐ ┌─────────────┐
│ 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) 🆕
🚀 Команды и их эффект:
# Команда 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"):
- Создать
environment.blue.tsиenvironment.blue.production.ts - Создать
blue.theme.scssс синими цветами - Добавить конфигурации в
angular.json - Добавить скрипты в
package.json - Готово!
npm run start:blue
Легко! 🎉