router-lists-ui/EASY_SWITCH.md

Easy Switch - Быстрое переключение шлюзов

Описание

Easy Switch - это новая страница для быстрого переключения шлюзов (gateways) внутри серверов на основе communities из фильтров. Интерфейс вдохновлен мобильными VPN приложениями и обеспечивает удобный способ управления маршрутизацией.

Особенности

1. Визуальный интерфейс

• Компактные карточки шлюзов (уменьшенный размер)
• Карточки с флагами стран
• Отображение пинга и протокола подключения
• Метка "Fast" для самого быстрого шлюза в группе
• Активный шлюз выделен синим цветом

2. Группировка по Серверам

• Сервера группируются в отдельные блоки
• Каждый сервер показывает свои communities
• Для каждого community на сервере можно выбрать активный шлюз этого сервера
• Переключение происходит между шлюзами внутри одного сервера
• Отображается количество communities на каждом сервере

3. Поиск и фильтрация

• Поиск по community, описанию или имени шлюза
• Фильтрация по правилам
• Вкладки "Прокси" и "Провайдер прокси"

4. Управление изменениями

• Кнопка "Применить изменения" появляется при выборе нового шлюза
• Возможность обновить данные с сервера
• Отслеживание изменений

Структура данных

Источники данных

1. Server Configs (/api/server-configs)

   • Список серверов с настройками
   • ID сервера для загрузки фильтров

2. Server Filters (/api/server-filters/{serverId})

   • Фильтры для каждого сервера
   • Community и gateway для каждого фильтра

3. Inventory Servers (/api/servers)

   • Метаданные серверов (страна, провайдер)
   • Используется для отображения флагов

Формат данных фильтра

{
  "community": "65001:100",
  "gateway": "SWE-HIPHOST",
  "description": "Стриминг сервисы"
}

Структура данных в приложении

После загрузки данные организованы следующим образом:

servers = [
  {
    id: "server-001",
    name: "SWE-HIPHOST",
    description: "Шведский сервер",
    communities: [
      {
        community: "65001:100",
        description: "Стриминг сервисы",
        gateways: [
          { name: "gateway1" },
          { name: "gateway2" },
          { name: "gateway3" }
        ]
      },
      // ... другие communities
    ]
  },
  // ... другие серверы
]

Активные шлюзы хранятся в формате:

activeGateways = {
  "server-001:65001:100": "gateway1",
  "server-002:65001:100": "gateway4",
  // ключ: "{serverId}:{community}", значение: "{gatewayName}"
}

Интерфейс

Заголовок

• Название страницы "Easy Switch"
• Кнопка "Обновить" для перезагрузки данных
• Кнопка "Применить изменения" (появляется при наличии изменений)

Вкладки

• Прокси - основной список communities с шлюзами
• Провайдер прокси - дополнительная вкладка (в разработке)

Панель фильтров

• Dropdown "Правило" - фильтрация по типу правила
• Поле поиска - поиск по ключевым словам
• Кнопки инструментов (настройки, быстрые действия)

Блоки серверов

Каждый сервер отображается в отдельной карточке с:

• 🏴 Флаг страны сервера
• 🖥️ Иконка сервера
• Название сервера
• Описание сервера
• Количество communities на этом сервере

Карточки шлюзов

Каждая карточка шлюза (компактная) содержит:

• ⚡ Метка Fast (для первого шлюза в списке)
• Название шлюза
• Протокол подключения (vless и т.д.)
• Пинг в миллисекундах
• ✓ Галочка для активного шлюза

Карточки имеют меньший размер (col-6 col-sm-4 col-md-3 col-lg-2) для компактности.

Состояния карточки шлюза

• Неактивная - белый фон, серая рамка
• Активная - синий фон, белый текст, тень
• Hover - подъем карточки на 1px, легкая тень

Использование

Открытие страницы

Навигация: Управление → Easy Switch

URL: /easy-switch

Переключение шлюза

1. Найдите нужный сервер в списке
2. В этом сервере найдите нужный community
3. Нажмите на карточку желаемого шлюза этого сервера
4. Карточка станет синей (активной)
5. Нажмите "Применить изменения" для сохранения

Важно: Переключение происходит между шлюзами внутри одного сервера. Каждый сервер имеет свой набор шлюзов для каждого community.

Поиск

Введите в поле поиска:

• Название сервера (например, SWE-HIPHOST)
• Номер community (например, 65001:100)
• Описание (например, Стриминг)
• Название шлюза (например, gateway1)

Технические детали

Компоненты

• EasySwitchManager.jsx - главный компонент страницы

Зависимости

• React hooks (useState, useEffect)
• Tabler Icons для иконок
• API клиент для загрузки данных

API Endpoints

GET /api/server-configs          // Список серверов
GET /api/server-filters/{id}     // Фильтры сервера
GET /api/servers                 // Метаданные серверов

Состояния

- loading: boolean               // Загрузка данных
- error: string                  // Текст ошибки
- servers: []                    // Список серверов с communities и gateways
- inventoryServers: []           // Метаданные серверов (флаги, провайдеры)
- activeGateways: {}             // Активные шлюзы (ключ: "serverId:community")
- hasChanges: boolean            // Наличие изменений
- searchQuery: string            // Поисковый запрос
- selectedRule: string           // Выбранное правило фильтрации
- activeTab: string              // Активная вкладка (proxies/providers)

Важные изменения (v2)

✅ Исправлено в версии 2.0

• Все communities отображаются для всех серверов - больше нет различий в количестве communities между серверами
• Загрузка названий communities из справочника /api/communities
• Все gateways сервера отображаются для каждого community, а не только те, что настроены в filters
• Бейдж "настроен" показывает, для каких communities уже есть фильтры
• Активный gateway берется из filters, если настроен, иначе выбирается первый

Логика работы v2

1. Загружается справочник communities → все одинаковые для всех серверов
2. Для каждого сервера загружаются его gateways (из /api/servers или server-configs)
3. Для каждого community показываются все gateways этого сервера
4. Из filters берется информация только об активном gateway для данного community

Roadmap

Планируется добавить

• Реальные метрики пинга (интеграция с мониторингом)
• Сохранение изменений на сервер
• История переключений
• Групповое переключение
• Автоматический выбор fastest
• Уведомления о недоступных серверах
• Статистика использования
• Экспорт конфигурации

В разработке

• Вкладка "Провайдер прокси"
• Настройки отображения
• Быстрые действия

Отладка

Проверка данных в консоли

// В DevTools Console
console.log('Active Gateways:', activeGateways);
console.log('Communities:', communities);
console.log('All Filters:', allFilters);

Частые проблемы

Карточки не отображаются

• Проверьте, что есть серверы в /api/server-configs
• Убедитесь, что для серверов есть фильтры в /api/server-filters/{id}

Нет флагов стран

• Проверьте поле country в /api/servers
• Должно быть двухбуквенным кодом (US, DE, RU и т.д.)

Изменения не сохраняются

• Функция handleApplyChanges требует доработки
• Пока что изменения только в локальном состоянии

Стилизация

Страница использует:

• Tabler Admin - основной UI framework
• Bootstrap 5 - сетка и утилиты
• Custom styles - для карточек и анимаций

Цветовая схема

• Синий (bg-primary) - активный сервер
• Желтый (bg-yellow-lt) - fastest метка
• Зеленый (text-success) - пинг
• Синий светлый (bg-blue-lt) - badge community

Производительность

• Загрузка данных выполняется параллельно
• Фильтрация происходит на клиенте
• Минимум перерисовок при взаимодействии

---

Версия документа: 1.0
Дата создания: 2025-12-06
Автор: AI Assistant