From d29ba1a164d8b0e93de9f797a7daac67cf392f96 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Mon, 26 May 2025 21:20:10 +0700
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/AdminReportDetail.vue | 401 ++++++++++++++++++--------
 1 file changed, 282 insertions(+), 119 deletions(-)

diff --git a/src/views/admin/AdminReportDetail.vue b/src/views/admin/AdminReportDetail.vue
index 2759fdb..dd33d4a 100644
--- a/src/views/admin/AdminReportDetail.vue
+++ b/src/views/admin/AdminReportDetail.vue
@@ -161,76 +161,104 @@
       </div>
     </div>
     
-    <!-- Модальное окно для рассмотрения жалобы -->
-    <div v-if="showResolveModal" class="modal-overlay">
-      <div class="modal">
-        <div class="modal-header">
-          <h3>Рассмотрение жалобы</h3>
-          <button @click="showResolveModal = false" class="modal-close">
-            <i class="bi-x"></i>
-          </button>
-        </div>
-        <div class="modal-content">
-          <p>Вы собираетесь отметить эту жалобу как рассмотренную.</p>
-          <div class="form-group">
-            <label>Заметки администратора (необязательно):</label>
-            <textarea 
-              v-model="adminNotes" 
-              placeholder="Укажите принятые меры или комментарии..."
-              rows="4"
-            ></textarea>
+    <!-- Переработанное модальное окно для рассмотрения жалобы - теперь использует телепорт -->
+    <div class="modal-container">
+      <Teleport to="body" :disabled="!showResolveModal">
+        <div v-if="showResolveModal" class="modal-backdrop" @click.self="showResolveModal = false">
+          <div class="modal-box" @click.stop>
+            <div class="modal-box-header">
+              <h3 class="modal-title">Рассмотрение жалобы</h3>
+              <button type="button" class="modal-close-btn" @click="showResolveModal = false">
+                <i class="bi-x"></i>
+              </button>
+            </div>
+            <div class="modal-box-body">
+              <p>Вы собираетесь отметить эту жалобу как рассмотренную.</p>
+              <div class="modal-form-group">
+                <label for="admin-notes" class="modal-label">Заметки администратора (необязательно):</label>
+                <textarea 
+                  id="admin-notes"
+                  v-model="adminNotes" 
+                  placeholder="Укажите принятые меры или комментарии..."
+                  rows="4"
+                  class="modal-textarea"
+                ></textarea>
+              </div>
+            </div>
+            <div class="modal-box-footer">
+              <button 
+                type="button" 
+                class="modal-btn modal-resolve-btn" 
+                @click="updateReportStatus('resolved')"
+                :disabled="updating"
+              >
+                <i class="bi-check-circle"></i>
+                <span>{{ updating ? 'Обработка...' : 'Рассмотреть' }}</span>
+              </button>
+              <button 
+                type="button" 
+                class="modal-btn modal-cancel-btn" 
+                @click="showResolveModal = false"
+              >
+                <i class="bi-x"></i>
+                <span>Отмена</span>
+              </button>
+            </div>
           </div>
         </div>
-        <div class="modal-actions">
-          <button @click="updateReportStatus('resolved')" class="btn resolve-btn" :disabled="updating">
-            <i class="bi-check-circle"></i>
-            <span>{{ updating ? 'Обработка...' : 'Рассмотреть' }}</span>
-          </button>
-          <button @click="showResolveModal = false" class="btn cancel-btn">
-            <i class="bi-x"></i>
-            <span>Отмена</span>
-          </button>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Модальное окно для отклонения жалобы -->
-    <div v-if="showDismissModal" class="modal-overlay" @click="showDismissModal = false">
-      <div class="modal" @click.stop>
-        <div class="modal-header">
-          <h3>Отклонение жалобы</h3>
-          <button @click="showDismissModal = false" class="modal-close">
-            <i class="bi-x"></i>
-          </button>
-        </div>
-        <div class="modal-content">
-          <p>Вы собираетесь отклонить эту жалобу.</p>
-          <div class="form-group">
-            <label>Заметки администратора (необязательно):</label>
-            <textarea 
-              v-model="adminNotes" 
-              placeholder="Укажите причину отклонения..."
-              rows="4"
-            ></textarea>
+      </Teleport>
+
+      <!-- Аналогично для модального окна отклонения жалобы -->
+      <Teleport to="body" :disabled="!showDismissModal">
+        <div v-if="showDismissModal" class="modal-backdrop" @click.self="showDismissModal = false">
+          <div class="modal-box" @click.stop>
+            <div class="modal-box-header">
+              <h3 class="modal-title">Отклонение жалобы</h3>
+              <button type="button" class="modal-close-btn" @click="showDismissModal = false">
+                <i class="bi-x"></i>
+              </button>
+            </div>
+            <div class="modal-box-body">
+              <p>Вы собираетесь отклонить эту жалобу.</p>
+              <div class="modal-form-group">
+                <label for="admin-notes-dismiss" class="modal-label">Заметки администратора (необязательно):</label>
+                <textarea 
+                  id="admin-notes-dismiss"
+                  v-model="adminNotes" 
+                  placeholder="Укажите причину отклонения..."
+                  rows="4"
+                  class="modal-textarea"
+                ></textarea>
+              </div>
+            </div>
+            <div class="modal-box-footer">
+              <button 
+                type="button" 
+                class="modal-btn modal-dismiss-btn" 
+                @click="updateReportStatus('dismissed')"
+                :disabled="updating"
+              >
+                <i class="bi-x-circle"></i>
+                <span>{{ updating ? 'Обработка...' : 'Отклонить' }}</span>
+              </button>
+              <button 
+                type="button" 
+                class="modal-btn modal-cancel-btn" 
+                @click="showDismissModal = false"
+              >
+                <i class="bi-arrow-left"></i>
+                <span>Отмена</span>
+              </button>
+            </div>
           </div>
         </div>
-        <div class="modal-actions">
-          <button @click="updateReportStatus('dismissed')" class="btn dismiss-btn" :disabled="updating">
-            <i class="bi-x-circle"></i>
-            <span>{{ updating ? 'Обработка...' : 'Отклонить' }}</span>
-          </button>
-          <button @click="showDismissModal = false" class="btn cancel-btn">
-            <i class="bi-arrow-left"></i>
-            <span>Отмена</span>
-          </button>
-        </div>
-      </div>
+      </Teleport>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, Teleport } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 
@@ -953,92 +981,227 @@ h2 {
   margin-top: 20px;
 }
 
-/* Исправления для корректного отображения блока "Участники" */
-.users-grid {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 15px;
-  align-items: center;
-  width: 100%;
+/* Новые стили для модальных окон с Teleport */
+.modal-container {
+  /* Контейнер для модальных окон */
 }
 
-.user-card {
-  background: white;
-  border: 1px solid #e9ecef;
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+/* Backdrop (затемнение фона) */
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
   display: flex;
-  flex-direction: column;
-  height: 100%;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999; /* Очень высокий z-index */
+  padding: 16px;
   box-sizing: border-box;
 }
 
-.user-details {
+/* Основной контейнер модального окна */
+.modal-box {
+  width: 100%;
+  max-width: 450px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  animation: modal-in 0.3s ease forwards;
+  max-height: 90vh;
   display: flex;
   flex-direction: column;
-  gap: 8px;
 }
 
-.user-name, .user-email {
-  word-break: break-word;
-  overflow-wrap: break-word;
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
-.arrow-divider {
+/* Заголовок модального окна */
+.modal-box-header {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  color: #6c757d;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eaeaea;
 }
 
-.arrow-icon {
-  font-size: 20px;
-}
-
-.vs-text {
-  display: none;
+.modal-title {
+  margin: 0;
+  font-size: 18px;
   font-weight: 600;
-  font-size: 14px;
-  color: #495057;
+  color: #212529;
 }
 
-/* Адаптивные стили для мобильных устройств */
-@media (max-width: 767px) {
-  .users-grid {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
-    gap: 10px;
-  }
+.modal-close-btn {
+  background: transparent;
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 20px;
+  color: #6c757d;
+  margin: -8px -8px -8px 0;
+}
 
-  .arrow-divider {
-    display: flex;
-    justify-content: center;
-    height: 40px;
-  }
+.modal-close-btn:hover {
+  background-color: #f0f0f0;
+  color: #343a40;
+}
 
-  .arrow-icon {
-    transform: rotate(90deg);
-  }
+/* Тело модального окна */
+.modal-box-body {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
 
-  .vs-text {
-    display: inline;
-    margin-left: 8px;
+.modal-box-body p {
+  margin-top: 0;
+  margin-bottom: 16px;
+  color: #4a5568;
+}
+
+/* Группа формы внутри модального окна */
+.modal-form-group {
+  margin-bottom: 16px;
+}
+
+.modal-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #4a5568;
+}
+
+.modal-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 12px;
+  border: 1px solid #ced4da;
+  border-radius: 6px;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+  resize: vertical;
+}
+
+.modal-textarea:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
+}
+
+/* Футер модального окна */
+.modal-box-footer {
+  padding: 16px 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-top: 1px solid #eaeaea;
+  background-color: #f8f9fa;
+}
+
+/* Кнопки в модальном окне */
+.modal-btn {
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+  min-width: 100px;
+}
+
+.modal-resolve-btn {
+  background-color: #28a745;
+  color: #ffffff;
+}
+
+.modal-resolve-btn:hover:not(:disabled) {
+  background-color: #218838;
+  transform: translateY(-1px);
+}
+
+.modal-dismiss-btn {
+  background-color: #dc3545;
+  color: #ffffff;
+}
+
+.modal-dismiss-btn:hover:not(:disabled) {
+  background-color: #c82333;
+  transform: translateY(-1px);
+}
+
+.modal-cancel-btn {
+  background-color: #6c757d;
+  color: #ffffff;
+}
+
+.modal-cancel-btn:hover:not(:disabled) {
+  background-color: #5a6268;
+  transform: translateY(-1px);
+}
+
+.modal-btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.modal-btn i {
+  font-size: 16px;
+}
+
+/* Адаптивность для разных размеров экрана */
+@media (max-width: 576px) {
+  .modal-backdrop {
+    padding: 8px;
   }
   
-  .modal {
-    width: calc(100% - 16px);
-    padding: 16px;
-    max-height: 85vh;
+  .modal-box {
+    max-height: 95vh;
   }
   
-  .modal-header {
-    padding-bottom: 12px;
-    margin-bottom: 12px;
+  .modal-box-header {
+    padding: 14px;
   }
   
-  .modal-header h3 {
-    font-size: 1.1rem;
+  .modal-title {
+    font-size: 16px;
+  }
+  
+  .modal-box-body {
+    padding: 14px;
+  }
+  
+  .modal-box-footer {
+    padding: 14px;
+    flex-direction: column;
+  }
+  
+  .modal-btn {
+    width: 100%;
   }
 }
 </style>
\ No newline at end of file