From 6a8d4144ffaae6d5852156104636751305c3559e Mon Sep 17 00:00:00 2001
From: zhang1106 <849185023@qq.com>
Date: Fri, 27 Mar 2026 18:08:26 +0800
Subject: [PATCH] =?UTF-8?q?docs(UI):=20=E5=AE=8C=E5=96=84=E7=BD=91?=
 =?UTF-8?q?=E5=8D=A1=E5=92=8C=E7=AB=AF=E5=8F=A3=E6=89=B9=E9=87=8F=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E7=9A=84=E6=93=8D=E4=BD=9C=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/NetworkCardImportModal.jsx | 27 +++++++++--
 frontend/src/pages/PortManagement.jsx         | 47 +++++++++++++++++++
 2 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NetworkCardImportModal.jsx b/frontend/src/components/NetworkCardImportModal.jsx
index e7f66be..2badc1e 100644
--- a/frontend/src/components/NetworkCardImportModal.jsx
+++ b/frontend/src/components/NetworkCardImportModal.jsx
@@ -334,9 +334,30 @@ function NetworkCardImportModal({ visible, onClose, onSuccess }) {
           message="操作说明"
           description={
             <div style={{ fontSize: '12px', lineHeight: '1.8' }}>
-              <div>• 网卡批量导入用于服务器设备，请确保先在设备管理中添加服务器</div>
-              <div>• 模板中的"设备ID"必须与已存在的设备对应</div>
-              <div>• 请先下载模板，按模板格式填写数据后再上传</div>
+              <div><strong>适用范围：</strong>批量导入网卡仅适用于<span style={{ color: '#1890ff', fontWeight: 600 }}>服务器设备</span>，交换机设备请直接在端口管理中导入端口</div>
+              <div style={{ marginTop: '8px' }}><strong>前置条件：</strong>请先在<span style={{ color: '#1890ff', fontWeight: 600 }}>设备管理</span>中添加目标服务器，确保设备ID已存在</div>
+              <div style={{ marginTop: '8px' }}><strong>操作步骤：</strong></div>
+              <div style={{ paddingLeft: '12px', marginTop: '4px' }}>
+                <div>1. 点击「下载模板」获取标准Excel/CSV文件</div>
+                <div>2. 按模板格式填写网卡信息，<span style={{ color: '#ff4d4f', fontWeight: 600 }}>设备ID</span>和<span style={{ color: '#ff4d4f', fontWeight: 600 }}>网卡名称</span>为必填项</div>
+                <div>3. 点击上传区域选择文件，或直接拖拽文件到上传区域</div>
+                <div>4. 系统自动校验数据，可预览前10条数据及错误详情</div>
+                <div>5. 选择导入策略（跳过/更新已存在），点击「开始导入」</div>
+              </div>
+              <div style={{ marginTop: '8px' }}><strong>字段说明：</strong></div>
+              <div style={{ paddingLeft: '12px', marginTop: '4px' }}>
+                <div>• <strong>设备ID</strong>（必填）：服务器的唯一标识，如DEV001</div>
+                <div>• <strong>网卡名称</strong>（必填）：网卡的名称或标识，如eth0、网卡1</div>
+                <div>• <strong>插槽编号</strong>（选填）：网卡所在的插槽位置，必须为数字</div>
+                <div>• <strong>网卡型号</strong>（选填）：如Intel X710、BCM57414</div>
+                <div>• <strong>制造商</strong>（选填）：如Intel、Mellanox</div>
+                <div>• <strong>描述</strong>（选填）：备注信息</div>
+              </div>
+              <div style={{ marginTop: '8px', color: '#faad14' }}><strong>注意事项：</strong></div>
+              <div style={{ paddingLeft: '12px', marginTop: '4px', color: '#faad14' }}>
+                <div>• 同一设备下网卡名称不可重复</div>
+                <div>• 导入后需在网卡管理中为网卡添加端口</div>
+              </div>
             </div>
           }
           type="info"
diff --git a/frontend/src/pages/PortManagement.jsx b/frontend/src/pages/PortManagement.jsx
index c7da74c..775a353 100644
--- a/frontend/src/pages/PortManagement.jsx
+++ b/frontend/src/pages/PortManagement.jsx
@@ -2191,6 +2191,53 @@ function PortManagement() {
         ]}
       >
         <div style={{ padding: '16px 0' }}>
+          <Alert
+            message="操作说明"
+            description={
+              <div style={{ fontSize: '12px', lineHeight: '1.8' }}>
+                <div><strong>适用范围：</strong>批量导入端口适用于<span style={{ color: '#1890ff', fontWeight: 600 }}>所有设备类型</span>（交换机、服务器、路由器、存储等）</div>
+                <div style={{ marginTop: '8px' }}><strong>前置条件：</strong></div>
+                <div style={{ paddingLeft: '12px', marginTop: '4px' }}>
+                  <div>• <strong>交换机端口：</strong>可直接导入，无需前置操作</div>
+                  <div>• <strong>服务器端口：</strong>必须先在<span style={{ color: '#1890ff', fontWeight: 600 }}>网卡管理</span>中添加网卡，服务器端口与网卡是<span style={{ color: '#ff4d4f', fontWeight: 600 }}>层级关系</span>：设备 → 网卡 → 端口</div>
+                </div>
+                <div style={{ marginTop: '8px' }}><strong>操作步骤：</strong></div>
+                <div style={{ paddingLeft: '12px', marginTop: '4px' }}>
+                  <div>1. 点击「下载模板」获取标准Excel/CSV文件</div>
+                  <div>2. 按模板格式填写端口信息，<span style={{ color: '#ff4d4f', fontWeight: 600 }}>设备ID</span>和<span style={{ color: '#ff4d4f', fontWeight: 600 }}>端口名称</span>为必填项</div>
+                  <div>3. 服务器端口可在「网卡名称」列填写对应的网卡名称（如eth0），不填则归入「未分组端口」</div>
+                  <div>4. 点击上传区域选择文件，或直接拖拽文件到上传区域</div>
+                  <div>5. 系统自动校验数据，可预览前10条数据及错误详情</div>
+                  <div>6. 选择导入策略（跳过/更新已存在），点击「开始导入」</div>
+                </div>
+                <div style={{ marginTop: '8px' }}><strong>字段说明：</strong></div>
+                <div style={{ paddingLeft: '12px', marginTop: '4px' }}>
+                  <div>• <strong>设备ID</strong>（必填）：设备的唯一标识，如DEV001</div>
+                  <div>• <strong>端口名称</strong>（必填）：端口的名称或标识，如eth0/1、GigabitEthernet0/0/1</div>
+                  <div>• <strong>网卡名称</strong>（选填）：服务器端口所属的网卡名称，如eth0；交换机端口留空</div>
+                  <div>• <strong>端口类型</strong>（选填）：如RJ45、LC、SC、FC、SFP+、QSFP28等</div>
+                  <div>• <strong>端口速率</strong>（选填）：如1G、10G、25G、100G、40G等</div>
+                  <div>• <strong>状态</strong>（选填）：空闲/占用/故障，默认为空闲</div>
+                  <div>• <strong>VLAN ID</strong>（选填）：端口所属的VLAN编号，如100</div>
+                  <div>• <strong>描述</strong>（选填）：备注信息</div>
+                </div>
+                <div style={{ marginTop: '8px', color: '#faad14' }}><strong>注意事项：</strong></div>
+                <div style={{ paddingLeft: '12px', marginTop: '4px', color: '#faad14' }}>
+                  <div>• 同一设备下端口名称不可重复</div>
+                  <div>• 批量导入支持最多50000条记录</div>
+                  <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"