feat(端口管理): 重构端口创建模态框并优化UI交互
重构端口创建模态框的UI设计，引入分步表单布局，增强用户体验 优化表单字段的视觉呈现，添加图标和状态提示 新增服务器网卡管理功能，方便查看未添加端口的服务器 统一消息提示样式，使用带图标的自定义样式
This commit is contained in:
zhang1106
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import React, { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
@@ -11,8 +11,17 @@ import {
|
||||
Tooltip,
|
||||
Alert,
|
||||
Tag,
|
||||
Divider,
|
||||
} from 'antd';
|
||||
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
PlusOutlined,
|
||||
InfoCircleOutlined,
|
||||
ThunderboltOutlined,
|
||||
LinkOutlined,
|
||||
TagOutlined,
|
||||
FileTextOutlined,
|
||||
CheckCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import { designTokens } from '../config/theme';
|
||||
import CloseButton from './CloseButton';
|
||||
@@ -86,13 +95,14 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
|
||||
const [previewPorts, setPreviewPorts] = useState([]);
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
const [nicList, setNicList] = useState([]);
|
||||
const prevVisibleRef = React.useRef(false);
|
||||
const [activeStep, setActiveStep] = useState(1);
|
||||
const prevVisibleRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 只有当 visible 从 false 变为 true 时才执行初始化
|
||||
if (visible && !prevVisibleRef.current) {
|
||||
setPreviewPorts([]);
|
||||
setShowPreview(false);
|
||||
setActiveStep(1);
|
||||
form.resetFields();
|
||||
|
||||
if (defaultNicId) {
|
||||
@@ -149,7 +159,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
|
||||
status: values.status,
|
||||
description: values.description,
|
||||
});
|
||||
message.success('端口创建成功');
|
||||
message.success({ content: '端口创建成功', icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} /> });
|
||||
} else {
|
||||
const portsData = portNames.map((portName, index) => ({
|
||||
portId: `PORT-${Date.now()}-${index}`,
|
||||
@@ -164,7 +174,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
|
||||
}));
|
||||
|
||||
await axios.post('/api/device-ports/batch', { ports: portsData });
|
||||
message.success(`成功创建 ${portNames.length} 个端口`);
|
||||
message.success({ content: `成功创建 ${portNames.length} 个端口`, icon: <CheckCircleOutlined style={{ color: designTokens.colors.success.main }} /> });
|
||||
}
|
||||
|
||||
form.resetFields();
|
||||
@@ -190,215 +200,541 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
|
||||
onClose();
|
||||
}, [form, onClose]);
|
||||
|
||||
const handleValuesChange = (changedValues) => {
|
||||
if (changedValues.portName) {
|
||||
handlePortNameChange({ target: { value: changedValues.portName } });
|
||||
}
|
||||
};
|
||||
|
||||
const portCount = previewPorts.length || (form.getFieldValue('portName') && !showPreview ? 1 : 0);
|
||||
const selectedNic = nicList.find(nic => nic.nicId === form.getFieldValue('nicId'));
|
||||
|
||||
const styles = {
|
||||
modal: {
|
||||
borderRadius: '16px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
header: {
|
||||
background: `linear-gradient(135deg, ${designTokens.colors.primary.main} 0%, ${designTokens.colors.primary.dark} 100%)`,
|
||||
padding: '20px 24px',
|
||||
margin: '-1px -1px 0 -1px',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
},
|
||||
headerTitle: {
|
||||
color: '#fff',
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
},
|
||||
body: {
|
||||
padding: '24px',
|
||||
background: '#fff',
|
||||
},
|
||||
stepContainer: {
|
||||
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,
|
||||
},
|
||||
section: {
|
||||
background: designTokens.colors.neutral[50],
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: `1px solid ${designTokens.colors.neutral[200]}`,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: designTokens.colors.neutral[800],
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
},
|
||||
fieldLabel: {
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
color: designTokens.colors.neutral[700],
|
||||
marginBottom: '6px',
|
||||
},
|
||||
input: {
|
||||
borderRadius: '8px',
|
||||
borderColor: designTokens.colors.neutral[300],
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
select: {
|
||||
borderRadius: '8px',
|
||||
borderColor: designTokens.colors.neutral[300],
|
||||
},
|
||||
previewCard: {
|
||||
background: `linear-gradient(135deg, ${designTokens.colors.info.bg} 0%, ${designTokens.colors.primary.bg} 100%)`,
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginTop: '16px',
|
||||
border: `1px solid ${designTokens.colors.primary.light}20`,
|
||||
},
|
||||
previewTitle: {
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
color: designTokens.colors.primary.dark,
|
||||
marginBottom: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
},
|
||||
previewTags: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '6px',
|
||||
},
|
||||
previewTag: {
|
||||
background: '#fff',
|
||||
border: `1px solid ${designTokens.colors.primary.light}`,
|
||||
color: designTokens.colors.primary.main,
|
||||
borderRadius: '6px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
},
|
||||
footer: {
|
||||
padding: '16px 24px',
|
||||
background: designTokens.colors.neutral[50],
|
||||
borderTop: `1px solid ${designTokens.colors.neutral[200]}`,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerLeft: {
|
||||
fontSize: '12px',
|
||||
color: designTokens.colors.neutral[500],
|
||||
},
|
||||
footerRight: {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
},
|
||||
button: {
|
||||
height: '40px',
|
||||
borderRadius: '8px',
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
buttonPrimary: {
|
||||
background: `linear-gradient(135deg, ${designTokens.colors.primary.main} 0%, ${designTokens.colors.primary.dark} 100%)`,
|
||||
border: 'none',
|
||||
boxShadow: `0 4px 12px ${designTokens.colors.primary.main}40`,
|
||||
},
|
||||
nicSelectedCard: {
|
||||
background: designTokens.colors.success.bg,
|
||||
border: `1px solid ${designTokens.colors.success.light}`,
|
||||
borderRadius: '8px',
|
||||
padding: '12px 16px',
|
||||
marginTop: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
},
|
||||
nicSelectedIcon: {
|
||||
color: designTokens.colors.success.main,
|
||||
fontSize: '18px',
|
||||
},
|
||||
nicSelectedInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
nicSelectedName: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
color: designTokens.colors.success.dark,
|
||||
},
|
||||
nicSelectedSlot: {
|
||||
fontSize: '12px',
|
||||
color: designTokens.colors.success.main,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<PlusOutlined style={{ color: designTokens.colors.primary.main }} />
|
||||
<span>新增端口 - {device?.name || '设备'}</span>
|
||||
{portCount > 1 && <Tag color="blue">{portCount} 个端口</Tag>}
|
||||
</Space>
|
||||
}
|
||||
open={visible}
|
||||
closeIcon={<CloseButton />}
|
||||
onOk={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={loading}
|
||||
okText={portCount > 1 ? `创建 ${portCount} 个端口` : '创建'}
|
||||
cancelText="取消"
|
||||
width={560}
|
||||
footer={null}
|
||||
width={600}
|
||||
zIndex={1050}
|
||||
styles={{ body: { padding: '20px 24px' } }}
|
||||
style={styles.modal}
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
portType: 'RJ45',
|
||||
portSpeed: '1G',
|
||||
status: 'free',
|
||||
}}
|
||||
>
|
||||
<Form.Item name="deviceId" label="设备">
|
||||
<Input value={device?.name} disabled placeholder={device?.deviceId} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="nicId"
|
||||
label={
|
||||
<Space>
|
||||
所属网卡
|
||||
<Tooltip title="可选，不选择则端口不归属于任何网卡">
|
||||
<InfoCircleOutlined style={{ color: '#999' }} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Select
|
||||
placeholder="选择网卡（可选）"
|
||||
allowClear
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{nicList.map(nic => (
|
||||
<Option key={nic.nicId} value={nic.nicId}>
|
||||
{nic.name}
|
||||
{nic.slotNumber && ` (插槽${nic.slotNumber})`}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="portName"
|
||||
label={
|
||||
<Space>
|
||||
端口名称
|
||||
<Tooltip
|
||||
title="支持单个端口（如 eth0/1）或端口范围（如 1/0/1-1/0/48）"
|
||||
mouseEnterDelay={0.5}
|
||||
>
|
||||
<InfoCircleOutlined style={{ color: '#999' }} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
rules={[
|
||||
{ required: true, message: '请输入端口名称' },
|
||||
{
|
||||
pattern: /^[\w\/:\-]+$/,
|
||||
message: '端口名称格式不正确',
|
||||
},
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (!value) return Promise.resolve();
|
||||
const ports = generatePortNames(value);
|
||||
if (ports.length > 1000) {
|
||||
return Promise.reject(new Error('单次最多创建1000个端口'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="例如: eth0/1 或 1/0/1-1/0/48"
|
||||
onChange={e => {
|
||||
// 确保 Form 值更新
|
||||
form.setFieldValue('portName', e.target.value);
|
||||
handlePortNameChange(e);
|
||||
<div style={styles.header}>
|
||||
<div style={styles.headerTitle}>
|
||||
<PlusOutlined />
|
||||
<span>新增端口</span>
|
||||
<Tag
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
fontWeight: 500,
|
||||
marginLeft: '8px',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
>
|
||||
{device?.name || '设备'}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showPreview && (
|
||||
<Alert
|
||||
message={`将创建 ${previewPorts.length} 个端口`}
|
||||
description={
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Space wrap size={4}>
|
||||
<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',
|
||||
}}
|
||||
onValuesChange={handleValuesChange}
|
||||
>
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>
|
||||
<TagOutlined style={{ color: designTokens.colors.primary.main }} />
|
||||
端口标识
|
||||
</div>
|
||||
|
||||
<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();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<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} color="blue">
|
||||
<Tag key={index} style={styles.previewTag}>
|
||||
{port}
|
||||
</Tag>
|
||||
))}
|
||||
{previewPorts.length <
|
||||
parsePortRange(form.getFieldValue('portName'))?.portCount && (
|
||||
<Tag color="default">...等</Tag>
|
||||
{parsePortRange(form.getFieldValue('portName'))?.portCount > previewPorts.length && (
|
||||
<Tag style={{ ...styles.previewTag, background: designTokens.colors.neutral[100] }}>
|
||||
...等 {parsePortRange(form.getFieldValue('portName'))?.portCount} 个
|
||||
</Tag>
|
||||
)}
|
||||
</Space>
|
||||
</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] }} />}
|
||||
>
|
||||
{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>
|
||||
|
||||
{selectedNic && (
|
||||
<div style={styles.nicSelectedCard}>
|
||||
<div style={styles.nicSelectedIcon}>
|
||||
<CheckCircleOutlined />
|
||||
</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>
|
||||
</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' }}>
|
||||
<Form.Item
|
||||
name="portType"
|
||||
label={<span style={styles.fieldLabel}>端口类型</span>}
|
||||
rules={[{ required: true, message: '请选择端口类型' }]}
|
||||
>
|
||||
<Select size="large" style={{ width: '100%', borderRadius: '8px' }}>
|
||||
<Option value="RJ45">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<div style={{ width: '8px', height: '8px', 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 }} />
|
||||
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 }} />
|
||||
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 }} />
|
||||
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 }} />
|
||||
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 }} />
|
||||
QSFP28
|
||||
</div>
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="portSpeed"
|
||||
label={<span style={styles.fieldLabel}>端口速率</span>}
|
||||
rules={[{ required: true, message: '请选择端口速率' }]}
|
||||
>
|
||||
<Select size="large" style={{ width: '100%', borderRadius: '8px' }}>
|
||||
<Option value="100M">100M</Option>
|
||||
<Option value="1G">1G</Option>
|
||||
<Option value="10G">10G</Option>
|
||||
<Option value="25G">25G</Option>
|
||||
<Option value="40G">40G</Option>
|
||||
<Option value="100G">100G</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<Form.Item
|
||||
name="vlanId"
|
||||
label={<span style={styles.fieldLabel}>VLAN ID</span>}
|
||||
>
|
||||
<InputNumber
|
||||
size="large"
|
||||
placeholder="1-4094"
|
||||
min={1}
|
||||
max={4094}
|
||||
style={{ width: '100%', borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label={<span style={styles.fieldLabel}>状态</span>}
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select size="large" style={{ width: '100%', borderRadius: '8px' }}>
|
||||
<Option value="free">
|
||||
<Tag color="success">空闲</Tag>
|
||||
</Option>
|
||||
<Option value="occupied">
|
||||
<Tag color="warning">占用</Tag>
|
||||
</Option>
|
||||
<Option value="fault">
|
||||
<Tag color="error">故障</Tag>
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</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={{ marginBottom: 16 }}
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
background: designTokens.colors.info.bg,
|
||||
border: `1px solid ${designTokens.colors.info.light}40`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<Space style={{ display: 'flex', width: '100%' }}>
|
||||
<Form.Item
|
||||
name="portType"
|
||||
label="端口类型"
|
||||
rules={[{ required: true, message: '请选择端口类型' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="RJ45">RJ45</Option>
|
||||
<Option value="SFP">SFP</Option>
|
||||
<Option value="SFP+">SFP+</Option>
|
||||
<Option value="SFP28">SFP28</Option>
|
||||
<Option value="QSFP">QSFP</Option>
|
||||
<Option value="QSFP28">QSFP28</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="portSpeed"
|
||||
label="端口速率"
|
||||
rules={[{ required: true, message: '请选择端口速率' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="100M">100M</Option>
|
||||
<Option value="1G">1G</Option>
|
||||
<Option value="10G">10G</Option>
|
||||
<Option value="25G">25G</Option>
|
||||
<Option value="40G">40G</Option>
|
||||
<Option value="100G">100G</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Space style={{ display: 'flex', width: '100%' }}>
|
||||
<Form.Item name="vlanId" label="VLAN ID" style={{ flex: 1 }}>
|
||||
<InputNumber placeholder="1-4094" min={1} max={4094} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="free">空闲</Option>
|
||||
<Option value="occupied">占用</Option>
|
||||
<Option value="fault">故障</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Form.Item name="description" label="描述">
|
||||
<TextArea rows={2} placeholder="请输入描述信息（可选）" />
|
||||
</Form.Item>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: '#f5f5f5',
|
||||
padding: '12px 16px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
<strong>格式说明：</strong>
|
||||
<ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
|
||||
<li>
|
||||
单个端口：<code>eth0/1</code>、<code>gigabitethernet1/0/1</code>
|
||||
</li>
|
||||
<li>
|
||||
端口范围：<code>1/0/1-1/0/48</code>（创建 1/0/1 到 1/0/48 共48个端口）
|
||||
</li>
|
||||
<li>
|
||||
简单范围：<code>eth1-eth24</code>（创建 eth1 到 eth24 共24个端口）
|
||||
</li>
|
||||
</ul>
|
||||
<div style={styles.footer}>
|
||||
<div style={styles.footerLeft}>
|
||||
{portCount > 0 && (
|
||||
<span>
|
||||
将创建 <strong style={{ color: designTokens.colors.primary.main }}>{portCount}</strong> 个端口
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
<div style={styles.footerRight}>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleCancel}
|
||||
style={{ ...styles.button, minWidth: '80px' }}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
icon={<PlusOutlined />}
|
||||
style={{ ...styles.button, ...styles.buttonPrimary, minWidth: '120px' }}
|
||||
>
|
||||
{portCount > 1 ? `创建 ${portCount} 个` : '创建'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(PortCreateModal);
|
||||
export default React.memo(PortCreateModal);
|
||||
@@ -38,7 +38,6 @@ import {
|
||||
DownloadOutlined,
|
||||
UploadOutlined as UploadIcon,
|
||||
AppstoreOutlined,
|
||||
UnorderedListOutlined,
|
||||
FilterOutlined,
|
||||
ClearOutlined,
|
||||
CloudServerOutlined,
|
||||
@@ -48,12 +47,15 @@ import {
|
||||
DisconnectOutlined,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
TagOutlined,
|
||||
ThunderboltOutlined,
|
||||
FileTextOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import api from '../api';
|
||||
import * as XLSX from 'xlsx';
|
||||
import Papa from 'papaparse';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import VirtualDeviceList from '../components/VirtualDeviceList';
|
||||
import NetworkCardPanel from '../components/NetworkCardPanel';
|
||||
import NetworkCardCreateModal from '../components/NetworkCardCreateModal';
|
||||
import { designTokens } from '../config/theme';
|
||||
@@ -94,7 +96,6 @@ function PortManagement() {
|
||||
const [ports, setPorts] = useState([]);
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [deviceSearching, setDeviceSearching] = useState(false);
|
||||
const [cables, setCables] = useState([]);
|
||||
const [groupedPorts, setGroupedPorts] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [filters, setFilters] = useState({
|
||||
@@ -116,10 +117,13 @@ function PortManagement() {
|
||||
const [updateExisting, setUpdateExisting] = useState(false);
|
||||
|
||||
// 视图模式：list 或 panel
|
||||
const [viewMode, setViewMode] = useState('list');
|
||||
// const [viewMode, setViewMode] = useState('list');
|
||||
|
||||
// 网卡管理相关状态
|
||||
const [networkCardModalVisible, setNetworkCardModalVisible] = useState(false);
|
||||
const [serverNicListVisible, setServerNicListVisible] = useState(false);
|
||||
const [serverNicList, setServerNicList] = useState([]);
|
||||
const [serverNicLoading, setServerNicLoading] = useState(false);
|
||||
const [portCreateModalVisible, setPortCreateModalVisible] = useState(false);
|
||||
const [selectedDeviceForNic, setSelectedDeviceForNic] = useState(null);
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||
@@ -201,20 +205,10 @@ function PortManagement() {
|
||||
[fetchDevices]
|
||||
);
|
||||
|
||||
const fetchCables = useCallback(async () => {
|
||||
try {
|
||||
const response = await api.get('/cables');
|
||||
setCables(response.cables || response || []);
|
||||
} catch (error) {
|
||||
console.error('获取接线列表失败:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPorts();
|
||||
fetchDevices();
|
||||
fetchCables();
|
||||
}, [fetchPorts, fetchDevices, fetchCables]);
|
||||
}, [fetchPorts, fetchDevices]);
|
||||
|
||||
useEffect(() => {
|
||||
const grouped = {};
|
||||
@@ -275,6 +269,42 @@ function PortManagement() {
|
||||
setSelectDeviceModalVisible(true);
|
||||
};
|
||||
|
||||
const handleManageServerNics = async () => {
|
||||
setServerNicListVisible(true);
|
||||
setServerNicLoading(true);
|
||||
try {
|
||||
const [devicesResponse, portsResponse, nicsResponse] = await Promise.all([
|
||||
api.get('/devices/all', { params: { type: 'server' } }),
|
||||
api.get('/device-ports', { params: { pageSize: 10000 } }),
|
||||
api.get('/network-cards'),
|
||||
]);
|
||||
|
||||
const servers = devicesResponse.devices || devicesResponse || [];
|
||||
const ports = portsResponse.ports || portsResponse || [];
|
||||
const allNics = nicsResponse.data || nicsResponse || [];
|
||||
|
||||
const serversWithPorts = new Set(ports.map(p => p.deviceId));
|
||||
const serversWithNics = servers.filter(server => {
|
||||
const serverNics = allNics.filter(nic => nic.deviceId === server.deviceId);
|
||||
return serverNics.length > 0;
|
||||
});
|
||||
|
||||
const serversNeedingAttention = serversWithNics
|
||||
.filter(server => !serversWithPorts.has(server.deviceId))
|
||||
.map(server => {
|
||||
const serverNics = allNics.filter(nic => nic.deviceId === server.deviceId);
|
||||
return { ...server, nics: serverNics, nicCount: serverNics.length };
|
||||
});
|
||||
|
||||
setServerNicList(serversNeedingAttention);
|
||||
} catch (error) {
|
||||
console.error('获取服务器列表失败:', error);
|
||||
message.error('获取服务器列表失败: ' + (error.message || error));
|
||||
} finally {
|
||||
setServerNicLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDeviceForPort = device => {
|
||||
setSelectDeviceModalVisible(false);
|
||||
if (!device) return;
|
||||
@@ -284,7 +314,7 @@ function PortManagement() {
|
||||
if (deviceType === 'server') {
|
||||
api.get(`/network-cards/device/${device.deviceId}`)
|
||||
.then(nicList => {
|
||||
const validNicList = Array.isArray(nicList) ? nicList : (nicList.data || []);
|
||||
const validNicList = Array.isArray(nicList) ? nicList : [];
|
||||
if (validNicList.length === 0) {
|
||||
message.warning({
|
||||
content: '该服务器尚未添加网卡，请先在网卡管理中添加网卡',
|
||||
@@ -321,9 +351,9 @@ function PortManagement() {
|
||||
|
||||
if (deviceType === 'server') {
|
||||
api.get(`/network-cards/device/${device.deviceId}`)
|
||||
.then(response => {
|
||||
const nicList = response.data || [];
|
||||
if (nicList.length === 0) {
|
||||
.then(nicList => {
|
||||
const validNicList = Array.isArray(nicList) ? nicList : [];
|
||||
if (validNicList.length === 0) {
|
||||
message.warning({
|
||||
content: '该服务器尚未添加网卡，请先在网卡管理中添加网卡',
|
||||
icon: <ExclamationCircleOutlined style={{ color: designTokens.colors.warning.main }} />,
|
||||
@@ -331,7 +361,7 @@ function PortManagement() {
|
||||
});
|
||||
handleManageNetworkCards(device);
|
||||
} else {
|
||||
setNicList(nicList);
|
||||
setNicList(validNicList);
|
||||
setSelectedDeviceForPort(device);
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ deviceId: device.deviceId });
|
||||
@@ -485,8 +515,7 @@ function PortManagement() {
|
||||
deviceId: targetDeviceId,
|
||||
portName: name,
|
||||
portType: values.portType,
|
||||
portSpeed: values.portSpeed,
|
||||
status: values.status,
|
||||
status: 'free',
|
||||
vlanId: values.vlanId,
|
||||
description: values.description,
|
||||
nicId: values.nicId || null,
|
||||
@@ -509,8 +538,7 @@ function PortManagement() {
|
||||
deviceId: targetDeviceId,
|
||||
portName: portNames[0],
|
||||
portType: values.portType,
|
||||
portSpeed: values.portSpeed,
|
||||
status: values.status,
|
||||
status: 'free',
|
||||
vlanId: values.vlanId,
|
||||
description: values.description,
|
||||
nicId: values.nicId || null,
|
||||
@@ -1181,6 +1209,14 @@ function PortManagement() {
|
||||
>
|
||||
新增端口
|
||||
</Button>
|
||||
<Button
|
||||
icon={<CloudServerOutlined />}
|
||||
onClick={handleManageServerNics}
|
||||
size="large"
|
||||
style={{ borderRadius: designTokens.borderRadius.sm }}
|
||||
>
|
||||
管理网卡
|
||||
</Button>
|
||||
<Button
|
||||
icon={<ImportOutlined />}
|
||||
onClick={handleImport}
|
||||
@@ -1200,30 +1236,6 @@ function PortManagement() {
|
||||
</Space>
|
||||
|
||||
<Space>
|
||||
<Button.Group>
|
||||
<Button
|
||||
type={viewMode === 'list' ? 'primary' : 'default'}
|
||||
icon={<UnorderedListOutlined />}
|
||||
onClick={() => setViewMode('list')}
|
||||
style={viewMode === 'list' ? {
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
} : {}}
|
||||
>
|
||||
列表
|
||||
</Button>
|
||||
<Button
|
||||
type={viewMode === 'panel' ? 'primary' : 'default'}
|
||||
icon={<AppstoreOutlined />}
|
||||
onClick={() => setViewMode('panel')}
|
||||
style={viewMode === 'panel' ? {
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
} : {}}
|
||||
>
|
||||
面板
|
||||
</Button>
|
||||
</Button.Group>
|
||||
<Tooltip title="刷新数据">
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
@@ -1254,7 +1266,7 @@ function PortManagement() {
|
||||
暂无端口数据
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: designTokens.colors.neutral[400] }}>
|
||||
点击"新增端口"按钮创建第一个端口
|
||||
点击下方按钮添加端口
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1263,8 +1275,8 @@ function PortManagement() {
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAdd}
|
||||
style={{
|
||||
background: designTokens.colors.primary.gradient,
|
||||
style={{
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
borderRadius: designTokens.borderRadius.sm,
|
||||
}}
|
||||
@@ -1273,20 +1285,6 @@ function PortManagement() {
|
||||
</Button>
|
||||
</Empty>
|
||||
</motion.div>
|
||||
) : viewMode === 'panel' ? (
|
||||
<VirtualDeviceList
|
||||
devices={Object.values(groupedPorts)
|
||||
.map(g => g.device)
|
||||
.filter(Boolean)}
|
||||
groupedPorts={groupedPorts}
|
||||
cables={cables}
|
||||
allDevices={devices}
|
||||
onPortClick={port => handleEdit(port)}
|
||||
onAddPort={device => handleAddPortForDevice(device)}
|
||||
onManageNetworkCards={device => handleManageNetworkCards(device)}
|
||||
initialVisibleCount={5}
|
||||
loadMoreCount={5}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{Object.entries(groupedPorts).map(([deviceId, data], index) => {
|
||||
@@ -1468,14 +1466,31 @@ function PortManagement() {
|
||||
|
||||
{/* 新增/编辑端口弹窗 */}
|
||||
<Modal
|
||||
title={
|
||||
open={modalVisible}
|
||||
closeIcon={<CloseButton />}
|
||||
onCancel={() => {
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
setSelectedDeviceForPort(null);
|
||||
}}
|
||||
footer={null}
|
||||
width={600}
|
||||
zIndex={1050}
|
||||
style={{ borderRadius: '16px' }}
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
<div style={{
|
||||
background: `linear-gradient(135deg, ${designTokens.colors.primary.main} 0%, ${designTokens.colors.primary.dark} 100%)`,
|
||||
padding: '20px 24px',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: designTokens.borderRadius.md,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -1484,160 +1499,413 @@ function PortManagement() {
|
||||
>
|
||||
<ApiOutlined />
|
||||
</div>
|
||||
<span style={{ fontSize: '18px', fontWeight: 600 }}>
|
||||
<span style={{ fontSize: '18px', fontWeight: 600, color: '#fff' }}>
|
||||
{editingPort ? '编辑端口' : '新增端口'}
|
||||
</span>
|
||||
{selectedDeviceForPort && (
|
||||
<Tag style={{
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
{selectedDeviceForPort.name}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
open={modalVisible}
|
||||
closeIcon={<CloseButton />}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => {
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
setSelectedDeviceForPort(null);
|
||||
}}
|
||||
width={600}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
okButtonProps={{
|
||||
style: {
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
borderRadius: designTokens.borderRadius.sm,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Form form={form} layout="vertical" style={{ marginTop: '16px' }}>
|
||||
{selectedDeviceForPort ? (
|
||||
<>
|
||||
<Form.Item label="设备">
|
||||
<Input
|
||||
value={selectedDeviceForPort.name}
|
||||
disabled
|
||||
addonAfter={
|
||||
<span style={{ color: isServerDevice(selectedDeviceForPort) ? designTokens.colors.warning.main : designTokens.colors.success.main }}>
|
||||
{isServerDevice(selectedDeviceForPort) ? '服务器' : isSwitchDevice(selectedDeviceForPort) ? '交换机' : '设备'}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
{isServerDevice(selectedDeviceForPort) && (
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '24px', background: '#fff' }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '24px',
|
||||
gap: '8px',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px 20px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
background: designTokens.colors.primary.bg,
|
||||
color: designTokens.colors.primary.main,
|
||||
}}>
|
||||
<div style={{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
background: designTokens.colors.primary.main,
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
}}>1</div>
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '2px',
|
||||
background: designTokens.colors.primary.main,
|
||||
alignSelf: 'center',
|
||||
}} />
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px 20px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
background: designTokens.colors.neutral[100],
|
||||
color: designTokens.colors.neutral[500],
|
||||
}}>
|
||||
<div style={{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
background: 'transparent',
|
||||
color: designTokens.colors.neutral[500],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
border: `1px solid ${designTokens.colors.neutral[400]}`,
|
||||
}}>2</div>
|
||||
<span>高级配置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form form={form} layout="vertical">
|
||||
<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>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
background: designTokens.colors.info.bg,
|
||||
border: `1px solid ${designTokens.colors.info.light}40`,
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{
|
||||
background: designTokens.colors.neutral[50],
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: `1px solid ${designTokens.colors.neutral[200]}`,
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: designTokens.colors.neutral[800],
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}>
|
||||
<TagOutlined style={{ color: designTokens.colors.primary.main }} />
|
||||
端口标识
|
||||
</div>
|
||||
|
||||
{selectedDeviceForPort ? (
|
||||
<>
|
||||
<Form.Item label={<span style={{ fontSize: '13px', fontWeight: 500 }}>设备</span>}>
|
||||
<Input
|
||||
value={selectedDeviceForPort.name}
|
||||
disabled
|
||||
addonAfter={
|
||||
<span style={{ color: isServerDevice(selectedDeviceForPort) ? designTokens.colors.warning.main : designTokens.colors.success.main }}>
|
||||
{isServerDevice(selectedDeviceForPort) ? '服务器' : isSwitchDevice(selectedDeviceForPort) ? '交换机' : '设备'}
|
||||
</span>
|
||||
}
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isServerDevice(selectedDeviceForPort) ? '1fr 1fr' : '1fr', gap: '16px' }}>
|
||||
{isServerDevice(selectedDeviceForPort) && (
|
||||
<Form.Item
|
||||
name="nicId"
|
||||
label={<span style={{ fontSize: '13px', fontWeight: 500 }}>所属网卡</span>}
|
||||
rules={[{ required: true, message: '请选择网卡' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择网卡"
|
||||
size="large"
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
{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.speed && (
|
||||
<div style={{ fontSize: '12px', color: designTokens.colors.neutral[500] }}>
|
||||
{nic.speed}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
name="portName"
|
||||
label={<span style={{ fontSize: '13px', fontWeight: 500 }}>端口名称</span>}
|
||||
rules={[{ required: true, message: '请输入端口名称' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="例如: eth0/1 或 1/0/1-1/0/48"
|
||||
size="large"
|
||||
prefix={<TagOutlined style={{ color: designTokens.colors.neutral[400] }} />}
|
||||
suffix={
|
||||
<Tooltip title="支持批量添加，例如: 1/0/1-1/0/48 将创建 48 个端口">
|
||||
<InfoCircleOutlined style={{ color: designTokens.colors.neutral[400] }} />
|
||||
</Tooltip>
|
||||
}
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Form.Item
|
||||
name="nicId"
|
||||
label="所属网卡"
|
||||
rules={[{ required: true, message: '请选择网卡' }]}
|
||||
name="deviceId"
|
||||
label={<span style={{ fontSize: '13px', fontWeight: 500 }}>设备</span>}
|
||||
rules={[{ required: true, message: '请选择设备' }]}
|
||||
>
|
||||
<Select placeholder="请选择要关联网卡的端口">
|
||||
{nicList.map(nic => (
|
||||
<Option key={nic.nicId} value={nic.nicId}>
|
||||
{nic.name} {nic.speed ? `(${nic.speed})` : ''}
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备"
|
||||
showSearch
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
disabled={!!editingPort}
|
||||
size="large"
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} ({device.deviceId})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Form.Item
|
||||
name="deviceId"
|
||||
label="设备"
|
||||
rules={[{ required: true, message: '请选择设备' }]}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: designTokens.colors.neutral[50],
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: `1px solid ${designTokens.colors.neutral[200]}`,
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: designTokens.colors.neutral[800],
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}>
|
||||
<ThunderboltOutlined style={{ color: designTokens.colors.primary.main }} />
|
||||
端口属性
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<Form.Item
|
||||
name="portType"
|
||||
label={<span style={{ fontSize: '13px', fontWeight: 500 }}>端口类型</span>}
|
||||
rules={[{ required: true, message: '请选择端口类型' }]}
|
||||
initialValue="RJ45"
|
||||
>
|
||||
<Select size="large" style={{ borderRadius: '8px' }}>
|
||||
<Option value="RJ45">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<div style={{ width: '8px', height: '8px', 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 }} />
|
||||
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 }} />
|
||||
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 }} />
|
||||
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 }} />
|
||||
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 }} />
|
||||
QSFP28
|
||||
</div>
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="vlanId"
|
||||
label={<span style={{ fontSize: '13px', fontWeight: 500 }}>VLAN ID</span>}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="1-4094"
|
||||
min={1}
|
||||
max={4094}
|
||||
size="large"
|
||||
style={{ width: '100%', borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
{!editingPort && (
|
||||
<div style={{
|
||||
background: designTokens.colors.success.bg,
|
||||
border: `1px solid ${designTokens.colors.success.light}`,
|
||||
borderRadius: '8px',
|
||||
padding: '12px 16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
}}>
|
||||
<CheckCircleOutlined style={{ color: designTokens.colors.success.main, fontSize: '18px' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: '14px', fontWeight: 500, color: designTokens.colors.success.dark }}>
|
||||
新建端口默认状态为空闲
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: designTokens.colors.success.main }}>
|
||||
接线后状态将自动更新为占用
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editingPort && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<Form.Item
|
||||
name="status"
|
||||
label={<span style={{ fontSize: '13px', fontWeight: 500 }}>状态</span>}
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select size="large" style={{ borderRadius: '8px' }}>
|
||||
<Option value="free"><Tag color="success">空闲</Tag></Option>
|
||||
<Option value="occupied"><Tag color="warning">占用</Tag></Option>
|
||||
<Option value="fault"><Tag color="error">故障</Tag></Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: designTokens.colors.neutral[50],
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: `1px solid ${designTokens.colors.neutral[200]}`,
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: designTokens.colors.neutral[800],
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}>
|
||||
<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>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
padding: '16px 24px',
|
||||
background: designTokens.colors.neutral[50],
|
||||
borderTop: `1px solid ${designTokens.colors.neutral[200]}`,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderRadius: '0 0 16px 16px',
|
||||
}}>
|
||||
<div style={{ fontSize: '12px', color: designTokens.colors.neutral[500] }}>
|
||||
{editingPort ? '编辑模式下仅修改单个端口' : '支持批量创建端口'}
|
||||
</div>
|
||||
<Space>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={() => {
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
setSelectedDeviceForPort(null);
|
||||
}}
|
||||
style={{ borderRadius: '8px', minWidth: '80px' }}
|
||||
>
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备"
|
||||
showSearch
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
disabled={!!editingPort}
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} ({device.deviceId})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
name="portName"
|
||||
label="端口名称"
|
||||
rules={[{ required: true, message: '请输入端口名称' }]}
|
||||
extra={!editingPort && '支持批量添加，例如: 1/0/1-1/0/48 将创建 48 个端口'}
|
||||
>
|
||||
<Input placeholder="例如: eth0/1 或 1/0/1-1/0/48" />
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="portType"
|
||||
label="端口类型"
|
||||
rules={[{ required: true, message: '请选择端口类型' }]}
|
||||
initialValue="RJ45"
|
||||
>
|
||||
<Select placeholder="请选择端口类型">
|
||||
<Option value="RJ45">RJ45</Option>
|
||||
<Option value="SFP">SFP</Option>
|
||||
<Option value="SFP+">SFP+</Option>
|
||||
<Option value="SFP28">SFP28</Option>
|
||||
<Option value="QSFP">QSFP</Option>
|
||||
<Option value="QSFP28">QSFP28</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="portSpeed"
|
||||
label="端口速率"
|
||||
rules={[{ required: true, message: '请选择端口速率' }]}
|
||||
initialValue="1G"
|
||||
>
|
||||
<Select placeholder="请选择端口速率">
|
||||
<Option value="100M">100M</Option>
|
||||
<Option value="1G">1G</Option>
|
||||
<Option value="10G">10G</Option>
|
||||
<Option value="25G">25G</Option>
|
||||
<Option value="40G">40G</Option>
|
||||
<Option value="100G">100G</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
initialValue="free"
|
||||
>
|
||||
<Select placeholder="请选择状态">
|
||||
<Option value="free">空闲</Option>
|
||||
<Option value="occupied">占用</Option>
|
||||
<Option value="fault">故障</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="vlanId" label="VLAN ID">
|
||||
<InputNumber placeholder="请输入VLAN ID" min={1} max={4094} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item name="description" label="描述">
|
||||
<TextArea rows={3} placeholder="请输入描述信息" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleSubmit}
|
||||
icon={<PlusOutlined />}
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${designTokens.colors.primary.main} 0%, ${designTokens.colors.primary.dark} 100%)`,
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
boxShadow: `0 4px 12px ${designTokens.colors.primary.main}40`,
|
||||
minWidth: '120px',
|
||||
}}
|
||||
>
|
||||
{editingPort ? '保存' : '创建'}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* 批量导入弹窗 */}
|
||||
@@ -2251,6 +2519,150 @@ function PortManagement() {
|
||||
}}
|
||||
onSuccess={handleNicSuccess}
|
||||
/>
|
||||
|
||||
{/* 服务器网卡列表弹窗 */}
|
||||
<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={serverNicListVisible}
|
||||
closeIcon={<CloseButton />}
|
||||
onCancel={() => {
|
||||
setServerNicListVisible(false);
|
||||
setServerNicList([]);
|
||||
}}
|
||||
footer={null}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
>
|
||||
{serverNicLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '60px 0' }}>
|
||||
<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', 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>
|
||||
|
||||
{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);
|
||||
}}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
>
|
||||
{server.nicCount > 0 ? '管理网卡' : '添加网卡'}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user