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>
{/* Расширенная информация */}
{/* Расширенная информация в стиле Tabler datagrid */}
{expanded && (
<div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
<div className="row g-0">
{/* IP адреса */}
<div className="col-md-6 p-3 border-end">
<div className="text-muted small mb-2 fw-medium">
<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 className="border-top bg-light p-3" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
<div className="datagrid">
<div className="datagrid-item">
<div className="datagrid-title">IP</div>
<div className="datagrid-content"><code className="small">{server.ip}</code></div>
</div>
{/* Шлюзы */}
<div className="col-md-6 p-3">
<div className="text-muted small mb-2 fw-medium">
<div className="datagrid-item">
<div className="datagrid-title">Внешний</div>
<div className="datagrid-content"><code className="small">{server.extIp || '—'}</code></div>
</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" />
Шлюзы ({server.gateways?.length || 0})
</div>
{server.gateways?.length > 0 ? (
<div className="d-flex flex-wrap gap-2">
{server.gateways.map((gw, idx) => (
<span
key={gw.id || idx}
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.ip && <span className="ms-1 opacity-75">({gw.ip})</span>}
</span>
))}
</div>
) : (
<span className="text-muted small">Нет шлюзов</span>
)}
<div className="datagrid-content">
{server.gateways?.length > 0 ? (
<div className="d-flex flex-wrap gap-2">
{server.gateways.map((gw, idx) => (
<span
key={gw.id || idx}
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.ip && <span className="ms-1 opacity-75">({gw.ip})</span>}
</span>
))}
</div>
) : (
<span className="text-muted small">Нет шлюзов</span>
)}
</div>
</div>
</div>
</div>