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

- 添加网卡(NetworkCard)模型及相关路由
- 实现端口(DevicePort)管理功能
- 新增接线(Cable)管理功能
- 添加前端网卡和端口管理界面
- 更新机柜可视化页面显示接线
- 添加设备详情抽屉展示端口和接线信息
- 更新部署文档包含数据库迁移指南
- 添加批量创建端口功能
- 设备删除时自动清理相关接线

frontend/src/components/NetworkCardPanel.jsx

@@ -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);