Feat: 优化拓扑节点显示为'主机名+IP地址'格式
- 前端显示两行: 第一行主机名,第二行IP地址 - 增加节点尺寸以适应更多文本 - 启用文本自动换行 - 后端确保主机名不为空
This commit is contained in:
@@ -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
@@ -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,
|
'width': 70,
|
||||||
'height': 60,
|
'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-size': '11px',
|
||||||
'font-weight': 'bold'
|
'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
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user