111 lines
5.4 KiB
Markdown
111 lines
5.4 KiB
Markdown
# Архитектура фронтенда DLE
|
||
|
||
## 📁 Структура сервисов
|
||
|
||
### 🎯 Принцип разделения ответственности
|
||
|
||
Каждый сервис отвечает за свою область функциональности:
|
||
|
||
```
|
||
services/
|
||
├── dleV2Service.js - Основные функции DLE (создание, чтение, управление)
|
||
├── modulesService.js - Управление модулями DLE
|
||
├── proposalsService.js - Управление предложениями и голосованием
|
||
├── tokensService.js - Работа с токенами и балансами
|
||
├── analyticsService.js - Аналитические данные и статистика
|
||
├── multichainService.js - Мультичейн функциональность
|
||
└── index.js - Индексный файл для удобного импорта
|
||
```
|
||
|
||
### 🔧 Использование сервисов
|
||
|
||
#### Импорт отдельных сервисов:
|
||
```javascript
|
||
import { getDLEInfo } from '@/services/dleV2Service.js';
|
||
import { createAddModuleProposal } from '@/services/modulesService.js';
|
||
import { createProposal } from '@/services/proposalsService.js';
|
||
import { getTokenBalance } from '@/services/tokensService.js';
|
||
```
|
||
|
||
#### Импорт через индексный файл:
|
||
```javascript
|
||
import {
|
||
getDLEInfo,
|
||
createAddModuleProposal,
|
||
createProposal,
|
||
getTokenBalance
|
||
} from '@/services/index.js';
|
||
```
|
||
|
||
## 📄 Страницы управления DLE
|
||
|
||
### 🎨 Компоненты страниц:
|
||
|
||
| Страница | Файл | Используемые сервисы | Описание |
|
||
|----------|------|---------------------|----------|
|
||
| **Модули** | `ModulesView.vue` | `modulesService.js` | Управление модулями DLE |
|
||
| **Предложения** | `DleProposalsView.vue` | `proposalsService.js` | Управление предложениями |
|
||
| **Токены** | `TokensView.vue` | `tokensService.js` | Работа с токенами |
|
||
| **Кворум** | `QuorumView.vue` | `proposalsService.js` | Настройки голосования |
|
||
| **Аналитика** | `AnalyticsView.vue` | `analyticsService.js` | Аналитические данные |
|
||
| **История** | `HistoryView.vue` | `dleV2Service.js` | История операций |
|
||
| **Настройки** | `SettingsView.vue` | `dleV2Service.js` | Настройки DLE |
|
||
| **Управление DLE** | `DleManagementView.vue` | - | Добавление DLE в список |
|
||
|
||
## 🔄 Архитектурные принципы
|
||
|
||
### 1. **Разделение ответственности**
|
||
- Каждый сервис отвечает за свою область
|
||
- Функции не дублируются между сервисами
|
||
- Четкие границы между модулями
|
||
|
||
### 2. **Единообразие API**
|
||
- Все сервисы используют одинаковый формат ответов
|
||
- Единообразная обработка ошибок
|
||
- Консистентные названия функций
|
||
|
||
### 3. **Простота использования**
|
||
- Интуитивно понятные названия функций
|
||
- Подробная документация JSDoc
|
||
- Примеры использования
|
||
|
||
### 4. **Масштабируемость**
|
||
- Легко добавлять новые функции
|
||
- Простое тестирование отдельных модулей
|
||
- Возможность переиспользования
|
||
|
||
## 🛠️ Утилиты
|
||
|
||
### `dle-contract.js`
|
||
Используется только для транзакций через MetaMask:
|
||
- Создание предложений
|
||
- Голосование
|
||
- Исполнение предложений
|
||
- Деактивация DLE
|
||
|
||
### `utils/websocket.js`
|
||
Для real-time обновлений:
|
||
- Уведомления о новых предложениях
|
||
- Обновления статуса голосования
|
||
- Синхронизация данных
|
||
|
||
## 📊 Статистика кода
|
||
|
||
| Сервис | Строк | Функций | Описание |
|
||
|--------|-------|---------|----------|
|
||
| `dleV2Service.js` | 220 | 8 | Основные функции DLE |
|
||
| `modulesService.js` | 298 | 5 | Управление модулями |
|
||
| `proposalsService.js` | 264 | 12 | Управление предложениями |
|
||
| `tokensService.js` | 72 | 3 | Работа с токенами |
|
||
| `analyticsService.js` | 320 | 16 | Аналитические данные |
|
||
| `multichainService.js` | 353 | 18 | Мультичейн функциональность |
|
||
|
||
## 🚀 Преимущества новой архитектуры
|
||
|
||
1. **✅ Читаемость** - код легко понять и поддерживать
|
||
2. **✅ Тестируемость** - каждый сервис можно тестировать отдельно
|
||
3. **✅ Переиспользование** - функции можно использовать в разных компонентах
|
||
4. **✅ Масштабируемость** - легко добавлять новые функции
|
||
5. **✅ Производительность** - загрузка только нужных модулей
|
||
6. **✅ Поддержка** - простое исправление ошибок и добавление функций
|