feat: Add Easy Switch feature to the application, including new route and menu item for improved navigation and user experience.

2025-12-07 04:23:29 +07:00
parent 2859947a34
commit 7091660b80
3 changed files with 681 additions and 1 deletions
@@ -0,0 +1,200 @@
+# Easy Switch - Быстрое переключение шлюзов
+
+## Описание
+
+Easy Switch - это новая страница для быстрого переключения шлюзов (gateways) на основе communities из фильтров. Интерфейс вдохновлен мобильными VPN приложениями и обеспечивает удобный способ управления маршрутизацией.
+
+## Особенности
+
+### 1. **Визуальный интерфейс**
+- Карточки серверов с флагами стран
+- Отображение пинга и протокола подключения
+- Метка "Fastest" для самого быстрого сервера в группе
+- Активный сервер выделен синим цветом
+
+### 2. **Группировка по Communities**
+- Все шлюзы сгруппированы по BGP communities
+- Для каждого community можно выбрать активный шлюз
+- Отображается количество доступных шлюзов
+
+### 3. **Поиск и фильтрация**
+- Поиск по community, описанию или имени шлюза
+- Фильтрация по правилам
+- Вкладки "Прокси" и "Провайдер прокси"
+
+### 4. **Управление изменениями**
+- Кнопка "Применить изменения" появляется при выборе нового шлюза
+- Возможность обновить данные с сервера
+- Отслеживание изменений
+
+## Структура данных
+
+### Источники данных
+
+1. **Server Configs** (`/api/server-configs`)
+   - Список серверов с настройками
+   - ID сервера для загрузки фильтров
+
+2. **Server Filters** (`/api/server-filters/{serverId}`)
+   - Фильтры для каждого сервера
+   - Community и gateway для каждого фильтра
+
+3. **Inventory Servers** (`/api/servers`)
+   - Метаданные серверов (страна, провайдер)
+   - Используется для отображения флагов
+
+### Формат данных фильтра
+
+```json
+{
+  "community": "65001:100",
+  "gateway": "SWE-HIPHOST",
+  "description": "Стриминг сервисы"
+}
+```
+
+## Интерфейс
+
+### Заголовок
+- Название страницы "Easy Switch"
+- Кнопка "Обновить" для перезагрузки данных
+- Кнопка "Применить изменения" (появляется при наличии изменений)
+
+### Вкладки
+- **Прокси** - основной список communities с шлюзами
+- **Провайдер прокси** - дополнительная вкладка (в разработке)
+
+### Панель фильтров
+- Dropdown "Правило" - фильтрация по типу правила
+- Поле поиска - поиск по ключевым словам
+- Кнопки инструментов (настройки, быстрые действия)
+
+### Карточки серверов
+
+Каждая карточка содержит:
+- 🏴 **Флаг страны** (если доступен)
+- ⚡ **Метка Fastest** (для самого быстрого сервера)
+- **Название** шлюза или страны
+- **Протокол** подключения (vless/xudp и т.д.)
+- **Пинг** в миллисекундах
+- ✓ **Галочка** для активного сервера
+
+### Состояния карточки
+- **Неактивная** - белый фон, серая рамка
+- **Активная** - синий фон, белый текст, тень
+- **Hover** - подъем карточки, легкая тень
+
+## Использование
+
+### Открытие страницы
+Навигация: `Управление → Easy Switch`
+
+URL: `/easy-switch`
+
+### Переключение шлюза
+1. Найдите нужный community в списке
+2. Нажмите на карточку желаемого шлюза
+3. Карточка станет синей (активной)
+4. Нажмите "Применить изменения" для сохранения
+
+### Поиск
+Введите в поле поиска:
+- Номер community (например, `65001:100`)
+- Описание (например, `Стриминг`)
+- Название шлюза (например, `SWE-HIPHOST`)
+
+## Технические детали
+
+### Компоненты
+- **EasySwitchManager.jsx** - главный компонент страницы
+
+### Зависимости
+- React hooks (useState, useEffect)
+- Tabler Icons для иконок
+- API клиент для загрузки данных
+
+### API Endpoints
+```javascript
+GET /api/server-configs          // Список серверов
+GET /api/server-filters/{id}     // Фильтры сервера
+GET /api/servers                 // Метаданные серверов
+```
+
+### Состояния
+```javascript
+- loading: boolean               // Загрузка данных
+- error: string                  // Текст ошибки
+- servers: []                    // Список серверов
+- communities: []                // Группы communities
+- activeGateways: {}             // Активные шлюзы
+- hasChanges: boolean            // Наличие изменений
+- searchQuery: string            // Поисковый запрос
+- activeTab: string              // Активная вкладка
+```
+
+## Roadmap
+
+### Планируется добавить
+- [ ] Реальные метрики пинга (интеграция с мониторингом)
+- [ ] Сохранение изменений на сервер
+- [ ] История переключений
+- [ ] Групповое переключение
+- [ ] Автоматический выбор fastest
+- [ ] Уведомления о недоступных серверах
+- [ ] Статистика использования
+- [ ] Экспорт конфигурации
+
+### В разработке
+- [ ] Вкладка "Провайдер прокси"
+- [ ] Настройки отображения
+- [ ] Быстрые действия
+
+## Отладка
+
+### Проверка данных в консоли
+```javascript
+// В 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
+