feat: 修复网络拓扑匹配逻辑，使用双向LLDP对称匹配策略

web/css/style.css

@@ -100,6 +100,8 @@ header h1 {
 
 .sidebar {
     width: 300px;
+    min-width: 200px;
+    max-width: 600px;
     background: white;
     padding: 20px;
     overflow-y: auto;
@@ -190,6 +192,7 @@ header h1 {
 .content {
     flex: 1;
     position: relative;
+    min-width: 400px;
 }
 
 #cy {
@@ -200,17 +203,47 @@ header h1 {
 
 .detail-panel {
     width: 600px;
+    min-width: 300px;
+    max-width: 1000px;
     background: white;
     padding: 20px;
     overflow-y: auto;
     box-shadow: -2px 0 5px rgba(0,0,0,0.1);
     display: none;
+    position: relative;
 }
 
 .detail-panel.active {
     display: block;
 }
 
+/* 拖拽手柄样式 */
+.resizer {
+    width: 5px;
+    cursor: col-resize;
+    background: #e0e0e0;
+    position: relative;
+    z-index: 10;
+    transition: background 0.2s;
+}
+
+.resizer:hover,
+.resizer.resizing {
+    background: #667eea;
+}
+
+.resizer::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3px;
+    height: 30px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+}
+
 .detail-panel h3 {
     margin-bottom: 15px;
     color: #667eea;

web/index.html

@@ -29,7 +29,7 @@
 
         <div class="main-content">
             <!-- 侧边栏 -->
-            <aside class="sidebar">
+            <aside class="sidebar" id="sidebar">
                 <div class="panel">
                     <h3>扫描配置</h3>
                     <form id="scan-form">
@@ -69,11 +69,17 @@
                 </div>
             </aside>
 
+            <!-- 左侧拖拽手柄 -->
+            <div class="resizer" id="resizer-left"></div>
+
             <!-- 主内容区 -->
             <main class="content">
                 <div id="cy"></div>
             </main>
 
+            <!-- 右侧拖拽手柄 -->
+            <div class="resizer" id="resizer-right"></div>
+
             <!-- 详情面板 -->
             <aside class="detail-panel" id="detail-panel">
                 <h3>设备详情</h3>

web/js/app.js

@@ -908,3 +908,81 @@ async function saveEditDevice(event) {
         alert('修改失败: ' + error.message);
     }
 }
+
+// 面板拖拽调整大小功能
+(function() {
+    // 左侧面板拖拽
+    var resizerLeft = document.getElementById('resizer-left');
+    var sidebar = document.getElementById('sidebar');
+    
+    if (resizerLeft && sidebar) {
+        var isResizingLeft = false;
+        
+        resizerLeft.addEventListener('mousedown', function(e) {
+            isResizingLeft = true;
+            resizerLeft.classList.add('resizing');
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            e.preventDefault();
+        });
+        
+        document.addEventListener('mousemove', function(e) {
+            if (!isResizingLeft) return;
+            
+            var newWidth = e.clientX;
+            var minWidth = 200;
+            var maxWidth = 600;
+            
+            if (newWidth >= minWidth && newWidth <= maxWidth) {
+                sidebar.style.width = newWidth + 'px';
+            }
+        });
+        
+        document.addEventListener('mouseup', function() {
+            if (isResizingLeft) {
+                isResizingLeft = false;
+                resizerLeft.classList.remove('resizing');
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+        });
+    }
+    
+    // 右侧面板拖拽
+    var resizerRight = document.getElementById('resizer-right');
+    var detailPanel = document.getElementById('detail-panel');
+    
+    if (resizerRight && detailPanel) {
+        var isResizingRight = false;
+        
+        resizerRight.addEventListener('mousedown', function(e) {
+            isResizingRight = true;
+            resizerRight.classList.add('resizing');
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            e.preventDefault();
+        });
+        
+        document.addEventListener('mousemove', function(e) {
+            if (!isResizingRight) return;
+            
+            var containerWidth = document.querySelector('.main-content').offsetWidth;
+            var newWidth = containerWidth - e.clientX;
+            var minWidth = 300;
+            var maxWidth = 1000;
+            
+            if (newWidth >= minWidth && newWidth <= maxWidth) {
+                detailPanel.style.width = newWidth + 'px';
+            }
+        });
+        
+        document.addEventListener('mouseup', function() {
+            if (isResizingRight) {
+                isResizingRight = false;
+                resizerRight.classList.remove('resizing');
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+        });
+    }
+})();