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

refactor(ServerGroupCard): update layout and improve server information display in expanded view
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
denozord
2026-02-17 10:57:46 +07:00
parent 8f3f1bd8a4
commit 804f132d42
1 changed files with 53 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/server/ServerGroupCard.jsx
+53 -31
View File
@@ -38,7 +38,6 @@ export default function ServerGroupCard({
const [expanded, setExpanded] = useState(false);
const first = servers[0];
const title = groupKey || (first?.dns?.split('.')[0] || 'Группа');
const provider = first?.provider || '';
const tunnel = first?.tunnel;
const wanCount = servers.length;
const anySelected = servers.some((s) => selectedSet.has(s.ip));
@@ -81,7 +80,7 @@ export default function ServerGroupCard({
</div>
</div>
{/* Центр: флаг, название, провайдер; ниже DNS и теги */}
{/* Центр: в свёрнутом виде — все провайдеры и домены, чтобы было однозначно */}
<div
className="flex-grow-1 py-2 px-3"
style={{ cursor: 'pointer' }}
@@ -91,21 +90,22 @@ export default function ServerGroupCard({
<span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(first?.country)}</span>
<div>
<span className="fw-semibold">{title}</span>
{provider && (
<>
<span className="text-muted mx-2">•</span>
<span className="text-muted">{provider}</span>
</>
)}
<span className="text-muted ms-2">· мультиван</span>
</div>
<span className="badge bg-success-lt text-success ms-auto">
{wanCount} WAN
</span>
</div>
<div className="d-flex align-items-center gap-2">
<code className="text-muted" style={{ fontSize: '0.8rem' }}>
{first?.dns || first?.ip || ''}
</code>
<div className="d-flex flex-wrap align-items-center gap-2">
<span className="text-muted small">
{servers.map((s) => s.dns?.split('.')[0] || s.ip).join(', ')}
</span>
<span className="text-muted small">—</span>
{servers.map((s, i) => (
<code key={s.id || s.ip} className="text-muted" style={{ fontSize: '0.75rem' }}>
{s.dns || s.ip}{i < servers.length - 1 ? ' · ' : ''}
</code>
))}
{tunnel && (
<span className="badge bg-secondary-lt text-secondary">
<IconNetwork size={12} className="me-1" />
@@ -147,9 +147,20 @@ export default function ServerGroupCard({
</div>
</div>
{/* Развёрнутый список WAN */}
{/* Развёрнутый список WAN: визуально отделённый блок, у каждой строки — бейдж HOME */}
{expanded && (
<div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
<div
className="border-top border-start border-3 border-green bg-green-lt"
style={{
borderBottomLeftRadius: '7px',
borderBottomRightRadius: '7px',
borderLeftColor: 'var(--tblr-green)',
backgroundColor: 'rgba(34, 197, 94, 0.06)'
}}
>
<div className="small text-muted px-3 py-1 border-bottom bg-green-lt" style={{ fontSize: '0.7rem' }}>
WAN-подключения группы
</div>
<div className="p-2">
{servers.map((server) => {
const isSelected = selectedSet.has(server.ip);
@@ -157,26 +168,37 @@ export default function ServerGroupCard({
return (
<div
key={server.id || server.ip}
className={`d-flex align-items-center rounded p-2 mb-1 ${isSelected ? 'bg-primary-lt' : ''}`}
className={`d-flex align-items-stretch rounded mb-1 overflow-hidden ${isSelected ? 'bg-primary-lt' : 'bg-white'}`}
style={{ boxShadow: '0 0 0 1px rgba(0,0,0,0.06)' }}
>
<button
type="button"
className="btn btn-ghost-secondary btn-icon btn-sm p-0 me-2"
onClick={() => onSelect?.(server)}
title={isSelected ? 'Снять выбор' : 'Выбрать'}
{/* Бейдж HOME у вложенного роутера */}
<div
className="d-flex align-items-center justify-content-center bg-green-lt text-green px-2"
style={{ minWidth: '52px', fontSize: '0.6rem', fontWeight: 700, letterSpacing: '0.5px' }}
>
{isSelected ? (
<IconCircleCheck size={18} className="text-primary" />
) : (
<IconSquare size={18} className="text-muted" />
)}
</button>
<span className="me-2" style={{ fontSize: '1.1rem' }}>{countryToFlag(server.country)}</span>
<div className="flex-grow-1 min-w-0">
<span className="fw-medium">{serverName}</span>
<span className="text-muted ms-2 small">{server.dns || server.ip}</span>
<IconRouter size={14} className="me-1" />
HOME
</div>
<div className="btn-list gap-1">
<div className="d-flex align-items-center flex-grow-1 py-2 px-2 min-w-0">
<button
type="button"
className="btn btn-ghost-secondary btn-icon btn-sm p-0 me-2 flex-shrink-0"
onClick={() => onSelect?.(server)}
title={isSelected ? 'Снять выбор' : 'Выбрать'}
>
{isSelected ? (
<IconCircleCheck size={18} className="text-primary" />
) : (
<IconSquare size={18} className="text-muted" />
)}
</button>
<span className="me-2 flex-shrink-0" style={{ fontSize: '1.1rem' }}>{countryToFlag(server.country)}</span>
<div className="min-w-0">
<span className="fw-medium">{serverName}</span>
<span className="text-muted ms-2 small">{server.dns || server.ip}</span>
</div>
</div>
<div className="d-flex align-items-center btn-list gap-1 px-2 border-start">
<button
type="button"
className="btn btn-outline-secondary btn-sm"