fix: 交换机使用普通端口面板,服务器使用背板布局

- 交换机(device.type === 'switch')使用PortPanel展示端口列表
- 服务器使用ServerBackplanePanel展示背板布局
- 区分不同设备类型的展示方式
This commit is contained in:
zhang1106
2026-01-30 19:59:12 +08:00
parent bc2f17890d
commit 13588940d3
+23 -8
View File
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Button, Empty, Spin, Badge, Typography, Space, Checkbox, Tooltip } from 'antd';
import { DownOutlined, UpOutlined, EyeOutlined, EyeInvisibleOutlined, PlusOutlined, CloudServerOutlined } from '@ant-design/icons';
import ServerBackplanePanel from './ServerBackplanePanel';
import PortPanel from './PortPanel';
const { Text } = Typography;
@@ -298,14 +299,28 @@ const VirtualDeviceList = ({
{/* 面板内容 - 可折叠 */}
{isExpanded && (
<div style={{ padding: '16px' }}>
<ServerBackplanePanel
deviceId={deviceId}
deviceName={device.name}
cables={cables}
allDevices={allDevices}
onPortClick={onPortClick}
onManageNetworkCards={() => onManageNetworkCards && onManageNetworkCards(device)}
/>
{device.type === 'switch' ? (
// 交换机使用普通端口面板
<PortPanel
ports={data.ports || []}
deviceName={device.name}
deviceId={deviceId}
cables={cables}
devices={allDevices}
onPortClick={onPortClick}
compact={true}
/>
) : (
// 服务器使用背板布局
<ServerBackplanePanel
deviceId={deviceId}
deviceName={device.name}
cables={cables}
allDevices={allDevices}
onPortClick={onPortClick}
onManageNetworkCards={() => onManageNetworkCards && onManageNetworkCards(device)}
/>
)}
</div>
)}
</div>