ваше сообщение коммита

2025-04-30 14:31:48 +03:00
parent 3734bea350
commit 01f96a9b80
9 changed files with 1089 additions and 1307 deletions
--- a/frontend/src/components/NotificationDisplay.vue
+++ b/frontend/src/components/NotificationDisplay.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="notification-container">
+    <transition name="fade">
+      <div v-if="notifications.showSuccess" class="notification success">
+        <span class="icon">✅</span>
+        <span class="message">{{ notifications.successMessage }}</span>
+        <!-- <button @click="hideSuccess" class="close-btn">&times;</button> -->
+      </div>
+    </transition>
+    <transition name="fade">
+      <div v-if="notifications.showError" class="notification error">
+        <span class="icon">❌</span>
+        <span class="message">{{ notifications.errorMessage }}</span>
+        <!-- <button @click="hideError" class="close-btn">&times;</button> -->
+      </div>
+    </transition>
+    <!-- Можно добавить info/warning по аналогии -->
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+// Если нужна возможность закрывать вручную, импортируем useNotifications и используем hide* функции
+// import { useNotifications } from '../composables/useNotifications'; 
+
+const props = defineProps({
+  notifications: {
+    type: Object,
+    required: true,
+    default: () => ({
+      successMessage: '',
+      showSuccess: false,
+      errorMessage: '',
+      showError: false,
+    })
+  }
+});
+
+// Пример, если нужно закрытие вручную
+// const { hideSuccessMessage, hideErrorMessage } = useNotifications();
+// const hideSuccess = () => { hideSuccessMessage(); };
+// const hideError = () => { hideErrorMessage(); };
+
+</script>
+
+<style scoped>
+.notification-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  padding: 12px 18px;
+  border-radius: var(--radius-md, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  color: var(--color-white, #fff);
+  min-width: 250px;
+  max-width: 400px; /* Ограничиваем ширину */
+  word-wrap: break-word; /* Перенос длинных слов */
+}
+
+.notification.success {
+  background-color: var(--color-success, #4CAF50);
+}
+
+.notification.error {
+  background-color: var(--color-danger, #f44336);
+}
+
+.icon {
+  margin-right: 10px;
+  font-size: 1.2em;
+}
+
+.message {
+  flex-grow: 1;
+}
+
+/* Анимация появления/исчезновения */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* Стили для кнопки закрытия (если нужна) */
+/*
+.close-btn {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 1.2em;
+  cursor: pointer;
+  padding: 0 0 0 10px;
+  opacity: 0.7;
+}
+.close-btn:hover {
+  opacity: 1;
+}
+*/
+</style>