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

refactor: Update EasySwitchManager layout for improved community and gateway display, enhancing visual structure and user interaction with better card organization and positioning.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m55s
Details

Browse Source
This commit is contained in:
denozord
2025-12-07 12:56:41 +07:00
parent 7204c4045f
commit 4a3426e04f
1 changed files with 61 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/EasySwitchManager.jsx
+59 -40
View File
@@ -432,32 +432,34 @@ function EasySwitchManager() {
</div> </div>
<div className="card-body p-3"> <div className="card-body p-3">
{/* ВСЕ Communities для этого сервера */} {/* Сетка Communities для этого сервера */}
{filteredCommunitiesForServer.map((comm) => { <div className="row g-3">
const activeKey = `${server.id}:${comm.value}`; {filteredCommunitiesForServer.map((comm) => {
const activeGw = activeGateways[activeKey]; const activeKey = `${server.id}:${comm.value}`;
const hasFilterForComm = server.filtersMap.has(comm.value); const activeGw = activeGateways[activeKey];
const hasFilterForComm = server.filtersMap.has(comm.value);
return ( return (
<div key={comm.value} className="mb-3"> <div key={comm.value} className="col-12 col-xl-6">
{/* Заголовок community */} <div className="mb-2">
<div className="mb-2"> {/* Заголовок community */}
<span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}> <div className="mb-2">
{comm.value} <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
</span> {comm.value}
<span className="fw-medium">{comm.name || comm.description || ''}</span> </span>
{hasFilterForComm && ( <span className="fw-medium">{comm.name || comm.description || ''}</span>
<span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}> {hasFilterForComm && (
настроен <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
</span> настроен
)} </span>
<span className="text-muted small ms-2"> )}
({server.gateways.length}) <span className="text-muted small ms-2">
</span> ({server.gateways.length})
</div> </span>
</div>
{/* Сетка карточек ВСЕх шлюзов сервера */} {/* Сетка карточек шлюзов для этого community */}
<div className="row g-3"> <div className="row g-3">
{server.gateways.map((gw, idx) => { {server.gateways.map((gw, idx) => {
const isActive = activeGw === gw.name; const isActive = activeGw === gw.name;
const isFastest = idx === 0; const isFastest = idx === 0;
@@ -472,7 +474,8 @@ function EasySwitchManager() {
transition: 'all 0.15s ease', transition: 'all 0.15s ease',
border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)', border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
borderRadius: '8px', borderRadius: '8px',
boxShadow: isActive ? '0 4px 12px rgba(32, 107, 196, 0.3)' : 'none' boxShadow: isActive ? '0 4px 12px rgba(32, 107, 196, 0.3)' : 'none',
position: 'relative'
}} }}
onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)} onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
onMouseEnter={(e) => { onMouseEnter={(e) => {
@@ -489,30 +492,44 @@ function EasySwitchManager() {
}} }}
> >
<div className="card-body p-3"> <div className="card-body p-3">
{/* Галочка и метка Fastest */} {/* Галочка (абсолютное позиционирование) */}
<div className="d-flex align-items-start justify-content-between mb-2"> {isActive && (
<div
className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
style={{
width: '24px',
height: '24px',
position: 'absolute',
top: '12px',
right: '12px'
}}
>
<IconCheck size={16} />
</div>
)}
{/* Метка Fastest */}
<div className="mb-2" style={{ minHeight: '24px' }}>
{isFastest && !isActive && ( {isFastest && !isActive && (
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.75rem', padding: '4px 8px' }}> <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.75rem', padding: '4px 8px' }}>
<IconBolt size={14} className="me-1" /> <IconBolt size={14} className="me-1" />
Fast Fast
</span> </span>
)} )}
{!isFastest && <span></span>}
{isActive && (
<div
className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
style={{ width: '24px', height: '24px' }}
>
<IconCheck size={16} />
</div>
)}
</div> </div>
{/* Название шлюза */} {/* Название шлюза */}
<div className={`fw-bold mb-2 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '1rem' }}> <div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '1rem' }}>
{gw.name} {gw.name}
</div> </div>
{/* Описание шлюза */}
{gw.comment && (
<div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.8rem', opacity: isActive ? 0.8 : 1 }}>
{gw.comment}
</div>
)}
{/* Протокол */} {/* Протокол */}
<div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.85rem', opacity: isActive ? 0.85 : 1 }}> <div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.85rem', opacity: isActive ? 0.85 : 1 }}>
{serverMeta?.provider || 'vless / xudp'} {serverMeta?.provider || 'vless / xudp'}
@@ -527,10 +544,12 @@ function EasySwitchManager() {
</div> </div>
); );
})} })}
</div>
</div>
</div> </div>
</div> );
); })}
})} </div>
</div> </div>
</div> </div>
); );