denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(EasySwitchManager): enhance gateway display with improved layout and additional information including IP and provider details
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 3m25s
Details

Browse Source
This commit is contained in:
denozord
2026-02-11 00:53:48 +07:00
parent 343626c350
commit 583f9b255e
1 changed files with 104 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/EasySwitchManager.jsx
+104 -28
View File
@@ -915,21 +915,56 @@ function EasySwitchManager() {
)} )}
</div> </div>
{/* Название шлюза */} {/* Информация о шлюзе в стиле фильтров: флаг, имя, IP */}
<div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}> <div className="d-flex align-items-start gap-2 mb-1">
{gw.name} <span
</div> className={`avatar avatar-sm ${
isActive ? 'bg-white text-primary' : 'bg-primary-lt'
{/* Описание шлюза */} }`}
{gw.comment && ( >
<div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.8 : 1, lineHeight: '1.2' }}> {countryToFlag(gw.country || country || '')}
{gw.comment} </span>
<div className="flex-grow-1 min-w-0">
{/* Основное название — имя gateway */}
<div
className={`fw-bold text-truncate ${
isActive ? 'text-white' : ''
}`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
>
{gw.name}
</div>
{/* IP шлюза под названием */}
{gw.ip && (
<div
className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted'
}`}
style={{ fontSize: '0.7rem' }}
>
{gw.ip}
</div>
)}
{/* Описание / провайдер */}
<div
className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted'
}`}
style={{ fontSize: '0.7rem' }}
>
{gw.comment && <span className="me-1">{gw.comment}</span>}
{(gw.country || serverMeta?.country || serverMeta?.provider) && (
<>
{gw.country || serverMeta?.country ? (
<span className="me-1">
{countryToFlag(gw.country || serverMeta?.country)}
</span>
) : null}
<span>{gw.provider || serverMeta?.provider || ''}</span>
</>
)}
</div>
</div> </div>
)}
{/* Протокол */}
<div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.85 : 1 }}>
{serverMeta?.provider || 'vless'}
</div> </div>
{/* Метрика (пинг) */} {/* Метрика (пинг) */}
@@ -1055,21 +1090,62 @@ function EasySwitchManager() {
)} )}
</div> </div>
{/* Название шлюза */} {/* Информация о шлюзе в стиле фильтров: флаг, имя, IP */}
<div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}> <div className="d-flex align-items-start gap-2 mb-1">
{gw.name} <span
</div> className={`avatar avatar-sm ${
isActive ? 'bg-white text-primary' : 'bg-primary-lt'
{/* Описание шлюза */} }`}
{gw.comment && ( >
<div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.8 : 1, lineHeight: '1.2' }}> {countryToFlag(gw.country || country || '')}
{gw.comment} </span>
<div className="flex-grow-1 min-w-0">
{/* Основное название — имя gateway */}
<div
className={`fw-bold text-truncate ${
isActive ? 'text-white' : ''
}`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
>
{gw.name}
</div>
{/* IP шлюза под названием */}
{gw.ip && (
<div
className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted'
}`}
style={{ fontSize: '0.7rem' }}
>
{gw.ip}
</div>
)}
{/* Описание / провайдер */}
<div
className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted'
}`}
style={{ fontSize: '0.7rem' }}
>
{gw.comment && (
<span className="me-1">{gw.comment}</span>
)}
{(gw.country ||
serverMeta?.country ||
serverMeta?.provider) && (
<>
{gw.country || serverMeta?.country ? (
<span className="me-1">
{countryToFlag(
gw.country || serverMeta?.country
)}
</span>
) : null}
<span>{gw.provider || serverMeta?.provider || ''}</span>
</>
)}
</div>
</div> </div>
)}
{/* Протокол */}
<div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.85 : 1 }}>
{serverMeta?.provider || 'vless'}
</div> </div>
{/* Метрика (пинг) */} {/* Метрика (пинг) */}