# Новостной интерфейс для KonturAI

Этот модуль реализует полноценный интерфейс для работы с новостным парсером согласно API документации.

## 🚀 Возможности

### 📰 Лента новостей (`/news`)

-   **Отображение новостей** с заголовком, источником, датой и превью текста
-   **Пагинация** с поддержкой "бесконечной прокрутки" и классической пагинации
-   **Сортировка** по дате публикации, дате добавления, заголовку и источнику
-   **Фильтрация** по источнику и датам
-   **Быстрые фильтры** (сегодня, неделя, месяц)
-   **Статистика** на странице с количеством новостей и активных фильтров

### 📊 Дашборд статистики (`/news/dashboard`)

-   **Общая статистика** с количеством новостей, источников и средним количеством на источник
-   **Статус системы** с проверкой состояния сервиса и MongoDB
-   **Круговая диаграмма** распределения новостей по источникам
-   **Детальная статистика** по каждому источнику

### ⚙️ Админ-панель (`/admin/news`)

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

### 📄 Детальный просмотр новости (`/news/:id`)

-   **Полный текст** новости с форматированием
-   **Аналитика** (краткое содержание, тональность, теги, сущности)
-   **Техническая информация** (ID, URL, хеш, даты)
-   **Действия** (открыть оригинал, поделиться, вернуться)

## 🛠 Технические детали

### Структура файлов

```
src/
├── service/
│   └── NewsService.js          # Сервис для работы с API
├── config/
│   └── api.js                  # Конфигурация API
├── components/news/
│   └── NewsFilters.vue         # Компонент фильтров
└── views/news/
    ├── NewsList.vue            # Лента новостей
    ├── NewsDashboard.vue       # Дашборд статистики
    ├── NewsAdmin.vue           # Админ-панель
    └── NewsDetail.vue          # Детальный просмотр
```

### API Endpoints

-   `GET /api/parser/items` - получение новостей с фильтрацией и пагинацией
-   `GET /api/parser/stats` - статистика системы
-   `GET /api/parser/health` - статус сервиса
-   `GET /api/parser/health/mongodb` - статус MongoDB
-   `POST /api/parser/parse/all` - запуск парсинга всех источников
-   `POST /api/parser/parse/{source}` - запуск парсинга конкретного источника

### Конфигурация

Создайте файл `.env` в корне проекта:

```env
VUE_APP_API_URL=https://api.konturai.kz
```

## 🎨 UI/UX особенности

### Дизайн

-   **Современный интерфейс** с использованием PrimeVue компонентов
-   **Адаптивная верстка** для всех устройств
-   **Цветовая схема** с интуитивными индикаторами статуса
-   **Анимации и переходы** для улучшения пользовательского опыта

### Интерактивность

-   **Hover эффекты** на карточках новостей
-   **Загрузочные индикаторы** для всех асинхронных операций
-   **Уведомления** об успешных операциях и ошибках
-   **Tooltips** для дополнительной информации

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

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

## 🔧 Настройка и запуск

1. **Установите зависимости:**

    ```bash
    npm install
    ```

2. **Настройте API URL:**

    ```bash
    echo "VUE_APP_API_URL=http://your-api-server:8080" > .env
    ```

3. **Запустите в режиме разработки:**

    ```bash
    npm run dev
    ```

4. **Соберите для продакшена:**
    ```bash
    npm run build
    ```

## 📱 Навигация

### Основное меню

-   **Home** → New Dashboard
-   **Новости** → Лента новостей, Статистика
-   **Admin** → Users, Управление парсером

### Маршруты

-   `/news` - лента новостей
-   `/news/dashboard` - статистика
-   `/news/:id` - детальный просмотр новости
-   `/admin/news` - управление парсером

## 🎯 Особенности реализации

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

-   **Источник**: выпадающий список с динамической загрузкой
-   **Даты**: календарь с поддержкой диапазонов
-   **Сортировка**: поле и направление
-   **Размер страницы**: 10, 20, 50, 100 новостей

### Пагинация

-   **Классическая**: кнопки страниц с информацией
-   **Бесконечная**: кнопка "Загрузить еще"
-   **Навигация**: первая, предыдущая, следующая, последняя

### Обработка ошибок

-   **Graceful degradation** при недоступности API
-   **Информативные сообщения** об ошибках
-   **Retry механизмы** для критических операций

### Аналитика

-   **Chart.js** для визуализации данных
-   **Цветовое кодирование** источников
-   **Процентное соотношение** в статистике

## 🔮 Планы развития

-   [ ] **WebSocket** для обновлений в реальном времени
-   [ ] **Поиск** по содержимому новостей
-   [ ] **Избранное** и закладки
-   [ ] **Экспорт** данных в различных форматах
-   [ ] **Уведомления** о новых новостях
-   [ ] **Темная тема** интерфейса
-   [ ] **Мобильное приложение** на базе Capacitor

## 📞 Поддержка

При возникновении проблем:

1. Проверьте конфигурацию API URL
2. Убедитесь, что бэкенд сервис запущен
3. Проверьте консоль браузера на наличие ошибок
4. Обратитесь к документации API

---

**Создано с ❤️ для эффективной работы с новостными данными**