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

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>