digiops/marketing

Fork 0

Files

T

root 13b613e191 news

2025-09-15 09:31:51 +05:00

7.8 KiB

Raw Blame History

Новостной интерфейс для 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 в корне проекта:

VUE_APP_API_URL=https://api.konturai.kz

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

Дизайн

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

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

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

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

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

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

Установите зависимости:
```
npm install
```

Настройте API URL:

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

Запустите в режиме разработки:
```
npm run dev
```
Соберите для продакшена:
```
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

📞 Поддержка

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

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

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

7.8 KiB Raw Blame History Unescape Escape