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

2025-04-13 18:18:04 +03:00
parent 9bb84c8297
commit 617bcd19be
10 changed files with 663 additions and 563 deletions
--- a/frontend/src/assets/styles/home.css
+++ b/frontend/src/assets/styles/home.css
@@ -3,6 +3,13 @@
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #fff;
 }

 /* Стили для монопространственных шрифтов (код, верификация) */
@@ -35,10 +42,9 @@ input, textarea {

 .app-container {
  display: flex;
-  height: 100vh;
-  width: 100%;
-  background-color: #f5f5f5;
-  position: relative;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #fff;
 }

 /* Стили для боковой панели */
@@ -160,14 +166,10 @@ input, textarea {
  flex: 1;
  display: flex;
  flex-direction: column;
-  margin-left: 190px; /* 40px + 110px (sidebar) + 40px (button) */
-  margin-right: 190px; /* 40px + 110px (sidebar) + 40px (button) */
-  transition: margin 0.3s ease;
  max-width: 1200px;
+  margin: 0 auto;
  padding: 0 20px;
-  height: 100vh;
-  position: relative;
-  box-sizing: border-box;
+  width: 100%;
 }

 .sidebar-expanded ~ .main-content {
@@ -188,27 +190,18 @@ input, textarea {
  flex: 1;
  display: flex;
  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - 140px);
-  position: relative;
-  box-sizing: border-box;
+  margin: 20px 0;
+  min-height: 0;
 }

 .chat-messages {
  flex: 1;
  overflow-y: auto;
-  background-color: white;
-  border-radius: 8px;
  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
  margin-bottom: 20px;
-  width: 100%;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  bottom: 120px; /* Увеличиваем отступ для возможного расширения chat-input */
-  left: 0;
-  right: 0;
 }

 .message {
@@ -282,57 +275,45 @@ input, textarea {
  border: 1px solid #F44336;
 }

+/* Стили для ввода сообщений */
 .chat-input {
  display: flex;
-  background-color: white;
+  gap: 10px;
+  padding: 20px;
+  background: #fff;
  border-radius: 8px;
-  padding: 15px;
-  width: 100%;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 40px;
-  left: 0;
-  right: 0;
-  min-height: 70px;
-  max-height: 200px; /* Максимальная высота */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e0e0e0;
 }

 .chat-input textarea {
  flex: 1;
+  padding: 12px;
  border: 1px solid #e0e0e0;
-  resize: vertical; /* Разрешаем вертикальное изменение размера */
-  padding: 10px;
-  min-height: 40px;
-  max-height: 170px; /* Максимальная высота минус padding */
-  font-family: inherit;
  border-radius: 4px;
-  background-color: white;
-  line-height: 1.4;
+  resize: none;
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 60px;
+  max-height: 200px;
 }

 .chat-input button {
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  border-radius: 4px;
  padding: 0 20px;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
  cursor: pointer;
-  height: 40px;
-  margin-left: 10px;
-  align-self: flex-start;
-  transition: background-color 0.2s;
  font-size: 14px;
+  transition: background-color 0.3s;
 }

 .chat-input button:hover:not(:disabled) {
-  background-color: #f0f0f0;
+  background: #45a049;
 }

 .chat-input button:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
+  background: #ccc;
  cursor: not-allowed;
 }

@@ -744,43 +725,63 @@ input, textarea {
  word-break: break-all;
 }

-/* Медиа-запрос для узких экранов */
-@media (max-width: 1300px) {
-  .wallet-sidebar {
-    width: 286px;
-    min-width: 286px;
-    padding: 15px;
+/* Медиа-запросы для адаптивности */
+@media (max-width: 1200px) {
+  .header-content,
+  .main-content {
+    max-width: 100%;
+    padding: 0 15px;
  }
-  
-  .verification-code code {
-    font-size: 14px;
-    padding: 6px 10px;
+}
+
+/* Медиа-запросы для мобильных устройств */
+@media screen and (max-width: 768px) {
+  .header-content {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
  }
-  
-  .auth-btn, .bot-link, .cancel-btn {
-    padding: 10px 8px;
-    font-size: 13px;
+
+  .header-text {
+    flex: 1;
+    margin-right: 10px;
+    min-width: 0; /* Важно для корректной работы text-overflow */
  }
-  
-  .verify-btn, .send-email-btn {
-    padding: 0 10px;
-    font-size: 13px;
+
+  .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.2rem;
+    margin: 0;
  }
-  
-  .main-content:not(.no-right-sidebar) {
-    margin-right: 286px;
+
+  .subtitle {
+    white-space: normal;
+    font-size: 0.9rem;
+    margin: 0;
+    line-height: 1.2;
  }
-  
-  .close-wallet-sidebar {
-    width: 26px;
-    height: 26px;
-    font-size: 18px;
-    top: 8px;
-    right: 8px;
+
+  .header-wallet-btn {
+    flex-shrink: 0;
+    margin-left: 10px;
  }
-  
-  .wallet-buttons {
-    margin-top: 35px;
+}
+
+/* Дополнительные стили для очень маленьких экранов */
+@media screen and (max-width: 480px) {
+  .header-content {
+    padding: 8px;
+  }
+
+  .title {
+    font-size: 1.1rem;
+  }
+
+  .subtitle {
+    font-size: 0.8rem;
  }
 }

@@ -999,43 +1000,119 @@ input, textarea {
 }

 .header {
+  background: #fff;
+  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
-  margin-bottom: 24px; /* Уменьшенный отступ после заголовка */
-  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-text {
+  flex: 1;
 }

 .title {
  font-size: 24px;
-  font-weight: bold;
-  margin: 0;
-  line-height: 1.2;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 5px;
 }

 .subtitle {
-  font-size: 14px;
+  font-size: 16px;
  color: #666;
-  margin: 5px 0 0 0;
 }

-/* Стили для правой панели */
-.wallet-sidebar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 300px;
-  height: 100vh;
-  background: white;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  overflow-y: auto;
-  z-index: 1000;
+.header-wallet-btn {
+  margin-left: 20px;
+  padding: 10px;
+  background: transparent;
+  color: #333;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: background-color 0.3s;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
 }

-/* Стили для основного контента */
-.content-container {
-  padding: 20px 15px;
-  margin-right: 40px; /* Одинаковый отступ справа */
-  margin-left: 40px; /* Одинаковый отступ слева */
+.header-wallet-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.header-wallet-btn .nav-btn-number {
+  display: none;
+}
+
+.header-wallet-btn .nav-btn-text {
+  display: none;
+}
+
+.header-wallet-btn::before,
+.header-wallet-btn::after,
+.header-wallet-btn .hamburger-line {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 2px;
+  background-color: #333;
+  transition: all 0.3s ease;
+}
+
+.header-wallet-btn::before {
+  top: 12px;
+}
+
+.header-wallet-btn::after {
+  bottom: 12px;
+}
+
+.header-wallet-btn .hamburger-line {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Анимация при наведении */
+.header-wallet-btn:hover::before {
+  top: 11px;
+}
+
+.header-wallet-btn:hover::after {
+  bottom: 11px;
+}
+
+/* Анимация при активном состоянии */
+.header-wallet-btn.active::before {
+  transform: rotate(45deg);
+  top: 50%;
+}
+
+.header-wallet-btn.active::after {
+  transform: rotate(-45deg);
+  bottom: 50%;
+}
+
+.header-wallet-btn.active .hamburger-line {
+  opacity: 0;
+}
+
+.header-wallet-btn .hamburger-line {
+  top: 50%;
+  transform: translateY(-50%);
 }

 .footer {
@@ -1232,3 +1309,42 @@ input, textarea {
  padding: 0;
  border-left: none;
 }
+
+/* Стили для кнопок в чате */
+.chat-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.chat-buttons button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.chat-buttons button:first-child {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.chat-buttons button:first-child:hover:not(:disabled) {
+  background-color: #45a049;
+}
+
+.chat-buttons .clear-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+.chat-buttons .clear-btn:hover:not(:disabled) {
+  background-color: #da190b;
+}
+
+.chat-buttons button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
--- a/frontend/src/composables/useAuth.js
+++ b/frontend/src/composables/useAuth.js
@@ -274,11 +274,7 @@ export function useAuth() {
  
  const disconnect = async () => {
    try {
-      // Сохраняем текущий guestId перед выходом
-      const newGuestId = crypto.randomUUID();
-      localStorage.setItem('guestId', newGuestId);
-      console.log('Created new guestId for future session:', newGuestId);
-      
+      // Удаляем все идентификаторы перед выходом
      await axios.post('/api/auth/logout');
      
      // Обновляем состояние в памяти
@@ -297,17 +293,22 @@ export function useAuth() {
      
      // Очищаем списки идентификаторов
      identities.value = [];
+      processedGuestIds.value = [];
      
-      // Очищаем localStorage кроме guestId
+      // Очищаем localStorage полностью
      localStorage.removeItem('isAuthenticated');
      localStorage.removeItem('userId');
      localStorage.removeItem('address');
      localStorage.removeItem('isAdmin');
+      localStorage.removeItem('guestId');
+      localStorage.removeItem('guestMessages');
+      localStorage.removeItem('telegramId');
+      localStorage.removeItem('email');
      
      // Удаляем класс подключенного кошелька
      document.body.classList.remove('wallet-connected');
      
-      console.log('User disconnected successfully');
+      console.log('User disconnected successfully and all identifiers cleared');
      
      return { success: true };
    } catch (error) {
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,51 +1,21 @@
 <template>
  <div class="app-container">
-    <!-- Боковая панель / Меню -->
-    <div class="sidebar" :class="{ 'sidebar-expanded': showSidebar }">
-      <button class="menu-button" @click="toggleSidebar">
-        <div class="hamburger"></div>
-      </button>
-      <div class="nav-buttons">
-        <button class="nav-btn" @click="navigateTo('page1')">
-          <div class="nav-btn-number">1</div>
-          <div class="nav-btn-text">Кнопка 1</div>
-        </button>
-        <button class="nav-btn" @click="navigateTo('page2')">
-          <div class="nav-btn-number">2</div>
-          <div class="nav-btn-text">Кнопка 2</div>
-        </button>
-        <button class="nav-btn" @click="navigateTo('page3')">
-          <div class="nav-btn-number">3</div>
-          <div class="nav-btn-text">Кнопка 3</div>
-        </button>
-        <button class="nav-btn" @click="navigateTo('page4')">
-          <div class="nav-btn-number">4</div>
-          <div class="nav-btn-text">Кнопка 4</div>
-        </button>
-        <button class="nav-btn" @click="navigateTo('page5')">
-          <div class="nav-btn-number">5</div>
-          <div class="nav-btn-text">Кнопка 5</div>
-        </button>
-        <button class="nav-btn" @click="navigateTo('page6')">
-          <div class="nav-btn-number">6</div>
-          <div class="nav-btn-text">Кнопка 6</div>
-          </button>
-        </div>
-        
-      <!-- Кнопка 7 в нижней части боковой панели -->
-      <button class="nav-btn sidebar-bottom-btn" @click="toggleWalletSidebar">
-        <div class="nav-btn-number">7</div>
-        <div class="nav-btn-text">{{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}</div>
-          </button>
-        </div>
-        
    <!-- Основной контент -->
    <div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
      <div class="header">
-        <h1 class="title">✌️HB3 - Accelerator DLE (Digital Legal Entity - DAO Fork)</h1>
-        <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
+        <div class="header-content">
+          <div class="header-text">
+            <h1 class="title">✌️HB3 - Accelerator DLE</h1>
+            <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
+          </div>
+          <button class="nav-btn header-wallet-btn" @click="toggleWalletSidebar" :class="{ active: showWalletSidebar }">
+            <div class="hamburger-line"></div>
+            <div class="nav-btn-number">7</div>
+            <div class="nav-btn-text">{{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}</div>
+          </button>
        </div>
-        
+      </div>
+      
      <div class="chat-container">
        <div class="chat-messages" ref="messagesContainer">
          <div v-for="message in messages" :key="message.id" 
@@ -77,10 +47,15 @@
            rows="3"
            autofocus
          ></textarea>
-          <button @click="handleMessage(newMessage)" :disabled="isLoading || !newMessage.trim()">
-            {{ isLoading ? 'Отправка...' : 'Отправить' }}
-        </button>
-      </div>
+          <div class="chat-buttons">
+            <button @click="handleMessage(newMessage)" :disabled="isLoading || !newMessage.trim()">
+              {{ isLoading ? 'Отправка...' : 'Отправить' }}
+            </button>
+            <button @click="clearGuestMessages" class="clear-btn" :disabled="isLoading">
+              Очистить
+            </button>
+          </div>
+        </div>
        </div>
          </div>
          
@@ -281,18 +256,6 @@
          <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
        </div>
      </div>
-      
-      <!-- Блок отладочной информации (только для гостей) -->
-      <div v-if="!isAuthenticated" class="debug-info">
-        <h4>Гостевой идентификатор:</h4>
-        <div class="debug-item">
-          <code>{{ guestIdValue || 'Не задан' }}</code>
-        </div>
-        <div class="debug-buttons">
-          <button @click="refreshGuestId" class="small-button">Обновить ID</button>
-          <button @click="clearGuestMessages" class="small-button">Очистить сообщения</button>
-        </div>
-      </div>
    </div>
  </div>
 </template>
@@ -371,6 +334,7 @@ const isLoadingMore = ref(false);
 const hasMoreMessages = ref(false);
 const offset = ref(0);
 const limit = ref(30);
+const isMessageLoadingInProgress = ref(false); // Добавляем флаг для отслеживания процесса загрузки

 // Состояния для верификации
 const showTelegramVerification = ref(false);
@@ -400,8 +364,7 @@ const successMessage = ref('');
 const showSuccessMessage = ref(false);

 // Состояния для сайдбара
-const showSidebar = ref(false);
-const currentPage = ref('home');
+const showWalletSidebar = ref(false);

 // Добавляем состояние для балансов
 const tokenBalances = ref({
@@ -411,8 +374,8 @@ const tokenBalances = ref({
  polygon: '0'
 });

-// Состояние для отображения правой панели
-const showWalletSidebar = ref(false);
+// Добавляем состояние для отслеживания привязки гостевых сообщений
+const isLinkingGuestMessages = ref(false);

 // Вычисленное свойство для фильтрации идентификаторов
 const filteredIdentities = computed(() => {
@@ -444,17 +407,6 @@ function formatIdentityProvider(provider) {
  return providers[provider] || provider;
 }

-// Функция для управления сайдбаром
-const toggleSidebar = () => {
-  showSidebar.value = !showSidebar.value;
-  document.querySelector('.app-container').classList.toggle('menu-open');
-};
-
-const navigateTo = (page) => {
-  currentPage.value = page;
-  console.log(`Навигация на страницу: ${page}`);
-};
-
 // Функция для переключения отображения правой панели
 const toggleWalletSidebar = () => {
  showWalletSidebar.value = !showWalletSidebar.value;
@@ -560,38 +512,26 @@ const sendEmailVerification = async () => {
 // Функция для обработки загрузки сообщений после аутентификации
 const handlePostAuthMessageLoading = async (authType) => {
  try {
-    console.log(`Обработка загрузки сообщений после аутентификации через ${authType}`);
+    isMessageLoadingInProgress.value = true;
    
-    // Сохраняем текущее количество сообщений для отслеживания
-    let currentMessageCount = 0;
-    try {
-      const countResponse = await axios.get('/api/chat/history?count_only=true');
-      if (countResponse.data.success) {
-        currentMessageCount = countResponse.data.count || 0;
-        console.log(`Текущее количество сообщений перед обработкой: ${currentMessageCount}`);
-      }
-    } catch (error) {
-      console.warn('Ошибка при получении текущего количества сообщений:', error);
-    }
-    
-    // Загружаем историю сообщений после успешной авторизации
-    await loadChatHistory();
-    
-    // Получаем новое количество сообщений для отслеживания новых ответов
-    const newCountResponse = await axios.get('/api/chat/history?count_only=true');
-    if (newCountResponse.data.success) {
-      const newCount = newCountResponse.data.count || 0;
+    // Загружаем историю сообщений напрямую через API
+    const response = await axios.get('/api/chat/history');
+    if (response.data.success) {
+      messages.value = response.data.messages || [];
+      console.log(`Загружено ${messages.value.length} сообщений после аутентификации`);
      
-      // Настраиваем отслеживание только если есть разница в количестве сообщений
-      if (newCount !== currentMessageCount) {
-        console.log(`Количество сообщений изменилось: ${currentMessageCount} -> ${newCount}`);
-        setupMessagePolling(newCount);
-      } else {
-        console.log('Количество сообщений не изменилось, отслеживание не требуется');
-      }
+      // Очищаем локальное хранилище гостевых сообщений
+      localStorage.removeItem('guestMessages');
+      localStorage.removeItem('guestId');
+      
+      // Прокручиваем к последнему сообщению
+      await nextTick();
+      scrollToBottom();
    }
  } catch (error) {
    console.error(`Ошибка при обработке сообщений после аутентификации через ${authType}:`, error);
+  } finally {
+    isMessageLoadingInProgress.value = false;
  }
 };

@@ -864,38 +804,40 @@ const clearGuestMessages = () => {

 // Метод для загрузки истории чата
 const loadChatHistory = async () => {
-  // Сбрасываем текущие сообщения и загружаем новую историю
  isLoading.value = true;
  
  try {
-    // Сначала получаем общее количество сообщений
+    // Если пользователь аутентифицирован и есть гостевые сообщения, 
+    // но привязка уже выполняется - ждем её завершения
+    if (auth.isAuthenticated.value && isLinkingGuestMessages.value) {
+      await new Promise(resolve => {
+        const checkInterval = setInterval(() => {
+          if (!isLinkingGuestMessages.value) {
+            clearInterval(checkInterval);
+            resolve();
+          }
+        }, 100);
+      });
+    }
+
+    // Получаем общее количество сообщений
    const countResponse = await axios.get('/api/chat/history?count_only=true');
    
    if (countResponse.data.success) {
      const messageCount = countResponse.data.count;
      console.log(`История содержит ${messageCount} сообщений`);
      
-      // Рассчитываем смещение для получения последних сообщений
      const effectiveOffset = Math.max(0, messageCount - limit.value);
-      
-      // Загружаем историю сообщений
      const response = await axios.get(`/api/chat/history?offset=${effectiveOffset}&limit=${limit.value}`);
      
      if (response && response.data.success) {
-        // Очищаем локальные гостевые сообщения при успешной загрузке истории аутентифицированного пользователя
-        if (auth.isAuthenticated.value) {
-          removeFromStorage('guestMessages');
-        }
-        
        messages.value = response.data.messages;
        console.log(`Загружено ${messages.value.length} сообщений из истории`);
        
-        // Отправляем событие об обновлении сообщений
        window.dispatchEvent(new CustomEvent('messages-updated', { 
          detail: { count: messages.value.length } 
        }));
        
-        // Прокручиваем к последнему сообщению
        await nextTick();
        scrollToBottom();
      }
@@ -1258,10 +1200,6 @@ const disconnectWallet = async () => {
    // Останавливаем обновление балансов
    stopBalanceUpdates();
    
-    // Сохраняем гостевой ID для продолжения работы после выхода
-    const guestId = getFromStorage('guestId') || generateUniqueId();
-    setToStorage('guestId', guestId);
-    
    // Отправляем запрос на выход
    await axios.post('/api/auth/logout');
    
@@ -1275,25 +1213,14 @@ const disconnectWallet = async () => {
    // Обновляем отображение UI
    document.body.classList.remove('wallet-connected');
    
-    // Очищаем историю сообщений, кроме гостевых
+    // Очищаем все сообщения и состояния
    messages.value = [];
    offset.value = 0;
    hasMoreMessages.value = true;
    
-    // Загружаем только гостевые сообщения после выхода
-    try {
-      // Проверяем наличие сообщений в localStorage
-      const storedMessages = getFromStorage('guestMessages');
-      if (storedMessages) {
-        const parsedMessages = JSON.parse(storedMessages);
-        if (parsedMessages.length > 0) {
-          console.log(`Найдено ${parsedMessages.length} сохраненных гостевых сообщений`);
-          messages.value = [...messages.value, ...parsedMessages];
-        }
-      }
-    } catch (e) {
-      console.error('Ошибка загрузки сообщений из localStorage:', e);
-    }
+    // Очищаем localStorage от всех сообщений
+    localStorage.removeItem('guestMessages');
+    localStorage.removeItem('hasUserSentMessage');
    
    console.log('Выход из системы выполнен успешно');
  } catch (error) {