# Архитектура новостного интерфейса

## Схема компонентов

```
┌─────────────────────────────────────────────────────────────────┐
│                        Vue.js Frontend                         │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │   NewsList      │  │ NewsDashboard   │  │   NewsAdmin     │  │
│  │   (Лента)       │  │  (Статистика)   │  │  (Управление)   │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
│           │                     │                     │          │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │  NewsFilters    │  │   NewsDetail    │  │   NewsService   │  │
│  │  (Фильтры)      │  │  (Детали)       │  │   (API слой)    │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                    News Parser API                             │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │  GET /items     │  │  GET /stats     │  │  GET /health    │  │
│  │  (Новости)      │  │  (Статистика)   │  │  (Статус)       │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │ POST /parse/all │  │POST /parse/{id} │  │GET /health/mongo│  │
│  │ (Парсинг всех)  │  │ (Парсинг по ID) │  │ (Статус БД)     │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                      MongoDB Database                          │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │   News Items    │  │   Statistics    │  │   Health Logs   │  │
│  │   (Новости)     │  │  (Статистика)   │  │   (Логи)        │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
```

## Поток данных

### 1. Загрузка новостей

```
User → NewsList → NewsService → API → MongoDB
                ← NewsFilters ←
```

### 2. Фильтрация

```
User → NewsFilters → NewsList → NewsService → API (с параметрами)
```

### 3. Статистика

```
User → NewsDashboard → NewsService → API → MongoDB
```

### 4. Управление парсером

```
User → NewsAdmin → NewsService → API → Parser Service → MongoDB
```

## Структура данных

### NewsItem

```javascript
{
  id: string,
  sourceName: string,
  title: string,
  url: string,
  publishedAt: string,
  addedAt: string,
  rawText: string,
  hash: string,
  category: string,
  analytics: {
    summary: string,
    sentiment: string,
    tags: string[],
    entities: object
  }
}
```

### API Response

```javascript
{
  success: boolean,
  message: string,
  data: {
    content: NewsItem[],
    pageable: object,
    totalElements: number,
    totalPages: number,
    last: boolean,
    first: boolean,
    numberOfElements: number
  }
}
```

## Технологический стек

### Frontend

-   **Vue 3** - основной фреймворк
-   **PrimeVue** - UI компоненты
-   **Tailwind CSS** - стилизация
-   **Chart.js** - графики и диаграммы
-   **Vue Router** - маршрутизация

### Backend API

-   **REST API** - HTTP эндпоинты
-   **JSON** - формат данных
-   **MongoDB** - база данных

### Инструменты разработки

-   **Vite** - сборщик
-   **ESLint** - линтер
-   **Prettier** - форматирование

## Принципы архитектуры

### 1. Разделение ответственности

-   **Компоненты** - только UI логика
-   **Сервисы** - работа с API
-   **Конфигурация** - настройки

### 2. Переиспользование

-   **NewsService** - единая точка доступа к API
-   **NewsFilters** - переиспользуемый компонент
-   **Конфигурация** - централизованные настройки

### 3. Производительность

-   **Ленивая загрузка** - компоненты загружаются по требованию
-   **Кэширование** - данные статистики кэшируются
-   **Оптимизация** - минимальные API запросы

### 4. Масштабируемость

-   **Модульная структура** - легко добавлять новые функции
-   **Конфигурируемость** - настройки через переменные окружения
-   **Расширяемость** - простое добавление новых источников

## Безопасность

### 1. Валидация данных

-   **Проверка ответов API** - всегда проверяется поле `success`
-   **Обработка ошибок** - graceful degradation
-   **Санитизация** - очистка пользовательского ввода

### 2. Аутентификация

-   **Требуется авторизация** - все маршруты защищены
-   **Роли пользователей** - админ функции только для админов

### 3. CORS

-   **Настройка CORS** - на уровне API сервера
-   **Безопасные запросы** - только к настроенному API

## Мониторинг и отладка

### 1. Логирование

-   **Консольные логи** - для разработки
-   **Обработка ошибок** - централизованная система

### 2. Метрики

-   **Статистика загрузки** - количество запросов
-   **Время отклика** - производительность API
-   **Статус системы** - мониторинг здоровья

### 3. Отладка

-   **DevTools** - инструменты разработчика
-   **Network tab** - мониторинг запросов
-   **Console** - логи и ошибки