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/css/style.css
+27 -4
View File
@@ -82,6 +82,16 @@ header h1 {
color: white;
}
.btn-secondary {
background: #607D8B;
color: white;
}
.btn-danger {
background: #f44336;
color: white;
}
.main-content {
display: flex;
flex: 1;
@@ -290,17 +300,30 @@ header h1 {
/* SSH终端样式 */
.terminal-modal-content {
width: 800px;
max-width: 90vw;
width: 95vw;
max-width: 1200px;
margin: 20px auto;
max-height: 90vh;
display: flex;
flex-direction: column;
cursor: default;
}
.terminal-modal-content .modal-header-drag {
cursor: move;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
margin-bottom: 5px;
user-select: none;
}
.terminal-container {
width: 100%;
height: 500px;
height: calc(85vh - 80px);
background: #1e1e1e;
border-radius: 5px;
overflow: hidden;
margin-top: 15px;
margin-top: 10px;
}
.terminal-status {
web/index.html
+32 -2
View File
@@ -23,6 +23,7 @@
<button id="btn-scan" class="btn btn-primary">开始扫描</button>
<button id="btn-add-device" class="btn btn-success">添加设备</button>
<button id="btn-export" class="btn btn-info">导出拓扑</button>
<button id="btn-logout" class="btn btn-danger" style="margin-left:auto">登出</button>
</div>
</header>
@@ -84,8 +85,10 @@
<!-- SSH终端模态框 -->
<div id="modal-terminal" class="modal">
<div class="modal-content terminal-modal-content">
<span class="close-terminal">&times;</span>
<h2>SSH 终端 - <span id="terminal-device-name"></span></h2>
<div class="modal-header-drag">
<span class="close-terminal">&times;</span>
<h2 style="display:inline;margin:0">SSH 终端 - <span id="terminal-device-name"></span></h2>
</div>
<div id="terminal-container" class="terminal-container"></div>
<div id="terminal-status" class="terminal-status">已断开</div>
</div>
@@ -167,6 +170,33 @@
</div>
</div>
<!-- 编辑设备模态框 -->
<div id="modal-edit-device" class="modal">
<div class="modal-content">
<span class="close-edit-device">&times;</span>
<h2>编辑设备</h2>
<form id="edit-device-form" onsubmit="saveEditDevice(event)">
<input type="hidden" id="edit-device-id">
<div class="form-group">
<label for="edit-hostname">主机名:</label>
<input type="text" id="edit-hostname" required placeholder="例: BJ-SW01">
</div>
<div class="form-group">
<label for="edit-type">设备类型:</label>
<select id="edit-type" required>
<option value="cisco">Cisco</option>
<option value="huawei">Huawei</option>
<option value="h3c">H3C</option>
<option value="asa">ASA</option>
<option value="linux">Linux</option>
<option value="windows">Windows</option>
</select>
</div>
<button type="submit" class="btn btn-primary" style="width:100%">保存</button>
</form>
</div>
</div>
<!-- 选择设备模态框 -->
<div id="modal-select-devices" class="modal">
<div class="modal-content select-devices-modal-content">
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);
}
}
web/login.html
+137
View File
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - 网络拓扑发现系统</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
padding: 50px 40px;
width: 400px;
max-width: 90vw;
}
.login-card h1 {
text-align: center;
margin-bottom: 10px;
font-size: 24px;
color: #333;
}
.login-card p {
text-align: center;
color: #999;
margin-bottom: 30px;
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 6px;
color: #555;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 15px;
transition: border-color 0.3s;
outline: none;
}
.form-group input:focus {
border-color: #667eea;
}
.login-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.3s;
}
.login-btn:hover {
opacity: 0.9;
}
.login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.error-msg {
color: #f44336;
text-align: center;
margin-top: 15px;
font-size: 14px;
display: none;
}
</style>
</head>
<body>
<div class="login-card">
<h1>🌐 网络拓扑发现系统</h1>
<p>请登录以继续</p>
<form id="login-form">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required autofocus placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required placeholder="请输入密码">
</div>
<button type="submit" class="login-btn" id="login-btn">登 录</button>
<div class="error-msg" id="error-msg"></div>
</form>
</div>
<script>
document.getElementById('login-form').addEventListener('submit', async function(e) {
e.preventDefault();
var btn = document.getElementById('login-btn');
var errEl = document.getElementById('error-msg');
btn.disabled = true;
btn.textContent = '登录中...';
errEl.style.display = 'none';
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
try {
var resp = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: username, password: password })
});
var data = await resp.json();
if (resp.ok && data.success) {
window.location.href = '/';
} else {
errEl.textContent = data.message || '登录失败';
errEl.style.display = 'block';
}
} catch (err) {
errEl.textContent = '网络错误，请重试';
errEl.style.display = 'block';
}
btn.disabled = false;
btn.textContent = '登 录';
});
</script>
</body>
</html>