cnbugs/network-topology-discovery
1
0
Fork 0
Code Issues Pull Requests Activity

prod

Browse Source
This commit is contained in:
Your Name
2026-04-26 22:00:03 +08:00
parent bcad5b8e27
commit 2a97f458a9
11 changed files with 888 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/app.js
+124 -1
View File
@@ -98,6 +98,11 @@ function initEventListeners() {
document.getElementById('modal-new-topology').classList.remove('active');
});
// 关闭编辑设备模态框
document.querySelector('.close-edit-device').addEventListener('click', function() {
document.getElementById('modal-edit-device').classList.remove('active');
});
// 新建拓扑表单
document.getElementById('new-topology-form').addEventListener('submit', createTopology);
@@ -120,8 +125,47 @@ function initEventListeners() {
// 导出按钮
document.getElementById('btn-export').addEventListener('click', exportTopology);
// 登出按钮
var logoutBtn = document.getElementById('btn-logout');
if (logoutBtn) {
logoutBtn.addEventListener('click', function() {
window.location.href = '/api/logout';
});
}
// SSH终端相关
document.querySelector('.close-terminal').addEventListener('click', closeTerminal);
// 终端模态框拖动功能
(function() {
var dragHandle = document.querySelector('.modal-header-drag');
var modal = document.querySelector('.terminal-modal-content');
var isDragging = false;
var offsetX = 0, offsetY = 0;
if (dragHandle && modal) {
dragHandle.addEventListener('mousedown', function(e) {
if (e.target.classList.contains('close-terminal')) return;
isDragging = true;
var rect = modal.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
modal.style.margin = '0';
modal.style.position = 'absolute';
modal.style.left = rect.left + 'px';
modal.style.top = rect.top + 'px';
e.preventDefault();
});
document.addEventListener('mousemove', function(e) {
if (!isDragging) return;
modal.style.left = (e.clientX - offsetX) + 'px';
modal.style.top = (e.clientY - offsetY) + 'px';
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
}
})();
document.querySelector('.close-ssh-creds').addEventListener('click', function() {
document.getElementById('modal-ssh-creds').classList.remove('active');
});
@@ -338,6 +382,14 @@ async function loadDeviceList() {
async function showDeviceDetail(deviceId) {
try {
const response = await fetch(`/api/device/${deviceId}`);
if (response.status === 401) {
window.location.href = '/login';
return;
}
if (!response.ok) {
console.error('获取设备详情失败:', response.status, response.statusText);
return;
}
const device = await response.json();
const detailPanel = document.getElementById('detail-panel');
@@ -351,7 +403,11 @@ async function showDeviceDetail(deviceId) {
<p><strong>类型:</strong> ${device.type}</p>
<p><strong>系统:</strong> ${device.os_version || 'N/A'}</p>
<p><strong>运行时间:</strong> ${device.uptime || 'N/A'}</p>
<button class="btn btn-primary" style="margin-top:10px;width:100%" onclick="openSSHTerminal('${device.ip}', '${device.hostname || device.ip}')">SSH 连接</button>
<div style="display:flex;gap:10px;margin-top:10px">
<button class="btn btn-primary" style="flex:1" onclick="openSSHTerminal('${device.ip}', '${device.hostname || device.ip}')">SSH 连接</button>
<button class="btn btn-secondary" style="flex:1" onclick="openEditDevice('${device.id}', '${device.hostname}', '${device.type}')">编辑</button>
<button class="btn btn-danger" style="flex:1" onclick="deleteDevice('${device.id}')">删除</button>
</div>
</div>
<div class="detail-section">
<h4>接口信息 (${device.interfaces.length})</h4>
@@ -363,6 +419,8 @@ async function showDeviceDetail(deviceId) {
<p>IP: ${iface.ip || 'N/A'}</p>
<p>MAC: ${iface.mac || 'N/A'}</p>
<p>速度: ${iface.speed || 'N/A'}</p>
<p>双工: ${iface.duplex || 'N/A'}</p>
<p>VLAN: ${iface.vlan || 'N/A'}</p>
</div>
</div>
`).join('')}
@@ -784,4 +842,69 @@ function closeTerminal() {
}
document.getElementById('modal-terminal').classList.remove('active');
document.getElementById('terminal-container').innerHTML = '';
// 重置终端模态框位置
var modal = document.querySelector('.terminal-modal-content');
if (modal) {
modal.style.position = '';
modal.style.left = '';
modal.style.top = '';
modal.style.margin = '';
}
}
// 删除设备
async function deleteDevice(deviceId) {
if (!confirm('确定要删除设备 ' + deviceId + ' 吗？')) return;
try {
const response = await fetch(`/api/device/${deviceId}`, {
method: 'DELETE'
});
if (response.ok) {
alert('删除成功');
document.getElementById('detail-panel').classList.remove('active');
// 重新加载拓扑和设备列表
loadTopology();
loadDeviceList();
} else {
alert('删除失败');
}
} catch (error) {
alert('删除失败: ' + error.message);
}
}
// 打开编辑设备模态框
function openEditDevice(id, hostname, type) {
document.getElementById('edit-device-id').value = id;
document.getElementById('edit-hostname').value = hostname;
document.getElementById('edit-type').value = type;
document.getElementById('modal-edit-device').classList.add('active');
}
// 保存编辑设备
async function saveEditDevice(event) {
event.preventDefault();
const id = document.getElementById('edit-device-id').value;
const hostname = document.getElementById('edit-hostname').value;
const type = document.getElementById('edit-type').value;
try {
const response = await fetch(`/api/device/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ hostname, type })
});
if (response.ok) {
alert('修改成功');
document.getElementById('modal-edit-device').classList.remove('active');
document.getElementById('detail-panel').classList.remove('active');
loadTopology();
loadDeviceList();
} else {
const data = await response.json();
alert('修改失败: ' + (data.error || '未知错误'));
}
} catch (error) {
alert('修改失败: ' + error.message);
}
}