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

refactor(EasySwitchManager): update gateway display to include comments and improve layout consistency
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 3m59s
Details

Browse Source
This commit is contained in:
denozord
2026-02-11 01:13:59 +07:00
parent f6d32b3efa
commit 497940b29f
1 changed files with 58 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/EasySwitchManager.jsx
+58 -29
View File
@@ -915,14 +915,20 @@ function EasySwitchManager() {
)}
</div>
{/* Флаг и название шлюза */}
{/* Флаг и название (комментарий) шлюза */}
<div className="d-flex align-items-center gap-2 mb-1">
<span
className={`avatar avatar-sm ${
isActive ? 'bg-white text-primary' : 'bg-primary-lt'
}`}
className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
style={{
width: '28px',
height: '28px',
fontSize: '1.25rem',
lineHeight: 1,
backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
}}
title={gw.country || country || ''}
>
{countryToFlag(gw.country || country || '')}
{countryToFlag(gw.country || country || '') || '🌐'}
</span>
<div className="flex-grow-1 min-w-0">
<div
@@ -931,17 +937,17 @@ function EasySwitchManager() {
}`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
>
{gw.name}
{gw.comment || gw.name}
</div>
</div>
</div>
{/* IP шлюза под названием */}
{/* IP шлюза ниже */}
{gw.ip && (
<div
className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted'
}`}
style={{ fontSize: '0.7rem' }}
style={{ fontSize: '0.75rem' }}
>
{gw.ip}
</div>
@@ -1070,14 +1076,20 @@ function EasySwitchManager() {
)}
</div>
{/* Флаг и название шлюза */}
{/* Флаг и название (комментарий) шлюза */}
<div className="d-flex align-items-center gap-2 mb-1">
<span
className={`avatar avatar-sm ${
isActive ? 'bg-white text-primary' : 'bg-primary-lt'
}`}
className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
style={{
width: '28px',
height: '28px',
fontSize: '1.25rem',
lineHeight: 1,
backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
}}
title={gw.country || country || ''}
>
{countryToFlag(gw.country || country || '')}
{countryToFlag(gw.country || country || '') || '🌐'}
</span>
<div className="flex-grow-1 min-w-0">
<div
@@ -1086,17 +1098,17 @@ function EasySwitchManager() {
}`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
>
{gw.name}
{gw.comment || gw.name}
</div>
</div>
</div>
{/* IP шлюза под названием */}
{/* IP шлюза ниже */}
{gw.ip && (
<div
className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted'
}`}
style={{ fontSize: '0.7rem' }}
style={{ fontSize: '0.75rem' }}
>
{gw.ip}
</div>
@@ -1214,23 +1226,40 @@ function EasySwitchManager() {
)}
</div>
{/* Название шлюза */}
<div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}>
{gw.name}
{/* Флаг и название (комментарий) шлюза */}
<div className="d-flex align-items-center gap-2 mb-1">
<span
className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
style={{
width: '28px',
height: '28px',
fontSize: '1.25rem',
lineHeight: 1,
backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
}}
title={gw.country || country || ''}
>
{countryToFlag(gw.country || country || '') || '🌐'}
</span>
<div className="flex-grow-1 min-w-0">
<div
className={`fw-bold text-truncate ${isActive ? 'text-white' : ''}`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
>
{gw.comment || gw.name}
</div>
</div>
</div>
{/* Описание шлюза */}
{gw.comment && (
<div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.8 : 1, lineHeight: '1.2' }}>
{gw.comment}
{/* IP шлюза ниже */}
{gw.ip && (
<div
className={`small text-truncate mb-1 ${isActive ? 'text-white-75' : 'text-muted'}`}
style={{ fontSize: '0.75rem' }}
>
{gw.ip}
</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 className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
{ping != null ? ping : '—'}