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>
{/* Флаг и название шлюза */} {/* Флаг и название (комментарий) шлюза */}
<div className="d-flex align-items-center gap-2 mb-1"> <div className="d-flex align-items-center gap-2 mb-1">
<span <span
className={`avatar avatar-sm ${ className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
isActive ? 'bg-white text-primary' : 'bg-primary-lt' 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> </span>
<div className="flex-grow-1 min-w-0"> <div className="flex-grow-1 min-w-0">
<div <div
@@ -931,17 +937,17 @@ function EasySwitchManager() {
}`} }`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
> >
{gw.name} {gw.comment || gw.name}
</div> </div>
</div> </div>
</div> </div>
{/* IP шлюза под названием */} {/* IP шлюза ниже */}
{gw.ip && ( {gw.ip && (
<div <div
className={`small text-truncate ${ className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted' isActive ? 'text-white-75' : 'text-muted'
}`} }`}
style={{ fontSize: '0.7rem' }} style={{ fontSize: '0.75rem' }}
> >
{gw.ip} {gw.ip}
</div> </div>
@@ -1070,14 +1076,20 @@ function EasySwitchManager() {
)} )}
</div> </div>
{/* Флаг и название шлюза */} {/* Флаг и название (комментарий) шлюза */}
<div className="d-flex align-items-center gap-2 mb-1"> <div className="d-flex align-items-center gap-2 mb-1">
<span <span
className={`avatar avatar-sm ${ className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
isActive ? 'bg-white text-primary' : 'bg-primary-lt' 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> </span>
<div className="flex-grow-1 min-w-0"> <div className="flex-grow-1 min-w-0">
<div <div
@@ -1086,17 +1098,17 @@ function EasySwitchManager() {
}`} }`}
style={{ fontSize: '0.85rem', lineHeight: '1.2' }} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
> >
{gw.name} {gw.comment || gw.name}
</div> </div>
</div> </div>
</div> </div>
{/* IP шлюза под названием */} {/* IP шлюза ниже */}
{gw.ip && ( {gw.ip && (
<div <div
className={`small text-truncate ${ className={`small text-truncate ${
isActive ? 'text-white-75' : 'text-muted' isActive ? 'text-white-75' : 'text-muted'
}`} }`}
style={{ fontSize: '0.7rem' }} style={{ fontSize: '0.75rem' }}
> >
{gw.ip} {gw.ip}
</div> </div>
@@ -1214,23 +1226,40 @@ function EasySwitchManager() {
)} )}
</div> </div>
{/* Название шлюза */} {/* Флаг и название (комментарий) шлюза */}
<div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}> <div className="d-flex align-items-center gap-2 mb-1">
{gw.name} <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> </div>
{/* IP шлюза ниже */}
{/* Описание шлюза */} {gw.ip && (
{gw.comment && ( <div
<div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.8 : 1, lineHeight: '1.2' }}> className={`small text-truncate mb-1 ${isActive ? 'text-white-75' : 'text-muted'}`}
{gw.comment} style={{ fontSize: '0.75rem' }}
>
{gw.ip}
</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 className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}> <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
{ping != null ? ping : '—'} {ping != null ? ping : '—'}