From 13588940d301474cb2527b1e0b89e239cb4daf19 Mon Sep 17 00:00:00 2001
From: zhang1106 <849185023@qq.com>
Date: Fri, 30 Jan 2026 19:59:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=A4=E6=8D=A2=E6=9C=BA=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=99=AE=E9=80=9A=E7=AB=AF=E5=8F=A3=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=EF=BC=8C=E6=9C=8D=E5=8A=A1=E5=99=A8=E4=BD=BF=E7=94=A8=E8=83=8C?=
 =?UTF-8?q?=E6=9D=BF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 交换机(device.type === 'switch')使用PortPanel展示端口列表
- 服务器使用ServerBackplanePanel展示背板布局
- 区分不同设备类型的展示方式
---
 frontend/src/components/VirtualDeviceList.jsx | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/VirtualDeviceList.jsx b/frontend/src/components/VirtualDeviceList.jsx
index 054e9a3..92dc7b2 100644
--- a/frontend/src/components/VirtualDeviceList.jsx
+++ b/frontend/src/components/VirtualDeviceList.jsx
@@ -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>