denozord
489bdedfbb
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m54s
270 lines
12 KiB
Markdown
270 lines
12 KiB
Markdown
# 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`)
|
||
- Метаданные серверов (страна, провайдер)
|
||
- Используется для отображения флагов
|
||
|
||
### Формат данных фильтра
|
||
|
||
```json
|
||
{
|
||
"community": "65001:100",
|
||
"gateway": "SWE-HIPHOST",
|
||
"description": "Стриминг сервисы"
|
||
}
|
||
```
|
||
|
||
### Структура данных в приложении
|
||
|
||
После загрузки данные организованы следующим образом:
|
||
|
||
```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}"
|
||
}
|
||
```
|
||
|
||
## Интерфейс
|
||
|
||
### Заголовок
|
||
- Название страницы "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
|
||
```javascript
|
||
GET /api/server-configs // Список серверов
|
||
GET /api/server-filters/{id} // Фильтры сервера
|
||
GET /api/servers // Метаданные серверов
|
||
```
|
||
|
||
### Состояния
|
||
```javascript
|
||
- 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
|
||
- [ ] Уведомления о недоступных серверах
|
||
- [ ] Статистика использования
|
||
- [ ] Экспорт конфигурации
|
||
|
||
### В разработке
|
||
- [ ] Вкладка "Провайдер прокси"
|
||
- [ ] Настройки отображения
|
||
- [ ] Быстрые действия
|
||
|
||
## Отладка
|
||
|
||
### Проверка данных в консоли
|
||
```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
|
||
|