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

refactor(NetworkConfigManager): enhance server display with card layout for improved UI; remove unused PreviewConfigModal import
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m39s
Details

Browse Source
This commit is contained in:
denozord
2026-01-22 13:42:47 +07:00
parent b0ccbc5c54
commit 9328e205a0
1 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/NetworkConfigManager.jsx
+40 -16
View File
@@ -6,7 +6,6 @@ import FormField from './components/FormField.jsx';
import ConfirmModal from './components/ConfirmModal.jsx'; import ConfirmModal from './components/ConfirmModal.jsx';
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx'; import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx'; import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx';
import PreviewConfigModal from './components/filter/PreviewConfigModal.jsx';
import { countryToFlag } from './utils/serverUtils.js'; import { countryToFlag } from './utils/serverUtils.js';
import { import {
IconNetwork, IconNetwork,
@@ -699,7 +698,8 @@ function NetworkConfigManager() {
code code
}); });
} }
}); });
}
// Генерируем блоки для IP адресов интерфейсов // Генерируем блоки для IP адресов интерфейсов
const interfaceBlocks = generateMikrotikInterfaceAddresses(); const interfaceBlocks = generateMikrotikInterfaceAddresses();
@@ -1848,13 +1848,25 @@ function NetworkConfigManager() {
const server = getServerInfo(editingInterface.serverId); const server = getServerInfo(editingInterface.serverId);
return server ? ( return server ? (
<div className="col-12"> <div className="col-12">
<div className="alert alert-info mb-0"> <div className="card card-sm border">
<div className="d-flex align-items-center"> <div className="card-body p-2">
<IconServer size={16} className="me-2" /> <div className="d-flex align-items-center">
<div> <IconServer size={16} className="text-muted me-2" />
<strong>Сервер 1:</strong> {server.dns || server.ip} <span className="fw-medium text-muted me-2">Сервер 1:</span>
{server.provider && <span className="ms-2">• {server.provider}</span>} <span className="me-2">{server.dns || server.ip}</span>
{server.country && <span className="ms-2">• {countryToFlag(server.country)} {server.country}</span>} {server.provider && (
<>
<span className="text-muted me-2">•</span>
<span className="me-2">{server.provider}</span>
</>
)}
{server.country && (
<>
<span className="text-muted me-2">•</span>
<span>{countryToFlag(server.country)}</span>
<span className="ms-1">{server.country}</span>
</>
)}
</div> </div>
</div> </div>
</div> </div>
@@ -1865,13 +1877,25 @@ function NetworkConfigManager() {
const server2 = getServerInfo(editingInterface.serverId2); const server2 = getServerInfo(editingInterface.serverId2);
return server2 ? ( return server2 ? (
<div className="col-12"> <div className="col-12">
<div className="alert alert-info mb-0"> <div className="card card-sm border">
<div className="d-flex align-items-center"> <div className="card-body p-2">
<IconServer size={16} className="me-2" /> <div className="d-flex align-items-center">
<div> <IconServer size={16} className="text-muted me-2" />
<strong>Сервер 2:</strong> {server2.dns || server2.ip} <span className="fw-medium text-muted me-2">Сервер 2:</span>
{server2.provider && <span className="ms-2">• {server2.provider}</span>} <span className="me-2">{server2.dns || server2.ip}</span>
{server2.country && <span className="ms-2">• {countryToFlag(server2.country)} {server2.country}</span>} {server2.provider && (
<>
<span className="text-muted me-2">•</span>
<span className="me-2">{server2.provider}</span>
</>
)}
{server2.country && (
<>
<span className="text-muted me-2">•</span>
<span>{countryToFlag(server2.country)}</span>
<span className="ms-1">{server2.country}</span>
</>
)}
</div> </div>
</div> </div>
</div> </div>