From 6efc976246aaabb9c9d2b90f2fc6f668b0db87e2 Mon Sep 17 00:00:00 2001
From: Alex <info@hb3-accelerator.com>
Date: Tue, 21 Oct 2025 17:11:32 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BD=D0=BE=D0=B2=D0=B0=D1=8F=20=D1=84?=
 =?UTF-8?q?=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BaseLayout.vue        |   5 +-
 frontend/src/components/ChatInterface.vue     |  66 ++--
 frontend/src/components/ContactTable.vue      |  28 +-
 frontend/src/components/Header.vue            |   8 +-
 frontend/src/views/CrmView.vue                | 331 ++++++++----------
 frontend/src/views/HomeView.vue               | 136 +++++--
 frontend/src/views/SettingsView.vue           |   2 +-
 .../src/views/settings/SettingsIndexView.vue  | 181 +++++++---
 8 files changed, 428 insertions(+), 329 deletions(-)

diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 03379af..278fb23 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -261,9 +261,10 @@ onMounted(() => {
 <style scoped>
 .app-container {
   display: flex;
-  min-height: 100vh;
+  height: 100vh;
   position: relative;
   background-color: var(--color-light);
+  overflow: hidden;
 }
 
 .main-content {
@@ -274,6 +275,8 @@ onMounted(() => {
   max-width: calc(100% - 350px);
   padding: 0 20px;
   background-color: var(--color-white);
+  height: 100vh;
+  overflow: hidden;
 }
 
 .main-content.no-right-sidebar {
diff --git a/frontend/src/components/ChatInterface.vue b/frontend/src/components/ChatInterface.vue
index 00bb350..db419b4 100644
--- a/frontend/src/components/ChatInterface.vue
+++ b/frontend/src/components/ChatInterface.vue
@@ -550,11 +550,13 @@ async function handleAiReply() {
   flex: 1;
   display: flex;
   flex-direction: column;
-  margin: var(--spacing-lg) 0;
+  margin: 0;
   padding: 0;
   min-height: 500px;
   width: 100%;
   position: relative;
+  background: transparent;
+  height: 100%;
 }
 
 .chat-messages {
@@ -562,15 +564,11 @@ async function handleAiReply() {
   flex-direction: column;
   overflow-y: auto;
   padding: var(--spacing-lg);
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-grey-light);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: calc(var(--chat-input-height, 80px) + 15px);
-  transition: bottom var(--transition-normal);
+  background: transparent;
+  border-radius: 0;
+  border: none;
+  flex: 1;
+  min-height: 0;
 }
 
 .chat-input {
@@ -578,12 +576,10 @@ async function handleAiReply() {
   flex-direction: column;
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--color-white);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-grey-light);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid #e9ecef;
+  flex-shrink: 0;
   transition: all var(--transition-normal);
   z-index: 10;
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
@@ -773,50 +769,32 @@ async function handleAiReply() {
 
 @media (max-width: 480px) {
   .chat-input {
-    position: fixed !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    width: 100vw !important;
-    z-index: 1000 !important;
-    margin: 0 !important;
-    border-radius: 12px 12px 0 0 !important;
+    position: static !important;
+    border-radius: 0 !important;
+    padding: 8px 12px !important;
+    background: #f8f8f8 !important;
+    border-top: 1px solid #eee !important;
   }
   .chat-messages {
-    padding-bottom: 70px !important; /* чтобы сообщения не перекрывались input */
-    max-height: calc(100vh - 70px) !important;
+    padding: var(--spacing-md) !important;
     overflow-y: auto !important;
   }
 }
 
 @media (max-width: 600px) {
   .chat-input {
-    position: fixed !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    width: 100vw !important;
-    z-index: 1000 !important;
-    margin: 0 !important;
-    border-radius: 12px 12px 0 0 !important;
+    position: static !important;
+    border-radius: 0 !important;
     padding: 8px 12px !important;
     background: #f8f8f8 !important;
     border-top: 1px solid #eee !important;
-    box-sizing: border-box !important;
   }
   .chat-messages {
-    padding-bottom: 70px !important; /* чтобы сообщения не перекрывались input */
-    max-height: calc(100vh - 70px) !important;
+    padding: var(--spacing-md) !important;
     overflow-y: auto !important;
-    box-sizing: border-box !important;
   }
   .chat-container {
-    padding: 0 !important;
-    margin: 0 !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    min-height: 0 !important;
-    box-sizing: border-box !important;
+    height: 100% !important;
   }
 }
 
diff --git a/frontend/src/components/ContactTable.vue b/frontend/src/components/ContactTable.vue
index d11a178..412a0f4 100644
--- a/frontend/src/components/ContactTable.vue
+++ b/frontend/src/components/ContactTable.vue
@@ -434,27 +434,21 @@ async function openChatForSelected() {
 }
 
 // Новая функция для отправки публичного сообщения
-async function sendPublicMessage() {
-  if (selectedIds.value.length === 0) return;
+function sendPublicMessage() {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('Выберите контакт для отправки публичного сообщения');
+    return;
+  }
   
   const contactId = selectedIds.value[0];
   const contact = filteredContacts.value.find(c => c.id === contactId);
-  if (!contact) return;
-  
-  try {
-    const content = prompt('Введите текст публичного сообщения:');
-    if (!content) return;
-    
-    await sendMessage({
-      recipientId: contactId,
-      content,
-      messageType: 'public'
-    });
-    
-    ElMessage.success('Публичное сообщение отправлено');
-  } catch (error) {
-    ElMessage.error('Ошибка отправки сообщения: ' + (error.message || error));
+  if (!contact) {
+    ElMessage.error('Контакт не найден');
+    return;
   }
+  
+  // Открываем страницу детали контакта с чатом для публичных сообщений
+  showDetails(contact);
 }
 
 // Функция для открытия приватного чата
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 2bb13e8..3bf60a7 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -14,8 +14,6 @@
   <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"
@@ -89,7 +87,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .header {
   background-color: var(--color-white);
-  padding: 15px 20px; /* Возвращаем горизонтальный padding */
+  padding: 30px 20px 25px 20px; /* Увеличиваем высоту шапки еще на 10px */
   position: sticky;
   top: 0;
   z-index: 100; /* Ensure header stays on top */
@@ -124,7 +122,7 @@ onBeforeUnmount(() => {
   background-color: var(--color-white);
   color: var(--color-primary);
   border: none;
-  padding: 10px 15px;
+  padding: 8px;
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: all var(--transition-normal);
@@ -198,7 +196,7 @@ onBeforeUnmount(() => {
     font-size: 0.8rem;
   }
   .header-wallet-btn {
-    padding: 8px 12px;
+    padding: 6px;
   }
   .nav-btn-text {
     font-size: 0.8rem;
diff --git a/frontend/src/views/CrmView.vue b/frontend/src/views/CrmView.vue
index da758c7..2615e00 100644
--- a/frontend/src/views/CrmView.vue
+++ b/frontend/src/views/CrmView.vue
@@ -18,47 +18,62 @@
     :is-loading-tokens="isLoadingTokens"
     @auth-action-completed="$emit('auth-action-completed')"
   >
-    <div class="crm-view-container">
+    <div class="crm-management">
+      <!-- Заголовок -->
+      <div class="management-header">
+        <div class="header-content">
+          <h1>CRM Система</h1>
+        </div>
+      </div>
 
-      <div class="crm-contacts-block">
-        <h2>Контакты</h2>
-        <button class="details-btn" @click="goToContactsList">
-          Подробнее
-        </button>
-      </div>
-      <div class="crm-tables-block">
-        <h2>Таблицы</h2>
-        <button class="details-btn" @click="goToTables">
-          Подробнее
-        </button>
-      </div>
-      <!-- Новый блок Контент -->
-      <div class="crm-content-block">
-        <h2>Контент</h2>
-        <button class="details-btn" @click="goToContent">
-          Подробнее
-        </button>
-      </div>
-      <!-- Новый блок Управление -->
-      <div class="crm-management-block">
-        <h2>Управление</h2>
-        <button class="details-btn" @click="goToManagement">
-          Подробнее
-        </button>
-      </div>
-      <!-- Блок Веб3 приложение -->
-      <div class="crm-web3-block">
-        <h2>Веб3 приложение</h2>
-        <button class="details-btn" @click="goToWeb3App">
-          Подробнее
-        </button>
-      </div>
-      <!-- Блок Акселератор -->
-      <div class="crm-accelerator-block">
-        <h2>Акселератор</h2>
-        <button class="details-btn" @click="goToAcceleratorRegistration">
-          Подробнее
-        </button>
+      <!-- Блоки CRM -->
+      <div class="management-blocks">
+        <!-- Столбец 1 -->
+        <div class="blocks-column">
+          <div class="management-block">
+            <h3>Контакты</h3>
+            <p>Управление контактной базой, клиентами и партнерами</p>
+            <button class="details-btn" @click="goToContactsList">
+              Подробнее
+            </button>
+          </div>
+          
+          <div class="management-block">
+            <h3>Таблицы</h3>
+            <p>Создание и управление таблицами данных</p>
+            <button class="details-btn" @click="goToTables">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Столбец 2 -->
+        <div class="blocks-column">
+          <div class="management-block">
+            <h3>Контент</h3>
+            <p>Управление контентом, страницами и публикациями</p>
+            <button class="details-btn" @click="goToContent">Подробнее</button>
+          </div>
+          
+          <div class="management-block">
+            <h3>Управление</h3>
+            <p>Администрирование системы и настройки</p>
+            <button class="details-btn" @click="goToManagement">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Столбец 3 -->
+        <div class="blocks-column">
+          <div class="management-block">
+            <h3>VDS Сервер</h3>
+            <p>Настройки и управление</p>
+            <button class="details-btn" @click="goToWeb3App">Подробнее</button>
+          </div>
+          
+          <div class="management-block">
+            <h3>Акселератор</h3>
+            <p>Регистрация и управление проектами</p>
+            <button class="details-btn" @click="goToAcceleratorRegistration">Подробнее</button>
+          </div>
+        </div>
       </div>
     </div>
   </BaseLayout>
@@ -256,180 +271,124 @@ function goToAcceleratorRegistration() {
 </script>
 
 <style scoped>
-.crm-view-container {
+.crm-management {
   padding: 20px;
   background-color: var(--color-white);
   border-radius: var(--radius-lg);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-  margin-bottom: 20px;
+  min-height: 100vh;
 }
 
-h1, h2, h3, h4 {
-  color: var(--color-dark);
-  margin-bottom: 16px;
+.management-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #e9ecef;
 }
 
-p {
-  line-height: 1.6;
-  margin-bottom: 10px;
+.header-content h1 {
+  margin: 0;
+  color: var(--color-primary);
+  font-size: 2rem;
+  font-weight: 700;
 }
 
-strong {
- color: var(--color-primary);
+.crm-description {
+  margin: 0.5rem 0 0 0;
+  color: #666;
+  font-size: 1.1rem;
 }
 
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: var(--color-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 20px auto;
+.management-blocks {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.blocks-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: stretch;
+}
+
+.management-block {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e9ecef;
+  transition: all 0.3s ease;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 250px;
+}
+
+.management-block:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  border-color: var(--color-primary);
+}
+
+.management-block h3 {
+  margin: 0 0 1rem 0;
+  color: var(--color-primary);
+  font-size: 1.5rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.management-block p {
+  margin: 0 0 1.5rem 0;
+  color: #666;
+  font-size: 1rem;
+  line-height: 1.5;
+  flex-grow: 1;
 }
 
 .details-btn {
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
-  padding: 0.5rem 1.5rem;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
   cursor: pointer;
   font-size: 1rem;
-  transition: background 0.2s;
-  margin: 0;
+  font-weight: 600;
+  transition: all 0.2s;
+  min-width: 120px;
+  flex-shrink: 0;
+  margin-top: auto;
 }
 
 .details-btn:hover {
   background: var(--color-primary-dark);
+  transform: translateY(-1px);
 }
 
-.details-btn-secondary {
-  background: #6c757d;
+/* Адаптивность */
+@media (max-width: 1024px) {
+  .management-blocks {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
-.details-btn-secondary:hover {
-  background: #5a6268;
-}
-
-
-
-.crm-contacts-block {
-  margin: 32px 0 24px 0;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.crm-contacts-block h2 {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-.crm-contacts-block .details-btn {
-  margin-top: 0;
-}
-
-.crm-tables-block {
-  margin: 32px 0 24px 0;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.crm-tables-block h2 {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-.crm-tables-block .details-btn {
-  margin-top: 0;
-}
-
-.crm-content-block {
-  margin: 32px 0 24px 0;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.crm-content-block h2 {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-.crm-content-block .details-btn {
-  margin-top: 0;
-}
-
-.crm-management-block {
-  margin: 32px 0 24px 0;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.crm-management-block h2 {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-.crm-management-block .details-btn {
-  margin-top: 0;
-}
-
-.crm-web3-block {
-  margin: 32px 0 24px 0;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.crm-web3-block h2 {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-.crm-web3-block .details-btn {
-  margin-top: 0;
-}
-
-.crm-accelerator-block {
-  margin: 32px 0 24px 0;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.crm-accelerator-block h2 {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-.crm-accelerator-block .details-btn {
-  margin-top: 0;
+@media (max-width: 768px) {
+  .management-blocks {
+    grid-template-columns: 1fr;
+  }
+  
+  .management-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .header-content h1 {
+    font-size: 1.5rem;
+  }
 }
 </style> 
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index bdacd05..1906bbf 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -18,28 +18,40 @@
     :is-loading-tokens="isLoadingTokens"
     @auth-action-completed="$emit('auth-action-completed')"
   >
-    <template v-if="auth.userAccessLevel.value && auth.userAccessLevel.value.hasAccess">
-      <ChatInterface 
-        :messages="messages" 
-        :is-loading="isLoading || isConnectingWallet"
-        :has-more-messages="messageLoading.hasMoreMessages"
-        v-model:newMessage="newMessage"
-        v-model:attachments="attachments"
-        @send-message="handleSendMessage"
-        @load-more="loadMessages"
-      />
-    </template>
-    <template v-else>
-    <ChatInterface 
-      :messages="messages" 
-      :is-loading="isLoading || isConnectingWallet"
-      :has-more-messages="messageLoading.hasMoreMessages"
-      v-model:newMessage="newMessage"
-      v-model:attachments="attachments"
-      @send-message="handleSendMessage"
-      @load-more="loadMessages"
-    />
-    </template>
+    <div class="home-management">
+      <!-- Заголовок -->
+      <div class="management-header">
+        <div class="header-content">
+          <h1>ИИ Ассистент</h1>
+        </div>
+      </div>
+
+      <!-- Чат интерфейс -->
+      <div class="chat-wrapper">
+        <template v-if="auth.userAccessLevel.value && auth.userAccessLevel.value.hasAccess">
+          <ChatInterface 
+            :messages="messages" 
+            :is-loading="isLoading || isConnectingWallet"
+            :has-more-messages="messageLoading.hasMoreMessages"
+            v-model:newMessage="newMessage"
+            v-model:attachments="attachments"
+            @send-message="handleSendMessage"
+            @load-more="loadMessages"
+          />
+        </template>
+        <template v-else>
+          <ChatInterface 
+            :messages="messages" 
+            :is-loading="isLoading || isConnectingWallet"
+            :has-more-messages="messageLoading.hasMoreMessages"
+            v-model:newMessage="newMessage"
+            v-model:attachments="attachments"
+            @send-message="handleSendMessage"
+            @load-more="loadMessages"
+          />
+        </template>
+      </div>
+    </div>
   </BaseLayout>
 </template>
 
@@ -142,3 +154,83 @@
     }
   };
 </script>
+
+<style scoped>
+.home-management {
+  padding: 20px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  height: calc(100vh - 40px);
+  overflow: hidden;
+}
+
+.management-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #e9ecef;
+}
+
+.header-content h1 {
+  margin: 0;
+  color: var(--color-primary);
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.chat-wrapper {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e9ecef;
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .management-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .header-content h1 {
+    font-size: 1.5rem;
+  }
+  
+  .home-management {
+    padding: 16px;
+    height: calc(100vh - 32px);
+  }
+  
+  .chat-wrapper {
+    border-radius: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .home-management {
+    padding: 12px;
+    height: calc(100vh - 24px);
+  }
+  
+  .management-header {
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+  }
+  
+  .header-content h1 {
+    font-size: 1.3rem;
+  }
+  
+  .chat-wrapper {
+    border-radius: 6px;
+  }
+}
+</style>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 58d990c..73a543a 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -19,7 +19,7 @@
     @auth-action-completed="$emit('auth-action-completed')"
   >
     <div class="settings-view-container">
-      <div class="page-header">
+      <div v-if="route.name !== 'settings-index'" class="page-header">
         <h1>{{ pageTitle }}</h1>
         <button 
           v-if="route.name === 'settings-blockchain-dle-deploy' || route.name === 'settings-dle-v2-deploy'" 
diff --git a/frontend/src/views/settings/SettingsIndexView.vue b/frontend/src/views/settings/SettingsIndexView.vue
index 311cbba..e759482 100644
--- a/frontend/src/views/settings/SettingsIndexView.vue
+++ b/frontend/src/views/settings/SettingsIndexView.vue
@@ -11,31 +11,49 @@
 -->
 
 <template>
-  <div class="main-blocks">
-    <div class="main-block">
-      <h3>ИИ</h3>
-      <p>Настройки интеграций, моделей, ассистента и RAG.</p>
-      <button class="details-btn" @click="$router.push('/settings/ai')">Подробнее</button>
-    </div>
-    <div class="main-block">
-      <h3>Блокчейн</h3>
-      <p>Интеграция с блокчейн-сетями, RPC, токены и смарт-контракты.</p>
-      <button class="details-btn" @click="$router.push('/settings/dle-v2-deploy')">Подробнее</button>
-    </div>
-    <div class="main-block">
-      <h3>Безопасность</h3>
-      <p>Управление доступом, токенами, аутентификацией и правами.</p>
-      <button class="details-btn" @click="$router.push('/settings/security')">Подробнее</button>
-    </div>
-    <div class="main-block">
-      <h3>Сервер</h3>
-      <p>Настройки серверов, хостинга и публикации приложения.</p>
-      <button class="details-btn" @click="$router.push('/settings/interface')">Подробнее</button>
+  <div class="settings-management">
+    <!-- Заголовок -->
+    <div class="management-header">
+      <div class="header-content">
+        <h1>Настройки системы</h1>
+      </div>
     </div>
 
+    <!-- Блоки настроек -->
+    <div class="management-blocks">
+      <!-- Столбец 1 -->
+      <div class="blocks-column">
+        <div class="management-block">
+          <h3>ИИ</h3>
+          <p>Настройки интеграций, моделей, ассистента и RAG</p>
+          <button class="details-btn" @click="$router.push('/settings/ai')">
+            Подробнее
+          </button>
+        </div>
+        
+        <div class="management-block">
+          <h3>Блокчейн</h3>
+          <p>Интеграция с блокчейн-сетями, RPC, токены и смарт-контракты</p>
+          <button class="details-btn" @click="$router.push('/settings/dle-v2-deploy')">Подробнее</button>
+        </div>
+      </div>
+
+      <!-- Столбец 2 -->
+      <div class="blocks-column">
+        <div class="management-block">
+          <h3>Безопасность</h3>
+          <p>Управление доступом, токенами, аутентификацией и правами</p>
+          <button class="details-btn" @click="$router.push('/settings/security')">Подробнее</button>
+        </div>
+        
+        <div class="management-block">
+          <h3>Сервер</h3>
+          <p>Настройки серверов, хостинга и публикации приложения</p>
+          <button class="details-btn" @click="$router.push('/settings/interface')">Подробнее</button>
+        </div>
+      </div>
+    </div>
   </div>
-
-
 </template>
 
 <script setup>
@@ -43,57 +61,114 @@
 </script>
 
 <style scoped>
-.main-blocks {
-  display: flex;
-  gap: 2rem;
-  flex-wrap: wrap;
+.settings-management {
+  padding: 20px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  min-height: 100vh;
 }
-.main-block {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  padding: 2rem;
-  min-width: 260px;
-  flex: 1 1 300px;
+
+.management-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #e9ecef;
+}
+
+.header-content h1 {
+  margin: 0;
+  color: var(--color-primary);
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.management-blocks {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+}
+
+.blocks-column {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  gap: 1.5rem;
+  align-items: stretch;
 }
-.button-group {
-  margin-top: 1.5rem;
+
+.management-block {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e9ecef;
+  transition: all 0.3s ease;
+  text-align: center;
   display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 250px;
+}
+
+.management-block:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  border-color: var(--color-primary);
+}
+
+.management-block h3 {
+  margin: 0 0 1rem 0;
+  color: var(--color-primary);
+  font-size: 1.5rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.management-block p {
+  margin: 0 0 1.5rem 0;
+  color: #666;
+  font-size: 1rem;
+  line-height: 1.5;
+  flex-grow: 1;
 }
 
 .details-btn {
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
-  padding: 0.5rem 1.5rem;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
   cursor: pointer;
   font-size: 1rem;
-  transition: background 0.2s;
-  margin: 0;
+  font-weight: 600;
+  transition: all 0.2s;
+  min-width: 120px;
+  flex-shrink: 0;
+  margin-top: auto;
 }
 
 .details-btn:hover {
   background: var(--color-primary-dark);
+  transform: translateY(-1px);
 }
 
-.details-btn-secondary {
-  background: #6c757d;
+/* Адаптивность */
+@media (max-width: 1024px) {
+  .management-blocks {
+    grid-template-columns: 1fr;
+  }
 }
 
-.details-btn-secondary:hover {
-  background: #5a6268;
+@media (max-width: 768px) {
+  .management-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .header-content h1 {
+    font-size: 1.5rem;
+  }
 }
-
-/* Для блоков без группы кнопок */
-.main-block .details-btn:not(.button-group .details-btn) {
-  margin-top: 1.5rem;
-}
-
-
 </style> 
\ No newline at end of file