very first commit
This commit is contained in:
sdarbinyan
166
docs/СХЕМА_РАБОТЫ.md
Normal file
166
docs/СХЕМА_РАБОТЫ.md
Normal file
@@ -0,0 +1,166 @@
|
||||
# 🎯 Визуальная схема: Как работает мультибрендинг
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ ЗАПУСК ПРИЛОЖЕНИЯ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
├──────────────┬──────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌──────────────┐ ┌──────────┐ ┌─────────────┐
|
||||
│ 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`
|
||||
|
||||
Легко! 🎉
|
||||
Reference in New Issue
Block a user