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

2025-05-01 02:53:34 +03:00
parent 01f96a9b80
commit ef2da22c70
15 changed files with 1369 additions and 1000 deletions
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="app-container">
+    <!-- Основной контент -->
+    <div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
+      <!-- Шапка сайта -->
+      <Header 
+        :is-sidebar-open="showWalletSidebar" 
+        @toggle-sidebar="toggleWalletSidebar" 
+      />
+
+      <!-- Основной контент страницы (передается через слот) -->
+      <slot></slot>
+    </div>
+
+    <!-- Правая панель с информацией о кошельке -->
+    <Sidebar 
+      v-model="showWalletSidebar" 
+      :is-authenticated="auth.isAuthenticated.value"
+      :telegram-auth="telegramAuth"
+      :email-auth="emailAuth"
+      :token-balances="tokenBalances.value"
+      :identities="auth.identities?.value"
+      @wallet-auth="handleWalletAuth"
+      @disconnect-wallet="disconnectWallet"
+      @telegram-auth="handleTelegramAuth"
+      @cancel-telegram-auth="cancelTelegramAuth"
+      @email-auth="showEmailForm"
+      @send-email-verification="sendEmailVerification"
+      @verify-email-code="verifyEmailCode"
+      @cancel-email-auth="cancelEmailAuth"
+    />
+
+    <!-- Компонент для отображения уведомлений -->
+    <NotificationDisplay :notifications="notifications.value" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useTokenBalances } from '../composables/useTokenBalances';
+import { useAuthFlow } from '../composables/useAuthFlow';
+import { useNotifications } from '../composables/useNotifications';
+import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
+import { connectWithWallet } from '../services/wallet';
+import api from '../api/axios';
+import eventBus from '../utils/eventBus';
+import Header from './Header.vue';
+import Sidebar from './Sidebar.vue';
+import NotificationDisplay from './NotificationDisplay.vue';
+
+// =====================================================================
+// 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
+// =====================================================================
+
+const auth = useAuth();
+const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
+const { tokenBalances } = useTokenBalances();
+
+// Callback после успешной аутентификации/привязки через Email/Telegram
+const handleAuthFlowSuccess = (authType) => {
+  console.log(`[BaseLayout] Auth flow success: ${authType}`);
+  // Отправляем событие для обновления данных на страницах
+  eventBus.emit('auth-success', { authType });
+};
+
+const {
+  telegramAuth,
+  handleTelegramAuth,
+  cancelTelegramAuth,
+  emailAuth,
+  showEmailForm,
+  sendEmailVerification,
+  verifyEmailCode,
+  cancelEmailAuth,
+} = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
+
+// =====================================================================
+// 2. СОСТОЯНИЯ КОМПОНЕНТА
+// =====================================================================
+
+const showWalletSidebar = ref(false);
+const isConnectingWallet = ref(false); // Флаг процесса подключения кошелька
+
+// =====================================================================
+// 3. ФУНКЦИИ
+// =====================================================================
+
+/**
+ * Обрабатывает аутентификацию через кошелек
+ */
+const handleWalletAuth = async () => {
+  if (isConnectingWallet.value) return;
+  isConnectingWallet.value = true;
+  try {
+    const result = await connectWithWallet();
+    console.log('[BaseLayout] Результат подключения кошелька:', result);
+
+    if (result.success) {
+      if (auth.isAuthenticated.value) {
+        // Связывание кошелька с существующим аккаунтом
+        const linkResult = await auth.linkIdentity('wallet', result.address);
+        if (linkResult.success) {
+          showSuccessMessage('Кошелек успешно подключен к вашему аккаунту!');
+          await auth.checkAuth(); // Обновить identities
+        } else {
+          showErrorMessage(linkResult.error || 'Не удалось подключить кошелек');
+        }
+      } else {
+        // Новая аутентификация через кошелек
+        const authResponse = await auth.checkAuth();
+        if (authResponse.authenticated && authResponse.authType === 'wallet') {
+          console.log('[BaseLayout] Кошелёк успешно подключен и аутентифицирован');
+          showSuccessMessage('Кошелёк успешно подключен!');
+          // Оповещаем компоненты об успешной авторизации
+          eventBus.emit('auth-state-changed', { 
+            isAuthenticated: true, 
+            authType: 'wallet', 
+            fromBaseLayout: true 
+          });
+        } else {
+           showErrorMessage('Не удалось завершить аутентификацию через кошелек.');
+        }
+      }
+    } else {
+      console.error('[BaseLayout] Не удалось подключить кошелёк:', result.error);
+      showErrorMessage(result.error || 'Не удалось подключить кошелёк');
+    }
+  } catch (error) {
+    console.error('[BaseLayout] Ошибка при подключении кошелька:', error);
+    showErrorMessage('Произошла ошибка при подключении кошелька');
+  } finally {
+    isConnectingWallet.value = false;
+  }
+};
+
+/**
+ * Выполняет выход из аккаунта
+ */
+const disconnectWallet = async () => {
+  console.log('[BaseLayout] Выполняется выход из системы...');
+  try {
+    await api.post('/api/auth/logout');
+    await auth.checkAuth(); 
+    showSuccessMessage('Вы успешно вышли из системы');
+    removeFromStorage('guestMessages');
+    removeFromStorage('hasUserSentMessage');
+    
+    // Оповещаем компоненты о выходе из системы
+    eventBus.emit('auth-state-changed', { 
+      isAuthenticated: false, 
+      fromBaseLayout: true 
+    });
+  } catch (error) {
+    console.error('[BaseLayout] Ошибка при выходе из системы:', error);
+    showErrorMessage('Произошла ошибка при выходе из системы');
+  }
+};
+
+/**
+ * Переключает отображение боковой панели
+ */
+const toggleWalletSidebar = () => {
+  showWalletSidebar.value = !showWalletSidebar.value;
+  setToStorage('showWalletSidebar', showWalletSidebar.value);
+};
+
+// =====================================================================
+// 4. ЖИЗНЕННЫЙ ЦИКЛ
+// =====================================================================
+
+onMounted(() => {
+  console.log('[BaseLayout] Компонент загружен');
+
+  // Загружаем сохраненное состояние боковой панели
+  const savedSidebarState = getFromStorage('showWalletSidebar');
+  if (savedSidebarState !== null) {
+    showWalletSidebar.value = savedSidebarState;
+  } else {
+    showWalletSidebar.value = true;
+    setToStorage('showWalletSidebar', true);
+  }
+});
+</script>
+
+<style scoped>
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  position: relative;
+  background-color: var(--color-light);
+}
+
+.main-content {
+  flex-grow: 1;
+  transition: all var(--transition-normal);
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 350px);
+  padding: 0 20px;
+  background-color: var(--color-white);
+}
+
+.main-content.no-right-sidebar {
+  max-width: 100%;
+}
+
+/* Адаптивный дизайн */
+@media (max-width: 768px) {
+  .main-content {
+    max-width: 100%;
+  }
+}
+</style> 
--- a/frontend/src/components/ChatInterface.vue
+++ b/frontend/src/components/ChatInterface.vue
@@ -442,8 +442,11 @@ onUnmounted(() => {
  flex: 1;
  display: flex;
  flex-direction: column;
-  margin: var(--spacing-lg) 0 35px 0;
+  margin: var(--spacing-lg) auto;
+  padding: 0; /* Убираю padding, так как он теперь задается через .main-content */
  min-height: 500px; /* Или другая подходящая высота */
+  max-width: 1150px; /* Ограничиваем ширину чата */
+  width: 100%; /* Занимаем всю доступную ширину до максимума */
  position: relative;
 }

@@ -459,7 +462,7 @@ onUnmounted(() => {
  top: 0;
  left: 0;
  right: 0;
-  bottom: var(--chat-input-height, 80px); /* 80px - запасной вариант */
+  bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
  transition: bottom var(--transition-normal);
 }

--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="header">
+    <div class="header-content">
+      <div class="header-text">
+        <h1 class="title">✌️HB3 - Accelerator DLE</h1>
+        <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
+      </div>
+      <button
+        class="header-wallet-btn"
+        :class="{ active: isSidebarOpen }" 
+        @click="toggleSidebar"
+      >
+        <div class="hamburger-line" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, onMounted, onBeforeUnmount, watch } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import eventBus from '../utils/eventBus';
+
+const props = defineProps({
+  isSidebarOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggle-sidebar']);
+
+const toggleSidebar = () => {
+  emit('toggle-sidebar');
+};
+
+// Обработка аутентификации
+const auth = useAuth();
+const { isAuthenticated } = auth;
+
+// Мониторинг изменений статуса аутентификации
+let unwatch = null;
+onMounted(() => {
+  // Следим за изменениями авторизации и сообщаем о них через eventBus
+  unwatch = watch(isAuthenticated, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      console.log('[Header] Состояние аутентификации изменилось:', newValue);
+      // Оповещаем остальные компоненты через шину событий
+      eventBus.emit('auth-state-changed', { 
+        isAuthenticated: newValue, 
+        fromHeader: true
+      });
+    }
+  });
+});
+
+// Очищаем наблюдатель при удалении компонента
+onBeforeUnmount(() => {
+  if (unwatch) {
+    unwatch();
+  }
+});
+</script>
+
+<style scoped>
+.header {
+  background-color: var(--color-white);
+  padding: 15px 20px;
+  position: sticky;
+  top: 0;
+  z-index: 100; /* Ensure header stays on top */
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px; /* Optional: limit max width */
+  margin: 0 auto; /* Optional: center content */
+}
+
+.header-text {
+  flex-grow: 1;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-grey-dark);
+}
+
+.header-wallet-btn {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-white);
+  color: var(--color-primary);
+  border: none;
+  padding: 10px 15px;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  gap: 8px;
+  box-shadow: none;
+}
+
+.header-wallet-btn:hover {
+  background-color: var(--color-light);
+}
+
+.header-wallet-btn.active {
+  background-color: var(--color-light);
+}
+
+.hamburger-line {
+  width: 20px;
+  height: 3px;
+  background-color: var(--color-primary);
+  position: relative;
+  transition: all var(--transition-normal);
+}
+
+.hamburger-line::before,
+.hamburger-line::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: var(--color-primary);
+  left: 0;
+  transition: all var(--transition-normal);
+}
+
+.hamburger-line::before {
+  top: -6px;
+}
+
+.hamburger-line::after {
+  top: 6px;
+}
+
+.header-wallet-btn.active .hamburger-line {
+  background-color: transparent; /* Hide middle line */
+}
+
+.header-wallet-btn.active .hamburger-line::before {
+  top: 0;
+  transform: rotate(45deg);
+}
+
+.header-wallet-btn.active .hamburger-line::after {
+  top: 0;
+  transform: rotate(-45deg);
+}
+
+.nav-btn-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* Add some responsive styles if needed */
+@media (max-width: 768px) {
+  .title {
+    font-size: 1.2rem;
+  }
+  .subtitle {
+    font-size: 0.8rem;
+  }
+  .header-wallet-btn {
+    padding: 8px 12px;
+  }
+  .nav-btn-text {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-text {
+    display: none; /* Hide text on very small screens */
+  }
+  .header-content {
+    justify-content: flex-end; /* Align button to the right */
+  }
+}
+
+</style> 
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -28,47 +28,22 @@
            </button>
            <button class="close-sidebar-btn" @click="closeSidebar">×</button>
          </div>
-        
-          <!-- Блок информации о пользователе (отображается, если не активна ни одна форма) -->
-          <div v-if="!emailAuth.showForm && !emailAuth.showVerification && !telegramAuth.showVerification" class="user-info">
-            <h3>Идентификаторы:</h3>
-            <div class="user-info-item">
-              <span class="user-info-label">Кошелек:</span>
-              <span v-if="hasIdentityType('wallet')" class="user-info-value">
-                {{ truncateAddress(getIdentityValue('wallet')) }}
-              </span>
-              <button v-else class="connect-btn" @click="handleWalletAuth">
-                Подключить кошелек
-              </button>
-            </div>
-          </div>
        </div>

-        <!-- Блок баланса токенов -->
-        <div v-if="isAuthenticated && hasIdentityType('wallet') && tokenBalances && tokenBalances.eth !== undefined" class="token-balances">
-          <h3>Баланс токенов:</h3>
-          <div class="token-balance">
-            <span class="token-name">ETH:</span>
-            <span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
-          </div>
-          <div class="token-balance">
-            <span class="token-name">BSC:</span>
-            <span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
-          </div>
-          <div class="token-balance">
-            <span class="token-name">ARB:</span>
-            <span class="token-amount">{{
-              Number(tokenBalances.arbitrum).toLocaleString()
-            }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
-          </div>
-          <div class="token-balance">
-            <span class="token-name">POL:</span>
-            <span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
-          </div>
+        <!-- Навигационные кнопки -->
+        <div class="navigation-buttons">
+          <router-link to="/" class="nav-link-btn" active-class="active">
+            <i class="nav-icon">💬</i>
+            <span>Чат</span>
+          </router-link>
+          <router-link to="/crm" class="nav-link-btn" active-class="active">
+            <i class="nav-icon">👥</i>
+            <span>CRM</span>
+          </router-link>
+          <router-link to="/settings" class="nav-link-btn" active-class="active">
+            <i class="nav-icon">⚙️</i>
+            <span>Настройки</span>
+          </router-link>
        </div>
      </div>
    </div>
@@ -76,9 +51,12 @@
 </template>

 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount } from 'vue';
 import { TOKEN_CONTRACTS } from '../services/tokens';
+import { useRouter } from 'vue-router';
+import eventBus from '../utils/eventBus';

+const router = useRouter();
 const props = defineProps({
  modelValue: Boolean,
  isAuthenticated: Boolean,
@@ -104,6 +82,25 @@ const closeSidebar = () => {
  emit('update:modelValue', false);
 };

+// Обработка события изменения авторизации
+const handleAuthEvent = (event) => {
+  console.log('[Sidebar] Получено событие изменения авторизации:', event);
+  // Здесь можно обновить данные, если нужно дополнительное обновление
+};
+
+// Подписка на события
+let unsubscribe = null;
+onMounted(() => {
+  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
+});
+
+// Очистка при размонтировании
+onBeforeUnmount(() => {
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+
 // Вспомогательные функции
 const truncateAddress = (address) => {
  if (!address) return '';
@@ -159,6 +156,43 @@ const getIdentityValue = (type) => {
  border-color: var(--color-dark);
 }

+/* Стили для навигационных кнопок */
+.navigation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.nav-link-btn {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-light);
+  color: var(--color-dark);
+  border: 1px solid var(--color-grey-light);
+  border-radius: var(--radius-lg);
+  padding: 12px 15px;
+  font-size: var(--font-size-md);
+  text-decoration: none;
+  transition: all var(--transition-normal);
+  cursor: pointer;
+}
+
+.nav-link-btn.active {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border-color: var(--color-primary);
+}
+
+.nav-link-btn:hover:not(.active) {
+  background-color: var(--color-grey-light);
+}
+
+.nav-icon {
+  margin-right: 10px;
+  font-size: 1.2em;
+}
+
@media screen and (max-width: 480px) {
  .close-sidebar-btn {
    width: 42px;
@@ -166,6 +200,11 @@ const getIdentityValue = (type) => {
    min-width: 42px;
    font-size: 20px;
  }
+  
+  .nav-link-btn {
+    padding: 10px 12px;
+    font-size: var(--font-size-sm);
+  }
 }

@media screen and (max-width: 360px) {
@@ -175,5 +214,9 @@ const getIdentityValue = (type) => {
    min-width: 36px;
    font-size: 18px;
  }
+  
+  .nav-link-btn {
+    padding: 8px 10px;
+  }
 }
 </style>