From 4dc0b3100fe6faaa7b1a051174931e40937035b8 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 25 Apr 2026 23:13:36 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=E4=BC=98=E5=8C=96=E6=8B=93=E6=89=91?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=98=BE=E7=A4=BA=E4=B8=BA'=E4=B8=BB?=
 =?UTF-8?q?=E6=9C=BA=E5=90=8D+IP=E5=9C=B0=E5=9D=80'=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 前端显示两行: 第一行主机名,第二行IP地址
- 增加节点尺寸以适应更多文本
- 启用文本自动换行
- 后端确保主机名不为空
---
 internal/topology/builder.go |  8 +++++++-
 web/js/app.js                | 21 +++++++++++++++------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/internal/topology/builder.go b/internal/topology/builder.go
index 2203351..7b0114b 100644
--- a/internal/topology/builder.go
+++ b/internal/topology/builder.go
@@ -35,10 +35,16 @@ func (b *Builder) Build() models.TopologyGraph {
 	// 构建节点
 	nodeMap := make(map[string]models.TopologyNode)
 	for _, device := range b.devices {
+		// 优先使用主机名,如果没有则使用IP作为显示名
+		hostname := device.Hostname
+		if hostname == "" {
+			hostname = device.IP
+		}
+		
 		node := models.TopologyNode{
 			ID:       device.IP,
 			IP:       device.IP,
-			Hostname: device.Hostname,
+			Hostname: hostname,
 			Type:     string(device.Type),
 			Icon:     getDeviceIcon(device.Type),
 		}
diff --git a/web/js/app.js b/web/js/app.js
index eb68c1e..2afd31f 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -22,14 +22,16 @@ function initCytoscape() {
                     'background-color': function(ele) {
                         return getNodeColor(ele.data('type'));
                     },
-                    'width': 60,
-                    'height': 60,
+                    'width': 70,
+                    'height': 70,
                     'border-width': 3,
                     'border-color': '#667eea',
                     'text-valign': 'bottom',
                     'text-halign': 'center',
-                    'font-size': '12px',
-                    'font-weight': 'bold'
+                    'font-size': '11px',
+                    'font-weight': 'bold',
+                    'text-wrap': 'wrap',
+                    'text-max-width': '80px'
                 }
             },
             {
@@ -201,13 +203,20 @@ async function loadTopology() {
 
         // 添加节点
         graph.nodes.forEach(node => {
+            // 显示格式: 主机名 + IP地址
+            let label = node.ip; // 默认显示IP
+            if (node.hostname && node.hostname !== '') {
+                label = `${node.hostname}\n${node.ip}`;
+            }
+            
             cy.add({
                 group: 'nodes',
                 data: {
                     id: node.id,
-                    label: node.hostname || node.ip,
+                    label: label,
                     type: node.type,
-                    ip: node.ip
+                    ip: node.ip,
+                    hostname: node.hostname
                 }
             });
         });