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

refactor(ServerCard): update layout and styling of expanded information section to use Tabler datagrid format
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m4s
Details

Browse Source
This commit is contained in:
denozord
2026-02-17 13:58:58 +07:00
parent 1959b1d1d0
commit ba0557e877
1 changed files with 35 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/server/ServerCard.jsx
+35 -44
View File
@@ -169,55 +169,46 @@ export default function ServerCard({
</div> </div>
</div> </div>
{/* Расширенная информация */} {/* Расширенная информация в стиле Tabler datagrid */}
{expanded && ( {expanded && (
<div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}> <div className="border-top bg-light p-3" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
<div className="row g-0"> <div className="datagrid">
{/* IP адреса */} <div className="datagrid-item">
<div className="col-md-6 p-3 border-end"> <div className="datagrid-title">IP</div>
<div className="text-muted small mb-2 fw-medium"> <div className="datagrid-content"><code className="small">{server.ip}</code></div>
<IconWorld size={14} className="me-1" />
Сетевые адреса
</div>
<div className="row g-2">
<div className="col-4">
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>IP</div>
<code className="small">{server.ip}</code>
</div>
<div className="col-4">
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внешний</div>
<code className="small">{server.extIp || '—'}</code>
</div>
<div className="col-4">
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внутренний</div>
<code className="small">{server.internalIp || '—'}</code>
</div>
</div>
</div> </div>
<div className="datagrid-item">
{/* Шлюзы */} <div className="datagrid-title">Внешний</div>
<div className="col-md-6 p-3"> <div className="datagrid-content"><code className="small">{server.extIp || '—'}</code></div>
<div className="text-muted small mb-2 fw-medium"> </div>
<div className="datagrid-item">
<div className="datagrid-title">Внутренний</div>
<div className="datagrid-content"><code className="small">{server.internalIp || '—'}</code></div>
</div>
<div className="datagrid-item">
<div className="datagrid-title">
<IconServer size={14} className="me-1" /> <IconServer size={14} className="me-1" />
Шлюзы ({server.gateways?.length || 0}) Шлюзы ({server.gateways?.length || 0})
</div> </div>
{server.gateways?.length > 0 ? ( <div className="datagrid-content">
<div className="d-flex flex-wrap gap-2"> {server.gateways?.length > 0 ? (
{server.gateways.map((gw, idx) => ( <div className="d-flex flex-wrap gap-2">
<span {server.gateways.map((gw, idx) => (
key={gw.id || idx} <span
className={`badge ${gw.primary ? 'bg-blue-lt text-blue' : 'bg-secondary-lt text-secondary'}`} key={gw.id || idx}
title={gw.comment || (gw.primary ? 'Основной' : 'Резервный')} className={`badge ${gw.primary ? 'bg-blue-lt text-blue' : 'bg-secondary-lt text-secondary'}`}
> title={gw.comment || (gw.primary ? 'Основной' : 'Резервный')}
{gw.primary && <IconCheck size={10} className="me-1" />} >
{gw.name} {gw.primary && <IconCheck size={10} className="me-1" />}
{gw.ip && <span className="ms-1 opacity-75">({gw.ip})</span>} {gw.name}
</span> {gw.ip && <span className="ms-1 opacity-75">({gw.ip})</span>}
))} </span>
</div> ))}
) : ( </div>
<span className="text-muted small">Нет шлюзов</span> ) : (
)} <span className="text-muted small">Нет шлюзов</span>
)}
</div>
</div> </div>
</div> </div>
</div> </div>