Feat: 添加SQLite数据库持久化和设备列表显示

- 使用SQLite存储设备数据,重启后数据不丢失
- 添加 /api/devices 接口获取所有设备
- 前端显示完整的设备列表(含接口数、邻居数)
- 设备添加/扫描后自动刷新列表
- 启动时从数据库加载设备到拓扑构建器

web/js/app.js

@@ -7,6 +7,7 @@ document.addEventListener('DOMContentLoaded', function() {
     initCytoscape();
     initEventListeners();
     loadTopology();
+    loadDeviceList(); // 加载设备列表
 });
 
 // 初始化Cytoscape
@@ -160,6 +161,7 @@ async function pollProgress() {
             // 如果完成,更新拓扑
             if (task.status === 'completed' || task.status === 'failed') {
                 loadTopology();
+                loadDeviceList(); // 刷新设备列表
                 currentTaskId = null;
                 return;
             }
@@ -248,6 +250,43 @@ async function loadTopology() {
     }
 }
 
+// 加载设备列表
+async function loadDeviceList() {
+    try {
+        const response = await fetch('/api/devices');
+        const devices = await response.json();
+
+        const listContainer = document.getElementById('device-list');
+        listContainer.innerHTML = '';
+
+        if (devices.length === 0) {
+            listContainer.innerHTML = '<p style="color: #999; text-align: center;">暂无设备</p>';
+            return;
+        }
+
+        devices.forEach(device => {
+            const item = document.createElement('div');
+            item.className = 'device-item';
+            
+            const interfaceCount = device.interfaces ? device.interfaces.length : 0;
+            const neighborCount = device.neighbors ? device.neighbors.length : 0;
+            
+            item.innerHTML = `
+                <div class="ip">${device.ip}</div>
+                <div class="type">${device.type} - ${device.hostname || 'Unknown'}</div>
+                <div class="info" style="font-size: 11px; color: #999; margin-top: 5px;">
+                    接口: ${interfaceCount} | 邻居: ${neighborCount}
+                </div>
+                <div class="status status-${(device.scan_status || 'pending').replace(' ', '-')}">${device.scan_status || 'pending'}</div>
+            `;
+            item.addEventListener('click', () => showDeviceDetail(device.id || device.ip));
+            listContainer.appendChild(item);
+        });
+    } catch (error) {
+        console.error('加载设备列表失败:', error);
+    }
+}
+
 // 显示设备详情
 async function showDeviceDetail(deviceId) {
     try {
@@ -328,6 +367,7 @@ async function addDevice(event) {
             document.getElementById('modal').classList.remove('active');
             document.getElementById('add-device-form').reset();
             loadTopology();
+            loadDeviceList(); // 刷新设备列表
             alert('设备添加成功');
         } else {
             const error = await response.json();