VC-HB3-Accelerator/DLE
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
888873f6304f29a6bf598553ed445b754bf31de1
DLE/docs/FRONTEND_ARCHITECTURE.md

5.4 KiB
Raw Blame History

Архитектура фронтенда DLE

📁 Структура сервисов

🎯 Принцип разделения ответственности

Каждый сервис отвечает за свою область функциональности:

services/
├── dleV2Service.js      - Основные функции DLE (создание, чтение, управление)
├── modulesService.js    - Управление модулями DLE
├── proposalsService.js  - Управление предложениями и голосованием
├── tokensService.js     - Работа с токенами и балансами
├── analyticsService.js  - Аналитические данные и статистика
├── multichainService.js - Мультичейн функциональность
└── index.js            - Индексный файл для удобного импорта

🔧 Использование сервисов

Импорт отдельных сервисов:

import { getDLEInfo } from '@/services/dleV2Service.js';
import { createAddModuleProposal } from '@/services/modulesService.js';
import { createProposal } from '@/services/proposalsService.js';
import { getTokenBalance } from '@/services/tokensService.js';

Импорт через индексный файл:

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. ✅ Поддержка - простое исправление ошибок и добавление функций