diff --git a/src/App.vue b/src/App.vue index 45651ee..4a91d97 100644 --- a/src/App.vue +++ b/src/App.vue @@ -63,6 +63,18 @@ + + +
+ +
@@ -72,10 +84,16 @@ import { ref, watch, onMounted, computed, onUnmounted } from 'vue'; import { useRoute } from 'vue-router'; import api from '@/services/api'; import { getSocket, connectSocket } from '@/services/socketService'; +import Toast from '@/components/Toast.vue'; +import toastService from '@/services/toastService'; const { user, isAuthenticated, logout, fetchUser } = useAuth(); const route = useRoute(); +// Импортируем уведомления из сервиса +const toasts = toastService.toasts; +const removeToast = toastService.remove; + const userData = ref(null); const authState = ref(false); const conversations = ref([]); @@ -270,6 +288,22 @@ body { will-change: transform; /* Ускорение для анимаций */ } +/* Контейнер для уведомлений */ +.toast-list { + position: fixed; + top: 20px; + right: 20px; + z-index: 2000; + display: flex; + flex-direction: column; + gap: 10px; + pointer-events: none; +} + +.toast-list > * { + pointer-events: auto; +} + #app-container { display: flex; flex-direction: column; diff --git a/src/components/Toast.vue b/src/components/Toast.vue new file mode 100644 index 0000000..198fb16 --- /dev/null +++ b/src/components/Toast.vue @@ -0,0 +1,117 @@ + + + + + \ No newline at end of file diff --git a/src/services/toastService.js b/src/services/toastService.js new file mode 100644 index 0000000..2317990 --- /dev/null +++ b/src/services/toastService.js @@ -0,0 +1,48 @@ +// Простой сервис для отображения всплывающих уведомлений +import { ref, reactive } from 'vue'; + +const toasts = reactive([]); +let toastId = 0; + +// Добавление нового уведомления +const add = (message, type = 'info', duration = 3000) => { + const id = toastId++; + toasts.push({ id, message, type, duration }); + + // Автоматически убираем уведомление через duration + 300ms анимации + setTimeout(() => { + remove(id); + }, duration + 300); + + return id; +}; + +// Удаление уведомления по ID +const remove = (id) => { + const index = toasts.findIndex(toast => toast.id === id); + if (index > -1) { + toasts.splice(index, 1); + } +}; + +// Показ информационного уведомления +const info = (message, duration) => add(message, 'info', duration); + +// Показ уведомления об успехе +const success = (message, duration) => add(message, 'success', duration); + +// Показ предупреждения +const warning = (message, duration) => add(message, 'warning', duration); + +// Показ уведомления об ошибке +const error = (message, duration) => add(message, 'error', duration); + +export default { + toasts, + add, + remove, + info, + success, + warning, + error +}; \ No newline at end of file diff --git a/src/views/admin/AdminUserDetail.vue b/src/views/admin/AdminUserDetail.vue index 7ba9814..45d8679 100644 --- a/src/views/admin/AdminUserDetail.vue +++ b/src/views/admin/AdminUserDetail.vue @@ -142,6 +142,7 @@ import { ref, onMounted, computed } from 'vue'; import { useRouter, useRoute } from 'vue-router'; import axios from 'axios'; +import toastService from '@/services/toastService'; export default { name: 'AdminUserDetail', @@ -214,11 +215,12 @@ export default { // Обновляем статус пользователя user.value.isActive = response.data.isActive; - // Показываем уведомление (можно добавить компонент уведомлений) - alert(response.data.message); + // Заменяем alert на уведомление через сервис + const actionType = user.value.isActive ? 'success' : 'warning'; + toastService.add(response.data.message, actionType, 3000); } catch (err) { console.error('Ошибка при изменении статуса пользователя:', err); - alert('Ошибка при изменении статуса пользователя'); + toastService.error('Ошибка при изменении статуса пользователя'); } finally { loading.value = false; } diff --git a/src/views/admin/AdminUsers.vue b/src/views/admin/AdminUsers.vue index 58f74cf..26c5389 100644 --- a/src/views/admin/AdminUsers.vue +++ b/src/views/admin/AdminUsers.vue @@ -167,6 +167,7 @@ import { ref, onMounted } from 'vue'; import { useRouter } from 'vue-router'; import axios from 'axios'; +import toastService from '@/services/toastService'; export default { name: 'AdminUsers', @@ -270,11 +271,12 @@ export default { users.value[userIndex].isActive = response.data.isActive; } - // Показываем уведомление (можно добавить компонент уведомлений) - alert(response.data.message); + // Заменяем стандартный alert на наш сервис уведомлений + const type = response.data.isActive ? 'success' : 'warning'; + toastService.add(response.data.message, type, 3000); } catch (err) { console.error('Ошибка при изменении статуса пользователя:', err); - alert('Ошибка при изменении статуса пользователя'); + toastService.error('Ошибка при изменении статуса пользователя'); } finally { loading.value = false; }