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

refactor: Revise FilterManager layout with enhanced column structure and card design for server details, improving user interaction and visual clarity.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
Details

Browse Source
This commit is contained in:
denozord
2025-12-06 22:02:04 +07:00
parent 2b8470a7ca
commit a058df010a
1 changed files with 63 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+63 -14
View File
@@ -943,7 +943,8 @@ function FilterManager() {
</div>
) : (
<div className="row g-3">
<div className="col-12 col-lg-4">
{/* Левая колонка: список серверов */}
<div className="col-12 col-xl-7">
<div className="input-icon mb-2">
<input
type="text"
@@ -972,7 +973,7 @@ function FilterManager() {
<div className="flex-grow-1 text-start">
<div className="fw-bold">{server.name}</div>
{server.description && (
<div className="text-muted small text-truncate" style={{ maxWidth: '220px' }}>
<div className="text-muted small text-truncate" style={{ maxWidth: '240px' }}>
{server.description}
</div>
)}
@@ -995,7 +996,7 @@ function FilterManager() {
<div className="flex-grow-1 text-start">
<div className="fw-bold">{server.name}</div>
{server.description && (
<div className="text-muted small text-truncate" style={{ maxWidth: '220px' }}>
<div className="text-muted small text-truncate" style={{ maxWidth: '240px' }}>
{server.description}
</div>
)}
@@ -1014,21 +1015,69 @@ function FilterManager() {
</button>
</div>
</div>
<div className="col-12 col-lg-8">
{/* Правая колонка: детали выбранного сервера / подсказка */}
<div className="col-12 col-xl-5">
{selectedServer ? (
<div className="alert alert-info d-flex align-items-center" role="alert">
<IconServer className="me-2" />
<div>
Текущий сервер: <span className="fw-bold">{selectedServer.name}</span>
{selectedServer.description && (
<span className="text-muted ms-2">{selectedServer.description}</span>
)}
<div className="card card-sm">
<div className="card-body">
<div className="d-flex align-items-start mb-2">
<span className="avatar bg-primary-lt me-3">
<IconServer size={18} />
</span>
<div className="flex-grow-1">
<div className="d-flex align-items-center gap-2">
<span className="fw-bold">{selectedServer.name}</span>
<span className="badge bg-green-lt text-green">Активен</span>
</div>
{selectedServer.description && (
<div className="text-muted small mt-1">{selectedServer.description}</div>
)}
</div>
</div>
<div className="d-flex flex-wrap gap-3 text-muted small mb-2">
<span>Фильтров: <span className="badge bg-blue-lt text-blue">{serverFilters.length}</span></span>
<span>Поиск: <code className="text-blue">{filterSearch || '—'}</code></span>
</div>
<div className="btn-list">
<button
className="btn btn-outline-primary"
onClick={handlePreviewConfig}
disabled={serverFilters.length === 0}
>
<IconEye className="icon" />
Просмотр
</button>
<button
className="btn btn-outline-primary"
onClick={copyConfigToClipboard}
disabled={serverFilters.length === 0}
>
<IconCopy className="icon" />
Копировать
</button>
<button
className="btn btn-success"
onClick={() => handleSaveServerConfig(selectedServer.id)}
disabled={loading || serverFilters.length === 0}
>
<IconDeviceFloppy className="icon" />
Сохранить
</button>
</div>
</div>
</div>
) : (
<div className="alert alert-warning d-flex align-items-center" role="alert">
<IconAlertTriangle className="me-2" />
<div>Выберите сервер слева, чтобы работать с фильтрами.</div>
<div className="card card-sm">
<div className="card-body d-flex align-items-start">
<IconAlertTriangle className="me-3 text-warning" />
<div>
<div className="fw-bold">Сначала выберите сервер</div>
<div className="text-muted">Нажмите на сервер слева, чтобы открыть его фильтры.</div>
</div>
</div>
</div>
)}
</div>