feat: 新增网卡、端口和接线管理功能

- 添加网卡(NetworkCard)模型及相关路由 - 实现端口(DevicePort)管理功能 - 新增接线(Cable)管理功能 - 添加前端网卡和端口管理界面 - 更新机柜可视化页面显示接线 - 添加设备详情抽屉展示端口和接线信息 - 更新部署文档包含数据库迁移指南 - 添加批量创建端口功能 - 设备删除时自动清理相关接线
2026-01-23 08:55:16 +08:00
parent e965be50c8
commit 8099edc5e5
21 changed files with 5080 additions and 15 deletions
@@ -1,6 +1,6 @@
 import React, { useState, Suspense, lazy } from 'react';
 import { Layout, Menu, theme, Button, Dropdown, Avatar, message, Space, Divider, ConfigProvider as AntdConfigProvider } from 'antd';
-import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, HistoryOutlined, AuditOutlined, ToolOutlined, ScheduleOutlined, SettingOutlined } from '@ant-design/icons';
+import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, HistoryOutlined, AuditOutlined, ToolOutlined, ScheduleOutlined, SettingOutlined, ApiOutlined, PartitionOutlined } from '@ant-design/icons';
 import { BrowserRouter as Router, Routes, Route, Link, Navigate, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from './context/AuthContext';
 import { ConfigProvider, useConfig } from './context/ConfigContext';
@@ -23,6 +23,8 @@ const TicketCategoryManagement = lazy(() => import('./pages/TicketCategoryManage
 const TicketStatistics = lazy(() => import('./pages/TicketStatistics'));
 const TicketFieldManagement = lazy(() => import('./pages/TicketFieldManagement'));
 const SystemSettings = lazy(() => import('./pages/SystemSettings'));
+const CableManagement = lazy(() => import('./pages/CableManagement'));
+const PortManagement = lazy(() => import('./pages/PortManagement'));

 const { Header, Content, Sider } = Layout;

@@ -144,7 +146,7 @@ const AppLayout = ({ children }) => {
    const path = location.pathname;
    if (path === '/') return 'dashboard';
    if (path.startsWith('/rooms') || path.startsWith('/racks') || path.startsWith('/visualization')) return 'room-management';
-    if (path.startsWith('/devices') || path.startsWith('/fields')) return 'asset-management';
+    if (path.startsWith('/devices') || path.startsWith('/fields') || path.startsWith('/cables') || path.startsWith('/ports')) return 'asset-management';
    if (path.startsWith('/consumables')) return 'consumables-management';
    if (path.startsWith('/users') || path.startsWith('/login-history') || path.startsWith('/operation-logs') || path.startsWith('/settings')) return 'system-management';
    if (path.startsWith('/tickets')) return 'ticket-management';
@@ -244,6 +246,16 @@ const AppLayout = ({ children }) => {
          icon: <DatabaseOutlined style={{ fontSize: '16px' }} />,
          label: <Link to="/fields">字段管理</Link>,
        },
+        {
+          key: 'cables',
+          icon: <ApiOutlined style={{ fontSize: '16px' }} />,
+          label: <Link to="/cables">接线管理</Link>,
+        },
+        {
+          key: 'ports',
+          icon: <PartitionOutlined style={{ fontSize: '16px' }} />,
+          label: <Link to="/ports">端口管理</Link>,
+        },
      ],
    },
    {
@@ -578,6 +590,8 @@ const ThemeConfig = () => {
            <Route path="/ticket-statistics" element={<PrivateRoute><TicketStatistics /></PrivateRoute>} />
            <Route path="/ticket-fields" element={<PrivateRoute><TicketFieldManagement /></PrivateRoute>} />
            <Route path="/settings" element={<PrivateRoute><SystemSettings /></PrivateRoute>} />
+            <Route path="/cables" element={<PrivateRoute><CableManagement /></PrivateRoute>} />
+            <Route path="/ports" element={<PrivateRoute><PortManagement /></PrivateRoute>} />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </Suspense>
@@ -0,0 +1,210 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { Drawer, Tabs, Tag, Space, Typography, Empty, Card, Tooltip } from 'antd';
+import { ApiOutlined, CloudServerOutlined, EnvironmentOutlined } from '@ant-design/icons';
+import NetworkCardPanel from './NetworkCardPanel';
+
+const { Text, Title } = Typography;
+
+const designTokens = {
+  colors: {
+    primary: '#667eea',
+    success: '#10b981',
+    error: '#ef4444',
+    warning: '#f59e0b'
+  },
+  spacing: {
+    sm: 8,
+    md: 16
+  }
+};
+
+function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables }) {
+  const [activeTab, setActiveTab] = useState('ports');
+
+  const deviceCables = useMemo(() => {
+    if (!device || !cables) return [];
+    return cables.filter(c =>
+      c.sourceDeviceId === device.deviceId || c.targetDeviceId === device.deviceId
+    );
+  }, [device, cables]);
+
+  const getStatusTag = useCallback((status) => {
+    const config = {
+      running: { color: 'success', text: '运行中' },
+      normal: { color: 'success', text: '正常' },
+      warning: { color: 'warning', text: '警告' },
+      error: { color: 'error', text: '故障' },
+      fault: { color: 'error', text: '故障' },
+      offline: { color: 'default', text: '离线' },
+      maintenance: { color: 'processing', text: '维护中' }
+    };
+    const { color, text } = config[status] || { color: 'default', text: status };
+    return <Tag color={color}>{text}</Tag>;
+  }, []);
+
+  const getDeviceTypeName = useCallback((type) => {
+    const typeMap = {
+      server: '服务器',
+      switch: '交换机',
+      router: '路由器',
+      storage: '存储设备',
+      firewall: '防火墙',
+      ups: 'UPS',
+      pdu: 'PDU'
+    };
+    return typeMap[type?.toLowerCase()] || type || '未知设备';
+  }, []);
+
+  const tabItems = [
+    {
+      key: 'ports',
+      label: (
+        <span>
+          <ApiOutlined />
+          端口与网卡
+        </span>
+      ),
+      children: (
+        <NetworkCardPanel
+          deviceId={device?.deviceId}
+          deviceName={device?.name}
+          onRefresh={onRefreshCables}
+        />
+      )
+    },
+    {
+      key: 'cables',
+      label: (
+        <span>
+          <EnvironmentOutlined />
+          接线 ({deviceCables.length})
+        </span>
+      ),
+      children: (
+        <div className="cable-panel">
+          {deviceCables.length === 0 ? (
+            <Empty description="该设备暂无接线" />
+          ) : (
+            <Space direction="vertical" size={designTokens.spacing.md} style={{ width: '100%' }}>
+              {deviceCables.map(cable => (
+                <Card
+                  key={cable.cableId}
+                  size="small"
+                  style={{ borderRadius: '8px' }}
+                >
+                  <div style={{ marginBottom: designTokens.spacing.sm }}>
+                    <Space direction="vertical" size={4}>
+                      <div>
+                        <Text type="secondary" style={{ fontSize: '12px' }}>源设备：</Text>
+                        <div style={{ fontWeight: 500 }}>
+                          {cable.sourceDevice?.name || '-'}
+                          <Tag color="blue" style={{ marginLeft: '8px' }}>{cable.sourcePort}</Tag>
+                        </div>
+                      </div>
+                      <div>
+                        <Text type="secondary" style={{ fontSize: '12px' }}>目标设备：</Text>
+                        <div style={{ fontWeight: 500 }}>
+                          {cable.targetDevice?.name || '-'}
+                          <Tag color="green" style={{ marginLeft: '8px' }}>{cable.targetPort}</Tag>
+                        </div>
+                      </div>
+                    </Space>
+                  </div>
+
+                  <Space wrap>
+                    <Tag color={cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default'}>
+                      {cable.status === 'normal' ? '正常' : cable.status === 'fault' ? '故障' : '未连接'}
+                    </Tag>
+                    <Tag color="purple">
+                      {cable.cableType === 'ethernet' ? '网线' : cable.cableType === 'fiber' ? '光纤' : '铜缆'}
+                    </Tag>
+                    {cable.cableLength && (
+                      <Tag color="orange">
+                        {cable.cableLength}m
+                      </Tag>
+                    )}
+                  </Space>
+
+                  {cable.description && (
+                    <div style={{ marginTop: designTokens.spacing.sm, fontSize: '12px', color: '#666' }}>
+                      {cable.description}
+                    </div>
+                  )}
+                </Card>
+              ))}
+            </Space>
+          )}
+        </div>
+      )
+    }
+  ];
+
+  if (!device) return null;
+
+  return (
+    <Drawer
+      title={
+        <Space>
+          <CloudServerOutlined style={{ color: designTokens.colors.primary }} />
+          <span>设备详情 - {device.name}</span>
+        </Space>
+      }
+      placement="right"
+      width={520}
+      open={visible}
+      onClose={onClose}
+      styles={{ body: { padding: '16px 20px', overflow: 'auto' } }}
+    >
+      <div className="device-info-section" style={{ marginBottom: '20px' }}>
+        <Title level={5} style={{ margin: '0 0 12px 0', color: '#1e293b' }}>基本信息</Title>
+        <div className="info-grid" style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 1fr)',
+          gap: '12px',
+          background: '#f8fafc',
+          padding: '16px',
+          borderRadius: '10px'
+        }}>
+          <div className="info-item">
+            <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>设备ID</Text>
+            <Text strong style={{ fontSize: '14px' }}>{device.deviceId}</Text>
+          </div>
+          <div className="info-item">
+            <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>设备类型</Text>
+            <Text strong style={{ fontSize: '14px' }}>{getDeviceTypeName(device.type)}</Text>
+          </div>
+          <div className="info-item">
+            <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>设备状态</Text>
+            {getStatusTag(device.status)}
+          </div>
+          <div className="info-item">
+            <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>位置</Text>
+            <Text strong style={{ fontSize: '14px' }}>
+              U{device.position} {device.height && `(${device.height}U)`}
+            </Text>
+          </div>
+          {device.ipAddress && (
+            <div className="info-item">
+              <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>IP地址</Text>
+              <Text strong style={{ fontSize: '14px' }}>{device.ipAddress}</Text>
+            </div>
+          )}
+          {device.brand && (
+            <div className="info-item">
+              <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>品牌</Text>
+              <Text strong style={{ fontSize: '14px' }}>{device.brand}</Text>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Tabs
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        items={tabItems}
+      />
+    </Drawer>
+  );
+}
+
+export default React.memo(DeviceDetailDrawer);
@@ -0,0 +1,159 @@
+import React, { useState, useCallback } from 'react';
+import { Modal, Form, Input, InputNumber, Select, message, Space, Tooltip } from 'antd';
+import { PlusOutlined, InfoCircleOutlined, CloudServerOutlined } from '@ant-design/icons';
+import axios from 'axios';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea'
+    }
+  },
+  borderRadius: {
+    medium: '10px'
+  }
+};
+
+function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+
+      await axios.post('/api/network-cards', {
+        deviceId: device.deviceId,
+        name: values.name,
+        slotNumber: values.slotNumber,
+        description: values.description,
+        model: values.model,
+        manufacturer: values.manufacturer,
+        status: values.status
+      });
+
+      message.success('网卡创建成功');
+      form.resetFields();
+      onSuccess?.();
+      onClose();
+    } catch (error) {
+      if (error.errorFields) {
+        return;
+      }
+      message.error(error.response?.data?.error || '网卡创建失败');
+      console.error('创建网卡失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [device, form, onClose, onSuccess]);
+
+  const handleCancel = useCallback(() => {
+    form.resetFields();
+    onClose();
+  }, [form, onClose]);
+
+  return (
+    <Modal
+      title={
+        <Space>
+          <CloudServerOutlined style={{ color: designTokens.colors.primary.main }} />
+          <span>新增网卡 - {device?.name || '设备'}</span>
+        </Space>
+      }
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={handleCancel}
+      confirmLoading={loading}
+      okText="创建"
+      cancelText="取消"
+      width={480}
+      styles={{ body: { padding: '20px 24px' } }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{
+          status: 'normal'
+        }}
+      >
+        <Form.Item
+          name="name"
+          label={
+            <Space>
+              网卡名称
+              <Tooltip title="如: 网卡1、eth0、Primary NIC、LAN1">
+                <InfoCircleOutlined style={{ color: '#999' }} />
+              </Tooltip>
+            </Space>
+          }
+          rules={[
+            { required: true, message: '请输入网卡名称' },
+            { max: 50, message: '名称不能超过50个字符' }
+          ]}
+        >
+          <Input placeholder="例如: 网卡1、eth0、LAN1" />
+        </Form.Item>
+
+        <Space style={{ display: 'flex', width: '100%' }}>
+          <Form.Item
+            name="slotNumber"
+            label="插槽编号"
+            style={{ flex: 1 }}
+          >
+            <InputNumber
+              placeholder="可选"
+              min={1}
+              max={100}
+              style={{ width: '100%' }}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="status"
+            label="状态"
+            rules={[{ required: true, message: '请选择状态' }]}
+            style={{ flex: 1 }}
+          >
+            <Select placeholder="请选择">
+              <Option value="normal">正常</Option>
+              <Option value="warning">警告</Option>
+              <Option value="fault">故障</Option>
+              <Option value="offline">离线</Option>
+            </Select>
+          </Form.Item>
+        </Space>
+
+        <Space style={{ display: 'flex', width: '100%' }}>
+          <Form.Item
+            name="manufacturer"
+            label="制造商"
+            style={{ flex: 1 }}
+          >
+            <Input placeholder="如: Intel、Realtek、Broadcom" />
+          </Form.Item>
+
+          <Form.Item
+            name="model"
+            label="型号"
+            style={{ flex: 1 }}
+          >
+            <Input placeholder="如: X520-DA2" />
+          </Form.Item>
+        </Space>
+
+        <Form.Item
+          name="description"
+          label="描述"
+        >
+          <TextArea rows={2} placeholder="请输入描述信息（可选）" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default React.memo(NetworkCardCreateModal);
@@ -0,0 +1,397 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Table, Button, Space, Tag, Tooltip, Popconfirm, Empty, Spin, Badge, Collapse, Card } from 'antd';
+import { PlusOutlined, DeleteOutlined, ReloadOutlined, ApiOutlined, CloudServerOutlined, FolderOutlined } from '@ant-design/icons';
+import axios from 'axios';
+import PortCreateModal from './PortCreateModal';
+import NetworkCardCreateModal from './NetworkCardCreateModal';
+
+const { Panel } = Collapse;
+
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea'
+    },
+    success: '#10b981',
+    error: '#ef4444',
+    warning: '#f59e0b'
+  }
+};
+
+function NetworkCardPanel({ deviceId, deviceName, onRefresh }) {
+  const [cards, setCards] = useState([]);
+  const [networkCards, setNetworkCards] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [createPortModalVisible, setCreatePortModalVisible] = useState(false);
+  const [createCardModalVisible, setCreateCardModalVisible] = useState(false);
+  const [selectedCard, setSelectedCard] = useState(null);
+  const [expandedCards, setExpandedCards] = useState([]);
+
+  const fetchData = useCallback(async () => {
+    if (!deviceId) return;
+
+    try {
+      setLoading(true);
+      const [cardsResponse, networkCardsResponse] = await Promise.all([
+        axios.get(`/api/network-cards/device/${deviceId}/with-ports`),
+        axios.get(`/api/network-cards/device/${deviceId}`)
+      ]);
+
+      const cardsData = cardsResponse.data || [];
+      setCards(cardsData);
+      setNetworkCards(networkCardsResponse.data || []);
+
+      const initialExpanded = cardsData
+        .filter(card => card.ports && card.ports.length > 0)
+        .map(card => card.nicId);
+      setExpandedCards(initialExpanded);
+    } catch (error) {
+      console.error('获取网卡数据失败:', error);
+      setCards([]);
+      setNetworkCards([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [deviceId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleDeleteCard = useCallback(async (card) => {
+    try {
+      await axios.delete(`/api/network-cards/${card.nicId}`);
+      import('antd').then(({ message }) => message.success('网卡删除成功'));
+      fetchData();
+      onRefresh?.();
+    } catch (error) {
+      import('antd').then(({ message }) => message.error(error.response?.data?.error || '网卡删除失败'));
+    }
+  }, [fetchData, onRefresh]);
+
+  const handleDeletePort = useCallback(async (port) => {
+    try {
+      await axios.delete(`/api/device-ports/${port.portId}`);
+      import('antd').then(({ message }) => message.success('端口删除成功'));
+      fetchData();
+      onRefresh?.();
+    } catch (error) {
+      import('antd').then(({ message }) => message.error('端口删除失败'));
+    }
+  }, [fetchData, onRefresh]);
+
+  const handleCreateCardSuccess = useCallback(() => {
+    fetchData();
+    onRefresh?.();
+  }, [fetchData, onRefresh]);
+
+  const handleCreatePortSuccess = useCallback(() => {
+    fetchData();
+    onRefresh?.();
+  }, [fetchData, onRefresh]);
+
+  const handleExpand = (nicId) => {
+    setExpandedCards(prev => {
+      if (prev.includes(nicId)) {
+        return prev.filter(id => id !== nicId);
+      }
+      return [...prev, nicId];
+    });
+  };
+
+  const getStatusTag = (status) => {
+    const config = {
+      free: { color: 'success', text: '空闲' },
+      occupied: { color: 'processing', text: '占用' },
+      fault: { color: 'error', text: '故障' },
+      normal: { color: 'success', text: '正常' },
+      warning: { color: 'warning', text: '警告' },
+      offline: { color: 'default', text: '离线' }
+    };
+    const { color, text } = config[status] || { color: 'default', text: status };
+    return <Tag color={color}>{text}</Tag>;
+  };
+
+  const getTypeTag = (type) => {
+    const config = {
+      'RJ45': { color: 'blue', text: 'RJ45' },
+      'SFP': { color: 'green', text: 'SFP' },
+      'SFP+': { color: 'cyan', text: 'SFP+' },
+      'SFP28': { color: 'purple', text: 'SFP28' },
+      'QSFP': { color: 'orange', text: 'QSFP' },
+      'QSFP28': { color: 'red', text: 'QSFP28' }
+    };
+    const { color, text } = config[type] || { color: 'default', text: type };
+    return <Tag color={color}>{text}</Tag>;
+  };
+
+  const renderPortTable = (ports, nicId) => {
+    const columns = [
+      {
+        title: '端口名称',
+        dataIndex: 'portName',
+        key: 'portName',
+        width: 120,
+        render: (text) => <span style={{ fontWeight: 500 }}>{text}</span>
+      },
+      {
+        title: '类型',
+        dataIndex: 'portType',
+        key: 'portType',
+        width: 80,
+        render: (type) => getTypeTag(type)
+      },
+      {
+        title: '速率',
+        dataIndex: 'portSpeed',
+        key: 'portSpeed',
+        width: 70
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 70,
+        render: (status) => getStatusTag(status)
+      },
+      {
+        title: 'VLAN',
+        dataIndex: 'vlanId',
+        key: 'vlanId',
+        width: 60,
+        render: (vlanId) => vlanId || '-'
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 80,
+        render: (_, record) => (
+          <Space size="small">
+            <Popconfirm
+              title="确定要删除此端口吗？"
+              onConfirm={() => handleDeletePort(record)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button type="link" size="small" danger icon={<DeleteOutlined />}>
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        )
+      }
+    ];
+
+    return (
+      <Table
+        columns={columns}
+        dataSource={ports}
+        rowKey="portId"
+        pagination={false}
+        size="small"
+        scroll={{ x: 500 }}
+      />
+    );
+  };
+
+  const renderCardHeader = (card) => {
+    const stats = card.stats || { free: 0, occupied: 0, fault: 0, total: 0 };
+    
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <div style={{
+            width: '36px',
+            height: '36px',
+            borderRadius: '8px',
+            background: card.isUngrouped 
+              ? 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)'
+              : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#fff'
+          }}>
+            {card.isUngrouped ? <FolderOutlined /> : <CloudServerOutlined />}
+          </div>
+          <div>
+            <div style={{ fontWeight: 600, fontSize: '14px', color: '#1e293b' }}>
+              {card.name}
+              {card.slotNumber && <span style={{ color: '#94a3b8', marginLeft: 8 }}>插槽 {card.slotNumber}</span>}
+            </div>
+            <div style={{ fontSize: '12px', color: '#64748b' }}>
+              {card.description || (card.isUngrouped ? '未分配到网卡的端口' : '网卡')}
+            </div>
+          </div>
+        </div>
+        <Space size={12}>
+          <Badge count={stats.free} style={{ backgroundColor: designTokens.colors.success }} />
+          <span style={{ fontSize: '12px', color: '#64748b' }}>空闲</span>
+          <Badge count={stats.occupied} style={{ backgroundColor: '#1677ff' }} />
+          <span style={{ fontSize: '12px', color: '#64748b' }}>占用</span>
+          <Badge count={stats.fault} style={{ backgroundColor: designTokens.colors.error }} />
+          <span style={{ fontSize: '12px', color: '#64748b' }}>故障</span>
+          {!card.isUngrouped && (
+            <Popconfirm
+              title="确定要删除此网卡吗？"
+              description="删除网卡前需确保其下无端口"
+              onConfirm={() => handleDeleteCard(card)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button type="link" size="small" danger icon={<DeleteOutlined />}>
+                删除网卡
+              </Button>
+            </Popconfirm>
+          )}
+          <Button
+            type="primary"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedCard(card);
+              setCreatePortModalVisible(true);
+            }}
+            style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+          >
+            添加端口
+          </Button>
+        </Space>
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <Spin size="large" tip="加载网卡数据中..." />
+      </div>
+    );
+  }
+
+  const totalStats = cards.reduce((acc, card) => {
+    const stats = card.stats || {};
+    acc.total += stats.total || 0;
+    acc.free += stats.free || 0;
+    acc.occupied += stats.occupied || 0;
+    acc.fault += stats.fault || 0;
+    return acc;
+  }, { total: 0, free: 0, occupied: 0, fault: 0 });
+
+  return (
+    <div className="network-card-panel">
+      <div className="panel-header" style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '16px'
+      }}>
+        <div className="stats" style={{ display: 'flex', gap: '24px' }}>
+          <Space size={16}>
+            <Badge count={networkCards.length} style={{ backgroundColor: designTokens.colors.primary.main }} />
+            <span style={{ color: '#64748b', fontSize: '13px' }}>个网卡</span>
+            <Badge count={totalStats.total} style={{ backgroundColor: '#667eea' }} />
+            <span style={{ color: '#64748b', fontSize: '13px' }}>个端口</span>
+          </Space>
+        </div>
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={fetchData} size="small">
+            刷新
+          </Button>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setCreateCardModalVisible(true)}
+            style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+          >
+            新增网卡
+          </Button>
+        </Space>
+      </div>
+
+      {cards.length === 0 ? (
+        <div className="empty-state">
+          <Empty
+            description={
+              <span>
+                该设备暂无网卡和端口
+                <br />
+                <Button
+                  type="link"
+                  icon={<PlusOutlined />}
+                  onClick={() => setCreateCardModalVisible(true)}
+                  style={{ padding: 0, marginTop: 8 }}
+                >
+                  立即添加网卡
+                </Button>
+              </span>
+            }
+          >
+            <CloudServerOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />
+          </Empty>
+        </div>
+      ) : (
+        <Collapse
+          activeKey={expandedCards}
+          onChange={(keys) => setExpandedCards(keys)}
+          expandIconPosition="end"
+          style={{ background: 'transparent' }}
+        >
+          {cards.map((card) => (
+            <Panel
+              key={card.nicId}
+              header={renderCardHeader(card)}
+              style={{
+                background: '#fff',
+                borderRadius: '8px',
+                marginBottom: '8px',
+                border: '1px solid #e2e8f0'
+              }}
+            >
+              {card.ports && card.ports.length > 0 ? (
+                renderPortTable(card.ports, card.nicId)
+              ) : (
+                <div style={{ padding: '24px', textAlign: 'center', color: '#94a3b8' }}>
+                  该{card.isUngrouped ? '分组' : '网卡'}暂无端口
+                  <br />
+                  <Button
+                    type="link"
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                      setSelectedCard(card);
+                      setCreatePortModalVisible(true);
+                    }}
+                    style={{ padding: 0, marginTop: 8 }}
+                  >
+                    添加端口
+                  </Button>
+                </div>
+              )}
+            </Panel>
+          ))}
+        </Collapse>
+      )}
+
+      <NetworkCardCreateModal
+        device={{ deviceId, name: deviceName }}
+        visible={createCardModalVisible}
+        onClose={() => setCreateCardModalVisible(false)}
+        onSuccess={handleCreateCardSuccess}
+      />
+
+      <PortCreateModal
+        device={{ deviceId, name: deviceName }}
+        visible={createPortModalVisible}
+        onClose={() => {
+          setCreatePortModalVisible(false);
+          setSelectedCard(null);
+        }}
+        onSuccess={handleCreatePortSuccess}
+        defaultNicId={selectedCard?.nicId}
+      />
+    </div>
+  );
+}
+
+export default React.memo(NetworkCardPanel);
@@ -0,0 +1,400 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { Modal, Form, Input, Select, InputNumber, message, Space, Button, Tooltip, Alert, Tag } from 'antd';
+import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import axios from 'axios';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea',
+      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+    }
+  },
+  borderRadius: {
+    medium: '10px'
+  }
+};
+
+function parsePortRange(portName) {
+  if (!portName || typeof portName !== 'string') {
+    return null;
+  }
+
+  const trimmed = portName.trim();
+  
+  if (!trimmed.includes('-')) {
+    return null;
+  }
+
+  const [startPart, endPart] = trimmed.split('-').map(s => s.trim());
+  
+  if (!startPart || !endPart) {
+    return null;
+  }
+
+  const startNumMatch = startPart.match(/(\d+)$/);
+  const endNumMatch = endPart.match(/(\d+)$/);
+  
+  if (!startNumMatch || !endNumMatch) {
+    return null;
+  }
+
+  const startNum = parseInt(startNumMatch[1], 10);
+  const endNum = parseInt(endNumMatch[1], 10);
+  
+  if (startNum >= endNum || endNum - startNum > 1000) {
+    return null;
+  }
+
+  const prefix = startPart.replace(startNumMatch[0], '');
+  const portCount = endNum - startNum + 1;
+  
+  const ports = [];
+  for (let i = 0; i < portCount; i++) {
+    const num = startNum + i;
+    ports.push(`${prefix}${num}`);
+  }
+
+  return {
+    isRange: true,
+    prefix,
+    startNum,
+    endNum,
+    portCount,
+    ports
+  };
+}
+
+function generatePortNames(portName) {
+  const result = parsePortRange(portName);
+  
+  if (result && result.isRange) {
+    return result.ports;
+  }
+  
+  return [portName];
+}
+
+function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, networkCards = [] }) {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [previewPorts, setPreviewPorts] = useState([]);
+  const [showPreview, setShowPreview] = useState(false);
+  const [nicList, setNicList] = useState([]);
+
+  useEffect(() => {
+    if (visible) {
+      setPreviewPorts([]);
+      setShowPreview(false);
+      form.resetFields();
+      
+      if (defaultNicId) {
+        form.setFieldsValue({ nicId: defaultNicId });
+      }
+
+      if (device?.deviceId && networkCards.length === 0) {
+        fetchNetworkCards();
+      } else if (networkCards.length > 0) {
+        setNicList(networkCards);
+      }
+    }
+  }, [visible, device, defaultNicId, networkCards, form]);
+
+  const fetchNetworkCards = async () => {
+    try {
+      const response = await axios.get(`/api/network-cards/device/${device.deviceId}`);
+      setNicList(response.data || []);
+    } catch (error) {
+      console.error('获取网卡列表失败:', error);
+      setNicList([]);
+    }
+  };
+
+  const handlePortNameChange = useCallback((e) => {
+    const value = e.target.value;
+    const ports = generatePortNames(value);
+    
+    if (ports.length > 1) {
+      setPreviewPorts(ports.slice(0, 20));
+      setShowPreview(true);
+    } else {
+      setPreviewPorts([]);
+      setShowPreview(false);
+    }
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+
+      const portNames = generatePortNames(values.portName);
+      
+      if (portNames.length === 1) {
+        await axios.post('/api/device-ports', {
+          deviceId: device.deviceId,
+          nicId: values.nicId || null,
+          portName: portNames[0],
+          portType: values.portType,
+          portSpeed: values.portSpeed,
+          vlanId: values.vlanId,
+          status: values.status,
+          description: values.description
+        });
+        message.success('端口创建成功');
+      } else {
+        const portsData = portNames.map((portName, index) => ({
+          portId: `PORT-${Date.now()}-${index}`,
+          deviceId: device.deviceId,
+          nicId: values.nicId || null,
+          portName,
+          portType: values.portType,
+          portSpeed: values.portSpeed,
+          vlanId: values.vlanId,
+          status: values.status,
+          description: values.description
+        }));
+
+        await axios.post('/api/device-ports/batch', { ports: portsData });
+        message.success(`成功创建 ${portNames.length} 个端口`);
+      }
+
+      form.resetFields();
+      setPreviewPorts([]);
+      setShowPreview(false);
+      onSuccess?.();
+      onClose();
+    } catch (error) {
+      if (error.errorFields) {
+        return;
+      }
+      message.error(error.response?.data?.error || '端口创建失败');
+      console.error('创建端口失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [device, form, onClose, onSuccess]);
+
+  const handleCancel = useCallback(() => {
+    form.resetFields();
+    setPreviewPorts([]);
+    setShowPreview(false);
+    onClose();
+  }, [form, onClose]);
+
+  const portCount = previewPorts.length || (form.getFieldValue('portName') && !showPreview ? 1 : 0);
+
+  return (
+    <Modal
+      title={
+        <Space>
+          <PlusOutlined style={{ color: designTokens.colors.primary.main }} />
+          <span>新增端口 - {device?.name || '设备'}</span>
+          {portCount > 1 && (
+            <Tag color="blue">{portCount} 个端口</Tag>
+          )}
+        </Space>
+      }
+      open={visible}
+      onOk={handleSubmit}
+      onCancel={handleCancel}
+      confirmLoading={loading}
+      okText={portCount > 1 ? `创建 ${portCount} 个端口` : '创建'}
+      cancelText="取消"
+      width={560}
+      styles={{ body: { padding: '20px 24px' } }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{
+          portType: 'RJ45',
+          portSpeed: '1G',
+          status: 'free'
+        }}
+      >
+        <Form.Item
+          name="deviceId"
+          label="设备"
+        >
+          <Input
+            value={device?.name}
+            disabled
+            placeholder={device?.deviceId}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="nicId"
+          label={
+            <Space>
+              所属网卡
+              <Tooltip title="可选，不选择则端口不归属于任何网卡">
+                <InfoCircleOutlined style={{ color: '#999' }} />
+              </Tooltip>
+            </Space>
+          }
+        >
+          <Select
+            placeholder="选择网卡（可选）"
+            allowClear
+            showSearch
+            optionFilterProp="children"
+            style={{ width: '100%' }}
+          >
+            {nicList.map(nic => (
+              <Option key={nic.nicId} value={nic.nicId}>
+                {nic.name}
+                {nic.slotNumber && ` (插槽${nic.slotNumber})`}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          name="portName"
+          label={
+            <Space>
+              端口名称
+              <Tooltip title="支持单个端口（如 eth0/1）或端口范围（如 1/0/1-1/0/48）">
+                <InfoCircleOutlined style={{ color: '#999' }} />
+              </Tooltip>
+            </Space>
+          }
+          rules={[
+            { required: true, message: '请输入端口名称' },
+            { 
+              pattern: /^[\w\/:\-]+$/, 
+              message: '端口名称格式不正确' 
+            },
+            {
+              validator: (_, value) => {
+                if (!value) return Promise.resolve();
+                const ports = generatePortNames(value);
+                if (ports.length > 1000) {
+                  return Promise.reject(new Error('单次最多创建1000个端口'));
+                }
+                return Promise.resolve();
+              }
+            }
+          ]}
+        >
+          <Input 
+            placeholder="例如: eth0/1 或 1/0/1-1/0/48" 
+            onChange={handlePortNameChange}
+          />
+        </Form.Item>
+
+        {showPreview && (
+          <Alert
+            message={`将创建 ${previewPorts.length} 个端口`}
+            description={
+              <div style={{ marginTop: 8 }}>
+                <Space wrap size={4}>
+                  {previewPorts.map((port, index) => (
+                    <Tag key={index} color="blue">{port}</Tag>
+                  ))}
+                  {previewPorts.length < parsePortRange(form.getFieldValue('portName'))?.portCount && (
+                    <Tag color="default">...等</Tag>
+                  )}
+                </Space>
+              </div>
+            }
+            type="info"
+            showIcon
+            style={{ marginBottom: 16 }}
+          />
+        )}
+
+        <Space style={{ display: 'flex', width: '100%' }}>
+          <Form.Item
+            name="portType"
+            label="端口类型"
+            rules={[{ required: true, message: '请选择端口类型' }]}
+            style={{ flex: 1 }}
+          >
+            <Select placeholder="请选择">
+              <Option value="RJ45">RJ45</Option>
+              <Option value="SFP">SFP</Option>
+              <Option value="SFP+">SFP+</Option>
+              <Option value="SFP28">SFP28</Option>
+              <Option value="QSFP">QSFP</Option>
+              <Option value="QSFP28">QSFP28</Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            name="portSpeed"
+            label="端口速率"
+            rules={[{ required: true, message: '请选择端口速率' }]}
+            style={{ flex: 1 }}
+          >
+            <Select placeholder="请选择">
+              <Option value="100M">100M</Option>
+              <Option value="1G">1G</Option>
+              <Option value="10G">10G</Option>
+              <Option value="25G">25G</Option>
+              <Option value="40G">40G</Option>
+              <Option value="100G">100G</Option>
+            </Select>
+          </Form.Item>
+        </Space>
+
+        <Space style={{ display: 'flex', width: '100%' }}>
+          <Form.Item
+            name="vlanId"
+            label="VLAN ID"
+            style={{ flex: 1 }}
+          >
+            <InputNumber
+              placeholder="1-4094"
+              min={1}
+              max={4094}
+              style={{ width: '100%' }}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="status"
+            label="状态"
+            rules={[{ required: true, message: '请选择状态' }]}
+            style={{ flex: 1 }}
+          >
+            <Select placeholder="请选择">
+              <Option value="free">空闲</Option>
+              <Option value="occupied">占用</Option>
+              <Option value="fault">故障</Option>
+            </Select>
+          </Form.Item>
+        </Space>
+
+        <Form.Item
+          name="description"
+          label="描述"
+        >
+          <TextArea rows={2} placeholder="请输入描述信息（可选）" />
+        </Form.Item>
+
+        <div style={{ 
+          background: '#f5f5f5', 
+          padding: '12px 16px', 
+          borderRadius: '8px',
+          fontSize: '12px',
+          color: '#666'
+        }}>
+          <strong>格式说明：</strong>
+          <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
+            <li>单个端口：<code>eth0/1</code>、<code>gigabitethernet1/0/1</code></li>
+            <li>端口范围：<code>1/0/1-1/0/48</code>（创建 1/0/1 到 1/0/48 共48个端口）</li>
+            <li>简单范围：<code>eth1-eth24</code>（创建 eth1 到 eth24 共24个端口）</li>
+          </ul>
+        </div>
+      </Form>
+    </Modal>
+  );
+}
+
+export default React.memo(PortCreateModal);
@@ -0,0 +1,235 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Table, Button, Space, Tag, Tooltip, Popconfirm, Empty, Spin, Badge } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined, ApiOutlined } from '@ant-design/icons';
+import axios from 'axios';
+import PortCreateModal from './PortCreateModal';
+
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea'
+    },
+    success: '#10b981',
+    error: '#ef4444',
+    warning: '#f59e0b'
+  }
+};
+
+function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
+  const [ports, setPorts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [createModalVisible, setCreateModalVisible] = useState(false);
+
+  const fetchPorts = useCallback(async () => {
+    if (!deviceId) return;
+
+    try {
+      setLoading(true);
+      const response = await axios.get(`/api/device-ports/device/${deviceId}`);
+      setPorts(response.data || []);
+    } catch (error) {
+      console.error('获取端口列表失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [deviceId]);
+
+  useEffect(() => {
+    fetchPorts();
+  }, [fetchPorts]);
+
+  const handleDelete = useCallback(async (port) => {
+    try {
+      await axios.delete(`/api/device-ports/${port.portId}`);
+      import('antd').then(({ message }) => message.success('端口删除成功'));
+      fetchPorts();
+      onRefresh?.();
+    } catch (error) {
+      import('antd').then(({ message }) => message.error('端口删除失败'));
+    }
+  }, [fetchPorts, onRefresh]);
+
+  const handleCreateSuccess = useCallback(() => {
+    fetchPorts();
+    onRefresh?.();
+  }, [fetchPorts, onRefresh]);
+
+  const getStatusTag = (status) => {
+    const config = {
+      free: { color: 'success', text: '空闲' },
+      occupied: { color: 'processing', text: '占用' },
+      fault: { color: 'error', text: '故障' }
+    };
+    const { color, text } = config[status] || { color: 'default', text: status };
+    return <Tag color={color}>{text}</Tag>;
+  };
+
+  const getTypeTag = (type) => {
+    const config = {
+      'RJ45': { color: 'blue', text: 'RJ45' },
+      'SFP': { color: 'green', text: 'SFP' },
+      'SFP+': { color: 'cyan', text: 'SFP+' },
+      'SFP28': { color: 'purple', text: 'SFP28' },
+      'QSFP': { color: 'orange', text: 'QSFP' },
+      'QSFP28': { color: 'red', text: 'QSFP28' }
+    };
+    const { color, text } = config[type] || { color: 'default', text: type };
+    return <Tag color={color}>{text}</Tag>;
+  };
+
+  const columns = [
+    {
+      title: '端口名称',
+      dataIndex: 'portName',
+      key: 'portName',
+      width: 120,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span style={{ fontWeight: 500 }}>{text}</span>
+        </Tooltip>
+      )
+    },
+    {
+      title: '类型',
+      dataIndex: 'portType',
+      key: 'portType',
+      width: 90,
+      render: (type) => getTypeTag(type)
+    },
+    {
+      title: '速率',
+      dataIndex: 'portSpeed',
+      key: 'portSpeed',
+      width: 80
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (status) => getStatusTag(status)
+    },
+    {
+      title: 'VLAN',
+      dataIndex: 'vlanId',
+      key: 'vlanId',
+      width: 70,
+      render: (vlanId) => vlanId || '-'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      fixed: 'right',
+      render: (_, record) => (
+        <Space size="small">
+          <Popconfirm
+            title="确定要删除此端口吗？"
+            onConfirm={() => handleDelete(record)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button
+              type="link"
+              size="small"
+              danger
+              icon={<DeleteOutlined />}
+            >
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  ];
+
+  const freeCount = ports.filter(p => p.status === 'free').length;
+  const occupiedCount = ports.filter(p => p.status === 'occupied').length;
+  const faultCount = ports.filter(p => p.status === 'fault').length;
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <Spin size="large" tip="加载端口数据中..." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="port-management-panel">
+      <div className="port-panel-header">
+        <div className="port-stats">
+          <Space size={16}>
+            <Badge count={freeCount} style={{ backgroundColor: designTokens.colors.success }} />
+            <span className="stat-label">空闲</span>
+            <Badge count={occupiedCount} style={{ backgroundColor: '#1677ff' }} />
+            <span className="stat-label">占用</span>
+            <Badge count={faultCount} style={{ backgroundColor: designTokens.colors.error }} />
+            <span className="stat-label">故障</span>
+          </Space>
+        </div>
+        <Space>
+          <Button
+            icon={<ReloadOutlined />}
+            onClick={fetchPorts}
+            size="small"
+          >
+            刷新
+          </Button>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setCreateModalVisible(true)}
+            style={{
+              background: designTokens.colors.primary.gradient,
+              border: 'none'
+            }}
+          >
+            新增端口
+          </Button>
+        </Space>
+      </div>
+
+      {ports.length === 0 ? (
+        <div className="port-empty">
+          <Empty
+            description={
+              <span>
+                该设备暂无端口
+                <br />
+                <Button
+                  type="link"
+                  icon={<PlusOutlined />}
+                  onClick={() => setCreateModalVisible(true)}
+                  style={{ padding: 0, marginTop: 8 }}
+                >
+                  立即添加端口
+                </Button>
+              </span>
+            }
+          >
+            <ApiOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />
+          </Empty>
+        </div>
+      ) : (
+        <Table
+          columns={columns}
+          dataSource={ports}
+          rowKey="portId"
+          pagination={false}
+          size="small"
+          scroll={{ x: 600 }}
+        />
+      )}
+
+      <PortCreateModal
+        device={{ deviceId, name: deviceName }}
+        visible={createModalVisible}
+        onClose={() => setCreateModalVisible(false)}
+        onSuccess={handleCreateSuccess}
+      />
+    </div>
+  );
+}
+
+export default React.memo(PortManagementPanel);
@@ -0,0 +1,926 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Table, Button, Modal, Form, Input, Select, message, Card, Space, Popconfirm, Tag, Tooltip, InputNumber, Collapse, Empty, Spin, Upload, Progress, Checkbox } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ReloadOutlined, ExportOutlined, ImportOutlined, DownloadOutlined, UploadOutlined as UploadIcon } from '@ant-design/icons';
+import axios from 'axios';
+import * as XLSX from 'xlsx';
+import Papa from 'papaparse';
+
+const { Option } = Select;
+const { Panel } = Collapse;
+
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea',
+      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      light: '#8b9ff0',
+      dark: '#4f5db8'
+    },
+    success: {
+      main: '#10b981',
+      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+      light: '#34d399',
+      dark: '#047857'
+    },
+    warning: {
+      main: '#f59e0b',
+      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+      light: '#fbbf24',
+      dark: '#b45309'
+    },
+    error: {
+      main: '#ef4444',
+      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+      light: '#f87171',
+      dark: '#b91c1c'
+    }
+  },
+  borderRadius: {
+    small: '6px',
+    medium: '10px',
+    large: '16px'
+  },
+  shadows: {
+    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+  }
+};
+
+function PortManagement() {
+  const [ports, setPorts] = useState([]);
+  const [devices, setDevices] = useState([]);
+  const [groupedPorts, setGroupedPorts] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [filters, setFilters] = useState({
+    deviceId: '',
+    status: 'all',
+    portType: 'all',
+    portSpeed: 'all'
+  });
+  const [modalVisible, setModalVisible] = useState(false);
+  const [editingPort, setEditingPort] = useState(null);
+  const [form] = Form.useForm();
+  
+  const [importModalVisible, setImportModalVisible] = useState(false);
+  const [importFileList, setImportFileList] = useState([]);
+  const [importPreview, setImportPreview] = useState([]);
+  const [importProgress, setImportProgress] = useState({ current: 0, total: 0 });
+  const [importing, setImporting] = useState(false);
+  const [skipExisting, setSkipExisting] = useState(false);
+  const [updateExisting, setUpdateExisting] = useState(false);
+
+  const fetchPorts = useCallback(async () => {
+    try {
+      setLoading(true);
+      const params = {};
+      
+      if (filters.deviceId) params.deviceId = filters.deviceId;
+      if (filters.status !== 'all') params.status = filters.status;
+      if (filters.portType !== 'all') params.portType = filters.portType;
+      if (filters.portSpeed !== 'all') params.portSpeed = filters.portSpeed;
+      
+      const response = await axios.get('/api/device-ports', { params });
+      setPorts(response.data.ports || response.data || []);
+    } catch (error) {
+      message.error('获取端口列表失败');
+      console.error('获取端口列表失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [filters]);
+
+  const fetchDevices = useCallback(async () => {
+    try {
+      const response = await axios.get('/api/devices', { params: { pageSize: 1000 } });
+      setDevices(response.data.devices || response.data || []);
+    } catch (error) {
+      console.error('获取设备列表失败:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchPorts();
+    fetchDevices();
+  }, [fetchPorts, fetchDevices]);
+
+  useEffect(() => {
+    const grouped = {};
+    ports.forEach(port => {
+      const deviceId = port.deviceId;
+      if (!grouped[deviceId]) {
+        grouped[deviceId] = {
+          device: devices.find(d => d.deviceId === deviceId),
+          ports: []
+        };
+      }
+      grouped[deviceId].ports.push(port);
+    });
+    setGroupedPorts(grouped);
+  }, [ports, devices]);
+
+  const handleSearch = () => {
+    fetchPorts();
+  };
+
+  const handleReset = () => {
+    setFilters({
+      deviceId: '',
+      status: 'all',
+      portType: 'all',
+      portSpeed: 'all'
+    });
+  };
+
+  const handleAdd = () => {
+    setEditingPort(null);
+    form.resetFields();
+    setModalVisible(true);
+  };
+
+  const handleEdit = (port) => {
+    setEditingPort(port);
+    form.setFieldsValue({
+      portId: port.portId,
+      deviceId: port.deviceId,
+      portName: port.portName,
+      portType: port.portType,
+      portSpeed: port.portSpeed,
+      status: port.status,
+      vlanId: port.vlanId,
+      description: port.description
+    });
+    setModalVisible(true);
+  };
+
+  const handleDelete = async (portId) => {
+    try {
+      await axios.delete(`/api/device-ports/${portId}`);
+      message.success('删除成功');
+      fetchPorts();
+    } catch (error) {
+      message.error('删除失败');
+      console.error('删除失败:', error);
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      
+      if (editingPort) {
+        await axios.put(`/api/device-ports/${editingPort.portId}`, values);
+        message.success('更新成功');
+      } else {
+        await axios.post('/api/device-ports', values);
+        message.success('创建成功');
+      }
+      
+      setModalVisible(false);
+      form.resetFields();
+      fetchPorts();
+    } catch (error) {
+      message.error(editingPort ? '更新失败' : '创建失败');
+      console.error('提交失败:', error);
+    }
+  };
+
+  const handleImport = () => {
+    setImportModalVisible(true);
+    setImportPreview([]);
+    setImportProgress({ current: 0, total: 0 });
+  };
+
+  const handleFileUpload = (info) => {
+    const { file } = info;
+    setImportFileList([file]);
+    
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const data = e.target.result;
+        let parsedData = [];
+        
+        if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
+          const workbook = XLSX.read(data, { type: 'binary' });
+          const sheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[sheetName];
+          parsedData = XLSX.utils.sheet_to_json(worksheet);
+        } else if (file.name.endsWith('.csv')) {
+          Papa.parse(data, {
+            header: true,
+            skipEmptyLines: true,
+            complete: (results) => {
+              parsedData = results.data;
+            }
+          });
+        } else {
+          message.error('不支持的文件格式，请上传 .xlsx 或 .csv 文件');
+          return;
+        }
+        
+        const validatedData = await validateImportData(parsedData);
+        setImportPreview(validatedData);
+        setImportProgress({ current: 0, total: validatedData.length });
+      } catch (error) {
+        message.error('文件解析失败');
+        console.error('文件解析失败:', error);
+      }
+    };
+    
+    reader.readAsBinaryString(file);
+  };
+
+  const validateImportData = async (data) => {
+    const validatedData = [];
+    const errors = [];
+    
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i];
+      const error = await validatePortRow(row, i);
+      
+      if (error) {
+        errors.push(error);
+      } else {
+        validatedData.push(row);
+      }
+    }
+    
+    if (errors.length > 0) {
+      message.warning(`发现 ${errors.length} 条数据错误，已跳过`);
+      console.log('导入错误:', errors);
+    }
+    
+    return validatedData;
+  };
+
+  const validatePortRow = async (row, index) => {
+    const errors = [];
+    
+    if (!row['设备ID'] || !row['端口名称']) {
+      return { valid: false, error: `第 ${index + 1} 行：缺少必填字段（设备ID或端口名称）` };
+    }
+    
+    const device = devices.find(d => d.deviceId === row['设备ID']);
+    if (!device) {
+      return { valid: false, error: `第 ${index + 1} 行：设备不存在` };
+    }
+    
+    const validPortTypes = ['RJ45', 'SFP', 'SFP+', 'SFP28', 'QSFP', 'QSFP28'];
+    if (!validPortTypes.includes(row['端口类型'])) {
+      return { valid: false, error: `第 ${index + 1} 行：无效的端口类型` };
+    }
+    
+    const validPortSpeeds = ['100M', '1G', '10G', '25G', '40G', '100G'];
+    if (!validPortSpeeds.includes(row['端口速率'])) {
+      return { valid: false, error: `第 ${index + 1} 行：无效的端口速率` };
+    }
+    
+    const validStatuses = ['空闲', '占用', '故障'];
+    if (!validStatuses.includes(row['状态'])) {
+      return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
+    }
+    
+    if (errors.length > 0) {
+      return { valid: false, error: errors.join('; ') };
+    }
+    
+    return { valid: true };
+  };
+
+  const handleBatchImport = async () => {
+    if (importPreview.length === 0) {
+      message.warning('请先选择要导入的数据');
+      return;
+    }
+    
+    setImporting(true);
+    setImportProgress({ current: 0, total: importPreview.length });
+    
+    try {
+      const statusMap = {
+        '空闲': 'free',
+        '占用': 'occupied',
+        '故障': 'fault'
+      };
+      
+      const portsData = importPreview.map((row, index) => ({
+        portId: `PORT-${Date.now()}-${index}`,
+        deviceId: row['设备ID'],
+        portName: row['端口名称'],
+        portType: row['端口类型'],
+        portSpeed: row['端口速率'],
+        status: statusMap[row['状态']] || 'free',
+        vlanId: row['VLAN ID'],
+        description: row['描述']
+      }));
+      
+      const response = await axios.post('/api/device-ports/batch', { ports: portsData });
+      
+      const { total, success, failed, errors } = response.data;
+      
+      setImportProgress({ current: total, total: total });
+      
+      if (failed > 0) {
+        console.error('导入错误:', errors);
+        message.warning(`导入完成！成功 ${success} 条，失败 ${failed} 条`);
+      } else {
+        message.success(`导入完成！成功 ${success} 条`);
+      }
+      
+      fetchPorts();
+      setImportModalVisible(false);
+      setImportPreview([]);
+    } catch (error) {
+      console.error('批量导入失败:', error);
+      message.error('批量导入失败，请检查数据格式');
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handleDownloadTemplate = () => {
+    const templateData = [
+      {
+        '设备ID': 'DEV001',
+        '端口名称': 'eth0/1',
+        '端口类型': 'RJ45',
+        '端口速率': '1G',
+        '状态': '空闲',
+        'VLAN ID': '100',
+        '描述': '示例端口'
+      }
+    ];
+    
+    const worksheet = XLSX.utils.json_to_sheet(templateData);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, '端口数据');
+    XLSX.writeFile(workbook, '端口导入模板.xlsx');
+  };
+
+  const getStatusTag = (status) => {
+    const statusMap = {
+      'free': { color: 'success', text: '空闲' },
+      'occupied': { color: 'processing', text: '占用' },
+      'fault': { color: 'error', text: '故障' },
+      '空闲': { color: 'success', text: '空闲' },
+      '占用': { color: 'processing', text: '占用' },
+      '故障': { color: 'error', text: '故障' }
+    };
+    const config = statusMap[status] || { color: 'default', text: status };
+    return <Tag color={config.color}>{config.text}</Tag>;
+  };
+
+  const getPortTypeTag = (type) => {
+    const typeMap = {
+      'RJ45': { color: 'blue', text: 'RJ45' },
+      'SFP': { color: 'green', text: 'SFP' },
+      'SFP+': { color: 'cyan', text: 'SFP+' },
+      'SFP28': { color: 'purple', text: 'SFP28' },
+      'QSFP': { color: 'orange', text: 'QSFP' },
+      'QSFP28': { color: 'red', text: 'QSFP28' }
+    };
+    const config = typeMap[type] || { color: 'default', text: type };
+    return <Tag color={config.color}>{config.text}</Tag>;
+  };
+
+  const portColumns = [
+    {
+      title: '端口名称',
+      dataIndex: 'portName',
+      key: 'portName',
+      width: 120
+    },
+    {
+      title: '端口类型',
+      dataIndex: 'portType',
+      key: 'portType',
+      width: 100,
+      render: (type) => getPortTypeTag(type)
+    },
+    {
+      title: '端口速率',
+      dataIndex: 'portSpeed',
+      key: 'portSpeed',
+      width: 100
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      render: (status) => getStatusTag(status)
+    },
+    {
+      title: 'VLAN ID',
+      dataIndex: 'vlanId',
+      key: 'vlanId',
+      width: 100,
+      render: (vlanId) => vlanId || '-'
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+      render: (text) => (
+        <Tooltip title={text}>
+          <span>{text || '-'}</span>
+        </Tooltip>
+      )
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 150,
+      fixed: 'right',
+      render: (_, record) => (
+        <Space size="small">
+          <Button
+            type="link"
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => handleEdit(record)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要删除这个端口吗？"
+            onConfirm={() => handleDelete(record.portId)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button
+              type="link"
+              size="small"
+              danger
+              icon={<DeleteOutlined />}
+            >
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  ];
+
+  return (
+    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
+      <Card 
+        style={{ 
+          borderRadius: designTokens.borderRadius.large,
+          boxShadow: designTokens.shadows.medium,
+          marginBottom: 16
+        }}
+      >
+        <div style={{ marginBottom: 16 }}>
+          <Space wrap>
+            <Select
+              placeholder="选择设备"
+              style={{ width: 200 }}
+              value={filters.deviceId || undefined}
+              onChange={(value) => setFilters(prev => ({ ...prev, deviceId: value }))}
+              allowClear
+              showSearch
+              filterOption={(input, option) =>
+                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }
+            >
+              {devices.map(device => (
+                <Option key={device.deviceId} value={device.deviceId}>
+                  {device.name} ({device.deviceId})
+                </Option>
+              ))}
+            </Select>
+            
+            <Select
+              placeholder="端口类型"
+              style={{ width: 120 }}
+              value={filters.portType}
+              onChange={(value) => setFilters(prev => ({ ...prev, portType: value }))}
+            >
+              <Option value="all">全部</Option>
+              <Option value="RJ45">RJ45</Option>
+              <Option value="SFP">SFP</Option>
+              <Option value="SFP+">SFP+</Option>
+              <Option value="SFP28">SFP28</Option>
+              <Option value="QSFP">QSFP</Option>
+              <Option value="QSFP28">QSFP28</Option>
+            </Select>
+            
+            <Select
+              placeholder="端口速率"
+              style={{ width: 120 }}
+              value={filters.portSpeed}
+              onChange={(value) => setFilters(prev => ({ ...prev, portSpeed: value }))}
+            >
+              <Option value="all">全部</Option>
+              <Option value="100M">100M</Option>
+              <Option value="1G">1G</Option>
+              <Option value="10G">10G</Option>
+              <Option value="25G">25G</Option>
+              <Option value="40G">40G</Option>
+              <Option value="100G">100G</Option>
+            </Select>
+            
+            <Select
+              placeholder="状态"
+              style={{ width: 120 }}
+              value={filters.status}
+              onChange={(value) => setFilters(prev => ({ ...prev, status: value }))}
+            >
+              <Option value="all">全部</Option>
+              <Option value="free">空闲</Option>
+              <Option value="occupied">占用</Option>
+              <Option value="fault">故障</Option>
+            </Select>
+            
+            <Button 
+              type="primary" 
+              icon={<SearchOutlined />} 
+              onClick={handleSearch}
+              style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+            >
+              搜索
+            </Button>
+            
+            <Button icon={<ReloadOutlined />} onClick={handleReset}>
+              重置
+            </Button>
+          </Space>
+        </div>
+        
+        <div style={{ marginBottom: 16 }}>
+          <Space>
+            <Button 
+              type="primary" 
+              icon={<PlusOutlined />} 
+              onClick={handleAdd}
+              style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+            >
+              新增端口
+            </Button>
+            
+            <Button 
+              type="primary" 
+              icon={<ImportOutlined />} 
+              onClick={handleImport}
+              style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+            >
+              批量导入
+            </Button>
+            
+            <Button icon={<ExportOutlined />}>
+              导出
+            </Button>
+          </Space>
+        </div>
+        
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '40px' }}>
+            <Spin size="large" tip="加载端口数据中..." />
+          </div>
+        ) : Object.keys(groupedPorts).length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '60px' }}>
+            <Empty description="暂无端口数据" />
+          </div>
+        ) : (
+          <Collapse
+            defaultActiveKey={Object.keys(groupedPorts).slice(0, 5)}
+            style={{ background: '#f5f5f5' }}
+          >
+            {Object.entries(groupedPorts).map(([deviceId, data]) => {
+              const device = data.device;
+              const devicePorts = data.ports || [];
+              const freeCount = devicePorts.filter(p => p.status === 'free').length;
+              const occupiedCount = devicePorts.filter(p => p.status === 'occupied').length;
+              const faultCount = devicePorts.filter(p => p.status === 'fault').length;
+              
+              return (
+                <Panel
+                  key={deviceId}
+                  header={
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                        <div style={{
+                          width: '40px',
+                          height: '40px',
+                          borderRadius: designTokens.borderRadius.medium,
+                          background: designTokens.colors.primary.gradient,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          color: '#fff',
+                          fontSize: '18px'
+                        }}>
+                          {device?.type?.toLowerCase()?.includes('server') ? '🖥️' : 
+                           device?.type?.toLowerCase()?.includes('switch') ? '🔀' : 
+                           device?.type?.toLowerCase()?.includes('router') ? '🌐' : '📦'}
+                        </div>
+                        <div>
+                          <div style={{ fontWeight: 600, fontSize: '16px', color: '#1e293b' }}>
+                            {device?.name || '未知设备'}
+                          </div>
+                          <div style={{ fontSize: '12px', color: '#64748b' }}>
+                            {device?.deviceId || '-'}
+                          </div>
+                        </div>
+                      </div>
+                      <Space size="small">
+                        <Tag color="success">空闲: {freeCount}</Tag>
+                        <Tag color="processing">占用: {occupiedCount}</Tag>
+                        <Tag color="error">故障: {faultCount}</Tag>
+                        <Tag color="blue">总计: {devicePorts.length}</Tag>
+                      </Space>
+                    </div>
+                  }
+                >
+                  <Table
+                    columns={portColumns}
+                    dataSource={devicePorts}
+                    rowKey="portId"
+                    pagination={false}
+                    size="small"
+                    scroll={{ x: 1000 }}
+                  />
+                </Panel>
+              );
+            })}
+          </Collapse>
+        )}
+      </Card>
+      
+      <Modal
+        title={editingPort ? '编辑端口' : '新增端口'}
+        open={modalVisible}
+        onOk={handleSubmit}
+        onCancel={() => {
+          setModalVisible(false);
+          form.resetFields();
+        }}
+        width={600}
+        okText="确定"
+        cancelText="取消"
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="deviceId"
+            label="设备"
+            rules={[{ required: true, message: '请选择设备' }]}
+          >
+            <Select 
+              placeholder="请选择设备" 
+              showSearch
+              filterOption={(input, option) =>
+                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }
+            >
+              {devices.map(device => (
+                <Option key={device.deviceId} value={device.deviceId}>
+                  {device.name} ({device.deviceId})
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          
+          <Form.Item
+            name="portName"
+            label="端口名称"
+            rules={[{ required: true, message: '请输入端口名称' }]}
+          >
+            <Input placeholder="例如: eth0/1" />
+          </Form.Item>
+          
+          <Form.Item
+            name="portType"
+            label="端口类型"
+            rules={[{ required: true, message: '请选择端口类型' }]}
+            initialValue="RJ45"
+          >
+            <Select placeholder="请选择端口类型">
+              <Option value="RJ45">RJ45</Option>
+              <Option value="SFP">SFP</Option>
+              <Option value="SFP+">SFP+</Option>
+              <Option value="SFP28">SFP28</Option>
+              <Option value="QSFP">QSFP</Option>
+              <Option value="QSFP28">QSFP28</Option>
+            </Select>
+          </Form.Item>
+          
+          <Form.Item
+            name="portSpeed"
+            label="端口速率"
+            rules={[{ required: true, message: '请选择端口速率' }]}
+            initialValue="1G"
+          >
+            <Select placeholder="请选择端口速率">
+              <Option value="100M">100M</Option>
+              <Option value="1G">1G</Option>
+              <Option value="10G">10G</Option>
+              <Option value="25G">25G</Option>
+              <Option value="40G">40G</Option>
+              <Option value="100G">100G</Option>
+            </Select>
+          </Form.Item>
+          
+          <Form.Item
+            name="status"
+            label="状态"
+            rules={[{ required: true, message: '请选择状态' }]}
+            initialValue="free"
+          >
+            <Select placeholder="请选择状态">
+              <Option value="free">空闲</Option>
+              <Option value="occupied">占用</Option>
+              <Option value="fault">故障</Option>
+            </Select>
+          </Form.Item>
+          
+          <Form.Item
+            name="vlanId"
+            label="VLAN ID"
+          >
+            <InputNumber placeholder="请输入VLAN ID" min={1} max={4094} />
+          </Form.Item>
+          
+          <Form.Item
+            name="description"
+            label="描述"
+          >
+            <Input.TextArea rows={3} placeholder="请输入描述" />
+          </Form.Item>
+        </Form>
+      </Modal>
+      
+      <Modal
+        title="批量导入端口"
+        open={importModalVisible}
+        onCancel={() => {
+          setImportModalVisible(false);
+          setImportPreview([]);
+          setImportProgress({ current: 0, total: 0 });
+        }}
+        width={900}
+        footer={[
+          <Button key="cancel" onClick={() => setImportModalVisible(false)}>
+            取消
+          </Button>,
+          <Button 
+            key="download" 
+            icon={<DownloadOutlined />} 
+            onClick={handleDownloadTemplate}
+          >
+            下载模板
+          </Button>,
+          <Button 
+            key="import" 
+            type="primary" 
+            icon={<ImportOutlined />} 
+            onClick={handleBatchImport}
+            loading={importing}
+            disabled={importPreview.length === 0}
+            style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+          >
+            开始导入
+          </Button>
+        ]}
+      >
+        <div style={{ marginBottom: 16 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: 16 }}>
+            <Upload.Dragger
+              name="file"
+              accept=".xlsx,.xls,.csv"
+              beforeUpload={() => false}
+              customRequest={({ file, onSuccess }) => {
+                handleFileUpload({ file, onSuccess });
+              }}
+            >
+              <p className="ant-upload-drag-icon">
+                <UploadIcon />
+              </p>
+              <p className="ant-upload-text">点击或拖拽文件到此处上传</p>
+              <p className="ant-upload-hint">支持 .xlsx, .xls, .csv 格式</p>
+            </Upload.Dragger>
+          </div>
+          
+          <div style={{ display: 'flex', gap: '12px', marginBottom: 16 }}>
+            <Checkbox checked={skipExisting} onChange={(e) => setSkipExisting(e.target.checked)}>
+              跳过已存在的端口
+            </Checkbox>
+            <Checkbox checked={updateExisting} onChange={(e) => setUpdateExisting(e.target.checked)}>
+              更新已存在的端口
+            </Checkbox>
+          </div>
+          
+          {importPreview.length > 0 && (
+            <>
+              <div style={{ marginBottom: 16 }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                  <Text strong>数据预览（前10条）</Text>
+                  <Button 
+                    size="small" 
+                    icon={<DownloadOutlined />} 
+                    onClick={handleDownloadTemplate}
+                  >
+                    下载模板
+                  </Button>
+                </div>
+                <Table
+                  columns={[
+                    {
+                      title: '设备ID',
+                      dataIndex: '设备ID',
+                      key: 'deviceId',
+                      width: 150
+                    },
+                    {
+                      title: '端口名称',
+                      dataIndex: '端口名称',
+                      key: 'portName',
+                      width: 120
+                    },
+                    {
+                      title: '端口类型',
+                      dataIndex: '端口类型',
+                      key: 'portType',
+                      width: 100,
+                      render: (type) => getPortTypeTag(type)
+                    },
+                    {
+                      title: '端口速率',
+                      dataIndex: '端口速率',
+                      key: 'portSpeed',
+                      width: 100
+                    },
+                    {
+                      title: '状态',
+                      dataIndex: '状态',
+                      key: 'status',
+                      width: 100,
+                      render: (status) => getStatusTag(status)
+                    },
+                    {
+                      title: 'VLAN ID',
+                      dataIndex: 'VLAN ID',
+                      key: 'vlanId',
+                      width: 100,
+                      render: (vlanId) => vlanId || '-'
+                    },
+                    {
+                      title: '描述',
+                      dataIndex: '描述',
+                      key: 'description',
+                      ellipsis: true,
+                      render: (text) => (
+                        <Tooltip title={text}>
+                          <span>{text || '-'}</span>
+                        </Tooltip>
+                      )
+                    }
+                  ]}
+                  dataSource={importPreview.slice(0, 10)}
+                  rowKey={(record, index) => index}
+                  pagination={false}
+                  size="small"
+                  scroll={{ x: 1000 }}
+                />
+              </div>
+              
+              {importPreview.length > 10 && (
+                <div style={{ textAlign: 'center', marginTop: 8 }}>
+                  <Text type="secondary">仅显示前10条数据，共 {importPreview.length} 条</Text>
+                </div>
+              )}
+            </>
+          )}
+          
+          {importing && (
+            <div style={{ textAlign: 'center', padding: '24px' }}>
+              <Spin size="large" tip="导入中..." />
+              <div style={{ marginTop: 16 }}>
+                <Progress 
+                  percent={Math.round((importProgress.current / importProgress.total) * 100)} 
+                  status="active"
+                  strokeColor={{
+                    '0%': designTokens.colors.primary.main,
+                    '100%': designTokens.colors.success.main
+                  }}
+                />
+                <div style={{ marginTop: 8 }}>
+                  <Text>
+                    正在导入 {importProgress.current} / {importProgress.total} 条数据...
+                  </Text>
+                  {importProgress.current > 0 && (
+                    <Text type="secondary">
+                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)} 秒
+                    </Text>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+export default PortManagement;
@@ -7,10 +7,11 @@ import {
  MobileOutlined, PrinterOutlined, SettingOutlined,
  SearchOutlined, ClearOutlined, EnvironmentOutlined,
  FilterOutlined, AppstoreOutlined, UnorderedListOutlined,
-  FullscreenOutlined, CompressOutlined, EyeOutlined
+  FullscreenOutlined, CompressOutlined, EyeOutlined, ApiOutlined
 } from '@ant-design/icons';
 import axios from 'axios';
 import DeviceComponent from '../components/DeviceComponent';
+import DeviceDetailDrawer from '../components/DeviceDetailDrawer';
 import './RackVisualization.css';

 const { Option } = Select;
@@ -393,6 +394,14 @@ function RackVisualization() {
  const [savingTooltipConfig, setSavingTooltipConfig] = useState(false); // 保存配置状态
  const [deviceCache, setDeviceCache] = useState({}); // 设备数据缓存，键为rackId，值为设备数据

+  // 接线管理相关状态
+  const [cables, setCables] = useState([]); // 接线列表
+  const [showCables, setShowCables] = useState(true); // 是否显示接线
+
+  // 设备详情抽屉状态
+  const [selectedDevice, setSelectedDevice] = useState(null); // 当前选中设备
+  const [detailDrawerVisible, setDetailDrawerVisible] = useState(false); // 详情抽屉显示状态
+
  // 设备搜索功能
  const [searchKeyword, setSearchKeyword] = useState(''); // 搜索关键词
  const [searchResults, setSearchResults] = useState([]); // 搜索结果
@@ -815,11 +824,26 @@ function RackVisualization() {
  useEffect(() => {
    if (selectedRack?.rackId) {
      fetchDevices(selectedRack.rackId);
+      fetchCablesForRack(selectedRack.rackId);
    } else {
      setDevices([]);
+      setCables([]);
    }
  }, [selectedRack, fetchDevices]);

+  // 获取机柜的接线数据
+  const fetchCablesForRack = useCallback(async (rackId) => {
+    try {
+      const response = await axios.get('/api/cables');
+      const rackCables = (response.data.cables || []).filter(cable => 
+        cable.sourceDevice?.rackId === rackId || cable.targetDevice?.rackId === rackId
+      );
+      setCables(rackCables);
+    } catch (error) {
+      console.error('获取接线数据失败:', error);
+    }
+  }, []);
+
  // 打开字段配置模态框时获取数据
  const handleOpenTooltipConfig = () => {
    if (Object.keys(tooltipFields).length === 0) {
@@ -1208,6 +1232,14 @@ function RackVisualization() {
          >
            字段配置
          </Button>
+          <Button
+            className={showCables ? 'primary-button' : 'secondary-button'}
+            icon={<ApiOutlined />}
+            onClick={() => setShowCables(!showCables)}
+            type={showCables ? 'primary' : 'default'}
+          >
+            {showCables ? '隐藏接线' : '显示接线'}
+          </Button>
        </div>
      </Card>

@@ -1510,11 +1542,15 @@ function RackVisualization() {
                              borderTop: isHighlighted
                                ? `2px solid ${statusTheme.topBorderColor}`
                                : `1px solid ${statusTheme.topBorderColor}`
-                            }}
-                            onMouseEnter={(e) => {
-                              const isOneU = (device?.height || 1) === 1;
-                              const isFaultStatus = device?.status === 'error' || device?.status === 'fault';
-                              if (isOneU && !isFaultStatus) {
+                              }}
+                              onClick={(e) => {
+                                setSelectedDevice(device);
+                                setDetailDrawerVisible(true);
+                              }}
+                              onMouseEnter={(e) => {
+                                const isOneU = (device?.height || 1) === 1;
+                                const isFaultStatus = device?.status === 'error' || device?.status === 'fault';
+                                if (isOneU && !isFaultStatus) {
                                e.currentTarget.style.height = '33px';
                                e.currentTarget.style.zIndex = '150';
                              }
@@ -1687,6 +1723,71 @@ function RackVisualization() {
                  {/* 机柜顶部 */}
                  <div className="rack-top" />
                  
+                  {/* 接线连线层 */}
+                  {showCables && cables.length > 0 && (
+                    <svg 
+                      className="cable-connections"
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                        pointerEvents: 'none',
+                        zIndex: 50
+                      }}
+                    >
+                      {cables.map((cable, index) => {
+                        const sourceDevice = devices.find(d => d.deviceId === cable.sourceDeviceId);
+                        const targetDevice = devices.find(d => d.deviceId === cable.targetDeviceId);
+                        
+                        if (!sourceDevice || !targetDevice) return null;
+                        
+                        const sourceStyle = getDeviceStyle(sourceDevice, selectedRack.height);
+                        const targetStyle = getDeviceStyle(targetDevice, selectedRack.height);
+                        
+                        const sourceTop = parseInt(sourceStyle.top);
+                        const sourceHeight = parseInt(sourceStyle.height);
+                        const targetTop = parseInt(targetStyle.top);
+                        const targetHeight = parseInt(targetStyle.height);
+                        
+                        const sourceX = 50;
+                        const sourceY = sourceTop + sourceHeight / 2;
+                        const targetX = 50;
+                        const targetY = targetTop + targetHeight / 2;
+                        
+                        const cableColor = cable.status === 'normal' ? '#10b981' : 
+                                        cable.status === 'fault' ? '#ef4444' : '#6b7280';
+                        const cableDash = cable.cableType === 'fiber' ? '5,5' : 'none';
+                        
+                        return (
+                          <g key={cable.cableId}>
+                            <path
+                              d={`M ${sourceX} ${sourceY} Q ${sourceX + 30} ${(sourceY + targetY) / 2} ${targetX} ${targetY}`}
+                              stroke={cableColor}
+                              strokeWidth="2"
+                              fill="none"
+                              strokeDasharray={cableDash}
+                              opacity="0.7"
+                            />
+                            <circle
+                              cx={sourceX}
+                              cy={sourceY}
+                              r="4"
+                              fill={cableColor}
+                            />
+                            <circle
+                              cx={targetX}
+                              cy={targetY}
+                              r="4"
+                              fill={cableColor}
+                            />
+                          </g>
+                        );
+                      })}
+                    </svg>
+                  )}
+                  
                  {/* 机柜名称和设备数量 */}
                  <div className="rack-header">
                    {/* 机柜标题 */}
@@ -1897,6 +1998,18 @@ function RackVisualization() {
            </div>
          </div>
        )}
+        
+        {/* 设备详情抽屉 */}
+        <DeviceDetailDrawer
+          device={selectedDevice}
+          visible={detailDrawerVisible}
+          onClose={() => {
+            setDetailDrawerVisible(false);
+            setSelectedDevice(null);
+          }}
+          cables={cables}
+          onRefreshCables={() => selectedRack?.rackId && fetchCablesForRack(selectedRack.rackId)}
+        />
      </Card>
    </div>
  );