184 lines
7.8 KiB
Markdown
184 lines
7.8 KiB
Markdown
# Новостной интерфейс для 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
|
||
|
||
---
|
||
|
||
**Создано с ❤️ для эффективной работы с новостными данными**
|