feat: Update Easy Switch functionality to improve server and gateway management, including enhanced grouping by servers, refined UI components, and updated data structure for better user experience.

2025-12-07 04:31:12 +07:00
parent 7091660b80
commit b13f412b79
2 changed files with 267 additions and 211 deletions
@@ -2,20 +2,23 @@

 ## Описание

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

 ## Особенности

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

-### 2. **Группировка по Communities**
- Все шлюзы сгруппированы по BGP communities
- Для каждого community можно выбрать активный шлюз
- Отображается количество доступных шлюзов
+### 2. **Группировка по Серверам**
+- Сервера группируются в отдельные блоки
+- Каждый сервер показывает свои communities
+- Для каждого community на сервере можно выбрать активный шлюз **этого сервера**
+- Переключение происходит между шлюзами **внутри одного сервера**
+- Отображается количество communities на каждом сервере

 ### 3. **Поиск и фильтрация**
 - Поиск по community, описанию или имени шлюза
@@ -53,6 +56,42 @@ Easy Switch - это новая страница для быстрого пер
 }
 ```

+### Структура данных в приложении
+
+После загрузки данные организованы следующим образом:
+
+```javascript
+servers = [
+  {
+    id: "server-001",
+    name: "SWE-HIPHOST",
+    description: "Шведский сервер",
+    communities: [
+      {
+        community: "65001:100",
+        description: "Стриминг сервисы",
+        gateways: [
+          { name: "gateway1" },
+          { name: "gateway2" },
+          { name: "gateway3" }
+        ]
+      },
+      // ... другие communities
+    ]
+  },
+  // ... другие серверы
+]
+```
+
+Активные шлюзы хранятся в формате:
+```javascript
+activeGateways = {
+  "server-001:65001:100": "gateway1",
+  "server-002:65001:100": "gateway4",
+  // ключ: "{serverId}:{community}", значение: "{gatewayName}"
+}
+```
+
 ## Интерфейс

 ### Заголовок
@@ -69,20 +108,30 @@ Easy Switch - это новая страница для быстрого пер
 - Поле поиска - поиск по ключевым словам
 - Кнопки инструментов (настройки, быстрые действия)

-### Карточки серверов
+### Блоки серверов

-Каждая карточка содержит:
- 🏴 **Флаг страны** (если доступен)
- ⚡ **Метка Fastest** (для самого быстрого сервера)
- **Название** шлюза или страны
- **Протокол** подключения (vless/xudp и т.д.)
+Каждый сервер отображается в отдельной карточке с:
+- 🏴 **Флаг страны** сервера
+- 🖥️ **Иконка сервера**
+- **Название** сервера
+- **Описание** сервера
+- **Количество communities** на этом сервере
+
+### Карточки шлюзов
+
+Каждая карточка шлюза (компактная) содержит:
+- ⚡ **Метка Fast** (для первого шлюза в списке)
+- **Название** шлюза
+- **Протокол** подключения (vless и т.д.)
 - **Пинг** в миллисекундах
- ✓ **Галочка** для активного сервера
+- ✓ **Галочка** для активного шлюза

-### Состояния карточки
+Карточки имеют меньший размер (col-6 col-sm-4 col-md-3 col-lg-2) для компактности.
+
+### Состояния карточки шлюза
 - **Неактивная** - белый фон, серая рамка
 - **Активная** - синий фон, белый текст, тень
- **Hover** - подъем карточки, легкая тень
+- **Hover** - подъем карточки на 1px, легкая тень

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

@@ -92,16 +141,20 @@ Easy Switch - это новая страница для быстрого пер
 URL: `/easy-switch`

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

 ### Поиск
 Введите в поле поиска:
+- Название сервера (например, `SWE-HIPHOST`)
 - Номер community (например, `65001:100`)
 - Описание (например, `Стриминг`)
- Название шлюза (например, `SWE-HIPHOST`)
+- Название шлюза (например, `gateway1`)

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

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

 ## Roadmap