diff --git a/.gitignore b/.gitignore
index 9a09151..7f2f261 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,4 +44,8 @@ lerna-debug.log*
 
 # Backup files (generated by maintenance scripts)
 backend/backups/
-*.backup.json
\ No newline at end of file
+*.backup.json
+
+#数据文件
+*.xlsx
+*.csv
diff --git a/backend/routes/devicePorts.js b/backend/routes/devicePorts.js
index d3ff830..9982365 100644
--- a/backend/routes/devicePorts.js
+++ b/backend/routes/devicePorts.js
@@ -60,7 +60,8 @@ router.get('/', async (req, res) => {
     });
   } catch (error) {
     console.error('获取端口列表失败:', error);
-    res.status(500).json({ error: error.message });
+    console.error('Error name:', error.name);
+    res.status(500).json({ error: error.message, errorType: error.name });
   }
 });
 
@@ -167,6 +168,48 @@ router.post('/batch', async (req, res) => {
             throw new Error('缺少必填字段');
           }
 
+          const device = await Device.findByPk(portData.deviceId, { transaction });
+          if (!device) {
+            throw new Error(`设备 ${portData.deviceId} 不存在`);
+          }
+
+          const isServer = device.type && device.type.toLowerCase().includes('server');
+
+          if (isServer) {
+            if (!portData.nicId && !portData.网卡名称) {
+              throw new Error(`服务器 ${portData.deviceId} 的端口必须关联网卡，请先在网卡管理中添加网卡`);
+            }
+
+            let nicId = portData.nicId;
+
+            if (!nicId && portData.网卡名称) {
+              const networkCard = await NetworkCard.findOne({
+                where: { deviceId: portData.deviceId, name: portData.网卡名称 },
+                transaction
+              });
+              if (!networkCard) {
+                throw new Error(`服务器 ${portData.deviceId} 的网卡"${portData.网卡名称}"不存在，请先在网卡管理中添加该网卡`);
+              }
+              nicId = networkCard.nicId;
+            }
+
+            if (nicId) {
+              const networkCard = await NetworkCard.findByPk(nicId, { transaction });
+              if (!networkCard) {
+                throw new Error(`网卡 ${nicId} 不存在`);
+              }
+              if (networkCard.deviceId !== portData.deviceId) {
+                throw new Error(`网卡 ${nicId} 不属于设备 ${portData.deviceId}`);
+              }
+            }
+
+            portData.nicId = nicId;
+          } else {
+            if (portData.nicId || portData.网卡名称) {
+              portData.nicId = null;
+            }
+          }
+
           const existingPort = await DevicePort.findOne({
             where: { deviceId: portData.deviceId, portName: portData.portName },
             transaction
@@ -183,7 +226,8 @@ router.post('/batch', async (req, res) => {
                 portSpeed: portData.portSpeed || existingPort.portSpeed,
                 status: portData.status || existingPort.status,
                 vlanId: portData.vlanId !== undefined ? portData.vlanId : existingPort.vlanId,
-                description: portData.description !== undefined ? portData.description : existingPort.description
+                description: portData.description !== undefined ? portData.description : existingPort.description,
+                nicId: portData.nicId !== undefined ? portData.nicId : existingPort.nicId
               }, {
                 where: { portId: existingPort.portId },
                 transaction
@@ -213,6 +257,8 @@ router.post('/batch', async (req, res) => {
           results.errors.push({
             index: i + 1,
             portId: portData.portId,
+            deviceId: portData.deviceId,
+            portName: portData.portName,
             error: error.message
           });
         }
@@ -351,11 +397,11 @@ router.get('/:portId', async (req, res) => {
         }
       ]
     });
-    
+
     if (!port) {
       return res.status(404).json({ error: '端口不存在' });
     }
-    
+
     res.json(port);
   } catch (error) {
     console.error('获取端口详情失败:', error);
@@ -363,4 +409,120 @@ router.get('/:portId', async (req, res) => {
   }
 });
 
+router.get('/export/all', async (req, res) => {
+  try {
+    const { keyword, status, portType, portSpeed, deviceId, page = 1, pageSize = 5000 } = req.query;
+
+    const parsedPage = Math.max(1, parseInt(page) || 1);
+    const parsedPageSize = Math.min(10000, Math.max(1, parseInt(pageSize) || 5000));
+    const offset = (parsedPage - 1) * parsedPageSize;
+
+    const where = {};
+
+    if (deviceId) {
+      where.deviceId = deviceId;
+    }
+
+    if (status && status !== 'all') {
+      where.status = status;
+    }
+
+    if (portType && portType !== 'all') {
+      where.portType = portType;
+    }
+
+    if (portSpeed && portSpeed !== 'all') {
+      where.portSpeed = portSpeed;
+    }
+
+    const timeoutMs = 30000;
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => reject(new Error('查询超时，请尝试缩小查询范围或减少pageSize')), timeoutMs);
+    });
+
+    const countResult = await Promise.race([
+      DevicePort.findAll({
+        where,
+        include: [
+          {
+            model: Device,
+            as: 'device',
+            attributes: ['deviceId', 'name', 'type', 'rackId'],
+            include: [
+              {
+                model: require('../models/Rack'),
+                as: 'rack',
+                attributes: ['rackId', 'name'],
+                include: [
+                  {
+                    model: require('../models/Room'),
+                    as: 'room',
+                    attributes: ['roomId', 'name']
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            model: NetworkCard,
+            as: 'networkCard',
+            attributes: ['nicId', 'name']
+          }
+        ],
+        order: [['createdAt', 'DESC']],
+        limit: parsedPageSize,
+        offset: offset,
+        subQuery: false
+      }),
+      timeoutPromise
+    ]);
+
+    const ports = countResult;
+
+    const statusMap = {
+      free: '空闲',
+      occupied: '占用',
+      fault: '故障'
+    };
+
+    const exportData = ports.map(port => ({
+      端口ID: port.portId,
+      设备ID: port.deviceId,
+      设备名称: port.device?.name || '-',
+      设备类型: port.device?.type || '-',
+      机房: port.device?.rack?.room?.name || '-',
+      机架: port.device?.rack?.name || '-',
+      网卡名称: port.networkCard?.name || '-',
+      端口名称: port.portName,
+      端口类型: port.portType,
+      端口速率: port.portSpeed,
+      状态: statusMap[port.status] || port.status,
+      VLAN_ID: port.vlanId || '-',
+      描述: port.description || '-',
+      创建时间: port.createdAt ? new Date(port.createdAt).toLocaleString('zh-CN') : '-'
+    }));
+
+    let filteredExportData = exportData;
+    if (keyword) {
+      const searchLower = keyword.toLowerCase();
+      filteredExportData = exportData.filter(item =>
+        item.端口名称?.toLowerCase().includes(searchLower) ||
+        item.端口类型?.toLowerCase().includes(searchLower) ||
+        item.设备名称?.toLowerCase().includes(searchLower) ||
+        item.描述?.toLowerCase().includes(searchLower)
+      );
+    }
+
+    res.json({
+      page: parsedPage,
+      pageSize: parsedPageSize,
+      total: filteredExportData.length,
+      ports: filteredExportData
+    });
+  } catch (error) {
+    console.error('导出端口失败:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 module.exports = router;
diff --git a/backend/routes/networkCards.js b/backend/routes/networkCards.js
index add8c33..05d2f85 100644
--- a/backend/routes/networkCards.js
+++ b/backend/routes/networkCards.js
@@ -231,6 +231,111 @@ router.post('/', async (req, res) => {
   }
 });
 
+router.post('/batch', async (req, res) => {
+  try {
+    const { networkCards, skipExisting = false, updateExisting = false } = req.body;
+
+    if (!networkCards || !Array.isArray(networkCards) || networkCards.length === 0) {
+      return res.status(400).json({ error: '请提供有效的网卡数据' });
+    }
+
+    const results = {
+      total: networkCards.length,
+      success: 0,
+      failed: 0,
+      skipped: 0,
+      updated: 0,
+      errors: []
+    };
+
+    const transaction = await NetworkCard.sequelize.transaction();
+
+    try {
+      for (let i = 0; i < networkCards.length; i++) {
+        const cardData = networkCards[i];
+
+        try {
+          if (!cardData.deviceId || !cardData.name) {
+            throw new Error('缺少必填字段：设备ID和网卡名称');
+          }
+
+          const device = await Device.findByPk(cardData.deviceId, { transaction });
+          if (!device) {
+            throw new Error(`设备 ${cardData.deviceId} 不存在`);
+          }
+
+          const isServer = device.type && device.type.toLowerCase().includes('server');
+          const isSwitch = device.type && device.type.toLowerCase().includes('switch');
+          if (!isServer && !isSwitch) {
+            throw new Error(`设备类型 ${device.type} 不支持网卡管理`);
+          }
+
+          const existingCard = await NetworkCard.findOne({
+            where: { deviceId: cardData.deviceId, name: cardData.name },
+            transaction
+          });
+
+          if (existingCard) {
+            if (skipExisting) {
+              results.skipped++;
+              continue;
+            }
+            if (updateExisting) {
+              await NetworkCard.update({
+                slotNumber: cardData.slotNumber !== undefined ? cardData.slotNumber : existingCard.slotNumber,
+                model: cardData.model !== undefined ? cardData.model : existingCard.model,
+                manufacturer: cardData.manufacturer !== undefined ? cardData.manufacturer : existingCard.manufacturer,
+                description: cardData.description !== undefined ? cardData.description : existingCard.description,
+                status: cardData.status || existingCard.status
+              }, {
+                where: { nicId: existingCard.nicId },
+                transaction
+              });
+              results.updated++;
+              results.success++;
+              continue;
+            }
+            throw new Error('该设备已存在同名网卡');
+          }
+
+          const autoNicId = cardData.nicId || `NIC-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+
+          await NetworkCard.create({
+            nicId: autoNicId,
+            deviceId: cardData.deviceId,
+            name: cardData.name,
+            slotNumber: cardData.slotNumber,
+            model: cardData.model,
+            manufacturer: cardData.manufacturer,
+            description: cardData.description,
+            status: cardData.status || 'normal',
+            portCount: 0
+          }, { transaction });
+
+          results.success++;
+        } catch (error) {
+          results.failed++;
+          results.errors.push({
+            index: i + 1,
+            deviceId: cardData.deviceId,
+            name: cardData.name,
+            error: error.message
+          });
+        }
+      }
+
+      await transaction.commit();
+      res.json(results);
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  } catch (error) {
+    console.error('批量创建网卡失败:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 router.put('/:nicId', async (req, res) => {
   try {
     const [updated] = await NetworkCard.update(req.body, {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 508d9d0..3c42935 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -261,16 +261,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>,
         },
+        {
+          key: 'cables',
+          icon: <ApiOutlined style={{ fontSize: '16px' }} />,
+          label: <Link to="/cables">接线管理</Link>,
+        },
       ],
     },
     {
diff --git a/frontend/src/components/BatchImportModal.jsx b/frontend/src/components/BatchImportModal.jsx
new file mode 100644
index 0000000..70e9d66
--- /dev/null
+++ b/frontend/src/components/BatchImportModal.jsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { Modal, Button, Typography, Divider } from 'antd';
+import {
+  ImportOutlined,
+  CloudServerOutlined,
+  ApiOutlined,
+  InfoCircleOutlined,
+} from '@ant-design/icons';
+import { designTokens } from '../config/theme';
+import CloseButton from './CloseButton';
+
+const { Text, Paragraph } = Typography;
+
+function BatchImportModal({ visible, onClose, onImportNetworkCard, onImportPort }) {
+  return (
+    <Modal
+      title={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: designTokens.borderRadius.md,
+              background: designTokens.colors.primary.gradient,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+            }}
+          >
+            <ImportOutlined />
+          </div>
+          <span style={{ fontSize: '18px', fontWeight: 600 }}>批量导入</span>
+        </div>
+      }
+      open={visible}
+      closeIcon={<CloseButton />}
+      onCancel={onClose}
+      footer={null}
+      width={500}
+    >
+      <div style={{ padding: '16px 0' }}>
+        <div
+          style={{
+            display: 'flex',
+            gap: '16px',
+            marginBottom: '24px',
+          }}
+        >
+          <Button
+            size="large"
+            icon={<CloudServerOutlined />}
+            onClick={() => {
+              onClose();
+              onImportNetworkCard();
+            }}
+            style={{
+              flex: 1,
+              height: '80px',
+              borderRadius: designTokens.borderRadius.md,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+            }}
+          >
+            <div style={{ fontSize: '16px', fontWeight: 600 }}>批量导入网卡</div>
+            <div style={{ fontSize: '12px', color: designTokens.colors.neutral[500], fontWeight: 400 }}>
+              用于服务器设备
+            </div>
+          </Button>
+
+          <Button
+            size="large"
+            icon={<ApiOutlined />}
+            onClick={() => {
+              onClose();
+              onImportPort();
+            }}
+            style={{
+              flex: 1,
+              height: '80px',
+              borderRadius: designTokens.borderRadius.md,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+            }}
+          >
+            <div style={{ fontSize: '16px', fontWeight: 600 }}>批量导入端口</div>
+            <div style={{ fontSize: '12px', color: designTokens.colors.neutral[500], fontWeight: 400 }}>
+              用于所有设备
+            </div>
+          </Button>
+        </div>
+
+        <Divider style={{ margin: '0 0 16px 0' }} />
+
+        <div
+          style={{
+            padding: '16px',
+            background: designTokens.colors.info.bg,
+            borderRadius: designTokens.borderRadius.md,
+            border: `1px solid ${designTokens.colors.info.light}40`,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
+            <InfoCircleOutlined
+              style={{
+                fontSize: '18px',
+                color: designTokens.colors.info.main,
+                marginTop: '2px',
+              }}
+            />
+            <div>
+              <div
+                style={{
+                  fontSize: '14px',
+                  fontWeight: 600,
+                  color: designTokens.colors.info.dark,
+                  marginBottom: '8px',
+                }}
+              >
+                交换机与服务器导入说明
+              </div>
+              <Paragraph
+                style={{
+                  margin: 0,
+                  fontSize: '13px',
+                  color: designTokens.colors.neutral[700],
+                  lineHeight: '1.8',
+                }}
+              >
+                <div style={{ marginBottom: '4px' }}>
+                  <strong>交换机端口：</strong>可直接批量导入端口，无需先导入网卡
+                </div>
+                <div>
+                  <strong>服务器端口：</strong>必须先在"网卡管理"中添加网卡，才能导入端口。
+                  服务器的网卡和端口是层级关系：设备 → 网卡 → 端口
+                </div>
+              </Paragraph>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default BatchImportModal;
diff --git a/frontend/src/components/NetworkCardCreateModal.jsx b/frontend/src/components/NetworkCardCreateModal.jsx
index 8b097e0..a073c79 100644
--- a/frontend/src/components/NetworkCardCreateModal.jsx
+++ b/frontend/src/components/NetworkCardCreateModal.jsx
@@ -1,17 +1,44 @@
-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 React, { useState, useCallback, useEffect } from 'react';
+import { Modal, Form, Input, Select, message, Space, Tooltip, Card, Alert, AutoComplete } from 'antd';
+import { CloudServerOutlined, InfoCircleOutlined, QuestionCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
 import CloseButton from './CloseButton';
 
-const { Option } = Select;
 const { TextArea } = Input;
 
+const SLOT_TYPES = [
+  { value: 'LOM', label: '板载网卡 (LOM)', description: '主板集成网卡，编号0' },
+  { value: 'OCP', label: 'OCP 网卡', description: '开放式计算项目网卡槽位' },
+  { value: '1', label: '插槽 1', description: 'PCIe x16/x8 插槽' },
+  { value: '2', label: '插槽 2', description: 'PCIe x8 插槽' },
+  { value: '3', label: '插槽 3', description: 'PCIe x4 插槽（需 Riser 卡）' },
+  { value: '4', label: '插槽 4', description: 'PCIe x4 插槽（需 Riser 卡）' },
+];
+
+const MANUFACTURER_OPTIONS = [
+  { value: 'Intel', label: 'Intel' },
+  { value: 'Broadcom', label: 'Broadcom' },
+  { value: 'Mellanox', label: 'Mellanox (NVIDIA)' },
+  { value: 'Realtek', label: 'Realtek' },
+  { value: 'Cisco', label: 'Cisco' },
+  { value: 'HP', label: 'HP/HPE' },
+  { value: 'Dell', label: 'Dell' },
+  { value: 'Qlogic', label: 'Qlogic' },
+  { value: 'Marvell', label: 'Marvell' },
+  { value: 'Other', label: '其他' },
+];
+
 function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    if (visible) {
+      form.resetFields();
+    }
+  }, [visible, form]);
+
   const handleSubmit = useCallback(async () => {
     try {
       const values = await form.validateFields();
@@ -24,7 +51,6 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
         description: values.description,
         model: values.model,
         manufacturer: values.manufacturer,
-        status: values.status,
       });
 
       message.success('网卡创建成功');
@@ -62,67 +88,157 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
       confirmLoading={loading}
       okText="创建"
       cancelText="取消"
-      width={480}
-      styles={{ body: { padding: '20px 24px' } }}
+      width={800}
+      styles={{ body: { padding: '0 24px 24px' } }}
     >
+      <div style={{
+        margin: '0 -24px 20px',
+        padding: '16px 24px',
+        background: `linear-gradient(135deg, ${designTokens.colors.primary.main}18 0%, ${designTokens.colors.primary.light}18 100%)`,
+        borderBottom: `1px solid ${designTokens.colors.primary.light}30`,
+      }}>
+        <div style={{ fontSize: '13px', color: designTokens.colors.neutral[700], lineHeight: 1.6 }}>
+          为服务器添加新的网卡，网卡创建后可关联端口
+        </div>
+      </div>
+
+      <Alert
+        message={
+          <div>
+            <strong>插槽编号参考</strong>
+            <ul style={{ margin: '8px 0 0', paddingLeft: '18px', lineHeight: 1.8 }}>
+              <li><strong>LOM (LAN on Motherboard)</strong>：主板集成网卡，编号通常为 0</li>
+              <li><strong>OCP (Open Compute Project)</strong>：服务器前端维护网卡专用槽位</li>
+              <li><strong>PCIe 插槽</strong>：从 1 开始编号，对应服务器物理插槽位置</li>
+            </ul>
+          </div>
+        }
+        type="info"
+        style={{
+          marginBottom: 20,
+          borderRadius: 10,
+          background: designTokens.colors.info.bg,
+          border: `1px solid ${designTokens.colors.info.light}40`,
+        }}
+      />
+
       <Form
         form={form}
         layout="vertical"
-        initialValues={{
-          status: 'normal',
-        }}
       >
-        <Form.Item
-          name="name"
-          label={
+        <div style={{ display: 'flex', gap: 16, marginBottom: 16 }}>
+          <Card
+            size="small"
+            title={
+              <Space>
+                <ThunderboltOutlined style={{ color: designTokens.colors.primary.main }} />
+                <span style={{ fontWeight: 600, fontSize: '14px' }}>基础信息</span>
+              </Space>
+            }
+            style={{
+              flex: 1,
+              borderRadius: 12,
+              border: `1px solid ${designTokens.colors.neutral[200]}`,
+            }}
+            styles={{ body: { padding: '16px 20px' } }}
+          >
+            <Form.Item
+              name="name"
+              label={<span style={{ fontWeight: 500 }}>网卡名称 <span style={{ color: '#ff4d4f' }}>*</span></span>}
+              rules={[
+                { required: true, message: '请输入网卡名称' },
+                { max: 50, message: '名称不能超过50个字符' },
+              ]}
+            >
+              <Input placeholder="例如: 网卡1、eth0、LAN1" size="large" />
+            </Form.Item>
+
+            <Form.Item
+              name="slotNumber"
+              label={
+                <Space>
+                  <span style={{ fontWeight: 500 }}>插槽位置</span>
+                  <Tooltip title="参考上方提示选择或输入插槽位置">
+                    <InfoCircleOutlined style={{ color: designTokens.colors.neutral[400], cursor: 'help' }} />
+                  </Tooltip>
+                </Space>
+              }
+            >
+              <AutoComplete
+                placeholder="选择或输入插槽位置"
+                allowClear
+                size="large"
+                options={SLOT_TYPES.map(slot => ({
+                  value: slot.value,
+                  label: (
+                    <div>
+                      <div style={{ fontWeight: 500 }}>{slot.label}</div>
+                      <div style={{ fontSize: '12px', color: designTokens.colors.neutral[500] }}>
+                        {slot.description}
+                      </div>
+                    </div>
+                  ),
+                }))}
+                filterOption={(input, option) =>
+                  option.value.toLowerCase().includes(input.toLowerCase()) ||
+                  option.label.props.children[0].props.children.toLowerCase().includes(input.toLowerCase())
+                }
+              />
+            </Form.Item>
+          </Card>
+
+          <Card
+            size="small"
+            title={
+              <Space>
+                <InfoCircleOutlined style={{ color: designTokens.colors.success.main }} />
+                <span style={{ fontWeight: 600, fontSize: '14px' }}>规格信息</span>
+              </Space>
+            }
+            style={{
+              flex: 1,
+              borderRadius: 12,
+              border: `1px solid ${designTokens.colors.neutral[200]}`,
+            }}
+            styles={{ body: { padding: '16px 20px' } }}
+          >
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '12px' }}>
+              <Form.Item name="manufacturer" label={<span style={{ fontWeight: 500 }}>制造商</span>}>
+                <AutoComplete
+                  placeholder="选择或输入"
+                  options={MANUFACTURER_OPTIONS.map(m => ({ value: m.value, label: m.label }))}
+                  filterOption={(input, option) =>
+                    option.label.toLowerCase().includes(input.toLowerCase())
+                  }
+                  size="large"
+                />
+              </Form.Item>
+
+              <Form.Item name="model" label={<span style={{ fontWeight: 500 }}>型号</span>}>
+                <Input placeholder="例如: X520-DA2" size="large" />
+              </Form.Item>
+            </div>
+          </Card>
+        </div>
+
+        <Card
+          size="small"
+          title={
             <Space>
-              网卡名称
-              <Tooltip title="如: 网卡1、eth0、Primary NIC、LAN1">
-                <InfoCircleOutlined style={{ color: '#999' }} />
-              </Tooltip>
+              <InfoCircleOutlined style={{ color: designTokens.colors.secondary.main }} />
+              <span style={{ fontWeight: 600, fontSize: '14px' }}>附加信息</span>
             </Space>
           }
-          rules={[
-            { required: true, message: '请输入网卡名称' },
-            { max: 50, message: '名称不能超过50个字符' },
-          ]}
+          style={{
+            borderRadius: 12,
+            border: `1px solid ${designTokens.colors.neutral[200]}`,
+          }}
+          styles={{ body: { padding: '16px 20px' } }}
         >
-          <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 name="description" label={<span style={{ fontWeight: 500 }}>描述</span>}>
+            <TextArea rows={3} placeholder="请输入描述信息（可选）" />
           </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>
+        </Card>
       </Form>
     </Modal>
   );
diff --git a/frontend/src/components/NetworkCardImportModal.jsx b/frontend/src/components/NetworkCardImportModal.jsx
new file mode 100644
index 0000000..e7f66be
--- /dev/null
+++ b/frontend/src/components/NetworkCardImportModal.jsx
@@ -0,0 +1,526 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Modal,
+  Upload,
+  Table,
+  Button,
+  Space,
+  Checkbox,
+  Alert,
+  Tag,
+  Typography,
+  Progress,
+  Spin,
+  message,
+} from 'antd';
+import {
+  UploadOutlined,
+  DownloadOutlined,
+  ImportOutlined,
+  CloudServerOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
+import * as XLSX from 'xlsx';
+import Papa from 'papaparse';
+import api from '../api';
+import { designTokens } from '../config/theme';
+import CloseButton from './CloseButton';
+
+const { Text, Title } = Typography;
+
+function NetworkCardImportModal({ visible, onClose, onSuccess }) {
+  const [importPreview, setImportPreview] = useState([]);
+  const [importErrors, setImportErrors] = 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 generateUniqueNicId = () => {
+    return `NIC-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+  };
+
+  const handleFileUpload = (file, onSuccess) => {
+    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')) {
+          parsedData = Papa.parse(data, {
+            header: true,
+            skipEmptyLines: true,
+          }).data;
+        } else {
+          message.error('不支持的文件格式，请上传 .xlsx 或 .csv 文件');
+          return;
+        }
+
+        if (parsedData.length === 0) {
+          message.warning('文件内容为空，请检查文件内容');
+          return;
+        }
+
+        const validatedResult = await validateImportData(parsedData);
+        setImportPreview(validatedResult.validData);
+        setImportErrors(validatedResult.errors);
+        setImportProgress({ current: 0, total: validatedResult.validData.length });
+        if (onSuccess) onSuccess();
+      } catch (error) {
+        message.error('文件解析失败');
+        console.error('文件解析失败:', error);
+      }
+    };
+
+    if (file.name.endsWith('.csv')) {
+      reader.readAsText(file);
+    } else {
+      reader.readAsBinaryString(file);
+    }
+  };
+
+  const validateImportData = async data => {
+    const validData = [];
+    const allErrors = [];
+
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i];
+      const result = await validateNetworkCardRow(row, i);
+
+      if (result.valid) {
+        validData.push(row);
+      } else {
+        allErrors.push(...result.errors.map(err => ({ ...err, originalRow: row })));
+      }
+    }
+
+    if (allErrors.length > 0) {
+      message.warning({
+        content: `发现 ${allErrors.length} 个数据错误，请查看错误详情并修正后重新导入`,
+        duration: 5,
+      });
+    }
+
+    return { validData, errors: allErrors };
+  };
+
+  const validateNetworkCardRow = async (row, index) => {
+    const rowNum = index + 2;
+    const errors = [];
+
+    if (!row['设备ID']) {
+      errors.push({
+        row: rowNum,
+        field: '设备ID',
+        value: row['设备ID'] || '(空)',
+        error: '缺少必填字段',
+        suggestion: '请填写设备ID，格式如：DEV001',
+      });
+    }
+
+    if (!row['网卡名称']) {
+      errors.push({
+        row: rowNum,
+        field: '网卡名称',
+        value: row['网卡名称'] || '(空)',
+        error: '缺少必填字段',
+        suggestion: '请填写网卡名称，格式如：网卡1、eth0',
+      });
+    }
+
+    if (row['插槽编号']) {
+      const slotPattern = /^\d+$/;
+      if (!slotPattern.test(row['插槽编号'])) {
+        errors.push({
+          row: rowNum,
+          field: '插槽编号',
+          value: row['插槽编号'],
+          error: '插槽编号格式错误',
+          suggestion: '插槽编号必须为数字，如：1、2',
+        });
+      }
+    }
+
+    if (errors.length > 0) {
+      return { valid: false, errors };
+    }
+    return { valid: true };
+  };
+
+  const handleBatchImport = async () => {
+    if (importPreview.length === 0) {
+      message.warning('请先选择要导入的数据');
+      return;
+    }
+
+    setImporting(true);
+    setImportProgress({ current: 0, total: importPreview.length });
+
+    let progressInterval;
+    let currentProgress = 0;
+
+    try {
+      const networkCardsData = importPreview.map((row, index) => ({
+        nicId: generateUniqueNicId(),
+        deviceId: row['设备ID'],
+        name: row['网卡名称'],
+        slotNumber: row['插槽编号'] ? parseInt(row['插槽编号']) : null,
+        model: row['网卡型号'] || null,
+        manufacturer: row['制造商'] || null,
+        description: row['描述'] || null,
+      }));
+
+      progressInterval = setInterval(() => {
+        currentProgress = Math.min(currentProgress + Math.random() * 15, 85);
+        setImportProgress(prev => ({
+          ...prev,
+          current: Math.floor((currentProgress / 100) * importPreview.length),
+        }));
+      }, 200);
+
+      const response = await api.post('/network-cards/batch', {
+        networkCards: networkCardsData,
+        skipExisting,
+        updateExisting,
+      });
+
+      const { total, success, failed, skipped = 0, updated = 0, errors } = response;
+
+      clearInterval(progressInterval);
+      setImportProgress({ current: importPreview.length, total: importPreview.length });
+
+      let msgContent = '';
+      if (updated > 0) {
+        msgContent += `更新 ${updated} 个，`;
+      }
+      if (skipped > 0) {
+        msgContent += `跳过 ${skipped} 个，`;
+      }
+      if (success > 0) {
+        msgContent += `新增 ${success - updated} 个，`;
+      }
+      if (failed > 0) {
+        msgContent += `失败 ${failed} 个`;
+        console.error('导入错误:', errors);
+      }
+
+      if (failed > 0 && success === 0 && skipped === 0 && updated === 0) {
+        message.error(`导入失败！${msgContent}`);
+      } else {
+        message.success({
+          content: `导入完成！${msgContent}`,
+          icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
+        });
+      }
+
+      if (onSuccess) {
+        onSuccess();
+      }
+      setImportPreview([]);
+      setImportErrors([]);
+      onClose();
+    } catch (error) {
+      clearInterval(progressInterval);
+      console.error('批量导入失败:', error);
+      message.error('批量导入失败，请检查数据格式');
+    } finally {
+      clearInterval(progressInterval);
+      setImporting(false);
+    }
+  };
+
+  const handleDownloadTemplate = () => {
+    const templateData = [
+      {
+        设备ID: 'DEV001',
+        网卡名称: '网卡1',
+        插槽编号: '1',
+        网卡型号: 'Intel X710',
+        制造商: 'Intel',
+        描述: '主网卡',
+      },
+      {
+        设备ID: 'DEV001',
+        网卡名称: '网卡2',
+        插槽编号: '2',
+        网卡型号: 'Intel X710',
+        制造商: 'Intel',
+        描述: '备网卡',
+      },
+    ];
+
+    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 handleClose = () => {
+    setImportPreview([]);
+    setImportErrors([]);
+    setImportProgress({ current: 0, total: 0 });
+    setSkipExisting(false);
+    setUpdateExisting(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: designTokens.borderRadius.md,
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+            }}
+          >
+            <CloudServerOutlined />
+          </div>
+          <span style={{ fontSize: '18px', fontWeight: 600 }}>批量导入网卡</span>
+        </div>
+      }
+      open={visible}
+      closeIcon={<CloseButton />}
+      onCancel={handleClose}
+      width={900}
+      footer={[
+        <Button
+          key="cancel"
+          onClick={handleClose}
+          style={{ borderRadius: designTokens.borderRadius.sm }}
+        >
+          取消
+        </Button>,
+        <Button
+          key="download"
+          icon={<DownloadOutlined />}
+          onClick={handleDownloadTemplate}
+          style={{ borderRadius: designTokens.borderRadius.sm }}
+        >
+          下载模板
+        </Button>,
+        <Button
+          key="import"
+          type="primary"
+          icon={<ImportOutlined />}
+          onClick={handleBatchImport}
+          loading={importing}
+          disabled={importPreview.length === 0}
+          style={{
+            background: designTokens.colors.primary.gradient,
+            border: 'none',
+            borderRadius: designTokens.borderRadius.sm,
+          }}
+        >
+          开始导入
+        </Button>,
+      ]}
+    >
+      <div style={{ padding: '16px 0' }}>
+        <Alert
+          message="操作说明"
+          description={
+            <div style={{ fontSize: '12px', lineHeight: '1.8' }}>
+              <div>• 网卡批量导入用于服务器设备，请确保先在设备管理中添加服务器</div>
+              <div>• 模板中的"设备ID"必须与已存在的设备对应</div>
+              <div>• 请先下载模板，按模板格式填写数据后再上传</div>
+            </div>
+          }
+          type="info"
+          showIcon
+          style={{
+            borderRadius: designTokens.borderRadius.md,
+            background: designTokens.colors.info.bg,
+            border: `1px solid ${designTokens.colors.info.light}40`,
+            marginBottom: '16px',
+          }}
+        />
+
+        <Upload.Dragger
+          name="file"
+          accept=".xlsx,.xls,.csv"
+          showUploadList={false}
+          beforeUpload={file => {
+            handleFileUpload(file, null);
+            return false;
+          }}
+          style={{
+            borderRadius: designTokens.borderRadius.lg,
+            border: `2px dashed ${designTokens.colors.primary.light}`,
+            background: designTokens.colors.primary.bg,
+          }}
+        >
+          <p className="ant-upload-drag-icon">
+            <UploadOutlined style={{ fontSize: '48px', color: designTokens.colors.primary.main }} />
+          </p>
+          <p className="ant-upload-text" style={{ fontSize: '16px', color: designTokens.colors.neutral[700] }}>
+            点击或拖拽文件到此处上传
+          </p>
+          <p className="ant-upload-hint" style={{ color: designTokens.colors.neutral[500] }}>
+            支持 .xlsx, .xls, .csv 格式文件
+          </p>
+        </Upload.Dragger>
+
+        <div
+          style={{
+            display: 'flex',
+            gap: '24px',
+            marginTop: '16px',
+            padding: '16px',
+            background: designTokens.colors.neutral[50],
+            borderRadius: designTokens.borderRadius.md,
+          }}
+        >
+          <Checkbox checked={skipExisting} onChange={e => setSkipExisting(e.target.checked)}>
+            跳过已存在的网卡
+          </Checkbox>
+          <Checkbox checked={updateExisting} onChange={e => setUpdateExisting(e.target.checked)}>
+            更新已存在的网卡
+          </Checkbox>
+        </div>
+
+        {importErrors.length > 0 && (
+          <div style={{ marginTop: '16px' }}>
+            <Alert
+              message={`发现 ${importErrors.length} 个错误`}
+              description={
+                <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                  <Table
+                    columns={[
+                      {
+                        title: '行号',
+                        dataIndex: 'row',
+                        key: 'row',
+                        width: 70,
+                        render: row => <Tag color="red">{row}</Tag>,
+                      },
+                      {
+                        title: '字段',
+                        dataIndex: 'field',
+                        key: 'field',
+                        width: 100,
+                        render: field => <Text strong>{field}</Text>,
+                      },
+                      {
+                        title: '错误值',
+                        dataIndex: 'value',
+                        key: 'value',
+                        width: 120,
+                        render: val => <Text code>{val}</Text>,
+                      },
+                      {
+                        title: '错误原因',
+                        dataIndex: 'error',
+                        key: 'error',
+                        render: err => <Text type="danger">{err}</Text>,
+                      },
+                      {
+                        title: '修正建议',
+                        dataIndex: 'suggestion',
+                        key: 'suggestion',
+                        render: sug => <Text type="secondary">{sug}</Text>,
+                      },
+                    ]}
+                    dataSource={importErrors}
+                    rowKey={(record, index) => `error-${index}`}
+                    pagination={{
+                      pageSize: 5,
+                      size: 'small',
+                      showSizeChanger: false,
+                      showTotal: total => `共 ${total} 条错误`,
+                    }}
+                    size="small"
+                    scroll={{ x: 600 }}
+                    style={{ marginTop: '8px' }}
+                  />
+                </div>
+              }
+              type="error"
+              showIcon
+              style={{ borderRadius: designTokens.borderRadius.md }}
+            />
+          </div>
+        )}
+
+        {importPreview.length > 0 && (
+          <div style={{ marginTop: '24px' }}>
+            <Alert
+              message={
+                <span>
+                  成功解析 {importPreview.length} 条有效数据
+                  {importErrors.length > 0 && (
+                    <span style={{ color: '#ff4d4f', marginLeft: 8 }}>
+                      （{importErrors.length} 条错误）
+                    </span>
+                  )}
+                </span>
+              }
+              type={importErrors.length > 0 ? 'warning' : 'success'}
+              showIcon
+              style={{ marginBottom: '16px', borderRadius: designTokens.borderRadius.md }}
+            />
+            <div style={{ marginBottom: '8px', fontWeight: 500, color: designTokens.colors.neutral[700] }}>
+              数据预览（前10条）
+            </div>
+            <Table
+              columns={[
+                { title: '设备ID', dataIndex: '设备ID', key: 'deviceId', width: 120 },
+                { title: '网卡名称', dataIndex: '网卡名称', key: 'name', width: 120 },
+                { title: '插槽编号', dataIndex: '插槽编号', key: 'slotNumber', width: 100 },
+                { title: '网卡型号', dataIndex: '网卡型号', key: 'model', width: 120 },
+                { title: '制造商', dataIndex: '制造商', key: 'manufacturer', width: 100 },
+                { title: '描述', dataIndex: '描述', key: 'description', ellipsis: true },
+              ]}
+              dataSource={importPreview.slice(0, 10)}
+              rowKey={(record, index) => `import-row-${index}`}
+              pagination={false}
+              size="small"
+              scroll={{ x: 700 }}
+              style={{ borderRadius: designTokens.borderRadius.md }}
+            />
+            {importPreview.length > 10 && (
+              <div style={{ textAlign: 'center', marginTop: '12px', color: designTokens.colors.neutral[500] }}>
+                仅显示前10条数据，共 {importPreview.length} 条
+              </div>
+            )}
+          </div>
+        )}
+
+        {importing && (
+          <div style={{ textAlign: 'center', padding: '40px 24px' }}>
+            <Spin size="large" tip="导入中..." />
+            <div style={{ marginTop: '24px' }}>
+              <Progress
+                percent={Math.round((importProgress.current / importProgress.total) * 100)}
+                status="active"
+                strokeColor={{
+                  '0%': designTokens.colors.primary.main,
+                  '100%': designTokens.colors.success.main,
+                }}
+                style={{ borderRadius: designTokens.borderRadius.sm }}
+              />
+              <div style={{ marginTop: '16px', color: designTokens.colors.neutral[600] }}>
+                正在导入 {importProgress.current} / {importProgress.total} 条数据...
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+export default NetworkCardImportModal;
diff --git a/frontend/src/components/NetworkCardPanel.jsx b/frontend/src/components/NetworkCardPanel.jsx
index 05f94db..eebdb6c 100644
--- a/frontend/src/components/NetworkCardPanel.jsx
+++ b/frontend/src/components/NetworkCardPanel.jsx
@@ -426,6 +426,8 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
         }}
         onSuccess={handleCreatePortSuccess}
         defaultNicId={selectedCard?.nicId}
+        networkCard={selectedCard}
+        disableNicChange={true}
       />
     </div>
   );
diff --git a/frontend/src/components/PortAddGuideModal.jsx b/frontend/src/components/PortAddGuideModal.jsx
new file mode 100644
index 0000000..224dec4
--- /dev/null
+++ b/frontend/src/components/PortAddGuideModal.jsx
@@ -0,0 +1,323 @@
+import React from 'react';
+import { Modal, Button, Space, Divider, Alert } from 'antd';
+import {
+  SwapOutlined,
+  CloudServerOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  ArrowRightOutlined,
+} from '@ant-design/icons';
+import CloseButton from './CloseButton';
+import { designTokens } from '../config/theme';
+
+const PortAddGuideModal = ({ visible, onClose, onSelectType }) => {
+  const handleSelectSwitch = () => {
+    onSelectType('switch');
+    onClose();
+  };
+
+  const handleSelectServer = () => {
+    onSelectType('server');
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={visible}
+      closeIcon={<CloseButton />}
+      onCancel={onClose}
+      footer={null}
+      width={560}
+      zIndex={1050}
+      style={{ borderRadius: '16px', top: 80 }}
+      styles={{ body: { padding: 0 } }}
+      destroyOnClose
+    >
+      <div style={{
+        background: `linear-gradient(135deg, ${designTokens.colors.primary.main} 0%, ${designTokens.colors.primary.dark} 100%)`,
+        padding: '28px 24px',
+        borderRadius: '16px 16px 0 0',
+      }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '14px',
+        }}>
+          <div style={{
+            width: '52px',
+            height: '52px',
+            borderRadius: '14px',
+            background: 'rgba(255,255,255,0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#fff',
+          }}>
+            <SwapOutlined style={{ fontSize: '26px' }} />
+          </div>
+          <div>
+            <h3 style={{
+              margin: 0,
+              color: '#fff',
+              fontSize: '20px',
+              fontWeight: 600,
+            }}>
+              选择端口类型
+            </h3>
+            <p style={{
+              margin: '4px 0 0',
+              color: 'rgba(255,255,255,0.85)',
+              fontSize: '13px',
+            }}>
+              请选择要添加的端口类型
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ padding: '24px' }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: '16px',
+          marginBottom: '20px',
+        }}>
+          <button
+            onClick={handleSelectSwitch}
+            style={{
+              padding: '24px 20px',
+              border: `2px solid ${designTokens.colors.success.light}40`,
+              borderRadius: '14px',
+              background: designTokens.colors.success.bg,
+              cursor: 'pointer',
+              transition: 'all 0.25s ease',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '12px',
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.borderColor = designTokens.colors.success.main;
+              e.currentTarget.style.boxShadow = `0 4px 16px ${designTokens.colors.success.light}30`;
+              e.currentTarget.style.transform = 'translateY(-2px)';
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.borderColor = `${designTokens.colors.success.light}40`;
+              e.currentTarget.style.boxShadow = 'none';
+              e.currentTarget.style.transform = 'translateY(0)';
+            }}
+          >
+            <div style={{
+              width: '56px',
+              height: '56px',
+              borderRadius: '14px',
+              background: designTokens.colors.success.gradient,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+              boxShadow: '0 4px 12px rgba(16, 185, 129, 0.3)',
+            }}>
+              <SwapOutlined style={{ fontSize: '28px' }} />
+            </div>
+            <div style={{ textAlign: 'center' }}>
+              <div style={{
+                fontSize: '16px',
+                fontWeight: 600,
+                color: designTokens.colors.neutral[800],
+                marginBottom: '4px',
+              }}>
+                交换机端口
+              </div>
+              <div style={{
+                fontSize: '12px',
+                color: designTokens.colors.neutral[500],
+              }}>
+                直接添加端口
+              </div>
+            </div>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              color: designTokens.colors.success.main,
+              fontSize: '13px',
+              fontWeight: 500,
+            }}>
+              <span>立即添加</span>
+              <ArrowRightOutlined style={{ fontSize: '11px' }} />
+            </div>
+          </button>
+
+          <button
+            onClick={handleSelectServer}
+            style={{
+              padding: '24px 20px',
+              border: `2px solid ${designTokens.colors.primary.light}40`,
+              borderRadius: '14px',
+              background: designTokens.colors.primary.bg,
+              cursor: 'pointer',
+              transition: 'all 0.25s ease',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '12px',
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.borderColor = designTokens.colors.primary.main;
+              e.currentTarget.style.boxShadow = `0 4px 16px ${designTokens.colors.primary.light}30`;
+              e.currentTarget.style.transform = 'translateY(-2px)';
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.borderColor = `${designTokens.colors.primary.light}40`;
+              e.currentTarget.style.boxShadow = 'none';
+              e.currentTarget.style.transform = 'translateY(0)';
+            }}
+          >
+            <div style={{
+              width: '56px',
+              height: '56px',
+              borderRadius: '14px',
+              background: designTokens.colors.primary.gradient,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+              boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
+            }}>
+              <CloudServerOutlined style={{ fontSize: '28px' }} />
+            </div>
+            <div style={{ textAlign: 'center' }}>
+              <div style={{
+                fontSize: '16px',
+                fontWeight: 600,
+                color: designTokens.colors.neutral[800],
+                marginBottom: '4px',
+              }}>
+                服务器端口
+              </div>
+              <div style={{
+                fontSize: '12px',
+                color: designTokens.colors.neutral[500],
+              }}>
+                需关联网卡
+              </div>
+            </div>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              color: designTokens.colors.primary.main,
+              fontSize: '13px',
+              fontWeight: 500,
+            }}>
+              <span>立即添加</span>
+              <ArrowRightOutlined style={{ fontSize: '11px' }} />
+            </div>
+          </button>
+        </div>
+
+        <Divider style={{ margin: '0 0 20px' }}>
+          <span style={{
+            fontSize: '12px',
+            color: designTokens.colors.neutral[400],
+            fontWeight: 400,
+          }}>
+            端口类型说明
+          </span>
+        </Divider>
+
+        <div style={{
+          background: designTokens.colors.neutral[50],
+          borderRadius: '12px',
+          padding: '16px',
+          border: `1px solid ${designTokens.colors.neutral[200]}`,
+        }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
+              <CheckCircleOutlined style={{
+                color: designTokens.colors.success.main,
+                fontSize: '16px',
+                marginTop: '2px',
+                flexShrink: 0,
+              }} />
+              <div>
+                <div style={{
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  color: designTokens.colors.neutral[800],
+                  marginBottom: '2px',
+                }}>
+                  交换机端口
+                </div>
+                <div style={{
+                  fontSize: '12px',
+                  color: designTokens.colors.neutral[500],
+                  lineHeight: 1.6,
+                }}>
+                  交换机端口用于网络设备间的连接，可以直接创建端口，无需关联网卡。适用于创建 Uplink 端口、Trunk 端口等。
+                </div>
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
+              <ExclamationCircleOutlined style={{
+                color: designTokens.colors.warning.main,
+                fontSize: '16px',
+                marginTop: '2px',
+                flexShrink: 0,
+              }} />
+              <div>
+                <div style={{
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  color: designTokens.colors.neutral[800],
+                  marginBottom: '2px',
+                }}>
+                  服务器端口
+                </div>
+                <div style={{
+                  fontSize: '12px',
+                  color: designTokens.colors.neutral[500],
+                  lineHeight: 1.6,
+                }}>
+                  服务器端口必须关联网卡（Network Card），每个端口需要对应一个物理或虚拟网卡。请先在网卡管理中添加网卡。
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Alert
+          message=""
+          description={
+            <div style={{ fontSize: '12px', lineHeight: 1.6 }}>
+              <strong>提示：</strong>如果服务器尚未添加网卡，系统会引导您先前往网卡管理添加网卡后再创建端口。
+            </div>
+          }
+          type="info"
+          showIcon
+          icon={<ExclamationCircleOutlined />}
+          style={{
+            marginTop: '16px',
+            borderRadius: '8px',
+            background: designTokens.colors.info.bg,
+            border: `1px solid ${designTokens.colors.info.light}40`,
+          }}
+        />
+
+        <div style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginTop: '20px',
+        }}>
+          <Button onClick={onClose} style={{ borderRadius: '8px' }}>
+            取消
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default PortAddGuideModal;
diff --git a/frontend/src/components/PortCreateModal.jsx b/frontend/src/components/PortCreateModal.jsx
index fbdb7d2..efa6b6e 100644
--- a/frontend/src/components/PortCreateModal.jsx
+++ b/frontend/src/components/PortCreateModal.jsx
@@ -12,6 +12,8 @@ import {
   Alert,
   Tag,
   Divider,
+  Row,
+  Col,
 } from 'antd';
 import {
   PlusOutlined,
@@ -89,34 +91,38 @@ function generatePortNames(portName) {
   return [portName];
 }
 
-function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, networkCards = [] }) {
+function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, networkCards = [], networkCard, disableNicChange = false }) {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [previewPorts, setPreviewPorts] = useState([]);
   const [showPreview, setShowPreview] = useState(false);
   const [nicList, setNicList] = useState([]);
-  const [activeStep, setActiveStep] = useState(1);
   const prevVisibleRef = useRef(false);
 
   useEffect(() => {
     if (visible && !prevVisibleRef.current) {
       setPreviewPorts([]);
       setShowPreview(false);
-      setActiveStep(1);
       form.resetFields();
 
-      if (defaultNicId) {
-        form.setFieldsValue({ nicId: defaultNicId });
-      }
-
-      if (device?.deviceId && (!networkCards || networkCards.length === 0)) {
-        fetchNetworkCards();
-      } else if (networkCards && networkCards.length > 0) {
-        setNicList(networkCards);
+      if (networkCard) {
+        setNicList([networkCard]);
+        if (networkCard.nicId) {
+          form.setFieldsValue({ nicId: networkCard.nicId });
+        }
+      } else {
+        if (defaultNicId) {
+          form.setFieldsValue({ nicId: defaultNicId });
+        }
+        if (device?.deviceId && (!networkCards || networkCards.length === 0)) {
+          fetchNetworkCards();
+        } else if (networkCards && networkCards.length > 0) {
+          setNicList(networkCards);
+        }
       }
     }
     prevVisibleRef.current = visible;
-  }, [visible, device, defaultNicId, networkCards, form]);
+  }, [visible, device, defaultNicId, networkCards, networkCard, form]);
 
   const fetchNetworkCards = async () => {
     try {
@@ -147,11 +153,12 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       setLoading(true);
 
       const portNames = generatePortNames(values.portName);
+      const finalNicId = disableNicChange && defaultNicId ? defaultNicId : (values.nicId || null);
 
       if (portNames.length === 1) {
         await axios.post('/api/device-ports', {
           deviceId: device.deviceId,
-          nicId: values.nicId || null,
+          nicId: finalNicId,
           portName: portNames[0],
           portType: values.portType,
           portSpeed: values.portSpeed,
@@ -164,7 +171,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
         const portsData = portNames.map((portName, index) => ({
           portId: `PORT-${Date.now()}-${index}`,
           deviceId: device.deviceId,
-          nicId: values.nicId || null,
+          nicId: finalNicId,
           portName,
           portType: values.portType,
           portSpeed: values.portSpeed,
@@ -232,61 +239,37 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       padding: '24px',
       background: '#fff',
     },
-    stepContainer: {
+    twoColumnLayout: {
+      marginBottom: '16px',
+    },
+    column: {
       display: 'flex',
-      justifyContent: 'center',
-      marginBottom: '24px',
-    },
-    step: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8px',
-      padding: '8px 20px',
-      borderRadius: '20px',
-      fontSize: '14px',
-      fontWeight: 500,
-      cursor: 'pointer',
-      transition: 'all 0.3s ease',
-    },
-    stepActive: {
-      background: designTokens.colors.primary.bg,
-      color: designTokens.colors.primary.main,
-    },
-    stepInactive: {
-      background: designTokens.colors.neutral[100],
-      color: designTokens.colors.neutral[500],
-    },
-    stepNumber: {
-      width: '24px',
-      height: '24px',
-      borderRadius: '50%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      fontSize: '12px',
-      fontWeight: 600,
+      flexDirection: 'column',
+      gap: '16px',
+      height: '100%',
     },
     section: {
       background: designTokens.colors.neutral[50],
       borderRadius: '12px',
-      padding: '20px',
-      marginBottom: '16px',
+      padding: '16px',
       border: `1px solid ${designTokens.colors.neutral[200]}`,
     },
     sectionTitle: {
-      fontSize: '14px',
+      fontSize: '13px',
       fontWeight: 600,
       color: designTokens.colors.neutral[800],
-      marginBottom: '16px',
+      marginBottom: '12px',
       display: 'flex',
       alignItems: 'center',
       gap: '8px',
+      paddingBottom: '8px',
+      borderBottom: `1px solid ${designTokens.colors.neutral[200]}`,
     },
     fieldLabel: {
-      fontSize: '13px',
+      fontSize: '12px',
       fontWeight: 500,
       color: designTokens.colors.neutral[700],
-      marginBottom: '6px',
+      marginBottom: '4px',
     },
     input: {
       borderRadius: '8px',
@@ -299,16 +282,16 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
     },
     previewCard: {
       background: `linear-gradient(135deg, ${designTokens.colors.info.bg} 0%, ${designTokens.colors.primary.bg} 100%)`,
-      borderRadius: '12px',
-      padding: '16px',
-      marginTop: '16px',
+      borderRadius: '10px',
+      padding: '12px',
+      marginTop: '12px',
       border: `1px solid ${designTokens.colors.primary.light}20`,
     },
     previewTitle: {
-      fontSize: '13px',
+      fontSize: '12px',
       fontWeight: 600,
       color: designTokens.colors.primary.dark,
-      marginBottom: '12px',
+      marginBottom: '8px',
       display: 'flex',
       alignItems: 'center',
       gap: '6px',
@@ -316,15 +299,16 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
     previewTags: {
       display: 'flex',
       flexWrap: 'wrap',
-      gap: '6px',
+      gap: '4px',
     },
     previewTag: {
       background: '#fff',
       border: `1px solid ${designTokens.colors.primary.light}`,
       color: designTokens.colors.primary.main,
-      borderRadius: '6px',
-      fontSize: '12px',
+      borderRadius: '4px',
+      fontSize: '11px',
       fontWeight: 500,
+      padding: '2px 6px',
     },
     footer: {
       padding: '16px 24px',
@@ -343,7 +327,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       gap: '12px',
     },
     button: {
-      height: '40px',
+      height: '38px',
       borderRadius: '8px',
       fontWeight: 500,
       transition: 'all 0.2s ease',
@@ -357,28 +341,33 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       background: designTokens.colors.success.bg,
       border: `1px solid ${designTokens.colors.success.light}`,
       borderRadius: '8px',
-      padding: '12px 16px',
+      padding: '10px 12px',
       marginTop: '8px',
       display: 'flex',
       alignItems: 'center',
-      gap: '10px',
+      gap: '8px',
     },
     nicSelectedIcon: {
       color: designTokens.colors.success.main,
-      fontSize: '18px',
+      fontSize: '16px',
     },
     nicSelectedInfo: {
       flex: 1,
     },
     nicSelectedName: {
-      fontSize: '14px',
+      fontSize: '13px',
       fontWeight: 500,
       color: designTokens.colors.success.dark,
     },
     nicSelectedSlot: {
-      fontSize: '12px',
+      fontSize: '11px',
       color: designTokens.colors.success.main,
     },
+    alertBox: {
+      borderRadius: '8px',
+      background: designTokens.colors.info.bg,
+      border: `1px solid ${designTokens.colors.info.light}40`,
+    },
   };
 
   return (
@@ -387,7 +376,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       closeIcon={<CloseButton />}
       onCancel={handleCancel}
       footer={null}
-      width={600}
+      width={720}
       zIndex={1050}
       style={styles.modal}
       styles={{ body: { padding: 0 } }}
@@ -411,221 +400,216 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       </div>
 
       <div style={styles.body}>
-        <div style={styles.stepContainer}>
-          <div style={{ ...styles.step, ...(activeStep === 1 ? styles.stepActive : styles.stepInactive) }}>
-            <div style={{
-              ...styles.stepNumber,
-              background: activeStep === 1 ? designTokens.colors.primary.main : 'transparent',
-              color: activeStep === 1 ? '#fff' : designTokens.colors.neutral[500],
-              border: activeStep === 1 ? 'none' : `1px solid ${designTokens.colors.neutral[400]}`,
-            }}>
-              1
-            </div>
-            <span>基本信息</span>
-          </div>
-          <div style={{
-            width: '40px',
-            height: '2px',
-            background: activeStep === 2 ? designTokens.colors.primary.main : designTokens.colors.neutral[300],
-            margin: '0 8px',
-            alignSelf: 'center',
-          }} />
-          <div style={{ ...styles.step, ...(activeStep === 2 ? styles.stepActive : styles.stepInactive) }}>
-            <div style={{
-              ...styles.stepNumber,
-              background: activeStep === 2 ? designTokens.colors.primary.main : 'transparent',
-              color: activeStep === 2 ? '#fff' : designTokens.colors.neutral[500],
-              border: activeStep === 2 ? 'none' : `1px solid ${designTokens.colors.neutral[400]}`,
-            }}>
-              2
-            </div>
-            <span>高级配置</span>
-          </div>
-        </div>
-
         <Form
           form={form}
           layout="vertical"
           initialValues={{
             portType: 'RJ45',
             portSpeed: '1G',
-            status: 'free',
+            status: 'occupied',
           }}
-          onValuesChange={handleValuesChange}
         >
-          <div style={styles.section}>
-            <div style={styles.sectionTitle}>
-              <TagOutlined style={{ color: designTokens.colors.primary.main }} />
-              端口标识
+          <Alert
+            message="格式说明"
+          description={
+            <div style={{ fontSize: '11px', lineHeight: '1.6' }}>
+              <div>• <strong>单个端口：</strong>eth0/1、gigabitethernet1/0/1</div>
+              <div>• <strong>端口范围：</strong>1/0/1-1/0/48（创建 1/0/1 到 1/0/48 共48个端口）</div>
             </div>
+          }
+          type="info"
+          showIcon
+          style={{ ...styles.alertBox, marginBottom: '16px' }}
+        />
 
-            <Form.Item
-              name="portName"
-              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();
+        <Row gutter={20} style={{ marginBottom: '16px' }}>
+          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+            <div style={{ ...styles.section, height: '100%' }}>
+              <div style={styles.sectionTitle}>
+                <TagOutlined style={{ color: designTokens.colors.primary.main }} />
+                端口标识
+              </div>
+
+              <Form.Item
+                name="portName"
+                rules={[
+                  { required: true, message: '请输入端口名称' },
+                  {
+                    pattern: /^[\w\/:\-]+$/,
+                    message: '端口名称格式不正确',
                   },
-                },
-              ]}
-            >
-              <Input
-                size="large"
-                placeholder="例如: eth0/1 或 1/0/1-1/0/48"
-                prefix={<TagOutlined style={{ color: designTokens.colors.neutral[400] }} />}
-                style={{ borderRadius: '8px' }}
-                suffix={
-                  <Tooltip title="支持单个端口或端口范围（如 1/0/1-1/0/48）">
-                    <InfoCircleOutlined style={{ color: designTokens.colors.neutral[400] }} />
-                  </Tooltip>
-                }
-              />
-            </Form.Item>
-
-            {showPreview && (
-              <div style={styles.previewCard}>
-                <div style={styles.previewTitle}>
-                  <ThunderboltOutlined />
-                  预览：将创建 {previewPorts.length} 个端口
-                </div>
-                <div style={styles.previewTags}>
-                  {previewPorts.map((port, index) => (
-                    <Tag key={index} style={styles.previewTag}>
-                      {port}
-                    </Tag>
-                  ))}
-                  {parsePortRange(form.getFieldValue('portName'))?.portCount > previewPorts.length && (
-                    <Tag style={{ ...styles.previewTag, background: designTokens.colors.neutral[100] }}>
-                      ...等 {parsePortRange(form.getFieldValue('portName'))?.portCount} 个
-                    </Tag>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          <div style={styles.section}>
-            <div style={styles.sectionTitle}>
-              <LinkOutlined style={{ color: designTokens.colors.primary.main }} />
-              网卡关联
-            </div>
-
-            <Form.Item name="nicId" style={{ marginBottom: 0 }}>
-              <Select
-                size="large"
-                placeholder="选择网卡（可选）"
-                allowClear
-                showSearch
-                optionFilterProp="children"
-                style={{ width: '100%', borderRadius: '8px' }}
-                suffixIcon={<InfoCircleOutlined style={{ color: designTokens.colors.neutral[400] }} />}
+                  {
+                    validator: (_, value) => {
+                      if (!value) return Promise.resolve();
+                      const ports = generatePortNames(value);
+                      if (ports.length > 1000) {
+                        return Promise.reject(new Error('单次最多创建1000个端口'));
+                      }
+                      return Promise.resolve();
+                    },
+                  },
+                ]}
               >
-                {nicList.map(nic => (
-                  <Option key={nic.nicId} value={nic.nicId}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 0' }}>
-                      <div>
-                        <div style={{ fontWeight: 500 }}>{nic.name}</div>
-                        {nic.slotNumber && (
-                          <div style={{ fontSize: '12px', color: designTokens.colors.neutral[500] }}>
-                            插槽 {nic.slotNumber}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
+                <Input
+                  size="small"
+                  placeholder="例如: eth0/1 或 1/0/1-1/0/48"
+                  prefix={<TagOutlined style={{ color: designTokens.colors.neutral[400], fontSize: '12px' }} />}
+                  style={{ borderRadius: '6px' }}
+                  suffix={
+                    <Tooltip title="支持单个端口或端口范围（如 1/0/1-1/0/48）">
+                      <InfoCircleOutlined style={{ color: designTokens.colors.neutral[400], fontSize: '11px' }} />
+                    </Tooltip>
+                  }
+                />
+              </Form.Item>
 
-            {selectedNic && (
-              <div style={styles.nicSelectedCard}>
-                <div style={styles.nicSelectedIcon}>
-                  <CheckCircleOutlined />
+              {showPreview && (
+                <div style={styles.previewCard}>
+                  <div style={styles.previewTitle}>
+                    <ThunderboltOutlined />
+                    将创建 {previewPorts.length} 个端口
+                  </div>
+                  <div style={styles.previewTags}>
+                    {previewPorts.map((port, index) => (
+                      <Tag key={index} style={styles.previewTag}>
+                        {port}
+                      </Tag>
+                    ))}
+                    {parsePortRange(form.getFieldValue('portName'))?.portCount > previewPorts.length && (
+                      <Tag style={{ ...styles.previewTag, background: designTokens.colors.neutral[100] }}>
+                        ...等 {parsePortRange(form.getFieldValue('portName'))?.portCount} 个
+                      </Tag>
+                    )}
+                  </div>
                 </div>
-                <div style={styles.nicSelectedInfo}>
-                  <div style={styles.nicSelectedName}>{selectedNic.name}</div>
-                  {selectedNic.slotNumber && (
-                    <div style={styles.nicSelectedSlot}>插槽 {selectedNic.slotNumber}</div>
-                  )}
-                </div>
-                <Tag color="success">已选择</Tag>
-              </div>
-            )}
-
-            <div style={{ fontSize: '12px', color: designTokens.colors.neutral[500], marginTop: '8px' }}>
-              <InfoCircleOutlined style={{ marginRight: '4px' }} />
-              不选择则端口不归属于任何网卡
+              )}
             </div>
+          </Col>
+
+          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+            <div style={{ ...styles.section, height: '100%' }}>
+              <div style={styles.sectionTitle}>
+                <LinkOutlined style={{ color: designTokens.colors.primary.main }} />
+                网卡关联
+              </div>
+
+              {disableNicChange && defaultNicId ? (
+                <div style={{ ...styles.nicSelectedCard, background: designTokens.colors.success.bg, border: `1px solid ${designTokens.colors.success.light}` }}>
+                  <div style={{ ...styles.nicSelectedIcon, color: designTokens.colors.success.main }}>
+                    <CheckCircleOutlined />
+                  </div>
+                  <div style={styles.nicSelectedInfo}>
+                    <div style={{ ...styles.nicSelectedName, color: designTokens.colors.success.dark }}>
+                      {nicList.find(nic => nic.nicId === defaultNicId)?.name || '管理口'}
+                    </div>
+                    {nicList.find(nic => nic.nicId === defaultNicId)?.slotNumber && (
+                      <div style={{ ...styles.nicSelectedSlot, color: designTokens.colors.success.main }}>
+                        插槽 {nicList.find(nic => nic.nicId === defaultNicId)?.slotNumber}
+                      </div>
+                    )}
+                  </div>
+                  <Tag color="success">已绑定</Tag>
+                </div>
+              ) : (
+                <>
+                  <Form.Item name="nicId" style={{ marginBottom: 0 }}>
+                    <Select
+                      size="small"
+                      placeholder="选择网卡（可选）"
+                      allowClear
+                      showSearch
+                      optionFilterProp="children"
+                      style={{ width: '100%', borderRadius: '6px' }}
+                      suffixIcon={<InfoCircleOutlined style={{ color: designTokens.colors.neutral[400] }} />}
+                    >
+                      {nicList.map(nic => (
+                        <Option key={nic.nicId} value={nic.nicId}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0' }}>
+                            <div>
+                              <div style={{ fontWeight: 500, fontSize: '12px' }}>{nic.name}</div>
+                              {nic.slotNumber && (
+                                <div style={{ fontSize: '11px', color: designTokens.colors.neutral[500] }}>
+                                  插槽 {nic.slotNumber}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </Option>
+                      ))}
+                    </Select>
+                  </Form.Item>
+
+                  <div style={{ fontSize: '11px', color: designTokens.colors.neutral[500], marginTop: '6px' }}>
+                    <InfoCircleOutlined style={{ marginRight: '4px' }} />
+                    不选择则端口不归属于任何网卡
+                  </div>
+                </>
+              )}
+            </div>
+          </Col>
+        </Row>
+
+        <div style={{ ...styles.section, marginBottom: '16px' }}>
+          <div style={styles.sectionTitle}>
+            <ThunderboltOutlined style={{ color: designTokens.colors.primary.main }} />
+            端口属性
           </div>
 
-          <div style={styles.section}>
-            <div style={styles.sectionTitle}>
-              <ThunderboltOutlined style={{ color: designTokens.colors.primary.main }} />
-              端口属性
-            </div>
-
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+          <Row gutter={12}>
+            <Col span={12}>
               <Form.Item
                 name="portType"
                 label={<span style={styles.fieldLabel}>端口类型</span>}
-                rules={[{ required: true, message: '请选择端口类型' }]}
+                rules={[{ required: true, message: '请选择' }]}
               >
-                <Select size="large" style={{ width: '100%', borderRadius: '8px' }}>
+                <Select size="small" style={{ width: '100%', borderRadius: '6px' }}>
                   <Option value="RJ45">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: designTokens.colors.device.server }} />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <div style={{ width: '6px', height: '6px', borderRadius: '2px', background: designTokens.colors.device.server }} />
                       RJ45
                     </div>
                   </Option>
                   <Option value="SFP">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: designTokens.colors.device.switch }} />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <div style={{ width: '6px', height: '6px', borderRadius: '2px', background: designTokens.colors.device.switch }} />
                       SFP
                     </div>
                   </Option>
                   <Option value="SFP+">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: designTokens.colors.purple.main }} />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <div style={{ width: '6px', height: '6px', borderRadius: '2px', background: designTokens.colors.purple.main }} />
                       SFP+
                     </div>
                   </Option>
                   <Option value="SFP28">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: designTokens.colors.info.main }} />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <div style={{ width: '6px', height: '6px', borderRadius: '2px', background: designTokens.colors.info.main }} />
                       SFP28
                     </div>
                   </Option>
                   <Option value="QSFP">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: designTokens.colors.warning.main }} />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <div style={{ width: '6px', height: '6px', borderRadius: '2px', background: designTokens.colors.warning.main }} />
                       QSFP
                     </div>
                   </Option>
                   <Option value="QSFP28">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: designTokens.colors.secondary.main }} />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <div style={{ width: '6px', height: '6px', borderRadius: '2px', background: designTokens.colors.secondary.main }} />
                       QSFP28
                     </div>
                   </Option>
                 </Select>
               </Form.Item>
+            </Col>
 
+            <Col span={12}>
               <Form.Item
                 name="portSpeed"
                 label={<span style={styles.fieldLabel}>端口速率</span>}
-                rules={[{ required: true, message: '请选择端口速率' }]}
+                rules={[{ required: true, message: '请选择' }]}
               >
-                <Select size="large" style={{ width: '100%', borderRadius: '8px' }}>
+                <Select size="small" style={{ width: '100%', borderRadius: '6px' }}>
                   <Option value="100M">100M</Option>
                   <Option value="1G">1G</Option>
                   <Option value="10G">10G</Option>
@@ -634,74 +618,59 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
                   <Option value="100G">100G</Option>
                 </Select>
               </Form.Item>
-            </div>
+            </Col>
+          </Row>
 
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+          <Row gutter={12}>
+            <Col span={12}>
               <Form.Item
                 name="vlanId"
                 label={<span style={styles.fieldLabel}>VLAN ID</span>}
               >
-                <InputNumber
-                  size="large"
+                <Input
+                  size="small"
                   placeholder="1-4094"
-                  min={1}
-                  max={4094}
-                  style={{ width: '100%', borderRadius: '8px' }}
+                  style={{ width: '100%', borderRadius: '6px' }}
                 />
               </Form.Item>
+            </Col>
 
+            <Col span={12}>
               <Form.Item
                 name="status"
                 label={<span style={styles.fieldLabel}>状态</span>}
-                rules={[{ required: true, message: '请选择状态' }]}
+                rules={[{ required: true, message: '请选择' }]}
               >
-                <Select size="large" style={{ width: '100%', borderRadius: '8px' }}>
+                <Select size="small" style={{ width: '100%', borderRadius: '6px' }}>
                   <Option value="free">
-                    <Tag color="success">空闲</Tag>
+                    <Tag color="success" style={{ margin: 0 }}>空闲</Tag>
                   </Option>
                   <Option value="occupied">
-                    <Tag color="warning">占用</Tag>
+                    <Tag color="warning" style={{ margin: 0 }}>占用</Tag>
                   </Option>
                   <Option value="fault">
-                    <Tag color="error">故障</Tag>
+                    <Tag color="error" style={{ margin: 0 }}>故障</Tag>
                   </Option>
                 </Select>
               </Form.Item>
-            </div>
+            </Col>
+          </Row>
+        </div>
+
+        <div style={styles.section}>
+          <div style={styles.sectionTitle}>
+            <FileTextOutlined style={{ color: designTokens.colors.primary.main }} />
+            描述信息
           </div>
 
-          <div style={styles.section}>
-            <div style={styles.sectionTitle}>
-              <FileTextOutlined style={{ color: designTokens.colors.primary.main }} />
-              描述信息
-            </div>
-
-            <Form.Item name="description" style={{ marginBottom: 0 }}>
-              <TextArea
-                rows={3}
-                placeholder="请输入描述信息（可选）"
-                style={{ borderRadius: '8px', resize: 'none' }}
-              />
-            </Form.Item>
-          </div>
-
-          <Alert
-            message="格式说明"
-            description={
-              <div style={{ fontSize: '12px', lineHeight: '1.8' }}>
-                <div>• <strong>单个端口：</strong>eth0/1、gigabitethernet1/0/1</div>
-                <div>• <strong>端口范围：</strong>1/0/1-1/0/48（创建 1/0/1 到 1/0/48 共48个端口）</div>
-                <div>• <strong>简单范围：</strong>eth1-eth24（创建 eth1 到 eth24 共24个端口）</div>
-              </div>
-            }
-            type="info"
-            showIcon
-            style={{
-              borderRadius: '8px',
-              background: designTokens.colors.info.bg,
-              border: `1px solid ${designTokens.colors.info.light}40`,
-            }}
-          />
+          <Form.Item name="description" style={{ marginBottom: 0 }}>
+            <TextArea
+              rows={2}
+              placeholder="请输入描述信息（可选）"
+              style={{ borderRadius: '6px', resize: 'none' }}
+            />
+          </Form.Item>
+        </div>
         </Form>
       </div>
 
@@ -715,19 +684,19 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
         </div>
         <div style={styles.footerRight}>
           <Button
-            size="large"
+            size="middle"
             onClick={handleCancel}
-            style={{ ...styles.button, minWidth: '80px' }}
+            style={{ ...styles.button, minWidth: '70px' }}
           >
             取消
           </Button>
           <Button
             type="primary"
-            size="large"
+            size="middle"
             loading={loading}
             onClick={handleSubmit}
             icon={<PlusOutlined />}
-            style={{ ...styles.button, ...styles.buttonPrimary, minWidth: '120px' }}
+            style={{ ...styles.button, ...styles.buttonPrimary, minWidth: '100px' }}
           >
             {portCount > 1 ? `创建 ${portCount} 个` : '创建'}
           </Button>
diff --git a/frontend/src/components/PortExportModal.jsx b/frontend/src/components/PortExportModal.jsx
new file mode 100644
index 0000000..3b6ceed
--- /dev/null
+++ b/frontend/src/components/PortExportModal.jsx
@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import { Modal, Form, Select, Button, Typography, Alert } from 'antd';
+import { ExportOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { designTokens } from '../config/theme';
+
+const { Option } = Select;
+const { Text } = Typography;
+
+const modalHeaderStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  fontSize: '18px',
+  fontWeight: 600,
+};
+
+const PortExportModal = ({
+  visible,
+  filters,
+  totalCount,
+  currentPageCount,
+  selectedCount,
+  onExport,
+  onCancel,
+}) => {
+  const [exportScope, setExportScope] = useState('filtered');
+  const [exportFormat, setExportFormat] = useState('xlsx');
+  const [exportLoading, setExportLoading] = useState(false);
+
+  const handleExport = async () => {
+    setExportLoading(true);
+    try {
+      await onExport({
+        scope: exportScope,
+        format: exportFormat,
+      });
+      onCancel();
+    } finally {
+      setExportLoading(false);
+    }
+  };
+
+  const getScopeLabel = () => {
+    switch (exportScope) {
+      case 'selected':
+        return `已选端口 (${selectedCount} 个)`;
+      case 'currentPage':
+        return `当前页 (${currentPageCount} 个)`;
+      case 'filtered':
+        return `筛选结果 (${totalCount} 个)`;
+      default:
+        return '';
+    }
+  };
+
+  const getActiveFilterInfo = () => {
+    const activeFilters = [];
+    if (filters.deviceId) activeFilters.push(`设备ID: ${filters.deviceId}`);
+    if (filters.status && filters.status !== 'all') activeFilters.push(`状态: ${filters.status}`);
+    if (filters.portType && filters.portType !== 'all') activeFilters.push(`类型: ${filters.portType}`);
+    if (filters.portSpeed && filters.portSpeed !== 'all') activeFilters.push(`速率: ${filters.portSpeed}`);
+    if (filters.searchText) activeFilters.push(`搜索: ${filters.searchText}`);
+    return activeFilters;
+  };
+
+  const activeFilters = getActiveFilterInfo();
+
+  return (
+    <Modal
+      title={
+        <div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
+          <ExportOutlined style={{ color: '#fa8c16' }} />
+          导出端口数据
+        </div>
+      }
+      open={visible}
+      onCancel={onCancel}
+      footer={[
+        <Button
+          key="cancel"
+          onClick={onCancel}
+          style={{
+            height: '40px',
+            borderRadius: designTokens.borderRadius.sm,
+            border: `1px solid ${designTokens.colors.border.light}`,
+          }}
+        >
+          取消
+        </Button>,
+        <Button
+          key="submit"
+          type="primary"
+          loading={exportLoading}
+          onClick={handleExport}
+          style={{
+            height: '40px',
+            borderRadius: designTokens.borderRadius.sm,
+            background: designTokens.colors.primary.gradient,
+            border: 'none',
+            color: '#ffffff',
+            boxShadow: designTokens.shadows.small,
+            fontWeight: '500',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          导出
+        </Button>,
+      ]}
+      destroyOnHidden
+      styles={{
+        header: {
+          borderBottom: '1px solid #f0f0f0',
+          padding: '16px 24px',
+          position: 'relative',
+        },
+        body: { padding: '24px' },
+      }}
+      width={500}
+    >
+      <Form layout="vertical">
+        <Form.Item label="导出范围">
+          <Select value={exportScope} onChange={setExportScope} style={{ width: '100%' }}>
+            <Option value="filtered">{getScopeLabel()}</Option>
+            <Option value="currentPage">当前页 ({currentPageCount} 个)</Option>
+            <Option value="all">全部端口</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="导出格式">
+          <Select value={exportFormat} onChange={setExportFormat} style={{ width: '100%' }}>
+            <Option value="xlsx">Excel 格式 (.xlsx)</Option>
+            <Option value="csv">CSV 格式 (.csv)</Option>
+          </Select>
+        </Form.Item>
+
+        {activeFilters.length > 0 && (
+          <div style={{ marginBottom: '12px' }}>
+            <Text type="secondary" style={{ fontSize: '13px' }}>
+              当前筛选条件：
+            </Text>
+            <div style={{ marginTop: '4px' }}>
+              {activeFilters.map((filter, index) => (
+                <span key={index} style={{
+                  display: 'inline-block',
+                  background: designTokens.colors.neutral[100],
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  fontSize: '12px',
+                  marginRight: '4px',
+                  marginBottom: '4px',
+                }}>
+                  {filter}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <Alert
+          type="info"
+          icon={<InfoCircleOutlined />}
+          message={
+            <div>
+              <Text style={{ fontSize: '13px' }}>
+                导出将包含以下字段：端口ID、设备ID、设备名称、设备类型、机房、机架、网卡名称、端口名称、端口类型、端口速率、状态、VLAN ID、描述、创建时间
+              </Text>
+            </div>
+          }
+          style={{ marginTop: '12px' }}
+        />
+
+        {totalCount > 50000 && (
+          <Alert
+            type="warning"
+            message={
+              <Text style={{ fontSize: '13px' }}>
+                当前数据量较大（{totalCount} 条），导出可能需要较长时间。系统最大支持导出 50000 条数据。
+              </Text>
+            }
+            style={{ marginTop: '12px' }}
+          />
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default React.memo(PortExportModal);
\ No newline at end of file
diff --git a/frontend/src/components/ServerNicCard.jsx b/frontend/src/components/ServerNicCard.jsx
new file mode 100644
index 0000000..4c77daf
--- /dev/null
+++ b/frontend/src/components/ServerNicCard.jsx
@@ -0,0 +1,235 @@
+import React from 'react';
+import { Card, Tag, Badge, Tooltip } from 'antd';
+import {
+  CloudServerOutlined,
+  GatewayOutlined,
+  DatabaseOutlined,
+  AudioOutlined,
+  QuestionOutlined,
+} from '@ant-design/icons';
+import { designTokens } from '../config/theme';
+
+const DEVICE_TYPE_CONFIG = {
+  server: {
+    icon: <CloudServerOutlined />,
+    color: designTokens.colors.device.server,
+    label: '服务器',
+  },
+  switch: {
+    icon: <GatewayOutlined />,
+    color: designTokens.colors.device.switch,
+    label: '交换机',
+  },
+  router: {
+    icon: <GatewayOutlined />,
+    color: designTokens.colors.device.router,
+    label: '路由器',
+  },
+  storage: {
+    icon: <DatabaseOutlined />,
+    color: designTokens.colors.device.storage,
+    label: '存储设备',
+  },
+  other: {
+    icon: <QuestionOutlined />,
+    color: designTokens.colors.device.other,
+    label: '其他设备',
+  },
+};
+
+const STATUS_CONFIG = {
+  running: { color: '#10b981', text: '运行中', bg: '#ecfdf5' },
+  maintenance: { color: '#3b82f6', text: '维护中', bg: '#eff6ff' },
+  offline: { color: '#6b7280', text: '离线', bg: '#f3f4f6' },
+  fault: { color: '#ef4444', text: '故障', bg: '#fef2f2' },
+  idle: { color: '#36cfc9', text: '空闲', bg: '#e6fffb' },
+};
+
+function ServerNicCard({ server, onManage }) {
+  const typeConfig = DEVICE_TYPE_CONFIG[server.type] || DEVICE_TYPE_CONFIG.other;
+  const statusConfig = STATUS_CONFIG[server.status] || STATUS_CONFIG.offline;
+
+  const nicCount = server.nicCount || (server.nics?.length || 0);
+  const totalPortCount = server.nics?.reduce((sum, nic) => sum + (nic.portCount || 0), 0) || 0;
+
+  return (
+    <Card
+      hoverable
+      onClick={onManage}
+      style={{
+        borderRadius: designTokens.borderRadius.md,
+        border: `1px solid ${designTokens.colors.border.light}`,
+        transition: 'all 0.2s ease',
+        cursor: 'pointer',
+        overflow: 'hidden',
+      }}
+      styles={{
+        body: { padding: '16px' },
+      }}
+      className="server-nic-card"
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          height: '100%',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
+          <div
+            style={{
+              width: '44px',
+              height: '44px',
+              borderRadius: '10px',
+              background: `linear-gradient(135deg, ${typeConfig.color} 0%, ${typeConfig.color}cc 100%)`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+              fontSize: '20px',
+              flexShrink: 0,
+              boxShadow: `0 4px 12px ${typeConfig.color}40`,
+            }}
+          >
+            {typeConfig.icon}
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <Tooltip title={server.name}>
+              <div
+                style={{
+                  fontWeight: 600,
+                  fontSize: '14px',
+                  color: designTokens.colors.text.primary,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  marginBottom: '4px',
+                }}
+              >
+                {server.name}
+              </div>
+            </Tooltip>
+            <Tooltip title={server.deviceId}>
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: designTokens.colors.text.tertiary,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                ID: {server.deviceId}
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Tag
+            style={{
+              background: `${typeConfig.color}15`,
+              color: typeConfig.color,
+              border: `1px solid ${typeConfig.color}30`,
+              borderRadius: '6px',
+              fontSize: '11px',
+              padding: '2px 8px',
+            }}
+          >
+            {typeConfig.icon} {typeConfig.label}
+          </Tag>
+          <Tag
+            style={{
+              background: statusConfig.bg,
+              color: statusConfig.color,
+              border: 'none',
+              borderRadius: '6px',
+              fontSize: '11px',
+              padding: '2px 8px',
+            }}
+          >
+            {statusConfig.text}
+          </Tag>
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: '8px',
+            padding: '12px',
+            background: designTokens.colors.background.secondary,
+            borderRadius: '8px',
+          }}
+        >
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '18px', fontWeight: 700, color: designTokens.colors.primary.main }}>
+              {nicCount}
+            </div>
+            <div style={{ fontSize: '11px', color: designTokens.colors.text.secondary }}>
+              网卡
+            </div>
+          </div>
+          <div style={{ textAlign: 'center', borderLeft: `1px solid ${designTokens.colors.border.light}`, borderRight: `1px solid ${designTokens.colors.border.light}` }}>
+            <div style={{ fontSize: '18px', fontWeight: 700, color: designTokens.colors.info.main }}>
+              {totalPortCount}
+            </div>
+            <div style={{ fontSize: '11px', color: designTokens.colors.text.secondary }}>
+              端口
+            </div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <Badge
+              status={server.nicCount > 0 ? 'success' : 'default'}
+              text={
+                <span style={{ fontSize: '12px', color: designTokens.colors.text.secondary }}>
+                  {server.nicCount > 0 ? '已配置' : '未配置'}
+                </span>
+              }
+            />
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <div
+            style={{
+              fontSize: '12px',
+              fontWeight: 500,
+              color: designTokens.colors.primary.main,
+              cursor: 'pointer',
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onManage();
+            }}
+          >
+            管理 →
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .server-nic-card:hover {
+          box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15) !important;
+          border-color: ${designTokens.colors.primary.light} !important;
+          transform: translateY(-2px);
+        }
+      `}</style>
+    </Card>
+  );
+}
+
+export default React.memo(ServerNicCard);
diff --git a/frontend/src/pages/DeviceManagement.jsx b/frontend/src/pages/DeviceManagement.jsx
index 48fed98..e2caf73 100644
--- a/frontend/src/pages/DeviceManagement.jsx
+++ b/frontend/src/pages/DeviceManagement.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import {
   Table,
   Button,
@@ -13,6 +13,7 @@ import {
   Tag,
   Row,
   Col,
+  Spin,
 } from 'antd';
 import {
   PlusOutlined,
@@ -130,10 +131,19 @@ function DeviceManagement() {
 
   const debouncedKeyword = useDebounce(keyword, DEBOUNCE_DELAY);
 
+  const loadMoreRef = useRef(null);
+  const hasMoreRef = useRef(true);
+  const isLoadingRef = useRef(false);
+  const [deviceLoadingMore, setDeviceLoadingMore] = useState(false);
+
   const fetchDevices = useCallback(
-    async (page = 1, pageSize = 10, forceRefresh = false) => {
+    async (page = 1, pageSize = 50, append = false) => {
       try {
-        setLoading(true);
+        if (append) {
+          setDeviceLoadingMore(true);
+        } else {
+          setLoading(true);
+        }
 
         const params = {
           page,
@@ -150,13 +160,19 @@ function DeviceManagement() {
 
         const processedDevices = deviceList.map(processDeviceData);
 
-        setAllDevices(processedDevices);
+        if (append) {
+          setAllDevices(prev => [...prev, ...processedDevices]);
+        } else {
+          setAllDevices(processedDevices);
+        }
         setPagination((prev) => ({ ...prev, current: page, pageSize, total }));
+        hasMoreRef.current = page * pageSize < total;
       } catch (error) {
         message.error('获取设备列表失败');
         console.error('获取设备列表失败:', error);
       } finally {
         setLoading(false);
+        setDeviceLoadingMore(false);
       }
     },
     [debouncedKeyword, status, type, roomId, rackId]
@@ -257,6 +273,39 @@ function DeviceManagement() {
     }
   }, [allDevices, pagination.current, pagination.pageSize]);
 
+  const handleLoadMoreDevices = useCallback(() => {
+    if (!hasMoreRef.current || isLoadingRef.current || deviceLoadingMore) return;
+    if (debouncedKeyword || status !== 'all' || type !== 'all' || roomId !== 'all' || rackId !== 'all') {
+      return;
+    }
+    isLoadingRef.current = true;
+    const nextPage = pagination.current + 1;
+    fetchDevices(nextPage, pagination.pageSize, true).then(() => {
+      isLoadingRef.current = false;
+    });
+  }, [pagination.current, pagination.pageSize, debouncedKeyword, status, type, roomId, rackId, deviceLoadingMore, fetchDevices]);
+
+  useEffect(() => {
+    if (!loadMoreRef.current) return;
+
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0].isIntersecting && hasMoreRef.current && !deviceLoadingMore) {
+          if (!debouncedKeyword && status === 'all' && type === 'all' && roomId === 'all' && rackId === 'all') {
+            handleLoadMoreDevices();
+          }
+        }
+      },
+      { threshold: 0.1, rootMargin: '100px' }
+    );
+
+    observer.observe(loadMoreRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleLoadMoreDevices, deviceLoadingMore, debouncedKeyword, status, type, roomId, rackId]);
+
   const showModal = (device = null) => {
     setEditingDevice(device);
     setModalVisible(true);
@@ -278,7 +327,7 @@ function DeviceManagement() {
       }
 
       setModalVisible(false);
-      fetchDevices();
+      fetchDevices(1, pagination.pageSize, false);
       setEditingDevice(null);
     } catch (error) {
       const errorMsg = error.response?.data?.error || error.message || '未知错误';
@@ -322,7 +371,7 @@ function DeviceManagement() {
     const currentPageData = allDevices.slice(start, end);
     setCurrentPageDevices(currentPageData);
 
-    fetchDevices(newPagination.current, newPagination.pageSize);
+    fetchDevices(newPagination.current, newPagination.pageSize, false);
   };
 
   const handleBatchDelete = async () => {
@@ -340,7 +389,7 @@ function DeviceManagement() {
           message.success(response.data.message || '批量删除成功');
           setSelectedDevices([]);
           setSelectAll(false);
-          fetchDevices(1, 10, true);
+          fetchDevices(1, 50, false);
         } catch (error) {
           message.error('批量删除失败');
           console.error('批量删除设备失败:', error);
@@ -367,7 +416,7 @@ function DeviceManagement() {
           message.success(response.data.message || '成功删除所有设备');
           setSelectedDevices([]);
           setSelectAll(false);
-          fetchDevices(1, 10, true);
+          fetchDevices(1, 50, false);
         } catch (error) {
           message.error('删除所有设备失败');
           console.error('删除所有设备失败:', error);
@@ -395,7 +444,7 @@ function DeviceManagement() {
           message.success(response.data.message || '设备已标记为空闲');
           setSelectedDevices([]);
           setSelectAll(false);
-          fetchDevices(1, 10, true);
+          fetchDevices(1, 50, false);
         } catch (error) {
           message.error(error.response?.data?.error || '标记为空闲失败');
           console.error('标记为空闲失败:', error);
@@ -415,7 +464,7 @@ function DeviceManagement() {
         try {
           await axios.delete(`/api/devices/${deviceId}`);
           message.success('设备删除成功');
-          fetchDevices();
+          fetchDevices(1, pagination.pageSize, false);
         } catch (error) {
           message.error('设备删除失败');
           console.error('设备删除失败:', error);
@@ -461,7 +510,7 @@ function DeviceManagement() {
       setBatchStatusModalVisible(false);
       setSelectedDevices([]);
       setSelectAll(false);
-      fetchDevices();
+      fetchDevices(1, pagination.pageSize, false);
     } catch (error) {
       message.error('批量状态变更失败');
       console.error('批量状态变更失败:', error);
@@ -552,7 +601,7 @@ function DeviceManagement() {
       }
 
       setTimeout(() => {
-        fetchDevices();
+        fetchDevices(1, pagination.pageSize, false);
       }, 1000);
     } catch (error) {
       let errorMessage = '导入失败';
@@ -1055,7 +1104,7 @@ function DeviceManagement() {
               </Space>
               <Button
                 icon={<ReloadOutlined />}
-                onClick={() => fetchDevices(1, pagination.pageSize, true)}
+                onClick={() => fetchDevices(1, pagination.pageSize, false)}
                 style={{
                   borderRadius: designTokens.borderRadius.medium,
                   border: `1px solid ${designTokens.colors.border.light}`,
@@ -1234,6 +1283,16 @@ function DeviceManagement() {
                 return index % 2 === 0 ? 'ant-table-row-even' : 'ant-table-row-odd';
               }}
             />
+            {hasMoreRef.current && !debouncedKeyword && status === 'all' && type === 'all' && roomId === 'all' && rackId === 'all' && (
+              <div ref={loadMoreRef} style={{ textAlign: 'center', padding: '20px' }}>
+                {deviceLoadingMore && <Spin tip="加载更多设备..." />}
+              </div>
+            )}
+            {!hasMoreRef.current && allDevices.length > 0 && (
+              <div style={{ textAlign: 'center', padding: '16px', color: '#999' }}>
+                已加载全部 {pagination.total} 个设备
+              </div>
+            )}
           </div>
         )}
       </Card>
diff --git a/frontend/src/pages/PortManagement.jsx b/frontend/src/pages/PortManagement.jsx
index 98c6470..c7da74c 100644
--- a/frontend/src/pages/PortManagement.jsx
+++ b/frontend/src/pages/PortManagement.jsx
@@ -26,6 +26,7 @@ import {
   Alert,
   Typography,
   Divider,
+  Pagination,
 } from 'antd';
 import {
   PlusOutlined,
@@ -53,11 +54,17 @@ import {
   InfoCircleOutlined,
 } from '@ant-design/icons';
 import api from '../api';
+import { roomAPI, rackAPI } from '../api/cache';
 import * as XLSX from 'xlsx';
 import Papa from 'papaparse';
 import { motion, AnimatePresence } from 'framer-motion';
 import NetworkCardPanel from '../components/NetworkCardPanel';
 import NetworkCardCreateModal from '../components/NetworkCardCreateModal';
+import NetworkCardImportModal from '../components/NetworkCardImportModal';
+import BatchImportModal from '../components/BatchImportModal';
+import PortAddGuideModal from '../components/PortAddGuideModal';
+import ServerNicCard from '../components/ServerNicCard';
+import PortExportModal from '../components/PortExportModal';
 import { designTokens } from '../config/theme';
 import CloseButton from '../components/CloseButton';
 import { debounce } from '../utils/common';
@@ -100,10 +107,6 @@ function PortManagement() {
   const [loading, setLoading] = useState(false);
   const [filters, setFilters] = useState({
     deviceId: '',
-    status: 'all',
-    portType: 'all',
-    portSpeed: 'all',
-    searchText: '',
   });
   const [modalVisible, setModalVisible] = useState(false);
   const [editingPort, setEditingPort] = useState(null);
@@ -111,6 +114,7 @@ function PortManagement() {
 
   const [importModalVisible, setImportModalVisible] = useState(false);
   const [importPreview, setImportPreview] = useState([]);
+  const [importErrors, setImportErrors] = useState([]);
   const [importProgress, setImportProgress] = useState({ current: 0, total: 0 });
   const [importing, setImporting] = useState(false);
   const [skipExisting, setSkipExisting] = useState(false);
@@ -127,6 +131,10 @@ function PortManagement() {
   const [portCreateModalVisible, setPortCreateModalVisible] = useState(false);
   const [selectedDeviceForNic, setSelectedDeviceForNic] = useState(null);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [networkCardImportModalVisible, setNetworkCardImportModalVisible] = useState(false);
+  const [batchImportModalVisible, setBatchImportModalVisible] = useState(false);
+  const [portAddGuideModalVisible, setPortAddGuideModalVisible] = useState(false);
+  const [portExportModalVisible, setPortExportModalVisible] = useState(false);
 
   // 展开的设备
   const [expandedKeys, setExpandedKeys] = useState([]);
@@ -139,45 +147,76 @@ function PortManagement() {
 
   // 设备选择弹窗 Tab 状态
   const [deviceFilterType, setDeviceFilterType] = useState('all');
+  const [guidedDeviceType, setGuidedDeviceType] = useState(null);
   const [devicePage, setDevicePage] = useState(1);
+
+  // 机房机柜筛选状态
+  const [roomList, setRoomList] = useState([]);
+  const [rackList, setRackList] = useState([]);
+  const [selectedRoomId, setSelectedRoomId] = useState(null);
+  const [selectedRackId, setSelectedRackId] = useState(null);
+
   const loadMoreRef = useRef(null);
   const hasMoreRef = useRef(true);
   const isLoadingRef = useRef(false);
 
-  const fetchPorts = useCallback(async () => {
+  // 设备卡片分页状态
+  const [deviceCardPage, setDeviceCardPage] = useState(1);
+  const deviceCardPageSize = 10;
+  const [deviceCardTotal, setDeviceCardTotal] = useState(0);
+
+  // 分页和懒加载状态
+  const [portPage, setPortPage] = useState(1);
+  const [portPageSize, setPortPageSize] = useState(50);
+  const [portTotal, setPortTotal] = useState(0);
+  const [portLoading, setPortLoading] = useState(false);
+  const [portLoadingMore, setPortLoadingMore] = useState(false);
+
+  // 服务器网卡卡片列表状态
+  const [serverNicSearchText, setServerNicSearchText] = useState('');
+  const [serverNicRoomFilter, setServerNicRoomFilter] = useState('all');
+  const [serverNicRackFilter, setServerNicRackFilter] = useState('all');
+  const [serverNicCardPage, setServerNicCardPage] = useState(1);
+  const serverNicCardPageSize = 12;
+
+  const fetchPorts = useCallback(async (page = 1, append = false) => {
+    const validPage = Number.isInteger(page) && page > 0 ? page : 1;
+    const validPageSize = Number.isInteger(portPageSize) && portPageSize > 0 ? portPageSize : 50;
     try {
-      setLoading(true);
+      if (append) {
+        setPortLoadingMore(true);
+      } else {
+        setLoading(true);
+      }
+
       const params = {
-        pageSize: 1000,
+        page: validPage,
+        pageSize: validPageSize,
       };
 
       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 api.get('/device-ports', { params });
-      const portsData = response.ports || response || [];
-      
-      // 搜索过滤
-      let filteredPorts = portsData;
-      if (filters.searchText) {
-        const searchLower = filters.searchText.toLowerCase();
-        filteredPorts = portsData.filter(port => 
-          port.portName?.toLowerCase().includes(searchLower) ||
-          port.portType?.toLowerCase().includes(searchLower) ||
-          port.description?.toLowerCase().includes(searchLower)
-        );
+      const portsData = response.ports || [];
+      const total = response.total || 0;
+      const filteredPorts = portsData;
+
+      if (append) {
+        setPorts(prev => [...prev, ...filteredPorts]);
+      } else {
+        setPorts(filteredPorts);
       }
-      
-      setPorts(filteredPorts);
+      setPortTotal(total);
+      setPortPage(page);
+      hasMoreRef.current = page * portPageSize < total;
     } catch (error) {
       message.error('获取端口列表失败');
       console.error('获取端口列表失败:', error);
     } finally {
       setLoading(false);
+      setPortLoadingMore(false);
     }
-  }, [filters]);
+  }, [filters, portPageSize]);
 
   const fetchDevices = useCallback(async (keyword = '') => {
     try {
@@ -206,10 +245,44 @@ function PortManagement() {
   );
 
   useEffect(() => {
-    fetchPorts();
+    fetchPorts(1, false);
     fetchDevices();
   }, [fetchPorts, fetchDevices]);
 
+  const handleLoadMore = useCallback(() => {
+    if (!hasMoreRef.current || isLoadingRef.current || portLoadingMore) return;
+    isLoadingRef.current = true;
+    const nextPage = portPage + 1;
+    fetchPorts(nextPage, true).then(() => {
+      isLoadingRef.current = false;
+    });
+  }, [portPage, portLoadingMore, fetchPorts]);
+
+  useEffect(() => {
+    if (!loadMoreRef.current) return;
+
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0].isIntersecting && hasMoreRef.current && !portLoadingMore) {
+          handleLoadMore();
+        }
+      },
+      { threshold: 0.1, rootMargin: '100px' }
+    );
+
+    observer.observe(loadMoreRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleLoadMore, portLoadingMore]);
+
+  const handlePageSizeChange = useCallback((newPage, newPageSize) => {
+    setPortPageSize(newPageSize);
+    setPortPage(1);
+    fetchPorts(1, false);
+  }, [fetchPorts]);
+
   useEffect(() => {
     const grouped = {};
     ports.forEach(port => {
@@ -242,46 +315,98 @@ function PortManagement() {
     });
 
     setGroupedPorts(grouped);
-    
-    // 自动展开前5个
+
     const deviceIds = Object.keys(grouped);
-    setExpandedKeys(deviceIds.slice(0, 5));
-  }, [ports, devices]);
+    const newTotal = deviceIds.length;
+    setDeviceCardTotal(newTotal);
+    if (deviceCardPage > Math.ceil(newTotal / deviceCardPageSize)) {
+      setDeviceCardPage(1);
+    }
+    setExpandedKeys([]);
+  }, [ports, devices, deviceCardPage, deviceCardPageSize]);
 
-  const handleSearch = () => {
-    fetchPorts();
-  };
+  const handleSearch = useCallback(() => {
+    setPortPage(1);
+    setDeviceCardPage(1);
+    hasMoreRef.current = true;
+    fetchPorts(1, false);
+  }, [fetchPorts]);
 
-  const handleReset = () => {
+  const handleReset = useCallback(() => {
     setFilters({
       deviceId: '',
-      status: 'all',
-      portType: 'all',
-      portSpeed: 'all',
-      searchText: '',
     });
-  };
+    setPortPage(1);
+    setDeviceCardPage(1);
+    hasMoreRef.current = true;
+    fetchPorts(1, false);
+  }, [fetchPorts]);
 
   const handleAdd = () => {
     setEditingPort(null);
     form.resetFields();
+    setPortAddGuideModalVisible(true);
+  };
+
+  const handleGuideSelectType = (type) => {
+    setPortAddGuideModalVisible(false);
+    setGuidedDeviceType(type);
     fetchDevices();
+    fetchRoomsAndRacks();
+    if (type === 'switch') {
+      setDeviceFilterType('switch');
+    } else if (type === 'server') {
+      setDeviceFilterType('server');
+    }
     setSelectDeviceModalVisible(true);
   };
 
+  const fetchRoomsAndRacks = async () => {
+    try {
+      const [roomsData, racksData] = await Promise.all([
+        roomAPI.list(),
+        api.get('/racks', { params: { pageSize: 1000 } }),
+      ]);
+      setRoomList(roomsData.rooms || roomsData || []);
+      setRackList(racksData.racks || racksData || []);
+    } catch (error) {
+      console.error('获取机房机柜数据失败:', error);
+    }
+  };
+
   const handleManageServerNics = async () => {
     setServerNicListVisible(true);
     setServerNicLoading(true);
     try {
-      const [devicesResponse, portsResponse, nicsResponse] = await Promise.all([
+      const [devicesResponse, portsResponse, nicsResponse, roomsData, racksData] = await Promise.all([
         api.get('/devices/all', { params: { type: 'server' } }),
         api.get('/device-ports', { params: { pageSize: 10000 } }),
         api.get('/network-cards'),
+        roomAPI.list(),
+        api.get('/racks', { params: { pageSize: 1000 } }),
       ]);
+      setRoomList(roomsData.rooms || roomsData || []);
+      setRackList(racksData.racks || racksData || []);
 
       const servers = devicesResponse.devices || devicesResponse || [];
       const ports = portsResponse.ports || portsResponse || [];
-      const allNics = nicsResponse.data || nicsResponse || [];
+      let allNics = [];
+
+      if (Array.isArray(nicsResponse)) {
+        allNics = nicsResponse;
+      } else if (nicsResponse && Array.isArray(nicsResponse.data)) {
+        allNics = nicsResponse.data;
+      } else if (nicsResponse && Array.isArray(nicsResponse.networkCards)) {
+        allNics = nicsResponse.networkCards;
+      }
+
+      console.log('[DEBUG] handleManageServerNics:', {
+        serversCount: servers.length,
+        portsCount: ports.length,
+        nicsCount: allNics.length,
+        sampleServer: servers[0],
+        sampleNic: allNics[0]
+      });
 
       const serversWithPorts = new Set(ports.map(p => p.deviceId));
       const serversWithNics = servers.filter(server => {
@@ -296,6 +421,8 @@ function PortManagement() {
           return { ...server, nics: serverNics, nicCount: serverNics.length };
         });
 
+      console.log('[DEBUG] serversWithNics:', serversWithNics.length, 'serversNeedingAttention:', serversNeedingAttention.length);
+
       setServerNicList(serversNeedingAttention);
     } catch (error) {
       console.error('获取服务器列表失败:', error);
@@ -395,7 +522,7 @@ function PortManagement() {
       icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
     });
     setRefreshTrigger(prev => prev + 1);
-    fetchPorts();
+    fetchPorts(1, false);
   };
 
   const handleEdit = port => {
@@ -427,7 +554,7 @@ function PortManagement() {
             content: '删除成功',
             icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
           });
-          fetchPorts();
+          fetchPorts(1, false);
         } catch (error) {
           const errorMsg = error.response?.data?.error || '';
           if (errorMsg.includes('关联的接线记录')) {
@@ -463,7 +590,7 @@ function PortManagement() {
             icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
           });
           setSelectedRowKeys([]);
-          fetchPorts();
+          fetchPorts(1, false);
         } catch (error) {
           const errorMsg = error.response?.data?.error || '';
           if (errorMsg.includes('关联的接线记录')) {
@@ -553,7 +680,7 @@ function PortManagement() {
       setModalVisible(false);
       form.resetFields();
       setSelectedDeviceForPort(null);
-      fetchPorts();
+      fetchPorts(1, false);
     } catch (error) {
       message.error(error.response?.data?.error || editingPort ? '更新失败' : '创建失败');
       console.error('提交失败:', error);
@@ -566,9 +693,8 @@ function PortManagement() {
     setImportProgress({ current: 0, total: 0 });
   };
 
-  const handleFileUpload = info => {
-    const { file } = info;
-
+  const handleFileUpload = (file, onSuccess) => {
+    console.log('handleFileUpload 被调用', file.name, file.size);
     const reader = new FileReader();
     reader.onload = async e => {
       try {
@@ -581,90 +707,203 @@ function PortManagement() {
           const worksheet = workbook.Sheets[sheetName];
           parsedData = XLSX.utils.sheet_to_json(worksheet);
         } else if (file.name.endsWith('.csv')) {
-          Papa.parse(data, {
+          parsedData = Papa.parse(data, {
             header: true,
             skipEmptyLines: true,
-            complete: results => {
-              parsedData = results.data;
-            },
-          });
+          }).data;
         } else {
           message.error('不支持的文件格式，请上传 .xlsx 或 .csv 文件');
           return;
         }
 
-        const validatedData = await validateImportData(parsedData);
-        setImportPreview(validatedData);
-        setImportProgress({ current: 0, total: validatedData.length });
+        if (parsedData.length === 0) {
+          message.warning('文件内容为空，请检查文件内容');
+          return;
+        }
+
+        const validatedResult = await validateImportData(parsedData);
+        console.log('文件解析结果:', {
+          总行数: parsedData.length,
+          有效数据: validatedResult.validData.length,
+          错误数据: validatedResult.errors.length,
+          第一行数据: parsedData[0]
+        });
+        setImportPreview(validatedResult.validData);
+        setImportErrors(validatedResult.errors);
+        setImportProgress({ current: 0, total: validatedResult.validData.length });
+        if (onSuccess) onSuccess();
       } catch (error) {
         message.error('文件解析失败');
         console.error('文件解析失败:', error);
       }
     };
 
-    reader.readAsBinaryString(file);
+    if (file.name.endsWith('.csv')) {
+      reader.readAsText(file);
+    } else {
+      reader.readAsBinaryString(file);
+    }
   };
 
   const validateImportData = async data => {
-    const validatedData = [];
-    const errors = [];
+    const validData = [];
+    const allErrors = [];
 
     for (let i = 0; i < data.length; i++) {
       const row = data[i];
-      const error = await validatePortRow(row, i);
+      const result = await validatePortRow(row, i);
 
-      if (error) {
-        errors.push(error);
+      if (result.valid) {
+        validData.push(row);
       } else {
-        validatedData.push(row);
+        allErrors.push(...result.errors.map(err => ({ ...err, originalRow: row })));
       }
     }
 
-    if (errors.length > 0) {
-      message.warning(`发现 ${errors.length} 条数据错误，已跳过`);
+    if (allErrors.length > 0) {
+      message.warning({
+        content: `发现 ${allErrors.length} 个数据错误，请查看错误详情并修正后重新导入`,
+        duration: 5,
+      });
     }
 
-    return validatedData;
+    return { validData, errors: allErrors };
   };
 
   const validatePortRow = async (row, index) => {
-    if (!row['设备ID'] || !row['端口名称']) {
-      return { valid: false, error: `第 ${index + 1} 行：缺少必填字段（设备ID或端口名称）` };
+    const rowNum = index + 2;
+    const errors = [];
+
+    if (!row['设备ID']) {
+      errors.push({
+        row: rowNum,
+        field: '设备ID',
+        value: row['设备ID'] || '(空)',
+        error: '缺少必填字段',
+        suggestion: '请填写设备ID，格式如：DEV001',
+      });
     }
 
-    const device = devices.find(d => d.deviceId === row['设备ID']);
-    if (!device) {
-      return { valid: false, error: `第 ${index + 1} 行：设备不存在` };
+    if (!row['端口名称']) {
+      errors.push({
+        row: rowNum,
+        field: '端口名称',
+        value: row['端口名称'] || '(空)',
+        error: '缺少必填字段',
+        suggestion: '请填写端口名称，格式如：eth0/1 或 GigabitEthernet0/0/1',
+      });
+    }
+
+    if (row['设备ID']) {
+      const device = devices.find(d => d.deviceId === row['设备ID']);
+      if (!device) {
+        errors.push({
+          row: rowNum,
+          field: '设备ID',
+          value: row['设备ID'],
+          error: '设备不存在',
+          suggestion: `设备ID "${row['设备ID']}" 未在系统中注册，请先在设备管理中添加该设备`,
+        });
+      }
     }
 
     const validPortTypes = ['RJ45', 'SFP', 'SFP+', 'SFP28', 'QSFP', 'QSFP28'];
-    if (!validPortTypes.includes(row['端口类型'])) {
-      return { valid: false, error: `第 ${index + 1} 行：无效的端口类型` };
+    if (row['端口类型'] && !validPortTypes.includes(row['端口类型'])) {
+      errors.push({
+        row: rowNum,
+        field: '端口类型',
+        value: row['端口类型'],
+        error: '无效的端口类型',
+        suggestion: `端口类型 "${row['端口类型']}" 不支持。可选值：${validPortTypes.join('、')}`,
+      });
     }
 
     const validPortSpeeds = ['100M', '1G', '10G', '25G', '40G', '100G'];
-    if (!validPortSpeeds.includes(row['端口速率'])) {
-      return { valid: false, error: `第 ${index + 1} 行：无效的端口速率` };
+    if (row['端口速率'] && !validPortSpeeds.includes(row['端口速率'])) {
+      errors.push({
+        row: rowNum,
+        field: '端口速率',
+        value: row['端口速率'],
+        error: '无效的端口速率',
+        suggestion: `端口速率 "${row['端口速率']}" 不支持。可选值：${validPortSpeeds.join('、')}`,
+      });
     }
 
     const validStatuses = ['空闲', '占用', '故障'];
-    if (!validStatuses.includes(row['状态'])) {
-      return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
+    if (row['状态'] && !validStatuses.includes(row['状态'])) {
+      errors.push({
+        row: rowNum,
+        field: '状态',
+        value: row['状态'],
+        error: '无效的状态值',
+        suggestion: `状态 "${row['状态']}" 不支持。可选值：${validStatuses.join('、')}`,
+      });
     }
 
-    let nicId = null;
-    if (row['网卡名称']) {
+    if (row['VLAN ID']) {
+      const vlanPattern = /^\d+$/;
+      if (!vlanPattern.test(row['VLAN ID'])) {
+        errors.push({
+          row: rowNum,
+          field: 'VLAN ID',
+          value: row['VLAN ID'],
+          error: 'VLAN ID 格式错误',
+          suggestion: 'VLAN ID 必须为数字，如：100、200',
+        });
+      } else {
+        const vlanNum = parseInt(row['VLAN ID']);
+        if (vlanNum < 1 || vlanNum > 4094) {
+          errors.push({
+            row: rowNum,
+            field: 'VLAN ID',
+            value: row['VLAN ID'],
+            error: 'VLAN ID 范围超限',
+            suggestion: 'VLAN ID 必须介于 1-4094 之间',
+          });
+        }
+      }
+    }
+
+    if (row['网卡名称'] && row['设备ID']) {
       try {
         const nicResponse = await api.get('/network-cards/find', {
           params: { deviceId: row['设备ID'], name: row['网卡名称'] }
         });
-        nicId = nicResponse.nicId || null;
+        row._nicId = nicResponse.nicId || null;
       } catch (error) {
-        nicId = null;
+        row._nicId = null;
       }
     }
 
-    row._nicId = nicId;
+    if (row['设备ID']) {
+      const device = devices.find(d => d.deviceId === row['设备ID']);
+      if (device) {
+        const isServer = device.type && device.type.toLowerCase().includes('server');
+        if (isServer) {
+          if (!row['网卡名称'] && !row._nicId) {
+            errors.push({
+              row: rowNum,
+              field: '网卡名称',
+              value: row['网卡名称'] || '(空)',
+              error: '服务器端口必须关联网卡',
+              suggestion: `服务器 "${device.name}" 的端口必须关联到网卡，请先在网卡管理中添加网卡，或在导入模板中填写网卡名称`,
+            });
+          } else if (row['网卡名称'] && !row._nicId) {
+            errors.push({
+              row: rowNum,
+              field: '网卡名称',
+              value: row['网卡名称'],
+              error: '网卡不存在',
+              suggestion: `服务器 "${device.name}" 的网卡"${row['网卡名称']}"不存在，请先在网卡管理中添加该网卡`,
+            });
+          }
+        }
+      }
+    }
+
+    if (errors.length > 0) {
+      return { valid: false, errors };
+    }
     return { valid: true };
   };
 
@@ -741,7 +980,7 @@ function PortManagement() {
         });
       }
 
-      fetchPorts();
+      fetchPorts(1, false);
       setImportModalVisible(false);
       setImportPreview([]);
     } catch (error) {
@@ -774,55 +1013,100 @@ function PortManagement() {
     XLSX.writeFile(workbook, '端口导入模板.xlsx');
   };
 
-  const handleExport = () => {
-    if (ports.length === 0) {
-      message.warning('没有可导出的端口数据');
-      return;
+  const handleExport = async ({ scope, format }) => {
+    try {
+      let exportData = [];
+      let totalCount = 0;
+
+      if (scope === 'all') {
+        const params = {
+          pageSize: 50000,
+        };
+        const response = await api.get('/device-ports/export/all', { params });
+        exportData = response.ports || [];
+        totalCount = response.total || exportData.length;
+      } else if (scope === 'filtered') {
+        const params = {
+          deviceId: filters.deviceId || undefined,
+          pageSize: 50000,
+        };
+        const response = await api.get('/device-ports/export/all', { params });
+        exportData = response.ports || [];
+        totalCount = response.total || exportData.length;
+      } else {
+        exportData = ports.map(port => {
+          const device = devices.find(d => d.deviceId === port.deviceId);
+          const statusMap = { free: '空闲', occupied: '占用', fault: '故障' };
+          return {
+            端口ID: port.portId,
+            设备ID: port.deviceId,
+            设备名称: device?.name || '-',
+            设备类型: device?.type || '-',
+            机房: '-',
+            机架: '-',
+            网卡名称: port.nicId || '-',
+            端口名称: port.portName,
+            端口类型: port.portType,
+            端口速率: port.portSpeed,
+            状态: statusMap[port.status] || port.status,
+            VLAN_ID: port.vlanId || '-',
+            描述: port.description || '-',
+            创建时间: port.createdAt ? new Date(port.createdAt).toLocaleString('zh-CN') : '-',
+          };
+        });
+        totalCount = exportData.length;
+      }
+
+      if (exportData.length === 0) {
+        message.warning('没有可导出的端口数据');
+        return;
+      }
+
+      if (format === 'csv') {
+        const csvContent = Papa.unparse(exportData);
+        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `端口导出_${new Date().toISOString().slice(0, 10).replace(/-/g, '')}.csv`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      } else {
+        const worksheet = XLSX.utils.json_to_sheet(exportData);
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, '端口数据');
+
+        const colWidths = [
+          { wch: 20 },
+          { wch: 15 },
+          { wch: 20 },
+          { wch: 12 },
+          { wch: 10 },
+          { wch: 12 },
+          { wch: 15 },
+          { wch: 15 },
+          { wch: 10 },
+          { wch: 8 },
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 25 },
+          { wch: 20 },
+        ];
+        worksheet['!cols'] = colWidths;
+
+        XLSX.writeFile(workbook, `端口导出_${new Date().toISOString().slice(0, 10).replace(/-/g, '')}.xlsx`);
+      }
+
+      message.success({
+        content: `成功导出 ${totalCount} 个端口`,
+        icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
+      });
+    } catch (error) {
+      console.error('导出失败:', error);
+      message.error('导出失败，请重试');
     }
-
-    const statusMap = {
-      free: '空闲',
-      occupied: '占用',
-      fault: '故障',
-    };
-
-    const exportData = ports.map(port => {
-      const device = devices.find(d => d.deviceId === port.deviceId);
-      return {
-        '设备ID': port.deviceId,
-        '设备名称': device?.name || '-',
-        '端口名称': port.portName,
-        '端口类型': port.portType,
-        '端口速率': port.portSpeed,
-        '状态': statusMap[port.status] || port.status,
-        'VLAN ID': port.vlanId || '-',
-        '描述': port.description || '-',
-      };
-    });
-
-    const worksheet = XLSX.utils.json_to_sheet(exportData);
-    const workbook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(workbook, worksheet, '端口数据');
-
-    const colWidths = [
-      { wch: 15 },
-      { wch: 20 },
-      { wch: 15 },
-      { wch: 10 },
-      { wch: 10 },
-      { wch: 8 },
-      { wch: 10 },
-      { wch: 25 },
-    ];
-    worksheet['!cols'] = colWidths;
-
-    const timestamp = new Date().toISOString().slice(0, 10).replace(/-/g, '');
-    XLSX.writeFile(workbook, `端口导出_${timestamp}.xlsx`);
-
-    message.success({
-      content: `成功导出 ${ports.length} 个端口`,
-      icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
-    });
   };
 
   const getStatusTag = status => {
@@ -972,10 +1256,17 @@ function PortManagement() {
 
   // 过滤后的设备列表（带分页）
   const paginatedDevices = useMemo(() => {
+    const rackRoomMap = {};
+    rackList.forEach(rack => {
+      rackRoomMap[rack.rackId] = rack.roomId;
+    });
+
     const filtered = devices.filter(d => {
       const type = getDeviceType(d);
       if (type !== 'switch' && type !== 'server') return false;
       if (deviceFilterType !== 'all' && type !== deviceFilterType) return false;
+      if (selectedRackId && d.rackId !== selectedRackId) return false;
+      if (selectedRoomId && d.rackId && rackRoomMap[d.rackId] !== selectedRoomId) return false;
       return true;
     });
     const pageSize = 100;
@@ -987,7 +1278,7 @@ function PortManagement() {
       total: filtered.length,
       hasMore
     };
-  }, [devices, deviceFilterType, devicePage]);
+  }, [devices, deviceFilterType, devicePage, rackList, selectedRoomId, selectedRackId]);
 
   useEffect(() => {
     if (!loadMoreRef.current) return;
@@ -1054,7 +1345,7 @@ function PortManagement() {
           }}
           bodyStyle={{ padding: '24px' }}
         >
-          {/* 过滤器区域 */}
+          {/* 功能区：过滤 + 操作按钮 */}
           <div style={{ marginBottom: '24px' }}>
             <Card
               style={{
@@ -1065,9 +1356,9 @@ function PortManagement() {
               bodyStyle={{ padding: '16px' }}
             >
               <Row gutter={[16, 16]} align="middle">
-                <Col xs={24} sm={12} md={6} lg={5}>
+                <Col xs={24} sm={24} md={10} lg={8}>
                   <div style={{ marginBottom: '6px', fontSize: '13px', color: designTokens.colors.neutral[600], fontWeight: 500 }}>
-                    设备
+                    设备筛选
                   </div>
                   <Select
                     placeholder="输入关键词搜索设备"
@@ -1093,96 +1384,54 @@ function PortManagement() {
                   </Select>
                 </Col>
 
-                <Col xs={24} sm={12} md={5} lg={4}>
+                <Col xs={24} sm={24} md={14} lg={16}>
                   <div style={{ marginBottom: '6px', fontSize: '13px', color: designTokens.colors.neutral[600], fontWeight: 500 }}>
-                    端口类型
+                    操作
                   </div>
-                  <Select
-                    placeholder="端口类型"
-                    style={{ width: '100%' }}
-                    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>
-                </Col>
-
-                <Col xs={24} sm={12} md={5} lg={4}>
-                  <div style={{ marginBottom: '6px', fontSize: '13px', color: designTokens.colors.neutral[600], fontWeight: 500 }}>
-                    端口速率
-                  </div>
-                  <Select
-                    placeholder="端口速率"
-                    style={{ width: '100%' }}
-                    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>
-                </Col>
-
-                <Col xs={24} sm={12} md={5} lg={4}>
-                  <div style={{ marginBottom: '6px', fontSize: '13px', color: designTokens.colors.neutral[600], fontWeight: 500 }}>
-                    状态
-                  </div>
-                  <Select
-                    placeholder="状态"
-                    style={{ width: '100%' }}
-                    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>
-                </Col>
-
-                <Col xs={24} sm={12} md={8} lg={4}>
-                  <div style={{ marginBottom: '6px', fontSize: '13px', color: designTokens.colors.neutral[600], fontWeight: 500 }}>
-                    搜索
-                  </div>
-                  <Input
-                    placeholder="搜索端口名称..."
-                    value={filters.searchText}
-                    onChange={e => setFilters(prev => ({ ...prev, searchText: e.target.value }))}
-                    onPressEnter={handleSearch}
-                    prefix={<SearchOutlined style={{ color: designTokens.colors.neutral[400] }} />}
-                    allowClear
-                  />
-                </Col>
-
-                <Col xs={24} sm={12} md={4} lg={3}>
-                  <div style={{ marginBottom: '6px', fontSize: '13px', color: 'transparent' }}>操作</div>
-                  <Space>
+                  <Space size="small" wrap>
                     <Button
                       type="primary"
-                      icon={<FilterOutlined />}
-                      onClick={handleSearch}
-                      style={{ 
-                        background: designTokens.colors.primary.gradient, 
+                      icon={<PlusOutlined />}
+                      onClick={handleAdd}
+                      size="middle"
+                      style={{
+                        background: designTokens.colors.primary.gradient,
                         border: 'none',
                         borderRadius: designTokens.borderRadius.sm,
                       }}
                     >
-                      筛选
+                      新增端口
                     </Button>
-                    <Tooltip title="重置筛选条件">
-                      <Button 
-                        icon={<ClearOutlined />} 
-                        onClick={handleReset}
+                    <Button
+                      icon={<CloudServerOutlined />}
+                      onClick={handleManageServerNics}
+                      size="middle"
+                      style={{ borderRadius: designTokens.borderRadius.sm }}
+                    >
+                      管理网卡
+                    </Button>
+                    <Button
+                      icon={<ImportOutlined />}
+                      onClick={() => setBatchImportModalVisible(true)}
+                      size="middle"
+                      style={{ borderRadius: designTokens.borderRadius.sm }}
+                    >
+                      批量导入
+                    </Button>
+                    <Button
+                      icon={<ExportOutlined />}
+                      onClick={() => setPortExportModalVisible(true)}
+                      size="middle"
+                      style={{ borderRadius: designTokens.borderRadius.sm }}
+                    >
+                      导出
+                    </Button>
+                    <Tooltip title="刷新数据">
+                      <Button
+                        icon={<ReloadOutlined />}
+                        onClick={fetchPorts}
+                        loading={loading}
+                        size="middle"
                         style={{ borderRadius: designTokens.borderRadius.sm }}
                       />
                     </Tooltip>
@@ -1192,61 +1441,6 @@ function PortManagement() {
             </Card>
           </div>
 
-          {/* 操作按钮区域 */}
-          <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <Space size="middle">
-              <Button
-                type="primary"
-                icon={<PlusOutlined />}
-                onClick={handleAdd}
-                size="large"
-                style={{
-                  background: designTokens.colors.primary.gradient,
-                  border: 'none',
-                  borderRadius: designTokens.borderRadius.sm,
-                  boxShadow: designTokens.shadows.md,
-                }}
-              >
-                新增端口
-              </Button>
-              <Button
-                icon={<CloudServerOutlined />}
-                onClick={handleManageServerNics}
-                size="large"
-                style={{ borderRadius: designTokens.borderRadius.sm }}
-              >
-                管理网卡
-              </Button>
-              <Button
-                icon={<ImportOutlined />}
-                onClick={handleImport}
-                size="large"
-                style={{ borderRadius: designTokens.borderRadius.sm }}
-              >
-                批量导入
-              </Button>
-              <Button
-                icon={<ExportOutlined />}
-                size="large"
-                onClick={handleExport}
-                style={{ borderRadius: designTokens.borderRadius.sm }}
-              >
-                导出
-              </Button>
-            </Space>
-
-            <Space>
-              <Tooltip title="刷新数据">
-                <Button 
-                  icon={<ReloadOutlined />} 
-                  onClick={fetchPorts}
-                  loading={loading}
-                  style={{ borderRadius: designTokens.borderRadius.sm }}
-                />
-              </Tooltip>
-            </Space>
-          </div>
-
           {/* 数据展示区域 */}
           {loading ? (
             <div style={{ padding: '40px' }}>
@@ -1287,7 +1481,7 @@ function PortManagement() {
             </motion.div>
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-              {Object.entries(groupedPorts).map(([deviceId, data], index) => {
+              {Object.entries(groupedPorts).slice((deviceCardPage - 1) * deviceCardPageSize, deviceCardPage * deviceCardPageSize).map(([deviceId, data], index) => {
                 const device = data.device;
                 const devicePorts = data.ports || [];
                 const freeCount = devicePorts.filter(p => p.status === 'free').length;
@@ -1459,6 +1653,31 @@ function PortManagement() {
                   </Card>
                 );
               })}
+              {deviceCardTotal > deviceCardPageSize && (
+                <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px 0' }}>
+                  <Pagination
+                    current={deviceCardPage}
+                    pageSize={deviceCardPageSize}
+                    total={deviceCardTotal}
+                    onChange={(page) => {
+                      setDeviceCardPage(page);
+                      setExpandedKeys([]);
+                    }}
+                    showSizeChanger={false}
+                    showTotal={(total, range) => `第 ${range[0]}-${range[1]} 个，共 ${total} 个设备`}
+                  />
+                </div>
+              )}
+              {hasMoreRef.current && (
+                <div ref={loadMoreRef} style={{ textAlign: 'center', padding: '20px' }}>
+                  {portLoadingMore && <Spin tip="加载更多端口..." />}
+                </div>
+              )}
+              {!hasMoreRef.current && ports.length > 0 && (
+                <div style={{ textAlign: 'center', padding: '16px', color: '#999' }}>
+                  已加载全部 {portTotal} 个端口
+                </div>
+              )}
             </div>
           )}
         </Card>
@@ -1934,6 +2153,7 @@ function PortManagement() {
         onCancel={() => {
           setImportModalVisible(false);
           setImportPreview([]);
+          setImportErrors([]);
           setImportProgress({ current: 0, total: 0 });
         }}
         width={900}
@@ -1974,9 +2194,10 @@ function PortManagement() {
           <Upload.Dragger
             name="file"
             accept=".xlsx,.xls,.csv"
-            beforeUpload={() => false}
-            customRequest={({ file, onSuccess }) => {
-              handleFileUpload({ file, onSuccess });
+            showUploadList={false}
+            beforeUpload={file => {
+              handleFileUpload(file, null);
+              return false;
             }}
             style={{
               borderRadius: designTokens.borderRadius.lg,
@@ -2004,6 +2225,46 @@ function PortManagement() {
             </Checkbox>
           </div>
 
+          {importErrors.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3 }}
+              style={{ marginTop: '16px' }}
+            >
+              <Alert
+                message={`发现 ${importErrors.length} 个错误`}
+                description={
+                  <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                    <Table
+                      columns={[
+                        { title: '行号', dataIndex: 'row', key: 'row', width: 70, render: row => <Tag color="red">{row}</Tag> },
+                        { title: '字段', dataIndex: 'field', key: 'field', width: 100, render: field => <Text strong>{field}</Text> },
+                        { title: '错误值', dataIndex: 'value', key: 'value', width: 120, render: val => <Text code>{val}</Text> },
+                        { title: '错误原因', dataIndex: 'error', key: 'error', render: err => <Text type="danger">{err}</Text> },
+                        { title: '修正建议', dataIndex: 'suggestion', key: 'suggestion', render: sug => <Text type="secondary">{sug}</Text> },
+                      ]}
+                      dataSource={importErrors}
+                      rowKey={(record, index) => `error-${index}`}
+                      pagination={{
+                        pageSize: 5,
+                        size: 'small',
+                        showSizeChanger: false,
+                        showTotal: total => `共 ${total} 条错误`,
+                      }}
+                      size="small"
+                      scroll={{ x: 600 }}
+                      style={{ marginTop: '8px' }}
+                    />
+                  </div>
+                }
+                type="error"
+                showIcon
+                style={{ borderRadius: designTokens.borderRadius.md }}
+              />
+            </motion.div>
+          )}
+
           {importPreview.length > 0 && (
             <motion.div
               initial={{ opacity: 0, y: 10 }}
@@ -2012,8 +2273,13 @@ function PortManagement() {
               style={{ marginTop: '24px' }}
             >
               <Alert
-                message={`成功解析 ${importPreview.length} 条数据`}
-                type="success"
+                message={
+                  <span>
+                    成功解析 {importPreview.length} 条有效数据
+                    {importErrors.length > 0 && <span style={{ color: '#ff4d4f', marginLeft: 8 }}>（{importErrors.length} 条错误）</span>}
+                  </span>
+                }
+                type={importErrors.length > 0 ? 'warning' : 'success'}
                 showIcon
                 style={{ marginBottom: '16px', borderRadius: designTokens.borderRadius.md }}
               />
@@ -2107,86 +2373,113 @@ function PortManagement() {
           setDeviceFilterType('all');
           setDevicePage(1);
           setSelectedRowKeys([]);
+          setGuidedDeviceType(null);
+          setSelectedRoomId(null);
+          setSelectedRackId(null);
         }}
         footer={null}
         width={620}
         style={{ top: 100 }}
         bodyStyle={{ padding: '0 24px 24px' }}
       >
-        <div
-          style={{
-            margin: '0 -24px 20px',
-            padding: '16px 24px',
-            background: 'linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%)',
-            borderBottom: '1px solid #e8ecf4',
-          }}
-        >
-          <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
+        {guidedDeviceType && (
+          <div
+            style={{
+              margin: '0 -24px 16px',
+              padding: '12px 24px',
+              background: guidedDeviceType === 'switch'
+                ? 'linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%)'
+                : 'linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%)',
+              borderBottom: `1px solid ${guidedDeviceType === 'switch' ? '#bbf7d0' : '#c7d2fe'}`,
+            }}
+          >
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <div
-                style={{
-                  width: '28px',
-                  height: '28px',
-                  borderRadius: '8px',
-                  background: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: '#fff',
-                }}
-              >
-                <ApiOutlined style={{ fontSize: '14px' }} />
-              </div>
-              <div>
-                <div style={{ fontSize: '12px', color: '#666' }}>交换机</div>
-                <div style={{ fontSize: '11px', color: '#999' }}>可直接创建端口</div>
-              </div>
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <div
-                style={{
-                  width: '28px',
-                  height: '28px',
-                  borderRadius: '8px',
-                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: '#fff',
-                }}
-              >
-                <CloudServerOutlined style={{ fontSize: '14px' }} />
-              </div>
-              <div>
-                <div style={{ fontSize: '12px', color: '#666' }}>服务器</div>
-                <div style={{ fontSize: '11px', color: '#999' }}>需先添加网卡</div>
-              </div>
+              {guidedDeviceType === 'switch' ? (
+                <ApiOutlined style={{ fontSize: '16px', color: '#059669' }} />
+              ) : (
+                <CloudServerOutlined style={{ fontSize: '16px', color: '#6366f1' }} />
+              )}
+              <span style={{
+                fontSize: '13px',
+                fontWeight: 500,
+                color: guidedDeviceType === 'switch' ? '#047857' : '#4f46e5',
+              }}>
+                {guidedDeviceType === 'switch' ? '添加交换机端口' : '添加服务器端口'}
+              </span>
+              <span style={{ fontSize: '12px', color: '#666' }}>
+                {guidedDeviceType === 'switch' ? '（交换机端口可直接创建，无需关联网卡）' : '（服务器端口需关联网卡）'}
+              </span>
             </div>
           </div>
-        </div>
+        )}
 
-        <div style={{ marginBottom: '16px' }}>
+        <div style={{ display: 'flex', gap: '12px', marginBottom: '16px', alignItems: 'center' }}>
           <Input
             placeholder="搜索设备名称、IP或位置..."
             prefix={<SearchOutlined style={{ color: '#999' }} />}
             allowClear
             onChange={e => handleDeviceSearch(e.target.value)}
             style={{
+              flex: 1,
               borderRadius: '10px',
               border: '1px solid #e8ecf4',
-              height: '44px',
+              height: '40px',
               fontSize: '14px',
             }}
           />
+          <Select
+            placeholder="按机房筛选"
+            allowClear
+            value={selectedRoomId}
+            onChange={value => {
+              setSelectedRoomId(value);
+              setSelectedRackId(null);
+            }}
+            style={{ width: 140 }}
+            size="middle"
+          >
+            {roomList.map(room => (
+              <Select.Option key={room.roomId} value={room.roomId}>
+                {room.name}
+              </Select.Option>
+            ))}
+          </Select>
+          <Select
+            placeholder="按机柜筛选"
+            allowClear
+            value={selectedRackId}
+            onChange={value => setSelectedRackId(value)}
+            style={{ width: 140 }}
+            size="middle"
+            disabled={!selectedRoomId}
+          >
+            {rackList
+              .filter(rack => !selectedRoomId || rack.roomId === selectedRoomId)
+              .map(rack => (
+                <Select.Option key={rack.rackId} value={rack.rackId}>
+                  {rack.name}
+                </Select.Option>
+              ))}
+          </Select>
         </div>
 
         {(() => {
+          const rackRoomMap = {};
+          rackList.forEach(rack => {
+            rackRoomMap[rack.rackId] = rack.roomId;
+          });
+
           const allDevices = devices.filter(d => {
             const type = getDeviceType(d);
-            return type === 'switch' || type === 'server';
+            if (type !== 'switch' && type !== 'server') return false;
+            if (selectedRackId && d.rackId !== selectedRackId) return false;
+            if (selectedRoomId && d.rackId && rackRoomMap[d.rackId] !== selectedRoomId) return false;
+            return true;
           });
           const switchCount = allDevices.filter(d => getDeviceType(d) === 'switch').length;
           const serverCount = allDevices.filter(d => getDeviceType(d) === 'server').length;
+          const showSwitchTab = guidedDeviceType === null || guidedDeviceType === 'switch';
+          const showServerTab = guidedDeviceType === null || guidedDeviceType === 'server';
 
           return (
             <div
@@ -2199,66 +2492,72 @@ function PortManagement() {
                 borderRadius: '12px',
               }}
             >
-              <button
-                onClick={() => { setDeviceFilterType('all'); setDevicePage(1); }}
-                style={{
-                  flex: 1,
-                  padding: '10px 16px',
-                  border: 'none',
-                  borderRadius: '8px',
-                  fontSize: '13px',
-                  fontWeight: 500,
-                  cursor: 'pointer',
-                  transition: 'all 0.2s',
-                  background: deviceFilterType === 'all'
-                    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-                    : 'transparent',
-                  color: deviceFilterType === 'all' ? '#fff' : '#666',
-                  boxShadow: deviceFilterType === 'all' ? '0 2px 8px rgba(102, 126, 234, 0.3)' : 'none',
-                }}
-              >
-                全部 ({allDevices.length})
-              </button>
-              <button
-                onClick={() => { setDeviceFilterType('switch'); setDevicePage(1); }}
-                style={{
-                  flex: 1,
-                  padding: '10px 16px',
-                  border: 'none',
-                  borderRadius: '8px',
-                  fontSize: '13px',
-                  fontWeight: 500,
-                  cursor: 'pointer',
-                  transition: 'all 0.2s',
-                  background: deviceFilterType === 'switch'
-                    ? 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)'
-                    : 'transparent',
-                  color: deviceFilterType === 'switch' ? '#fff' : '#666',
-                  boxShadow: deviceFilterType === 'switch' ? '0 2px 8px rgba(17, 153, 142, 0.3)' : 'none',
-                }}
-              >
-                交换机 ({switchCount})
-              </button>
-              <button
-                onClick={() => { setDeviceFilterType('server'); setDevicePage(1); }}
-                style={{
-                  flex: 1,
-                  padding: '10px 16px',
-                  border: 'none',
-                  borderRadius: '8px',
-                  fontSize: '13px',
-                  fontWeight: 500,
-                  cursor: 'pointer',
-                  transition: 'all 0.2s',
-                  background: deviceFilterType === 'server'
-                    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-                    : 'transparent',
-                  color: deviceFilterType === 'server' ? '#fff' : '#666',
-                  boxShadow: deviceFilterType === 'server' ? '0 2px 8px rgba(102, 126, 234, 0.3)' : 'none',
-                }}
-              >
-                服务器 ({serverCount})
-              </button>
+              {guidedDeviceType === null && (
+                <button
+                  onClick={() => { setDeviceFilterType('all'); setDevicePage(1); }}
+                  style={{
+                    flex: 1,
+                    padding: '10px 16px',
+                    border: 'none',
+                    borderRadius: '8px',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                    background: deviceFilterType === 'all'
+                      ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+                      : 'transparent',
+                    color: deviceFilterType === 'all' ? '#fff' : '#666',
+                    boxShadow: deviceFilterType === 'all' ? '0 2px 8px rgba(102, 126, 234, 0.3)' : 'none',
+                  }}
+                >
+                  全部 ({allDevices.length})
+                </button>
+              )}
+              {showSwitchTab && (
+                <button
+                  onClick={() => { setDeviceFilterType('switch'); setDevicePage(1); }}
+                  style={{
+                    flex: 1,
+                    padding: '10px 16px',
+                    border: 'none',
+                    borderRadius: '8px',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                    background: deviceFilterType === 'switch'
+                      ? 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)'
+                      : 'transparent',
+                    color: deviceFilterType === 'switch' ? '#fff' : '#666',
+                    boxShadow: deviceFilterType === 'switch' ? '0 2px 8px rgba(17, 153, 142, 0.3)' : 'none',
+                  }}
+                >
+                  交换机 ({switchCount})
+                </button>
+              )}
+              {showServerTab && (
+                <button
+                  onClick={() => { setDeviceFilterType('server'); setDevicePage(1); }}
+                  style={{
+                    flex: 1,
+                    padding: '10px 16px',
+                    border: 'none',
+                    borderRadius: '8px',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                    background: deviceFilterType === 'server'
+                      ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+                      : 'transparent',
+                    color: deviceFilterType === 'server' ? '#fff' : '#666',
+                    boxShadow: deviceFilterType === 'server' ? '0 2px 8px rgba(102, 126, 234, 0.3)' : 'none',
+                  }}
+                >
+                  服务器 ({serverCount})
+                </button>
+              )}
             </div>
           );
         })()}
@@ -2529,7 +2828,7 @@ function PortManagement() {
                 width: '36px',
                 height: '36px',
                 borderRadius: designTokens.borderRadius.md,
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                background: designTokens.colors.primary.gradient,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -2548,9 +2847,13 @@ function PortManagement() {
         onCancel={() => {
           setServerNicListVisible(false);
           setServerNicList([]);
+          setServerNicSearchText('');
+          setServerNicRoomFilter('all');
+          setServerNicRackFilter('all');
+          setServerNicCardPage(1);
         }}
         footer={null}
-        width={600}
+        width={900}
         destroyOnClose
       >
         {serverNicLoading ? (
@@ -2558,111 +2861,190 @@ function PortManagement() {
             <Spin size="large" />
             <div style={{ marginTop: '16px', color: '#999' }}>加载中...</div>
           </div>
-        ) : serverNicList.length === 0 ? (
-          <Empty description="所有有网卡的服务器都已添加端口" />
         ) : (
-          <div style={{ maxHeight: '500px', overflowY: 'auto' }}>
-            {serverNicList.map(server => (
-              <div
-                key={server.deviceId}
-                style={{
-                  padding: '16px',
-                  marginBottom: '12px',
-                  borderRadius: '12px',
-                  border: `1px solid ${designTokens.colors.neutral[200]}`,
-                  background: designTokens.colors.neutral[50],
+          <>
+            <div
+              style={{
+                display: 'flex',
+                gap: '12px',
+                marginBottom: '16px',
+                flexWrap: 'wrap',
+              }}
+            >
+              <Input
+                placeholder="搜索服务器名称或ID..."
+                prefix={<SearchOutlined style={{ color: designTokens.colors.primary.main }} />}
+                value={serverNicSearchText}
+                onChange={e => {
+                  setServerNicSearchText(e.target.value);
+                  setServerNicCardPage(1);
                 }}
+                allowClear
+                style={{
+                  width: '260px',
+                  borderRadius: designTokens.borderRadius.md,
+                }}
+              />
+              <Select
+                value={serverNicRoomFilter}
+                onChange={value => {
+                  setServerNicRoomFilter(value);
+                  setServerNicRackFilter('all');
+                  setServerNicCardPage(1);
+                }}
+                style={{ width: '140px' }}
+                placeholder="选择机房"
               >
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                    <div
-                      style={{
-                        width: '40px',
-                        height: '40px',
-                        borderRadius: '10px',
-                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: '#fff',
-                        fontSize: '18px',
-                      }}
-                    >
-                      <CloudServerOutlined />
-                    </div>
-                    <div>
-                      <div style={{ fontWeight: 600, fontSize: '14px', color: designTokens.colors.neutral[800] }}>
-                        {server.name}
-                      </div>
-                      <div style={{ fontSize: '12px', color: designTokens.colors.neutral[500] }}>
-                        {server.deviceId}
-                      </div>
-                    </div>
-                  </div>
-                  <Tag
-                    style={{
-                      background: server.nicCount > 0 ? designTokens.colors.success.bg : designTokens.colors.neutral[200],
-                      color: server.nicCount > 0 ? designTokens.colors.success.main : designTokens.colors.neutral[600],
-                      border: 'none',
-                      borderRadius: '6px',
-                      padding: '4px 12px',
-                    }}
-                  >
-                    {server.nicCount > 0 ? `${server.nicCount} 个网卡` : '暂无网卡'}
-                  </Tag>
-                </div>
+                <Option value="all">全部机房</Option>
+                {roomList.map(room => (
+                  <Option key={room.roomId} value={room.roomId}>{room.name}</Option>
+                ))}
+              </Select>
+              <Select
+                value={serverNicRackFilter}
+                onChange={value => {
+                  setServerNicRackFilter(value);
+                  setServerNicCardPage(1);
+                }}
+                style={{ width: '140px' }}
+                placeholder="选择机柜"
+                disabled={serverNicRoomFilter === 'all'}
+              >
+                <Option value="all">全部机柜</Option>
+                {rackList
+                  .filter(rack => serverNicRoomFilter === 'all' || rack.roomId === serverNicRoomFilter)
+                  .map(rack => (
+                    <Option key={rack.rackId} value={rack.rackId}>{rack.name}</Option>
+                  ))}
+              </Select>
+              <div style={{ marginLeft: 'auto', color: designTokens.colors.text.secondary, fontSize: '13px', alignSelf: 'center' }}>
+                共 {serverNicList.length} 台设备
+              </div>
+            </div>
 
-                {server.nics && server.nics.length > 0 && (
-                  <div style={{ marginBottom: '8px' }}>
-                    {server.nics.map(nic => (
-                      <div
-                        key={nic.nicId}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          padding: '8px 12px',
-                          background: '#fff',
-                          borderRadius: '6px',
-                          marginBottom: '4px',
-                        }}
-                      >
-                        <div>
-                          <div style={{ fontSize: '13px', fontWeight: 500 }}>{nic.name}</div>
-                          {nic.slotNumber && (
-                            <div style={{ fontSize: '11px', color: designTokens.colors.neutral[500] }}>
-                              插槽 {nic.slotNumber}
-                            </div>
-                          )}
-                        </div>
-                        <Tag color="blue" style={{ borderRadius: '4px' }}>{nic.portCount || 0} 端口</Tag>
-                      </div>
-                    ))}
-                  </div>
-                )}
-
-                <Button
-                  type="primary"
-                  size="small"
-                  icon={<PlusOutlined />}
-                  onClick={() => {
-                    setSelectedDeviceForNic(server);
-                    setServerNicListVisible(false);
-                    setNetworkCardModalVisible(true);
-                  }}
+            {serverNicList.length === 0 ? (
+              <Empty description="暂无服务器数据" />
+            ) : (
+              <>
+                <div
                   style={{
-                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                    border: 'none',
-                    borderRadius: '6px',
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                    gap: '16px',
+                    maxHeight: '520px',
+                    overflowY: 'auto',
+                    padding: '4px',
                   }}
                 >
-                  {server.nicCount > 0 ? '管理网卡' : '添加网卡'}
-                </Button>
-              </div>
-            ))}
-          </div>
+                  {serverNicList
+                    .filter(server => {
+                      const searchMatch =
+                        !serverNicSearchText ||
+                        server.name?.toLowerCase().includes(serverNicSearchText.toLowerCase()) ||
+                        server.deviceId?.toLowerCase().includes(serverNicSearchText.toLowerCase());
+                      const roomMatch = serverNicRoomFilter === 'all' || server.roomId === serverNicRoomFilter;
+                      const rackMatch = serverNicRackFilter === 'all' || server.rackId === serverNicRackFilter;
+                      return searchMatch && roomMatch && rackMatch;
+                    })
+                    .slice(
+                      (serverNicCardPage - 1) * serverNicCardPageSize,
+                      serverNicCardPage * serverNicCardPageSize
+                    )
+                    .map(server => (
+                      <ServerNicCard
+                        key={server.deviceId}
+                        server={server}
+                        onManage={() => {
+                          setSelectedDeviceForNic(server);
+                          setServerNicListVisible(false);
+                          setNetworkCardModalVisible(true);
+                        }}
+                      />
+                    ))}
+                </div>
+
+                {serverNicList.filter(server => {
+                  const searchMatch =
+                    !serverNicSearchText ||
+                    server.name?.toLowerCase().includes(serverNicSearchText.toLowerCase()) ||
+                    server.deviceId?.toLowerCase().includes(serverNicSearchText.toLowerCase());
+                  const roomMatch = serverNicRoomFilter === 'all' || server.roomId === serverNicRoomFilter;
+                  const rackMatch = serverNicRackFilter === 'all' || server.rackId === serverNicRackFilter;
+                  return searchMatch && roomMatch && rackMatch;
+                }).length > serverNicCardPageSize && (
+                  <div
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      marginTop: '16px',
+                      paddingTop: '12px',
+                      borderTop: `1px solid ${designTokens.colors.border.light}`,
+                    }}
+                  >
+                    <Pagination
+                      current={serverNicCardPage}
+                      pageSize={serverNicCardPageSize}
+                      total={serverNicList.filter(server => {
+                        const searchMatch =
+                          !serverNicSearchText ||
+                          server.name?.toLowerCase().includes(serverNicSearchText.toLowerCase()) ||
+                          server.deviceId?.toLowerCase().includes(serverNicSearchText.toLowerCase());
+                        const typeMatch = serverNicTypeFilter === 'all' || server.type === serverNicTypeFilter;
+                        return searchMatch && typeMatch;
+                      }).length}
+                      onChange={page => setServerNicCardPage(page)}
+                      showSizeChanger={false}
+                      showQuickJumper
+                      size="small"
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </>
         )}
       </Modal>
+
+      {/* 批量导入选择弹窗 */}
+      <BatchImportModal
+        visible={batchImportModalVisible}
+        onClose={() => setBatchImportModalVisible(false)}
+        onImportNetworkCard={() => setNetworkCardImportModalVisible(true)}
+        onImportPort={() => {
+          handleImport();
+        }}
+      />
+
+      {/* 网卡批量导入弹窗 */}
+      <NetworkCardImportModal
+        visible={networkCardImportModalVisible}
+        onClose={() => setNetworkCardImportModalVisible(false)}
+        onSuccess={() => {
+          message.success({
+            content: '网卡导入成功',
+            icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />,
+          });
+          setRefreshTrigger(prev => prev + 1);
+        }}
+      />
+
+      {/* 端口新增引导弹窗 */}
+      <PortAddGuideModal
+        visible={portAddGuideModalVisible}
+        onClose={() => setPortAddGuideModalVisible(false)}
+        onSelectType={handleGuideSelectType}
+      />
+
+      {/* 端口导出弹窗 */}
+      <PortExportModal
+        visible={portExportModalVisible}
+        filters={filters}
+        totalCount={portTotal}
+        currentPageCount={ports.length}
+        selectedCount={selectedRowKeys.length}
+        onExport={handleExport}
+        onCancel={() => setPortExportModalVisible(false)}
+      />
     </motion.div>
   );
 }