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

frontend/src/views/CrmView.vue

@@ -1,5 +1,11 @@
 <template>
-  <BaseLayout>
+  <BaseLayout
+    :is-authenticated="isAuthenticated"
+    :identities="identities"
+    :token-balances="tokenBalances"
+    :is-loading-tokens="isLoadingTokens"
+    @auth-action-completed="$emit('auth-action-completed')"
+  >
     <div class="crm-view-container">
       <h1>CRM Система</h1>
       <div v-if="isLoading">Загрузка данных пользователя...</div>
@@ -29,13 +35,24 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue';
 import { useAuth } from '../composables/useAuth';
 import { useRouter } from 'vue-router';
 import { setToStorage } from '../utils/storage';
 import BaseLayout from '../components/BaseLayout.vue';
 import eventBus from '../utils/eventBus';
 
+// Определяем props
+const props = defineProps({
+  isAuthenticated: Boolean,
+  identities: Array,
+  tokenBalances: Object,
+  isLoadingTokens: Boolean
+});
+
+// Определяем emits
+const emit = defineEmits(['auth-action-completed']);
+
 const auth = useAuth();
 const router = useRouter();
 const isLoading = ref(true);
@@ -74,12 +91,12 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .crm-view-container {
-  max-width: 1150px;
-  margin: 20px auto;
   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;
 }
 
 h1 {

frontend/src/views/HomeView.vue

@@ -1,5 +1,11 @@
 <template>
-  <BaseLayout>
+  <BaseLayout
+    :is-authenticated="isAuthenticated"
+    :identities="identities"
+    :token-balances="tokenBalances"
+    :is-loading-tokens="isLoadingTokens"
+    @auth-action-completed="$emit('auth-action-completed')"
+  >
     <ChatInterface 
       :messages="messages" 
       :is-loading="isLoading || isConnectingWallet"
@@ -13,17 +19,27 @@
 </template>
 
 <script setup>
-  import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
+  import { ref, onMounted, watch, onBeforeUnmount, defineProps, defineEmits } from 'vue';
   import { useAuth } from '../composables/useAuth';
   import { useChat } from '../composables/useChat';
   import { connectWithWallet } from '../services/wallet';
   import eventBus from '../utils/eventBus';
-  import '../assets/styles/home.css';
   import BaseLayout from '../components/BaseLayout.vue';
   import ChatInterface from '../components/ChatInterface.vue';
 
   console.log('HomeView.vue: Using BaseLayout');
 
+  // Определяем props, переданные из App.vue через RouterView
+  const props = defineProps({
+    isAuthenticated: Boolean,
+    identities: Array,
+    tokenBalances: Object,
+    isLoadingTokens: Boolean
+  });
+
+  // Определяем emits
+  const emit = defineEmits(['auth-action-completed']);
+
   // =====================================================================
   // 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
   // =====================================================================

frontend/src/views/SettingsView.vue

@@ -1,192 +1,64 @@
 <template>
-  <BaseLayout>
+  <BaseLayout
+    :is-authenticated="isAuthenticated"
+    :identities="identities"
+    :token-balances="tokenBalances"
+    :is-loading-tokens="isLoadingTokens"
+    @auth-action-completed="$emit('auth-action-completed')"
+  >
     <div class="settings-view-container">
       <h1>Настройки</h1>
       
-      <!-- Блок информации о пользователе (всегда виден) -->
-      <div class="user-info-section">
-        <h3>Ваши идентификаторы:</h3>
-        <div v-if="!auth.isAuthenticated.value" class="user-info-empty">
-          Войдите, чтобы увидеть идентификаторы
-        </div>
-        <div v-else class="user-info-item">
-          <span class="user-info-label">Кошелек:</span>
-          <span v-if="hasIdentityType('wallet')" class="user-info-value">
-            {{ truncateAddress(getIdentityValue('wallet')) }}
-          </span>
-          <span v-else class="user-info-value">Не подключен</span>
-        </div>
-      </div>
-      
-      <!-- Блок баланса токенов (всегда виден) -->
-      <div class="token-balances-section">
-        <h3>Баланс токенов:</h3>
-        <div v-if="!auth.isAuthenticated.value" class="token-no-data">
-          Войдите, чтобы увидеть баланс токенов
-        </div>
-        <div v-else-if="isLoadingTokens" class="token-loading">
-          Загрузка балансов...
-        </div>
-        <div v-else-if="!hasTokenBalances" class="token-no-data">
-          Информация о балансе не доступна
-        </div>
-        <div v-else>
-          <div v-if="tokenBalances.eth" 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 v-if="tokenBalances.bsc" 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 v-if="tokenBalances.arbitrum" 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 v-if="tokenBalances.polygon" 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>
-      </div>
-      
       <div v-if="isLoading">Загрузка данных пользователя...</div>
       <div v-else-if="!auth.isAuthenticated.value">
         <p>Для доступа к настройкам необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
       </div>
-      <div v-else>
-        <p>Добро пожаловать в Настройки!</p>
-        
-        <div v-if="auth.isAdmin.value">
-          <p><strong>У вас полный доступ (Администратор).</strong></p>
-          <!-- Сюда будут добавляться полные настройки -->
-          <p>Здесь будут настройки системы, управление пользователями и т.д.</p>
-        </div>
-        <div v-else>
-          <p><strong>У вас ограниченный доступ.</strong></p>
-          <!-- Сюда будут добавляться ограниченные настройки -->
-          <p>Здесь будут настройки профиля, уведомлений и т.д.</p>
-        </div>
-        <!-- Общие настройки для всех авторизованных -->
-        <div class="general-settings">
-          <h3>Общие настройки</h3>
-          <label>
-            Язык интерфейса: 
-            <select v-model="selectedLanguage">
-              <option value="ru">Русский</option>
-              <option value="en">English</option> 
-            </select>
-          </label>
+      <div v-else class="settings-navigation-buttons">
+        <h3>Разделы настроек:</h3>
+        <div class="buttons-grid">
+          <router-link :to="{ name: 'settings-ai' }" class="btn btn-secondary">ИИ</router-link>
+          <router-link :to="{ name: 'settings-blockchain' }" class="btn btn-secondary">Блокчейн</router-link>
+          <router-link :to="{ name: 'settings-security' }" class="btn btn-secondary">Безопасность</router-link>
+          <router-link :to="{ name: 'settings-interface' }" class="btn btn-secondary">Интерфейс</router-link>
         </div>
       </div>
+
+      <!-- Router view для отображения дочерних компонентов настроек -->
+      <router-view></router-view>
+
     </div>
   </BaseLayout>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount, computed, defineProps, defineEmits } from 'vue';
 import { useAuth } from '../composables/useAuth';
 import { useRouter } from 'vue-router';
 import { getFromStorage, setToStorage } from '../utils/storage';
 import BaseLayout from '../components/BaseLayout.vue';
 import eventBus from '../utils/eventBus';
-import { TOKEN_CONTRACTS } from '../services/tokens';
-import { fetchTokenBalances } from '../services/tokens';
+
+// Определяем props
+const props = defineProps({
+  isAuthenticated: Boolean,
+  identities: Array,
+  tokenBalances: Object,
+  isLoadingTokens: Boolean
+});
+
+// Определяем emits
+const emit = defineEmits(['auth-action-completed']);
 
 const auth = useAuth();
 const router = useRouter();
 const isLoading = ref(true);
-const selectedLanguage = ref(getFromStorage('userLanguage', 'ru'));
-
-// Состояние для токенов
-const tokenBalances = ref({});
-const isLoadingTokens = ref(false);
-const hasTokenBalances = computed(() => {
-  return tokenBalances.value && 
-    Object.keys(tokenBalances.value).length > 0 && 
-    Object.values(tokenBalances.value).some(value => parseInt(value) > 0);
-});
-
-// Получаем данные об идентификаторах пользователя
-const identities = computed(() => auth.identities.value);
-
-// Вспомогательные функции
-const truncateAddress = (address) => {
-  if (!address) return '';
-  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
-};
-
-const hasIdentityType = (type) => {
-  if (!identities.value) return false;
-  return identities.value.some((identity) => identity.provider === type);
-};
-
-const getIdentityValue = (type) => {
-  if (!identities.value) return null;
-  const identity = identities.value.find((identity) => identity.provider === type);
-  return identity ? identity.provider_id : null;
-};
-
-// Обновление балансов токенов
-const refreshTokenBalances = async () => {
-  if (!hasIdentityType('wallet')) return;
-  
-  isLoadingTokens.value = true;
-  try {
-    const walletAddress = getIdentityValue('wallet');
-    console.log('[SettingsView] Обновление балансов для адреса:', walletAddress);
-    
-    const balances = await fetchTokenBalances(walletAddress);
-    console.log('[SettingsView] Полученные балансы:', balances);
-    
-    tokenBalances.value = balances || {};
-  } catch (error) {
-    console.error('[SettingsView] Ошибка при получении балансов:', error);
-    tokenBalances.value = {};
-  } finally {
-    isLoadingTokens.value = false;
-  }
-};
-
-// Следим за изменениями в идентификаторах
-watch(() => identities.value, (newIdentities, oldIdentities) => {
-  if (hasIdentityType('wallet')) {
-    // Проверяем, появился ли новый идентификатор кошелька или изменился существующий
-    const newWalletId = getIdentityValue('wallet');
-    const oldWalletIdentity = oldIdentities ? oldIdentities.find(id => id.provider === 'wallet') : null;
-    const oldWalletId = oldWalletIdentity ? oldWalletIdentity.provider_id : null;
-    
-    if (newWalletId !== oldWalletId) {
-      console.log('[SettingsView] Обнаружено изменение идентификатора кошелька, обновляем балансы');
-      refreshTokenBalances();
-    }
-  }
-}, { deep: true });
 
 // Обработчик события изменения авторизации
 const handleAuthEvent = (eventData) => {
   console.log('[SettingsView] Получено событие изменения авторизации:', eventData);
   isLoading.value = false;
-  
-  // При изменении авторизации обновляем балансы
-  if (eventData.isAuthenticated) {
-    setTimeout(() => {
-      refreshTokenBalances(); // Небольшая задержка для обновления идентификаторов
-    }, 500);
-  }
 };
 
-// Сохраняем язык при изменении
-watch(selectedLanguage, (newLang) => {
-  setToStorage('userLanguage', newLang);
-  // TODO: Добавить логику для реальной смены языка интерфейса (например, через i18n)
-  console.log(`[Settings] Язык изменен на: ${newLang}`);
-});
-
 const goToHomeAndShowSidebar = () => {
   setToStorage('showWalletSidebar', true);
   router.push({ name: 'home' });
@@ -201,11 +73,6 @@ onMounted(() => {
   
   // Подписка на события авторизации
   unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
-  
-  // Обновляем данные о балансе токенов при загрузке
-  if (auth.isAuthenticated.value && hasIdentityType('wallet')) {
-    refreshTokenBalances();
-  }
 });
 
 onBeforeUnmount(() => {
@@ -214,161 +81,90 @@ onBeforeUnmount(() => {
     unsubscribe();
   }
 });
-
-// Следим за состоянием авторизации для очистки данных при выходе
-watch(() => auth.isAuthenticated.value, (isAuth) => {
-  if (!isAuth) {
-    // Очищаем данные при выходе из системы
-    tokenBalances.value = {};
-  }
-});
 </script>
 
 <style scoped>
+/* Основной контейнер */
 .settings-view-container {
-  max-width: 1150px;
-  margin: 20px auto;
-  padding: 20px;
+  padding: var(--block-padding);
   background-color: var(--color-white);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-h1 {
-  color: var(--color-dark);
+  border-radius: var(--block-radius);
+  box-shadow: var(--shadow-md);
+  margin-top: 20px;
   margin-bottom: 20px;
 }
 
+/* Заголовки */
+h1 {
+  color: var(--color-dark);
+  margin-bottom: var(--spacing-lg);
+}
+
+h3 {
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Общие элементы */
 p {
   line-height: 1.6;
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-sm);
 }
 
 strong {
  color: var(--color-primary);
 }
 
-.general-settings {
-    margin-top: 30px;
-    padding-top: 20px;
-    border-top: 1px solid var(--color-grey-light);
-}
-
-label {
-    display: block;
-    margin-bottom: 10px;
-}
-
-select {
-    padding: 8px;
-    border: 1px solid var(--color-grey);
-    border-radius: var(--radius-md);
-    margin-left: 10px;
-}
-
-button {
-  padding: 5px 10px;
-  background-color: var(--color-primary);
+/* Стили для кнопки "войти" */
+.settings-view-container > div > p > button {
+  background-color: var(--color-accent);
   color: var(--color-white);
   border: none;
-  border-radius: var(--radius-md);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  margin-left: 5px;
-}
-button:hover {
-  opacity: 0.9;
-}
-button:disabled {
-  background-color: var(--color-grey);
-  cursor: not-allowed;
-  opacity: 0.7;
+  transition: background-color var(--transition-fast);
+  margin-left: var(--spacing-xs);
 }
 
-/* Стили для блока информации о пользователе */
-.user-info-section {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: var(--color-light);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-grey-light);
+.settings-view-container > div > p > button:hover {
+  background-color: var(--color-accent-dark);
 }
 
-.user-info-item {
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
+/* Новые стили для кнопок навигации */
+.settings-navigation-buttons {
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-grey-light);
 }
 
-.user-info-label {
-  min-width: 100px;
-  font-weight: 500;
+.buttons-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--spacing-md);
 }
 
-.user-info-value {
-  font-family: monospace;
-  padding: 5px 10px;
-  background-color: var(--color-white);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-grey-light);
-}
-
-/* Стили для блока баланса токенов */
-.token-balances-section {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: var(--color-light);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-grey-light);
-}
-
-.token-balance {
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-}
-
-.token-name {
-  min-width: 60px;
-  font-weight: 500;
-}
-
-.token-amount {
-  font-family: monospace;
-  padding: 5px 10px;
-  background-color: var(--color-white);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-grey-light);
-  margin-right: 10px;
-}
-
-.token-symbol {
-  color: var(--color-primary);
-  font-weight: 500;
-}
-
-.token-loading,
-.token-no-data {
-  margin: 15px 0;
-  padding: 10px;
+.buttons-grid .btn {
+  width: 100%;
   text-align: center;
-  color: var(--color-grey-dark);
-  font-style: italic;
+  justify-content: center;
 }
 
-/* Удаляем стили для кнопки обновления баланса, поскольку больше не нужны */
-.token-action,
-.refresh-btn {
-  display: none;
+/* Анимации */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-.user-info-empty,
-.token-no-data {
-  margin: 15px 0;
-  padding: 10px;
-  text-align: center;
-  color: var(--color-grey-dark);
-  font-style: italic;
+/* Адаптивный дизайн */
+@media (max-width: 768px) {
+  .settings-navigation-buttons {
+    grid-template-columns: 1fr;
+  }
+  
+  .buttons-grid {
+    grid-column: 1;
+    grid-row: auto;
+  }
 }
 </style> 

frontend/src/views/settings/AiSettingsView.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="ai-settings settings-panel">
+    <h2>Настройки ИИ</h2>
+    
+    <!-- Панель Промт -->
+    <div class="sub-settings-panel">
+      <h3>Настройки промптов</h3>
+      <div class="setting-form">
+        <p>Здесь будут настройки для конфигурации промптов</p>
+        <textarea v-model="settings.prompt" placeholder="Базовый промпт для ИИ..." rows="5" class="form-control"></textarea>
+        <button class="btn btn-primary" @click="saveSettings('prompt')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель RAG -->
+    <div class="sub-settings-panel">
+      <h3>Настройки RAG (Retrieval Augmented Generation)</h3>
+      <div class="setting-form">
+        <p>Конфигурация системы поиска и генерации ответов</p>
+        <div class="form-group">
+          <label class="form-label">
+            <input type="checkbox" v-model="settings.ragEnabled">
+            Включить RAG
+          </label>
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('rag')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель Каналы -->
+    <div class="sub-settings-panel">
+      <h3>Настройки каналов для ИИ</h3>
+      <div class="setting-form">
+        <p>Управление каналами связи для ИИ</p>
+        <div class="form-group">
+          <label class="form-label">
+            <input type="checkbox" v-model="settings.channels.telegram">
+            Telegram
+          </label>
+        </div>
+        <div class="form-group">
+          <label class="form-label">
+            <input type="checkbox" v-model="settings.channels.email">
+            Email
+          </label>
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('channels')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель Модели -->
+    <div class="sub-settings-panel">
+      <h3>Настройки моделей ИИ</h3>
+      <div class="setting-form">
+        <p>Выбор и конфигурация моделей ИИ</p>
+        <div class="form-group">
+          <label class="form-label">Модель по умолчанию:</label>
+          <select v-model="settings.defaultModel" class="form-control">
+            <option value="claude-3-haiku">Claude 3 Haiku</option>
+            <option value="claude-3-sonnet">Claude 3 Sonnet</option>
+            <option value="claude-3-opus">Claude 3 Opus</option>
+            <option value="gpt-4o">GPT-4o</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('models')">Сохранить</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Логика из AISettings.vue
+import { reactive, onMounted } from 'vue';
+// TODO: Импортировать API для загрузки/сохранения
+
+// Локальное состояние настроек
+const settings = reactive({
+  prompt: '',
+  ragEnabled: false,
+  channels: {
+    telegram: false,
+    email: false
+  },
+  defaultModel: 'claude-3-sonnet'
+});
+
+// Загрузка настроек при монтировании
+onMounted(() => {
+  loadAiSettings();
+});
+
+const loadAiSettings = async () => {
+  console.log('[AiSettingsView] Загрузка настроек ИИ...');
+  // TODO: Заменить на реальный вызов API
+  // Пример:
+  // try {
+  //   const response = await api.get('/api/settings/ai');
+  //   Object.assign(settings, response.data);
+  // } catch (error) {
+  //   console.error('Ошибка загрузки настроек ИИ:', error);
+  // }
+};
+
+// Сохранение настроек
+const saveSettings = async (section) => {
+  console.log(`[AiSettingsView] Сохранение настроек раздела: ${section}`);
+  // TODO: Заменить на реальный вызов API
+  // Пример:
+  // try {
+  //   const dataToSave = { [section]: settings[section] }; // Или вся группа настроек
+  //   await api.post('/api/settings/ai', dataToSave);
+  //   // Показать сообщение об успехе
+  // } catch (error) {
+  //   console.error('Ошибка сохранения настроек ИИ:', error);
+  //   // Показать сообщение об ошибке
+  // }
+};
+</script>
+
+<style scoped>
+.settings-panel {
+  padding: var(--block-padding);
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  margin-top: var(--spacing-lg);
+  animation: fadeIn var(--transition-normal);
+}
+
+h2 {
+  margin-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding-bottom: var(--spacing-md);
+}
+
+h3 {
+  margin-bottom: var(--spacing-md);
+  color: var(--color-primary);
+}
+
+.sub-settings-panel {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 1px dashed var(--color-grey-light);
+}
+
+.sub-settings-panel:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.setting-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.form-group {
+  margin-bottom: 0; /* Убираем лишний отступ, т.к. есть gap */
+}
+
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.form-control {
+  max-width: 500px; /* Ограничим ширину для select/textarea */
+}
+
+.btn-primary {
+ align-self: flex-start;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style> 

frontend/src/views/settings/BlockchainSettingsView.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="blockchain-settings settings-panel">
+    <h2>Настройки Блокчейна</h2>
+    
+    <!-- Панель Смарт-контракты -->
+    <div class="sub-settings-panel">
+      <h3>Настройки смарт-контрактов</h3>
+      <div class="setting-form">
+        <p>Управление смарт-контрактами</p>
+        <div class="form-group">
+          <label class="form-label">Адрес основного контракта:</label>
+          <input type="text" v-model="settings.contractAddress" class="form-control">
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('smartContract')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель Кворум -->
+    <div class="sub-settings-panel">
+      <h3>Настройки кворума</h3>
+      <div class="setting-form">
+        <p>Настройки кворума для блокчейн-операций</p>
+        <div class="form-group">
+          <label class="form-label">Минимальный кворум (%):</label>
+          <input type="number" v-model="settings.quorumPercent" min="0" max="100" class="form-control">
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('quorum')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель RWA -->
+    <div class="sub-settings-panel">
+      <h3>Настройки Real World Assets (RWA)</h3>
+      <div class="setting-form">
+        <p>Конфигурация для работы с реальными активами</p>
+        <div class="form-group">
+          <label class="form-label">
+            <input type="checkbox" v-model="settings.rwaEnabled">
+            Включить поддержку RWA
+          </label>
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('rwa')">Сохранить</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue';
+// TODO: Импортировать API
+
+const settings = reactive({
+  contractAddress: '',
+  quorumPercent: 51,
+  rwaEnabled: false
+});
+
+onMounted(() => {
+  loadBlockchainSettings();
+});
+
+const loadBlockchainSettings = async () => {
+  console.log('[BlockchainSettingsView] Загрузка настроек блокчейна...');
+  // TODO: API call
+};
+
+const saveSettings = async (section) => {
+  console.log(`[BlockchainSettingsView] Сохранение настроек раздела: ${section}`);
+  // TODO: API call
+};
+</script>
+
+<style scoped>
+.settings-panel {
+  padding: var(--block-padding);
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  margin-top: var(--spacing-lg);
+  animation: fadeIn var(--transition-normal);
+}
+h2 {
+  margin-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding-bottom: var(--spacing-md);
+}
+h3 {
+  margin-bottom: var(--spacing-md);
+  color: var(--color-primary);
+}
+.sub-settings-panel {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 1px dashed var(--color-grey-light);
+}
+.sub-settings-panel:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.setting-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.form-group {
+  margin-bottom: 0;
+}
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.form-control {
+  max-width: 500px;
+}
+.btn-primary {
+ align-self: flex-start;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style> 

frontend/src/views/settings/InterfaceSettingsView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="interface-settings settings-panel">
+    <h2>Настройки Интерфейса</h2>
+
+    <!-- Панель Язык -->
+    <div class="sub-settings-panel">
+      <h3>Настройки языка</h3>
+      <div class="setting-form">
+        <p>Выбор языка интерфейса</p>
+        <div class="form-group">
+          <label class="form-label">Язык интерфейса:</label>
+          <select v-model="selectedLanguage" class="form-control">
+            <option value="ru">Русский</option>
+            <option value="en">English</option> 
+            <!-- Добавить другие языки по необходимости -->
+          </select>
+        </div>
+        <button class="btn btn-primary" @click="saveLanguageSetting">Сохранить язык</button>
+      </div>
+    </div>
+
+    <!-- Другие настройки интерфейса можно добавить сюда -->
+
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { getFromStorage, setToStorage } from '../../utils/storage'; // Путь к utils может отличаться
+// TODO: Импортировать API для сохранения, если нужно
+
+const selectedLanguage = ref(getFromStorage('userLanguage', 'ru'));
+
+// Функция сохранения
+const saveLanguageSetting = () => {
+  setToStorage('userLanguage', selectedLanguage.value);
+  console.log(`[InterfaceSettingsView] Язык сохранен как: ${selectedLanguage.value}`);
+  // TODO: Добавить реальную смену языка (i18n)
+  // TODO: Возможно, отправить на сервер, если язык влияет на бэкенд
+  // alert('Язык сохранен!'); // Пример уведомления
+};
+
+// Можно убрать watch, если сохранение происходит только по кнопке
+// watch(selectedLanguage, (newLang) => {
+//   setToStorage('userLanguage', newLang);
+//   console.log(`[InterfaceSettingsView] Язык изменен на: ${newLang}`);
+// });
+</script>
+
+<style scoped>
+.settings-panel {
+  padding: var(--block-padding);
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  margin-top: var(--spacing-lg);
+  animation: fadeIn var(--transition-normal);
+}
+h2 {
+  margin-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding-bottom: var(--spacing-md);
+}
+h3 {
+  margin-bottom: var(--spacing-md);
+  color: var(--color-primary);
+}
+.sub-settings-panel {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+  /* Убираем нижнюю границу, если это последняя панель */
+}
+.setting-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.form-group {
+  margin-bottom: 0;
+}
+.form-label {
+  display: block; /* Можно оставить блочным */
+  margin-bottom: var(--spacing-xs);
+}
+.form-control {
+  max-width: 300px; /* Ограничим ширину select */
+}
+.btn-primary {
+ align-self: flex-start;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style> 

frontend/src/views/settings/SecuritySettingsView.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="security-settings settings-panel">
+    <h2>Настройки Безопасности</h2>
+
+    <!-- Панель Авторизация -->
+    <div class="sub-settings-panel">
+      <h3>Настройки авторизации</h3>
+      <div class="setting-form">
+        <p>Управление параметрами авторизации</p>
+        <div class="form-group">
+          <label class="form-label">Метод авторизации по умолчанию:</label>
+          <select v-model="settings.defaultAuthMethod" class="form-control">
+            <option value="wallet">Кошелек</option>
+            <option value="email">Email</option>
+            <option value="telegram">Telegram</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('authorization')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель RPC -->
+    <div class="sub-settings-panel">
+      <h3>Настройки RPC</h3>
+      <div class="setting-form">
+        <p>Настройка RPC-эндпоинтов</p>
+        <div class="form-group">
+          <label class="form-label">Ethereum RPC:</label>
+          <input type="text" v-model="settings.rpcEndpoints.ethereum" class="form-control">
+        </div>
+        <div class="form-group">
+          <label class="form-label">Polygon RPC:</label>
+          <input type="text" v-model="settings.rpcEndpoints.polygon" class="form-control">
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('rpc')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель Noda -->
+    <div class="sub-settings-panel">
+      <h3>Настройки Noda</h3>
+      <div class="setting-form">
+        <p>Конфигурация нод</p>
+        <div class="form-group">
+          <label class="form-label">
+            <input type="checkbox" v-model="settings.useCustomNode">
+            Использовать собственную ноду
+          </label>
+        </div>
+        <div class="form-group" v-if="settings.useCustomNode">
+          <label class="form-label">URL собственной ноды:</label>
+          <input type="text" v-model="settings.customNodeUrl" class="form-control">
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('noda')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель Хранилище -->
+    <div class="sub-settings-panel">
+      <h3>Настройки хранилища</h3>
+      <div class="setting-form">
+        <p>Настройки для хранения данных</p>
+        <div class="form-group">
+          <label class="form-label">Тип хранилища:</label>
+          <select v-model="settings.storageType" class="form-control">
+            <option value="local">Локальное</option>
+            <option value="ipfs">IPFS</option>
+            <option value="arweave">Arweave</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('storage')">Сохранить</button>
+      </div>
+    </div>
+    
+    <!-- Панель CPU -->
+    <div class="sub-settings-panel">
+      <h3>Настройки CPU</h3>
+      <div class="setting-form">
+        <p>Оптимизация использования CPU</p>
+        <div class="form-group">
+          <label class="form-label">Максимальное использование CPU (%):</label>
+          <input type="number" v-model="settings.maxCpuUsage" min="0" max="100" class="form-control">
+        </div>
+        <button class="btn btn-primary" @click="saveSettings('cpu')">Сохранить</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue';
+// TODO: Импортировать API
+
+const settings = reactive({
+  defaultAuthMethod: 'wallet',
+  rpcEndpoints: {
+    ethereum: '',
+    polygon: ''
+  },
+  useCustomNode: false,
+  customNodeUrl: '',
+  storageType: 'local',
+  maxCpuUsage: 80
+});
+
+onMounted(() => {
+  loadSecuritySettings();
+});
+
+const loadSecuritySettings = async () => {
+  console.log('[SecuritySettingsView] Загрузка настроек безопасности...');
+  // TODO: API call
+};
+
+const saveSettings = async (section) => {
+  console.log(`[SecuritySettingsView] Сохранение настроек раздела: ${section}`);
+  // TODO: API call
+};
+</script>
+
+<style scoped>
+.settings-panel {
+  padding: var(--block-padding);
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  margin-top: var(--spacing-lg);
+  animation: fadeIn var(--transition-normal);
+}
+h2 {
+  margin-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding-bottom: var(--spacing-md);
+}
+h3 {
+  margin-bottom: var(--spacing-md);
+  color: var(--color-primary);
+}
+.sub-settings-panel {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 1px dashed var(--color-grey-light);
+}
+.sub-settings-panel:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.setting-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.form-group {
+  margin-bottom: 0;
+}
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.form-control {
+  max-width: 500px;
+}
+.btn-primary {
+ align-self: flex-start;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style>