فهرست منبع

Feat: 优化拓扑节点显示为'主机名+IP地址'格式

- 前端显示两行: 第一行主机名,第二行IP地址
- 增加节点尺寸以适应更多文本
- 启用文本自动换行
- 后端确保主机名不为空
Your Name 1 ماه پیش
والد
کامیت
4dc0b3100f
2فایلهای تغییر یافته به همراه22 افزوده شده و 7 حذف شده
  1. 7 1
      internal/topology/builder.go
  2. 15 6
      web/js/app.js

+ 7 - 1
internal/topology/builder.go

@@ -35,10 +35,16 @@ func (b *Builder) Build() models.TopologyGraph {
 	// 构建节点
 	// 构建节点
 	nodeMap := make(map[string]models.TopologyNode)
 	nodeMap := make(map[string]models.TopologyNode)
 	for _, device := range b.devices {
 	for _, device := range b.devices {
+		// 优先使用主机名,如果没有则使用IP作为显示名
+		hostname := device.Hostname
+		if hostname == "" {
+			hostname = device.IP
+		}
+		
 		node := models.TopologyNode{
 		node := models.TopologyNode{
 			ID:       device.IP,
 			ID:       device.IP,
 			IP:       device.IP,
 			IP:       device.IP,
-			Hostname: device.Hostname,
+			Hostname: hostname,
 			Type:     string(device.Type),
 			Type:     string(device.Type),
 			Icon:     getDeviceIcon(device.Type),
 			Icon:     getDeviceIcon(device.Type),
 		}
 		}

+ 15 - 6
web/js/app.js

@@ -22,14 +22,16 @@ function initCytoscape() {
                     'background-color': function(ele) {
                     'background-color': function(ele) {
                         return getNodeColor(ele.data('type'));
                         return getNodeColor(ele.data('type'));
                     },
                     },
-                    'width': 60,
-                    'height': 60,
+                    'width': 70,
+                    'height': 70,
                     'border-width': 3,
                     'border-width': 3,
                     'border-color': '#667eea',
                     'border-color': '#667eea',
                     'text-valign': 'bottom',
                     'text-valign': 'bottom',
                     'text-halign': 'center',
                     '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 => {
         graph.nodes.forEach(node => {
+            // 显示格式: 主机名 + IP地址
+            let label = node.ip; // 默认显示IP
+            if (node.hostname && node.hostname !== '') {
+                label = `${node.hostname}\n${node.ip}`;
+            }
+            
             cy.add({
             cy.add({
                 group: 'nodes',
                 group: 'nodes',
                 data: {
                 data: {
                     id: node.id,
                     id: node.id,
-                    label: node.hostname || node.ip,
+                    label: label,
                     type: node.type,
                     type: node.type,
-                    ip: node.ip
+                    ip: node.ip,
+                    hostname: node.hostname
                 }
                 }
             });
             });
         });
         });