добавление базовых алгоритмов рекомендаций

backend/controllers/userController.js

@@ -54,6 +54,15 @@ const updateUserProfile = async (req, res, next) => {
             user.preferences.ageRange.min = req.body.preferences.ageRange.min || user.preferences.ageRange.min;
             user.preferences.ageRange.max = req.body.preferences.ageRange.max || user.preferences.ageRange.max;
         }
+        // Обновление предпочтений по городу
+        if (req.body.preferences.cityPreferences) {
+            if (typeof req.body.preferences.cityPreferences.sameCity === 'boolean') {
+                user.preferences.cityPreferences.sameCity = req.body.preferences.cityPreferences.sameCity;
+            }
+            if (Array.isArray(req.body.preferences.cityPreferences.allowedCities)) {
+                user.preferences.cityPreferences.allowedCities = req.body.preferences.cityPreferences.allowedCities;
+            }
+        }
       }
 
       console.log('Данные пользователя перед сохранением:', user);
@@ -100,15 +109,123 @@ const getUsersForSwiping = async (req, res, next) => {
   try {
     const currentUserId = req.user._id;
     
-    // TODO: Более сложная логика фильтрации и сортировки
+    // Получаем данные текущего пользователя для фильтрации рекомендаций
-    const users = await User.find({ 
+    const currentUser = await User.findById(currentUserId)
-        _id: { $ne: currentUserId },
+      .select('preferences location dateOfBirth liked passed');
-        // Можно добавить условие, чтобы у пользователя было хотя бы одно фото
-        // 'photos.0': { $exists: true } // Если нужно показывать только тех, у кого есть фото
-    })
-      .select('name dateOfBirth gender bio photos preferences.ageRange'); // photos все еще нужны для выбора главной
 
-    const usersWithAgeAndPhoto = users.map(user => {
+    if (!currentUser) {
+      const error = new Error('Пользователь не найден.');
+      error.statusCode = 404;
+      return next(error);
+    }
+
+    // Вычисляем возраст текущего пользователя
+    let currentUserAge = null;
+    if (currentUser.dateOfBirth) {
+      const birthDate = new Date(currentUser.dateOfBirth);
+      const today = new Date();
+      currentUserAge = today.getFullYear() - birthDate.getFullYear();
+      const m = today.getMonth() - birthDate.getMonth();
+      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+        currentUserAge--;
+      }
+    }
+
+    // Автоматически устанавливаем возрастные предпочтения ±2 года, если они не заданы
+    let ageRangeMin = 18;
+    let ageRangeMax = 99;
+    
+    if (currentUser.preferences?.ageRange?.min && currentUser.preferences?.ageRange?.max) {
+      // Используем пользовательские настройки
+      ageRangeMin = currentUser.preferences.ageRange.min;
+      ageRangeMax = currentUser.preferences.ageRange.max;
+    } else if (currentUserAge) {
+      // Устанавливаем ±2 года от возраста пользователя по умолчанию
+      ageRangeMin = Math.max(18, currentUserAge - 2);
+      ageRangeMax = Math.min(99, currentUserAge + 2);
+      console.log(`[USER_CTRL] Автоматически установлен возрастной диапазон: ${ageRangeMin}-${ageRangeMax} для пользователя ${currentUserAge} лет`);
+    }
+
+    // Строим базовый фильтр
+    let matchFilter = {
+      _id: { 
+        $ne: currentUserId,
+        $nin: [...(currentUser.liked || []), ...(currentUser.passed || [])] // Исключаем уже просмотренных
+      },
+      isActive: true // Только активные пользователи
+    };
+
+    // Фильтрация по полу согласно предпочтениям
+    if (currentUser.preferences?.gender && currentUser.preferences.gender !== 'any') {
+      matchFilter.gender = currentUser.preferences.gender;
+    }
+
+    // Улучшенная фильтрация по городу
+    const cityFilter = [];
+    
+    // Если включена настройка "только мой город" и город указан
+    if (currentUser.preferences?.cityPreferences?.sameCity !== false && currentUser.location?.city) {
+      cityFilter.push(currentUser.location.city);
+    }
+    
+    // Добавляем дополнительные разрешенные города
+    if (currentUser.preferences?.cityPreferences?.allowedCities?.length > 0) {
+      cityFilter.push(...currentUser.preferences.cityPreferences.allowedCities);
+    }
+    
+    // Применяем фильтр по городу только если есть что фильтровать
+    if (cityFilter.length > 0) {
+      // Убираем дубликаты
+      const uniqueCities = [...new Set(cityFilter)];
+      matchFilter['location.city'] = { $in: uniqueCities };
+      console.log(`[USER_CTRL] Фильтрация по городам: ${uniqueCities.join(', ')}`);
+    }
+
+    // Получаем пользователей с базовой фильтрацией
+    const users = await User.find(matchFilter)
+      .select('name dateOfBirth gender bio photos location preferences.ageRange preferences.gender');
+
+    // Дополнительная фильтрация по возрасту и взаимным предпочтениям
+    const filteredUsers = users.filter(user => {
+      // Вычисляем возраст пользователя
+      let userAge = null;
+      if (user.dateOfBirth) {
+        const birthDate = new Date(user.dateOfBirth);
+        const today = new Date();
+        userAge = today.getFullYear() - birthDate.getFullYear();
+        const m = today.getMonth() - birthDate.getMonth();
+        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+          userAge--;
+        }
+      }
+
+      // Проверяем возрастные предпочтения текущего пользователя
+      if (userAge) {
+        if (userAge < ageRangeMin || userAge > ageRangeMax) {
+          return false;
+        }
+      }
+
+      // Проверяем взаимные предпочтения по полу
+      if (user.preferences?.gender && user.preferences.gender !== 'any' && currentUser.gender) {
+        if (user.preferences.gender !== currentUser.gender) {
+          return false;
+        }
+      }
+
+      // Проверяем взаимные возрастные предпочтения
+      if (currentUserAge && user.preferences?.ageRange) {
+        const { min = 18, max = 99 } = user.preferences.ageRange;
+        if (currentUserAge < min || currentUserAge > max) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    // Формируем ответ с дополнительными данными
+    const usersWithAgeAndPhoto = filteredUsers.map(user => {
       let age = null;
       if (user.dateOfBirth) {
         const birthDate = new Date(user.dateOfBirth);
@@ -120,19 +237,12 @@ const getUsersForSwiping = async (req, res, next) => {
         }
       }
 
-      // --- Логика выбора главной фотографии ---
+      // Логика выбора главной фотографии
       let mainPhotoUrl = null;
       if (user.photos && user.photos.length > 0) {
-        // Ищем фото, помеченное как главное
         const profilePic = user.photos.find(photo => photo.isProfilePhoto === true);
-        if (profilePic) {
+        mainPhotoUrl = profilePic ? profilePic.url : user.photos[0].url;
-          mainPhotoUrl = profilePic.url;
-        } else {
-          // Если нет явно помеченного главного фото, берем первое из массива
-          mainPhotoUrl = user.photos[0].url;
-        }
       }
-      // -----------------------------------------
 
       return {
         _id: user._id,
@@ -140,12 +250,49 @@ const getUsersForSwiping = async (req, res, next) => {
         age: age,
         gender: user.gender,
         bio: user.bio,
-        mainPhotoUrl: mainPhotoUrl, // <--- Добавляем URL главной фотографии
+        mainPhotoUrl: mainPhotoUrl,
-        photos: user.photos, // Возвращаем все фото для карусели
+        photos: user.photos,
+        location: user.location
       };
     });
 
-    res.status(200).json(usersWithAgeAndPhoto);
+    // Улучшенная сортировка пользователей
+    const sortedUsers = usersWithAgeAndPhoto.sort((a, b) => {
+      // 1. Приоритет пользователям из того же города
+      const aInSameCity = a.location?.city === currentUser.location?.city;
+      const bInSameCity = b.location?.city === currentUser.location?.city;
+      
+      if (aInSameCity && !bInSameCity) return -1;
+      if (!aInSameCity && bInSameCity) return 1;
+      
+      // 2. Если оба из одного города или оба из разных, сортируем по близости возраста
+      if (currentUserAge && a.age && b.age) {
+        const aDiff = Math.abs(a.age - currentUserAge);
+        const bDiff = Math.abs(b.age - currentUserAge);
+        if (aDiff !== bDiff) {
+          return aDiff - bDiff;
+        }
+      }
+      
+      // 3. Приоритет пользователям с фотографиями
+      const aHasPhotos = a.photos && a.photos.length > 0;
+      const bHasPhotos = b.photos && b.photos.length > 0;
+      
+      if (aHasPhotos && !bHasPhotos) return -1;
+      if (!aHasPhotos && bHasPhotos) return 1;
+      
+      // 4. Приоритет пользователям с био
+      const aHasBio = a.bio && a.bio.trim().length > 0;
+      const bHasBio = b.bio && b.bio.trim().length > 0;
+      
+      if (aHasBio && !bHasBio) return -1;
+      if (!aHasBio && bHasBio) return 1;
+      
+      return 0;
+    });
+    
+    console.log(`[USER_CTRL] Найдено ${sortedUsers.length} пользователей для рекомендаций (возраст: ${ageRangeMin}-${ageRangeMax})`);
+    res.status(200).json(sortedUsers);
 
   } catch (error) {
     console.error('Ошибка при получении пользователей для свайпа:', error.message);

backend/models/User.js

@@ -54,6 +54,11 @@ const userSchema = new mongoose.Schema(
         min: { type: Number, default: 18 },
         max: { type: Number, default: 99 },
       },
+      // Добавляем предпочтения по городу
+      cityPreferences: {
+        sameCity: { type: Boolean, default: true }, // Показывать только из того же города
+        allowedCities: [{ type: String }] // Дополнительные разрешенные города
+      }
     },
     isActive: {
       type: Boolean,

src/router/index.js

@@ -50,6 +50,12 @@ const routes = [
     component: () => import('../views/UserProfileView.vue'),
     meta: { requiresAuth: true },
     props: true // Позволяет передавать :userId как пропс в компонент
+  },
+  {
+    path: '/preferences', // Настройки предпочтений поиска
+    name: 'Preferences',
+    component: () => import('../views/PreferencesView.vue'),
+    meta: { requiresAuth: true }
   }
   // ... здесь будут другие маршруты: /profile, /swipe, /chat/:id и т.д.
 ];

src/views/PreferencesView.vue

@@ -0,0 +1,708 @@
+<template>
+  <div class="preferences-view">
+    <div class="preferences-container">
+      <header class="preferences-header">
+        <button class="back-btn" @click="$router.go(-1)">
+          <i class="bi-arrow-left"></i>
+        </button>
+        <h1>Настройки поиска</h1>
+      </header>
+
+      <!-- Сообщение -->
+      <div v-if="message" :class="['message', messageType]">
+        {{ message }}
+      </div>
+
+      <div class="preferences-content">
+        <!-- Предпочтения по полу -->
+        <section class="preference-section">
+          <h2>Пол партнера</h2>
+          <div class="radio-group">
+            <label class="radio-option">
+              <input type="radio" v-model="preferences.gender" value="any" />
+              <span class="radio-text">Любой</span>
+            </label>
+            <label class="radio-option">
+              <input type="radio" v-model="preferences.gender" value="male" />
+              <span class="radio-text">Мужской</span>
+            </label>
+            <label class="radio-option">
+              <input type="radio" v-model="preferences.gender" value="female" />
+              <span class="radio-text">Женский</span>
+            </label>
+            <label class="radio-option">
+              <input type="radio" v-model="preferences.gender" value="other" />
+              <span class="radio-text">Другой</span>
+            </label>
+          </div>
+        </section>
+
+        <!-- Возрастной диапазон -->
+        <section class="preference-section">
+          <h2>Возраст</h2>
+          <div class="age-range-container">
+            <div class="age-input-group">
+              <label>От</label>
+              <input 
+                type="number" 
+                v-model.number="preferences.ageRange.min" 
+                min="18" 
+                max="99"
+                class="age-input"
+              />
+            </div>
+            <div class="age-input-group">
+              <label>До</label>
+              <input 
+                type="number" 
+                v-model.number="preferences.ageRange.max" 
+                min="18" 
+                max="99"
+                class="age-input"
+              />
+            </div>
+          </div>
+          <div class="age-info">
+            <p v-if="currentUserAge">
+              Ваш возраст: {{ currentUserAge }} лет
+            </p>
+            <button 
+              type="button" 
+              class="default-range-btn"
+              @click="setDefaultAgeRange"
+            >
+              Установить ±2 года от моего возраста
+            </button>
+          </div>
+        </section>
+
+        <!-- Предпочтения по городу -->
+        <section class="preference-section">
+          <h2>Местоположение</h2>
+          
+          <div class="toggle-option">
+            <label class="toggle-label">
+              <input 
+                type="checkbox" 
+                v-model="preferences.cityPreferences.sameCity"
+                class="toggle-input"
+              />
+              <span class="toggle-slider"></span>
+              <span class="toggle-text">
+                Показывать только из моего города
+                <span v-if="user?.location?.city" class="current-city">
+                  ({{ user.location.city }})
+                </span>
+              </span>
+            </label>
+          </div>
+
+          <div v-if="!preferences.cityPreferences.sameCity" class="city-preferences">
+            <h3>Дополнительные города</h3>
+            <div class="city-search-wrapper">
+              <input
+                type="text"
+                v-model="citySearchQuery"
+                @input="onCitySearch"
+                @focus="showCityList = true"
+                placeholder="Добавить город..."
+                class="city-search-input"
+              />
+              <div v-if="showCityList && filteredCities.length > 0" class="city-dropdown">
+                <div 
+                  v-for="city in filteredCities"
+                  :key="city"
+                  @click="addAllowedCity(city)"
+                  class="city-option"
+                >
+                  {{ city }}
+                </div>
+              </div>
+            </div>
+            
+            <div v-if="preferences.cityPreferences.allowedCities.length > 0" class="allowed-cities">
+              <div 
+                v-for="(city, index) in preferences.cityPreferences.allowedCities"
+                :key="index"
+                class="city-tag"
+              >
+                <span>{{ city }}</span>
+                <button @click="removeAllowedCity(index)" class="remove-city-btn">
+                  <i class="bi-x"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Кнопка сохранения -->
+        <div class="save-section">
+          <button 
+            @click="savePreferences" 
+            :disabled="loading"
+            class="save-btn"
+          >
+            <span v-if="loading">Сохранение...</span>
+            <span v-else>Сохранить настройки</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import api from '@/services/api'
+import citiesData from '@/assets/russian-cities.json'
+
+export default {
+  name: 'PreferencesView',
+  setup() {
+    const authStore = useAuthStore()
+    const loading = ref(false)
+    const message = ref('')
+    const messageType = ref('') // 'success' или 'error'
+    
+    // Данные предпочтений
+    const preferences = ref({
+      gender: 'any',
+      ageRange: {
+        min: 20,
+        max: 35
+      },
+      cityPreferences: {
+        sameCity: true,
+        allowedCities: []
+      }
+    })
+
+    // Поля для поиска городов
+    const citySearchQuery = ref('')
+    const showCityList = ref(false)
+    const filteredCities = ref([])
+
+    // Вычисляемые свойства
+    const user = computed(() => authStore.user)
+    const currentUserAge = computed(() => {
+      if (!user.value?.dateOfBirth) return null
+      const birthDate = new Date(user.value.dateOfBirth)
+      const today = new Date()
+      let age = today.getFullYear() - birthDate.getFullYear()
+      const m = today.getMonth() - birthDate.getMonth()
+      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+        age--
+      }
+      return age
+    })
+
+    // Установка дефолтного возрастного диапазона на основе возраста пользователя
+    const setDefaultAgeRange = () => {
+      if (currentUserAge.value) {
+        preferences.value.ageRange.min = Math.max(18, currentUserAge.value - 2)
+        preferences.value.ageRange.max = Math.min(99, currentUserAge.value + 2)
+      }
+    }
+
+    // Загрузка предпочтений пользователя
+    const loadUserPreferences = async () => {
+      if (!user.value) return
+      
+      loading.value = true
+      try {
+        // Берем данные из store, если они есть
+        if (user.value.preferences) {
+          preferences.value = {
+            gender: user.value.preferences.gender || 'any',
+            ageRange: {
+              min: user.value.preferences.ageRange?.min || (currentUserAge.value ? currentUserAge.value - 2 : 20),
+              max: user.value.preferences.ageRange?.max || (currentUserAge.value ? currentUserAge.value + 2 : 35)
+            },
+            cityPreferences: {
+              sameCity: user.value.preferences.cityPreferences?.sameCity ?? true,
+              allowedCities: user.value.preferences.cityPreferences?.allowedCities || []
+            }
+          }
+        } else {
+          setDefaultAgeRange()
+        }
+      } catch (error) {
+        console.error('Ошибка при загрузке предпочтений:', error)
+        showMessage('Ошибка при загрузке предпочтений', 'error')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // Поиск городов
+    const onCitySearch = (event) => {
+      const query = event.target.value.toLowerCase().trim()
+      citySearchQuery.value = event.target.value
+      
+      if (query.length > 0) {
+        filteredCities.value = citiesData
+          .map(city => city.name)
+          .filter(city => city.toLowerCase().includes(query))
+          .slice(0, 10)
+        showCityList.value = filteredCities.value.length > 0
+      } else {
+        filteredCities.value = []
+        showCityList.value = false
+      }
+    }
+
+    // Добавление города в разрешенные
+    const addAllowedCity = (city) => {
+      if (!preferences.value.cityPreferences.allowedCities.includes(city)) {
+        preferences.value.cityPreferences.allowedCities.push(city)
+      }
+      citySearchQuery.value = ''
+      showCityList.value = false
+    }
+
+    // Удаление города из разрешенных
+    const removeAllowedCity = (index) => {
+      preferences.value.cityPreferences.allowedCities.splice(index, 1)
+    }
+
+    // Сохранение предпочтений
+    const savePreferences = async () => {
+      loading.value = true
+      try {
+        const response = await api.updateUserProfile({
+          preferences: preferences.value
+        })
+        
+        // Обновляем данные в store
+        authStore.updateUser(response.data)
+        
+        showMessage('Предпочтения успешно сохранены!', 'success')
+      } catch (error) {
+        console.error('Ошибка при сохранении предпочтений:', error)
+        showMessage('Ошибка при сохранении предпочтений', 'error')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // Показ сообщения
+    const showMessage = (text, type) => {
+      message.value = text
+      messageType.value = type
+      setTimeout(() => {
+        message.value = ''
+        messageType.value = ''
+      }, 3000)
+    }
+
+    // Закрытие выпадающего списка при клике вне его
+    const handleClickOutside = (event) => {
+      if (!event.target.closest('.city-search-wrapper')) {
+        showCityList.value = false
+      }
+    }
+
+    onMounted(() => {
+      loadUserPreferences()
+      document.addEventListener('click', handleClickOutside)
+    })
+
+    return {
+      loading,
+      message,
+      messageType,
+      preferences,
+      citySearchQuery,
+      showCityList,
+      filteredCities,
+      user,
+      currentUserAge,
+      onCitySearch,
+      addAllowedCity,
+      removeAllowedCity,
+      savePreferences,
+      setDefaultAgeRange
+    }
+  }
+}
+</script>
+
+<style scoped>
+.preferences-view {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 0;
+}
+
+.preferences-container {
+  max-width: 600px;
+  margin: 0 auto;
+  background: white;
+  min-height: 100vh;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.preferences-header {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  color: #667eea;
+  cursor: pointer;
+  padding: 0.5rem;
+  margin-right: 1rem;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+}
+
+.back-btn:hover {
+  background-color: #f1f5f9;
+}
+
+.preferences-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #1e293b;
+  font-weight: 600;
+}
+
+.message {
+  margin: 1rem;
+  padding: 0.75rem;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.message.success {
+  background-color: #dcfce7;
+  color: #166534;
+  border: 1px solid #bbf7d0;
+}
+
+.message.error {
+  background-color: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.preferences-content {
+  padding: 1rem;
+}
+
+.preference-section {
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.preference-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.preference-section h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.2rem;
+  color: #1e293b;
+  font-weight: 600;
+}
+
+.preference-section h3 {
+  margin: 1rem 0 0.5rem 0;
+  font-size: 1rem;
+  color: #475569;
+  font-weight: 500;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+.radio-option:hover {
+  background-color: #f8fafc;
+}
+
+.radio-option input[type="radio"] {
+  margin-right: 0.75rem;
+  accent-color: #667eea;
+}
+
+.radio-text {
+  font-size: 1rem;
+  color: #374151;
+}
+
+.age-range-container {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.age-input-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.age-input-group label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.age-input {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.age-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.age-info {
+  background-color: #f8fafc;
+  padding: 1rem;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.age-info p {
+  margin: 0 0 0.5rem 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.default-range-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.default-range-btn:hover {
+  background: #5a67d8;
+}
+
+.toggle-option {
+  margin-bottom: 1rem;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.toggle-input {
+  display: none;
+}
+
+.toggle-slider {
+  width: 50px;
+  height: 26px;
+  background-color: #cbd5e0;
+  border-radius: 13px;
+  position: relative;
+  margin-right: 0.75rem;
+  transition: background-color 0.2s;
+}
+
+.toggle-slider::before {
+  content: '';
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  background-color: white;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toggle-input:checked + .toggle-slider {
+  background-color: #667eea;
+}
+
+.toggle-input:checked + .toggle-slider::before {
+  transform: translateX(24px);
+}
+
+.toggle-text {
+  font-size: 1rem;
+  color: #374151;
+}
+
+.current-city {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.city-preferences {
+  margin-top: 1rem;
+}
+
+.city-search-wrapper {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.city-search-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.city-search-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.city-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 20;
+}
+
+.city-option {
+  padding: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.city-option:hover {
+  background-color: #f8fafc;
+}
+
+.city-option:last-child {
+  border-bottom: none;
+}
+
+.allowed-cities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.city-tag {
+  display: flex;
+  align-items: center;
+  background-color: #667eea;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+}
+
+.remove-city-btn {
+  background: none;
+  border: none;
+  color: white;
+  margin-left: 0.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.remove-city-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.save-section {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.save-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 1rem;
+  border-radius: 12px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.save-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.save-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+@media (max-width: 768px) {
+  .preferences-container {
+    box-shadow: none;
+  }
+  
+  .age-range-container {
+    flex-direction: column;
+  }
+  
+  .radio-group {
+    gap: 0.25rem;
+  }
+}
+</style>

src/views/ProfileView.vue

@@ -112,6 +112,14 @@
                 <span>Фотографии</span>
                 <span class="tab-badge" v-if="profileData.photos?.length">{{ profileData.photos.length }}</span>
               </button>
+              <button class="tab-btn" :class="{ 'active': activeTab === 'notifications' }" @click="activeTab = 'notifications'">
+                <i class="bi-bell"></i>
+                <span>Уведомления</span>
+              </button>
+              <button class="tab-btn" :class="{ 'active': activeTab === 'preferences' }" @click="activeTab = 'preferences'">
+                <i class="bi-sliders"></i>
+                <span>Предпочтения</span>
+              </button>
             </div>
           </div>
 
@@ -380,6 +388,96 @@
                 </div>
               </div>
             </div>
+
+            <!-- Notifications Tab -->
+            <div v-show="activeTab === 'notifications'" class="tab-pane">
+              <div class="info-card notifications-card">
+                <div class="card-header">
+                  <h3><i class="bi-bell"></i> Уведомления</h3>
+                </div>
+                <div class="card-content">
+                  <p>Здесь вы можете управлять настройками уведомлений.</p>
+                  <!-- Добавьте здесь содержимое для управления уведомлениями -->
+                </div>
+              </div>
+            </div>
+
+            <!-- Preferences Tab -->
+            <div v-show="activeTab === 'preferences'" class="tab-pane">
+              <div class="info-card preferences-card">
+                <div class="card-header">
+                  <h3>
+                    <i class="bi-sliders"></i>
+                    Настройки поиска
+                  </h3>
+                  <router-link to="/preferences" class="edit-btn">
+                    <i class="bi-gear"></i>
+                    <span>Настроить</span>
+                  </router-link>
+                </div>
+                <div class="card-content">
+                  <div v-if="profileData?.preferences" class="preferences-summary">
+                    <div class="preference-item">
+                      <div class="preference-label">
+                        <i class="bi-gender-ambiguous"></i>
+                        Пол партнера
+                      </div>
+                      <div class="preference-value">
+                        {{ getGenderPreferenceText(profileData.preferences.gender) }}
+                      </div>
+                    </div>
+                    
+                    <div class="preference-item">
+                      <div class="preference-label">
+                        <i class="bi-calendar-range"></i>
+                        Возрастной диапазон
+                      </div>
+                      <div class="preference-value">
+                        {{ profileData.preferences.ageRange?.min || 18 }} - {{ profileData.preferences.ageRange?.max || 99 }} лет
+                      </div>
+                    </div>
+                    
+                    <div class="preference-item">
+                      <div class="preference-label">
+                        <i class="bi-geo-alt"></i>
+                        Местоположение
+                      </div>
+                      <div class="preference-value">
+                        <span v-if="profileData.preferences.cityPreferences?.sameCity !== false">
+                          Только мой город
+                          <span v-if="profileData.location?.city" class="city-name">
+                            ({{ profileData.location.city }})
+                          </span>
+                        </span>
+                        <span v-else>
+                          Любой город
+                          <span v-if="profileData.preferences.cityPreferences?.allowedCities?.length > 0" class="allowed-cities">
+                            + {{ profileData.preferences.cityPreferences.allowedCities.length }} дополнительных
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <div class="preferences-tip">
+                      <i class="bi-lightbulb"></i>
+                      <span>Настройки влияют на то, кого вы увидите в рекомендациях</span>
+                    </div>
+                  </div>
+                  
+                  <div v-else class="empty-preferences">
+                    <div class="empty-icon">
+                      <i class="bi-sliders"></i>
+                    </div>
+                    <h4>Настройки не заданы</h4>
+                    <p>Настройте предпочтения поиска для получения более релевантных рекомендаций</p>
+                    <router-link to="/preferences" class="action-btn primary">
+                      <i class="bi-plus-circle"></i>
+                      Настроить предпочтения
+                    </router-link>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1156,6 +1254,17 @@ const clearGenderSelection = () => {
   showGenderList.value = false;
 };
 
+// Функция для отображения предпочтений по полу
+const getGenderPreferenceText = (genderPreference) => {
+  const genderMap = {
+    'male': 'Мужской',
+    'female': 'Женский',
+    'other': 'Другой',
+    'any': 'Любой'
+  };
+  return genderMap[genderPreference] || 'Не указано';
+};
+
 // Закрытие выпадающих списков при клике вне их
 const handleClickOutside = (event) => {
   if (!event.target.closest('.city-input-wrapper')) {
@@ -1785,7 +1894,27 @@ onUnmounted(() => {
 }
 
 .action-btn.primary {
-  background: rgba(102, 126, 234, 0.9);
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 0.6rem 1.2rem;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.action-btn.primary:hover {
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
+  text-decoration: none;
   color: white;
 }
 
@@ -1794,10 +1923,6 @@ onUnmounted(() => {
   color: white;
 }
 
-.action-btn.primary:hover {
-  background: #5a6abf;
-}
-
 .action-btn.danger:hover {
   background: #c82333;
 }
@@ -2075,6 +2200,11 @@ onUnmounted(() => {
   border: 1px solid transparent;
 }
 
+
+
+
+
+
 .logout-btn:hover {
   color: #c82333;
   background: rgba(220, 53, 69, 0.1);
@@ -2099,7 +2229,7 @@ onUnmounted(() => {
 
 .upload-zone:hover {
   border-color: #667eea;
-  background: rgba(102, 126, 234, 0.05);
+   background: rgba(102, 126, 234, 0.05);
   transform: translateY(-2px);
 }
 
@@ -2250,265 +2380,116 @@ onUnmounted(() => {
   color: #6c757d;
 }
 
-/* Адаптивные стили */
+/* Preferences Tab Styles */
-@media (min-width: 768px) {
+.preferences-card .card-header {
-  /* Desktop styles */
+  display: flex;
-  .profile-header-content {
+  justify-content: space-between;
-    flex-direction: row;
+  align-items: center;
-    justify-content: space-between;
-  }
-  
-  .avatar-section {
-    flex:  1;
-    justify-content: flex-start;
-    margin-bottom: 0;
-  }
-  
-  .stats-section {
-    width: 320px;
-    margin-top: 0;
-  }
-  
-  
-  .info-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-  
-  .tabs-content {
-    padding: 0;
-  }
 }
 
-@media (max-width: 767px) {
+.preferences-summary {
-  /* Tablet and mobile styles */
+  display: flex;
-  .profile-header-content {
+  flex-direction: column;
-    flex-direction: column;
+  gap: 1rem;
- 
-
-  }
-  
-  .avatar-section {
-    flex-wrap: wrap;
-  }
-  
-  .avatar-container {
-    margin: 0 auto;
-  }
-  
-  .user-meta {
-    text-align: center;
-    width: 100%;
-  }
-  
-  .user-badges {
-    justify-content: center;
-  }
-  
-  .header-actions {
-    margin-top: 0.8rem;
-    justify-content: center;
-    width: 100%;
-  }
-  
-  .stats-section {
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-  
-  .stat-item {
-    flex: 1;
-    justify-content: center;
-    min-width: 100px;
-  }
-  
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  }
-  
-  .tab-btn span {
-    display: none;
-  }
-  
-  .tab-btn i {
-    font-size: 1.2rem;
-  }
 }
 
-@media (max-width: 480px) {
+.preference-item {
-  /* Small mobile styles */
+  display: flex;
-  .container {
+  justify-content: space-between;
-    padding: 0 0.75rem;
+  align-items: center;
-  }
+  padding: 0.75rem;
-  
+  background: rgba(248, 249, 250, 0.5);
-  .profile-header-card,
+  border-radius: 8px;
-  .profile-tabs,
+  border: 1px solid rgba(0, 0, 0, 0.05);
-  .tabs-content {
-    padding: 1rem;
-    border-radius: 12px;
-  }
-  
-  .card-header,
-  .card-content {
-    padding: 1rem;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-    gap: 0.5rem;
-  }
-  
-  .avatar-container {
-    width: 70px;
-    height: 70px;
-  }
-  
-  .user-name {
-    font-size: 1.2rem;
-  }
-  
-  .stat-item {
-    min-width: 80px;
-  }
-  
-  .upload-features {
-    gap: 1rem;
-  }
-  
-  .upload-icon-bg {
-    width: 60px;
-    height: 60px;
-  }
-  
-  .upload-pulse {
-    width: 60px;
-    height: 60px;
-  }
-  
-  .upload-icon {
-    font-size: 1.7rem;
-  }
 }
 
-/* Темная тема заменена на светлую */
+.preference-label {
-@media (prefers-color-scheme: dark) {
+  display: flex;
-  .profile-header-card,
+  align-items: center;
-  .profile-tabs,
+  gap: 0.5rem;
-  .tabs-content,
+  font-size: 0.9rem;
-  .info-card {
+  font-weight: 500;
-    background: rgba(255, 255, 255, 0.9);
+  color: #333;
-    border-color: rgba(0, 0, 0, 0.05);
-  }
-  
-  .user-name,
-  .stat-value,
-  .tab-btn.active,
-  .card-header h3 {
-    color: #333;
-  }
-  
-  .user-email,
-  .stat-label,
-  .tab-btn,
-  .bio-text,
-  .info-item span {
-    color: #6c757d;
-  }
-  
-  .info-item label {
-    color: #6c757d;
-  }
-  
-  .card-header,
-  .stats-section {
-    background: rgba(248, 249, 250, 0.8);
-  }
-  
-  .form-input, .form-textarea {
-    background: #ffffff;
-    border-color: #ced4da;
-    color: #333;
-  }
-  
-  .form-input:focus, .form-textarea:focus {
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
-  }
-  
-  .form-input:disabled, .form-textarea:disabled {
-    background: #f8f9fa;
-  }
-  
-  .upload-zone {
-    background: rgba(248, 249, 250, 0.5);
-    border-color: #dee2e6;
-  }
-  
-  .upload-title {
-    color: #333;
-  }
-  
-  .upload-description,
-  .upload-hint small,
-  .feature-item span {
-    color: #6c757d;
-  }
-  
-  .delete-modal,
-  .dropdown {
-    background: #ffffff;
-  }
-  
-  .dropdown-option:hover {
-    background: rgba(102, 126, 234, 0.1);
-  }
-  
-  .modal-header,
-  .modal-actions {
-    background: #f8f9fa;
-  }
-  
-  .action-btn.secondary {
-    background: #f8f9fa;
-    border-color: #ced4da;
-    color: #333;
-  }
-  
-  .action-btn.secondary:hover {
-    background: #e9ecef;
-  }
-  
-  .main-badge {
-    background: rgba(255, 255, 255, 0.85);
-    color: #333;
-  }
 }
 
-/* Print Styles */
+.preference-label i {
-@media print {
+  color: #667eea;
-  .profile-header,
+  font-size: 1rem;
-  .header-actions,
+}
-  .action-btn,
-  .photo-actions,
-  .modal-overlay {
-    display: none !important;
-  }
 
-  .profile-content {
+.preference-value {
-    padding: 0;
+  font-size: 0.9rem;
-  }
+  color: #6c757d;
+  font-weight: 500;
+}
 
-  .profile-card,
+.city-name {
-  .info-card {
+  font-size: 0.8rem;
-    box-shadow: none;
+  color: #667eea;
-    border: 1px solid #000;
+}
-  }
+
+.allowed-cities {
+  font-size: 0.8rem;
+  color: #667eea;
+}
+
+.preferences-tip {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 8px;
+  margin-top: 1rem;
+  border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+.preferences-tip i {
+  color: #667eea;
+  font-size: 1rem;
+}
+
+.preferences-tip span {
+  font-size: 0.85rem;
+  color: #667eea;
+  font-weight: 500;
+}
+
+.empty-preferences {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.empty-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgba(102, 126, 234, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.empty-icon i {
+  font-size: 1.5rem;
+  color: #667eea;
+}
+
+.empty-preferences h4 {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+  color: #333;
+  font-weight: 600;
+}
+
+.empty-preferences p {
+  margin: 0 0 1.5rem;
+  font-size: 0.9rem;
+  color: #6c757d;
+  max-width: 300px;
 }
 </style>