245 lines
11 KiB
Markdown
245 lines
11 KiB
Markdown
# Новые функции: Сессии, QR-авторизация и улучшенные тикеты
|
||
|
||
## 📋 Что было сделано
|
||
|
||
### ✅ Backend
|
||
|
||
1. **Система управления сессиями**
|
||
- Новая таблица `session` для хранения JWT refresh tokens
|
||
- Отслеживание: IP, user-agent, устройство, браузер, геолокация
|
||
- Лимит: максимум 10 сессий на пользователя
|
||
- Автоматическое удаление старых сессий (30 дней)
|
||
- API endpoints:
|
||
- `GET /api/sessions` - список всех активных сессий
|
||
- `GET /api/sessions/history` - история входов
|
||
- `DELETE /api/sessions/:id` - завершить конкретную сессию
|
||
- `DELETE /api/sessions/others/all` - завершить все остальные сессии
|
||
|
||
2. **QR-авторизация (как в Telegram Web)**
|
||
- Новая таблица `qr_login_request`
|
||
- Генерация уникальных QR-кодов (crypto-based)
|
||
- Время жизни: 60 секунд
|
||
- Polling механизм для проверки статуса (каждые 2 сек)
|
||
- API endpoints:
|
||
- `POST /api/qr-auth/generate` - создать QR-код (публичный)
|
||
- `GET /api/qr-auth/status/:code` - проверить статус (публичный, polling)
|
||
- `POST /api/qr-auth/confirm` - подтвердить вход с мобильного (требует авторизации)
|
||
- `POST /api/qr-auth/reject` - отклонить вход (требует авторизации)
|
||
|
||
3. **Улучшенная система тикетов**
|
||
- Новые поля в таблице `ticket`:
|
||
- `priority` (low/normal/high/urgent)
|
||
- `category` (general/technical/billing/other)
|
||
- `assignedTo` (оператор, которому назначен тикет)
|
||
- `closedAt` (дата закрытия)
|
||
- Новые таблицы:
|
||
- `ticket_attachment` - файлы к тикетам
|
||
- `response_attachment` - файлы к ответам
|
||
- Новое поле в `response`:
|
||
- `isInternal` - внутренние комментарии для операторов
|
||
- Поддержка файлов: max 5 файлов по 10MB (jpeg/png/gif/pdf/doc/txt/zip)
|
||
- Статусы: open → in_progress → awaiting_reply → resolved → closed
|
||
- API endpoints:
|
||
- `GET /api/ticket/:id` - получить один тикет
|
||
- `POST /api/ticket/status` - изменить статус (только операторы)
|
||
- `POST /api/ticket/assign` - назначить оператора (только операторы)
|
||
- Обновлены существующие endpoints для поддержки новых полей
|
||
|
||
### ✅ Frontend
|
||
|
||
1. **Страница управления сессиями**
|
||
- Путь: `/dashboard/settings/sessions`
|
||
- Компонент: `frontend/src/pages/dashboard/settings/sessions.tsx`
|
||
- Функции:
|
||
- Список всех активных сессий с карточками
|
||
- Текущая сессия выделена зелёным
|
||
- Информация: устройство, браузер, IP, геолокация, последняя активность
|
||
- Кнопка "Завершить сессию" на каждой карточке
|
||
- Кнопка "Завершить все остальные сессии"
|
||
- Раздел истории входов (последние 20 попыток)
|
||
- Советы по безопасности
|
||
|
||
2. **Компонент QR-авторизации**
|
||
- Путь: `frontend/src/components/QRLogin.tsx`
|
||
- Функции:
|
||
- Генерация и отображение QR-кода
|
||
- Таймер обратного отсчёта (60 секунд)
|
||
- Автообновление истёкшего QR
|
||
- Polling статуса каждые 2 секунды
|
||
- Автоматический вход при подтверждении
|
||
- Инструкции для пользователя
|
||
- TODO: Интегрировать на страницу `/login` как альтернативу паролю
|
||
|
||
3. **Новая страница списка тикетов**
|
||
- Путь: `/dashboard/tickets-new`
|
||
- Компонент: `frontend/src/pages/dashboard/tickets/index.tsx`
|
||
- Функции:
|
||
- Современный card-дизайн
|
||
- Фильтры по статусу, категории, приоритету
|
||
- Цветные бейджи статусов
|
||
- Индикаторы приоритета
|
||
- Иконки категорий
|
||
- Счётчик ответов
|
||
- Относительное время обновления
|
||
- Кнопка создания нового тикета
|
||
|
||
4. **Страница просмотра тикета**
|
||
- Путь: `/dashboard/tickets-new/:id`
|
||
- Компонент: `frontend/src/pages/dashboard/tickets/detail.tsx`
|
||
- Функции:
|
||
- Полная информация о тикете
|
||
- История ответов в хронологическом порядке
|
||
- Внутренние комментарии (жёлтый фон, только операторы)
|
||
- Форма добавления нового ответа
|
||
- Кнопка закрытия тикета
|
||
- Бейджи статуса и приоритета
|
||
- Аватары пользователей
|
||
|
||
5. **Страница создания тикета**
|
||
- Путь: `/dashboard/tickets/new`
|
||
- Компонент: `frontend/src/pages/dashboard/tickets/new.tsx`
|
||
- Функции:
|
||
- Форма с полями: тема, категория, приоритет, описание
|
||
- Валидация полей
|
||
- Советы по созданию тикетов
|
||
- Перенаправление на созданный тикет
|
||
|
||
## 📁 Структура файлов
|
||
|
||
### Backend
|
||
```
|
||
backend/
|
||
├── src/
|
||
│ ├── index.ts (добавлены новые routes)
|
||
│ └── modules/
|
||
│ ├── session/
|
||
│ │ ├── session.controller.ts (NEW)
|
||
│ │ └── session.routes.ts (NEW)
|
||
│ ├── qr-auth/
|
||
│ │ ├── qr-auth.controller.ts (NEW)
|
||
│ │ └── qr-auth.routes.ts (NEW)
|
||
│ └── ticket/
|
||
│ ├── ticket.controller.ts (REWRITTEN)
|
||
│ └── ticket.routes.ts (UPDATED)
|
||
├── prisma/
|
||
│ ├── schema.prisma (обновлена)
|
||
│ ├── apply-migration.ts (NEW - скрипт применения миграции)
|
||
│ └── migrations_manual/
|
||
│ └── add_sessions_qr_tickets_features.sql (NEW)
|
||
└── uploads/
|
||
└── tickets/ (NEW)
|
||
```
|
||
|
||
### Frontend
|
||
```
|
||
frontend/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ └── QRLogin.tsx (NEW)
|
||
│ └── pages/
|
||
│ └── dashboard/
|
||
│ ├── mainpage.tsx (добавлены routes)
|
||
│ ├── settings/
|
||
│ │ └── sessions.tsx (NEW)
|
||
│ └── tickets/
|
||
│ ├── index.tsx (NEW)
|
||
│ ├── detail.tsx (NEW)
|
||
│ └── new.tsx (NEW)
|
||
└── package.json (добавлен qrcode.react)
|
||
```
|
||
|
||
## 🔧 Технические детали
|
||
|
||
### База данных
|
||
- **Миграция применена**: ✅
|
||
- **Prisma client сгенерирован**: ✅
|
||
- **Новые таблицы**:
|
||
- `session` (10 столбцов)
|
||
- `login_history` (9 столбцов)
|
||
- `qr_login_request` (9 столбцов)
|
||
- `ticket_attachment` (7 столбцов)
|
||
- `response_attachment` (7 столбцов)
|
||
|
||
### Зависимости
|
||
- **Backend**: Без новых зависимостей (используются встроенные)
|
||
- **Frontend**:
|
||
- `qrcode.react` ✅ установлен
|
||
|
||
### Компиляция
|
||
- **Backend**: ✅ Собран без ошибок (`npm run build`)
|
||
- **Frontend**: ✅ Собран без ошибок (`npm run build`)
|
||
|
||
## 📝 TODO
|
||
|
||
### Осталось сделать:
|
||
|
||
1. **Интеграция QR-компонента на страницу входа** ⏳
|
||
- Добавить переключатель "Пароль / QR-код" на `/login`
|
||
- Импортировать компонент `QRLogin`
|
||
|
||
2. **Добавить ссылку на сессии в меню настроек** ⏳
|
||
- В сайдбаре дашборда добавить пункт "Сессии" в разделе настроек
|
||
|
||
3. **Тестирование** ⏳
|
||
- Проверить создание/просмотр/ответ на тикеты
|
||
- Проверить фильтры тикетов
|
||
- Проверить управление сессиями
|
||
- Протестировать QR-авторизацию (требуется мобильное приложение)
|
||
|
||
4. **Дополнительные улучшения (опционально)**:
|
||
- WebSocket для real-time обновлений тикетов
|
||
- Загрузка файлов в тикеты (multer настроен, нужен UI)
|
||
- Интеграция API геолокации (сейчас заглушка "Россия, Москва")
|
||
- Email-уведомления о новых ответах
|
||
- Push-уведомления для мобильных устройств
|
||
|
||
## 🚀 Деплой
|
||
|
||
### Backend:
|
||
```bash
|
||
cd backend
|
||
npm run build
|
||
# Перезапустить PM2 или сервер
|
||
pm2 reload ecosystem.config.js
|
||
```
|
||
|
||
### Frontend:
|
||
```bash
|
||
cd frontend
|
||
npm run build
|
||
# Скопировать dist/ на production сервер
|
||
```
|
||
|
||
## 🔗 API Endpoints
|
||
|
||
### Сессии
|
||
- `GET /api/sessions` - Список активных сессий
|
||
- `GET /api/sessions/history?limit=20` - История входов
|
||
- `DELETE /api/sessions/:id` - Завершить сессию
|
||
- `DELETE /api/sessions/others/all` - Завершить все остальные
|
||
|
||
### QR-авторизация
|
||
- `POST /api/qr-auth/generate` - Сгенерировать QR
|
||
- `GET /api/qr-auth/status/:code` - Проверить статус
|
||
- `POST /api/qr-auth/confirm` - Подтвердить вход
|
||
- `POST /api/qr-auth/reject` - Отклонить вход
|
||
|
||
### Тикеты (новые/обновлённые)
|
||
- `GET /api/ticket/:id` - Получить один тикет
|
||
- `POST /api/ticket/status` - Изменить статус
|
||
- `POST /api/ticket/assign` - Назначить оператора
|
||
|
||
## 📱 Мобильное приложение
|
||
|
||
Для полноценной работы QR-авторизации требуется мобильное приложение, которое:
|
||
1. Умеет сканировать QR-коды
|
||
2. Может отправить POST запрос на `/api/qr-auth/confirm` с кодом
|
||
3. Передаёт авторизационный токен пользователя
|
||
|
||
Формат QR-кода: `ospabhost://qr-login?code={уникальный_код}`
|
||
|
||
---
|
||
|
||
**Дата создания**: 9 ноября 2025
|
||
**Статус**: Backend ✅ | Frontend ✅ | Тестирование ⏳
|