Initial commit: 网络拓扑发现系统

- 支持Cisco、华为、H3C、ASA、Linux、Windows设备
- SSH远程采集设备信息
- 自动发现网络拓扑(LLDP/CDP)
- Web可视化界面
- 支持旧版SSH加密算法兼容

web/css/style.css

@@ -0,0 +1,271 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #f5f5f5;
+    color: #333;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+header h1 {
+    font-size: 24px;
+}
+
+.controls {
+    display: flex;
+    gap: 10px;
+}
+
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.btn-primary {
+    background: #4CAF50;
+    color: white;
+}
+
+.btn-success {
+    background: #2196F3;
+    color: white;
+}
+
+.btn-info {
+    background: #FF9800;
+    color: white;
+}
+
+.main-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+.sidebar {
+    width: 300px;
+    background: white;
+    padding: 20px;
+    overflow-y: auto;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+}
+
+.panel {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: #fafafa;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.panel h3 {
+    margin-bottom: 15px;
+    color: #667eea;
+    font-size: 16px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 20px;
+    background: #e0e0e0;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #4CAF50, #45a049);
+    width: 0%;
+    transition: width 0.3s;
+}
+
+.device-list {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.device-item {
+    padding: 10px;
+    margin-bottom: 10px;
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-left: 3px solid #667eea;
+}
+
+.device-item:hover {
+    background: #f0f0f0;
+    transform: translateX(5px);
+}
+
+.device-item .ip {
+    font-weight: bold;
+    color: #667eea;
+}
+
+.device-item .type {
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+}
+
+.content {
+    flex: 1;
+    position: relative;
+}
+
+#cy {
+    width: 100%;
+    height: 100%;
+    background: white;
+}
+
+.detail-panel {
+    width: 350px;
+    background: white;
+    padding: 20px;
+    overflow-y: auto;
+    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+    display: none;
+}
+
+.detail-panel.active {
+    display: block;
+}
+
+.detail-panel h3 {
+    margin-bottom: 15px;
+    color: #667eea;
+}
+
+.detail-section {
+    margin-bottom: 20px;
+}
+
+.detail-section h4 {
+    margin-bottom: 10px;
+    color: #333;
+    font-size: 14px;
+}
+
+.interface-item {
+    padding: 10px;
+    margin-bottom: 10px;
+    background: #f9f9f9;
+    border-radius: 5px;
+    border-left: 3px solid #2196F3;
+}
+
+.interface-item .name {
+    font-weight: bold;
+    color: #2196F3;
+}
+
+.interface-item .info {
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+}
+
+.modal.active {
+    display: block;
+}
+
+.modal-content {
+    background: white;
+    margin: 10% auto;
+    padding: 30px;
+    border-radius: 10px;
+    width: 500px;
+    position: relative;
+}
+
+.close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #999;
+}
+
+.close:hover {
+    color: #333;
+}
+
+.status-up {
+    color: #4CAF50;
+    font-weight: bold;
+}
+
+.status-down {
+    color: #f44336;
+    font-weight: bold;
+}
+
+.status-admin-down {
+    color: #FF9800;
+    font-weight: bold;
+}

web/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>网络拓扑发现系统</title>
+    <link rel="stylesheet" href="/css/style.css">
+    <script src="https://unpkg.com/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🌐 网络拓扑发现系统</h1>
+            <div class="controls">
+                <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>
+            </div>
+        </header>
+
+        <div class="main-content">
+            <!-- 侧边栏 -->
+            <aside class="sidebar">
+                <div class="panel">
+                    <h3>扫描配置</h3>
+                    <form id="scan-form">
+                        <div class="form-group">
+                            <label for="scan-range">IP范围 (CIDR):</label>
+                            <input type="text" id="scan-range" placeholder="例: 192.168.1.0/24">
+                        </div>
+                        <div class="form-group">
+                            <label for="ssh-port">SSH端口:</label>
+                            <input type="number" id="ssh-port" value="22">
+                        </div>
+                        <div class="form-group">
+                            <label for="username">用户名:</label>
+                            <input type="text" id="username" placeholder="admin">
+                        </div>
+                        <div class="form-group">
+                            <label for="password">密码:</label>
+                            <input type="password" id="password">
+                        </div>
+                    </form>
+                </div>
+
+                <div class="panel">
+                    <h3>进度</h3>
+                    <div id="progress-info">
+                        <p>状态: <span id="scan-status">就绪</span></p>
+                        <p>进度: <span id="scan-progress">0%</span></p>
+                        <div class="progress-bar">
+                            <div id="progress-fill" class="progress-fill"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="panel">
+                    <h3>设备列表</h3>
+                    <div id="device-list" class="device-list"></div>
+                </div>
+            </aside>
+
+            <!-- 主内容区 -->
+            <main class="content">
+                <div id="cy"></div>
+            </main>
+
+            <!-- 详情面板 -->
+            <aside class="detail-panel" id="detail-panel">
+                <h3>设备详情</h3>
+                <div id="device-detail"></div>
+            </aside>
+        </div>
+    </div>
+
+    <!-- 添加设备模态框 -->
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>添加设备</h2>
+            <form id="add-device-form">
+                <div class="form-group">
+                    <label for="device-ip">IP地址:</label>
+                    <input type="text" id="device-ip" required>
+                </div>
+                <div class="form-group">
+                    <label for="device-type">设备类型:</label>
+                    <select id="device-type" required>
+                        <option value="cisco">Cisco</option>
+                        <option value="huawei">华为</option>
+                        <option value="h3c">H3C</option>
+                        <option value="asa">ASA防火墙</option>
+                        <option value="linux">Linux服务器</option>
+                        <option value="windows">Windows Server</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="device-username">用户名:</label>
+                    <input type="text" id="device-username" required>
+                </div>
+                <div class="form-group">
+                    <label for="device-password">密码:</label>
+                    <input type="password" id="device-password" required>
+                </div>
+                <button type="submit" class="btn btn-primary">添加</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="/js/app.js"></script>
+</body>
+</html>

web/js/app.js

@@ -0,0 +1,343 @@
+// 全局变量
+let cy = null;
+let currentTaskId = null;
+
+// 初始化
+document.addEventListener('DOMContentLoaded', function() {
+    initCytoscape();
+    initEventListeners();
+    loadTopology();
+});
+
+// 初始化Cytoscape
+function initCytoscape() {
+    cy = cytoscape({
+        container: document.getElementById('cy'),
+        elements: [],
+        style: [
+            {
+                selector: 'node',
+                style: {
+                    'label': 'data(label)',
+                    'background-color': function(ele) {
+                        return getNodeColor(ele.data('type'));
+                    },
+                    'width': 60,
+                    'height': 60,
+                    'border-width': 3,
+                    'border-color': '#667eea',
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'font-size': '12px',
+                    'font-weight': 'bold'
+                }
+            },
+            {
+                selector: 'edge',
+                style: {
+                    'width': 2,
+                    'line-color': '#999',
+                    'target-arrow-color': '#999',
+                    'target-arrow-shape': 'triangle',
+                    'curve-style': 'bezier',
+                    'label': 'data(protocol)'
+                }
+            },
+            {
+                selector: 'node:selected',
+                style: {
+                    'border-width': 5,
+                    'border-color': '#FF9800'
+                }
+            }
+        ],
+        layout: {
+            name: 'cose',
+            animate: true,
+            animationDuration: 1000,
+            padding: 30
+        }
+    });
+
+    // 节点点击事件
+    cy.on('tap', 'node', function(evt) {
+        const node = evt.target;
+        showDeviceDetail(node.data('id'));
+    });
+}
+
+// 获取节点颜色
+function getNodeColor(type) {
+    const colors = {
+        'cisco': '#4CAF50',
+        'huawei': '#2196F3',
+        'h3c': '#9C27B0',
+        'asa': '#FF5722',
+        'linux': '#607D8B',
+        'windows': '#00BCD4'
+    };
+    return colors[type] || '#999';
+}
+
+// 初始化事件监听
+function initEventListeners() {
+    // 扫描按钮
+    document.getElementById('btn-scan').addEventListener('click', startScan);
+    
+    // 添加设备按钮
+    document.getElementById('btn-add-device').addEventListener('click', function() {
+        document.getElementById('modal').classList.add('active');
+    });
+    
+    // 关闭模态框
+    document.querySelector('.close').addEventListener('click', function() {
+        document.getElementById('modal').classList.remove('active');
+    });
+    
+    // 添加设备表单
+    document.getElementById('add-device-form').addEventListener('submit', addDevice);
+    
+    // 导出按钮
+    document.getElementById('btn-export').addEventListener('click', exportTopology);
+}
+
+// 开始扫描
+async function startScan() {
+    const scanRange = document.getElementById('scan-range').value;
+    const sshPort = document.getElementById('ssh-port').value;
+    const username = document.getElementById('username').value;
+    const password = document.getElementById('password').value;
+
+    if (!scanRange) {
+        alert('请输入IP范围');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/scan', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                scan_range: scanRange,
+                ssh_port: parseInt(sshPort),
+                username: username,
+                password: password
+            })
+        });
+
+        const data = await response.json();
+        currentTaskId = data.task_id;
+        
+        // 轮询进度
+        pollProgress();
+    } catch (error) {
+        console.error('扫描失败:', error);
+        alert('扫描失败: ' + error.message);
+    }
+}
+
+// 轮询进度
+async function pollProgress() {
+    if (!currentTaskId) return;
+
+    const poll = async () => {
+        try {
+            const response = await fetch(`/api/scan/${currentTaskId}`);
+            const task = await response.json();
+
+            // 更新进度
+            document.getElementById('scan-status').textContent = task.status;
+            document.getElementById('scan-progress').textContent = task.progress + '%';
+            document.getElementById('progress-fill').style.width = task.progress + '%';
+
+            // 更新设备列表
+            updateDeviceList(task.devices);
+
+            // 如果完成,更新拓扑
+            if (task.status === 'completed' || task.status === 'failed') {
+                loadTopology();
+                currentTaskId = null;
+                return;
+            }
+
+            // 继续轮询
+            setTimeout(poll, 1000);
+        } catch (error) {
+            console.error('获取进度失败:', error);
+        }
+    };
+
+    poll();
+}
+
+// 更新设备列表
+function updateDeviceList(devices) {
+    const listContainer = document.getElementById('device-list');
+    listContainer.innerHTML = '';
+
+    devices.forEach(device => {
+        const item = document.createElement('div');
+        item.className = 'device-item';
+        item.innerHTML = `
+            <div class="ip">${device.ip}</div>
+            <div class="type">${device.type} - ${device.hostname || 'Unknown'}</div>
+            <div class="status status-${device.scan_status.replace(' ', '-')}">${device.scan_status}</div>
+        `;
+        item.addEventListener('click', () => showDeviceDetail(device.id));
+        listContainer.appendChild(item);
+    });
+}
+
+// 加载拓扑
+async function loadTopology() {
+    try {
+        const response = await fetch('/api/topology');
+        const graph = await response.json();
+
+        // 清空现有元素
+        cy.elements().remove();
+
+        // 添加节点
+        graph.nodes.forEach(node => {
+            cy.add({
+                group: 'nodes',
+                data: {
+                    id: node.id,
+                    label: node.hostname || node.ip,
+                    type: node.type,
+                    ip: node.ip
+                }
+            });
+        });
+
+        // 添加边
+        graph.edges.forEach(edge => {
+            cy.add({
+                group: 'edges',
+                data: {
+                    id: edge.id,
+                    source: edge.source,
+                    target: edge.target,
+                    protocol: edge.protocol
+                }
+            });
+        });
+
+        // 重新布局
+        cy.layout({
+            name: 'cose',
+            animate: true,
+            animationDuration: 1000,
+            padding: 30
+        }).run();
+
+        cy.fit(40);
+    } catch (error) {
+        console.error('加载拓扑失败:', error);
+    }
+}
+
+// 显示设备详情
+async function showDeviceDetail(deviceId) {
+    try {
+        const response = await fetch(`/api/device/${deviceId}`);
+        const device = await response.json();
+
+        const detailPanel = document.getElementById('detail-panel');
+        const detailContainer = document.getElementById('device-detail');
+
+        detailContainer.innerHTML = `
+            <div class="detail-section">
+                <h4>基本信息</h4>
+                <p><strong>IP:</strong> ${device.ip}</p>
+                <p><strong>主机名:</strong> ${device.hostname || 'N/A'}</p>
+                <p><strong>类型:</strong> ${device.type}</p>
+                <p><strong>系统:</strong> ${device.os_version || 'N/A'}</p>
+                <p><strong>运行时间:</strong> ${device.uptime || 'N/A'}</p>
+            </div>
+            <div class="detail-section">
+                <h4>接口信息 (${device.interfaces.length})</h4>
+                ${device.interfaces.map(iface => `
+                    <div class="interface-item">
+                        <div class="name">${iface.name}</div>
+                        <div class="info">
+                            <p>状态: <span class="status-${iface.status.replace(' ', '-')}">${iface.status}</span></p>
+                            <p>IP: ${iface.ip || 'N/A'}</p>
+                            <p>MAC: ${iface.mac || 'N/A'}</p>
+                            <p>速度: ${iface.speed || 'N/A'}</p>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+            <div class="detail-section">
+                <h4>邻居设备 (${device.neighbors.length})</h4>
+                ${device.neighbors.map(neighbor => `
+                    <div class="interface-item">
+                        <div class="name">${neighbor.remote_device}</div>
+                        <div class="info">
+                            <p>本地接口: ${neighbor.local_interface}</p>
+                            <p>远程接口: ${neighbor.remote_interface}</p>
+                            <p>协议: ${neighbor.protocol}</p>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+
+        detailPanel.classList.add('active');
+    } catch (error) {
+        console.error('获取设备详情失败:', error);
+    }
+}
+
+// 添加设备
+async function addDevice(event) {
+    event.preventDefault();
+
+    const ip = document.getElementById('device-ip').value;
+    const type = document.getElementById('device-type').value;
+    const username = document.getElementById('device-username').value;
+    const password = document.getElementById('device-password').value;
+
+    try {
+        const response = await fetch('/api/device', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                ip: ip,
+                type: type,
+                username: username,
+                password: password
+            })
+        });
+
+        if (response.ok) {
+            document.getElementById('modal').classList.remove('active');
+            document.getElementById('add-device-form').reset();
+            loadTopology();
+            alert('设备添加成功');
+        } else {
+            const error = await response.json();
+            alert('添加失败: ' + error.message);
+        }
+    } catch (error) {
+        console.error('添加设备失败:', error);
+        alert('添加失败: ' + error.message);
+    }
+}
+
+// 导出拓扑
+function exportTopology() {
+    const json = cy.json();
+    const dataStr = JSON.stringify(json, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(dataBlob);
+    link.download = 'topology.json';
+    link.click();
+}