yunrui_asset/frontend/src/components/PortCreateModal.jsx

import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { Modal, Form, Input, Select, InputNumber, message, Space, Button, Tooltip, Alert, Tag } from 'antd';
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
import axios from 'axios';

const { Option } = Select;
const { TextArea } = Input;

const designTokens = {
  colors: {
    primary: {
      main: '#667eea',
      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    }
  },
  borderRadius: {
    medium: '10px'
  }
};

function parsePortRange(portName) {
  if (!portName || typeof portName !== 'string') {
    return null;
  }

  const trimmed = portName.trim();
  
  if (!trimmed.includes('-')) {
    return null;
  }

  const [startPart, endPart] = trimmed.split('-').map(s => s.trim());
  
  if (!startPart || !endPart) {
    return null;
  }

  const startNumMatch = startPart.match(/(\d+)$/);
  const endNumMatch = endPart.match(/(\d+)$/);
  
  if (!startNumMatch || !endNumMatch) {
    return null;
  }

  const startNum = parseInt(startNumMatch[1], 10);
  const endNum = parseInt(endNumMatch[1], 10);
  
  if (startNum >= endNum || endNum - startNum > 1000) {
    return null;
  }

  const prefix = startPart.replace(startNumMatch[0], '');
  const portCount = endNum - startNum + 1;
  
  const ports = [];
  for (let i = 0; i < portCount; i++) {
    const num = startNum + i;
    ports.push(`${prefix}${num}`);
  }

  return {
    isRange: true,
    prefix,
    startNum,
    endNum,
    portCount,
    ports
  };
}

function generatePortNames(portName) {
  const result = parsePortRange(portName);
  
  if (result && result.isRange) {
    return result.ports;
  }
  
  return [portName];
}

function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, networkCards = [] }) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [previewPorts, setPreviewPorts] = useState([]);
  const [showPreview, setShowPreview] = useState(false);
  const [nicList, setNicList] = useState([]);
  const prevVisibleRef = React.useRef(false);

  useEffect(() => {
    // 只有当 visible 从 false 变为 true 时才执行初始化
    if (visible && !prevVisibleRef.current) {
      setPreviewPorts([]);
      setShowPreview(false);
      form.resetFields();
      
      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]);

  const fetchNetworkCards = async () => {
    try {
      const response = await axios.get(`/api/network-cards/device/${device.deviceId}`);
      setNicList(response.data || []);
    } catch (error) {
      console.error('获取网卡列表失败:', error);
      setNicList([]);
    }
  };

  const handlePortNameChange = useCallback((e) => {
    const value = e.target.value;
    const ports = generatePortNames(value);
    
    if (ports.length > 1) {
      setPreviewPorts(ports.slice(0, 20));
      setShowPreview(true);
    } else {
      setPreviewPorts([]);
      setShowPreview(false);
    }
  }, []);

  const handleSubmit = useCallback(async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);

      const portNames = generatePortNames(values.portName);
      
      if (portNames.length === 1) {
        await axios.post('/api/device-ports', {
          deviceId: device.deviceId,
          nicId: values.nicId || null,
          portName: portNames[0],
          portType: values.portType,
          portSpeed: values.portSpeed,
          vlanId: values.vlanId,
          status: values.status,
          description: values.description
        });
        message.success('端口创建成功');
      } else {
        const portsData = portNames.map((portName, index) => ({
          portId: `PORT-${Date.now()}-${index}`,
          deviceId: device.deviceId,
          nicId: values.nicId || null,
          portName,
          portType: values.portType,
          portSpeed: values.portSpeed,
          vlanId: values.vlanId,
          status: values.status,
          description: values.description
        }));

        await axios.post('/api/device-ports/batch', { ports: portsData });
        message.success(`成功创建 ${portNames.length} 个端口`);
      }

      form.resetFields();
      setPreviewPorts([]);
      setShowPreview(false);
      onSuccess?.();
      onClose();
    } catch (error) {
      if (error.errorFields) {
        return;
      }
      message.error(error.response?.data?.error || '端口创建失败');
      console.error('创建端口失败:', error);
    } finally {
      setLoading(false);
    }
  }, [device, form, onClose, onSuccess]);

  const handleCancel = useCallback(() => {
    form.resetFields();
    setPreviewPorts([]);
    setShowPreview(false);
    onClose();
  }, [form, onClose]);

  const portCount = previewPorts.length || (form.getFieldValue('portName') && !showPreview ? 1 : 0);

  return (
    <Modal
      title={
        <Space>
          <PlusOutlined style={{ color: designTokens.colors.primary.main }} />
          <span>新增端口 - {device?.name || '设备'}</span>
          {portCount > 1 && (
            <Tag color="blue">{portCount} 个端口</Tag>
          )}
        </Space>
      }
      open={visible}
      onOk={handleSubmit}
      onCancel={handleCancel}
      confirmLoading={loading}
      okText={portCount > 1 ? `创建 ${portCount} 个端口` : '创建'}
      cancelText="取消"
      width={560}
      zIndex={1050}
      styles={{ body: { padding: '20px 24px' } }}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          portType: 'RJ45',
          portSpeed: '1G',
          status: 'free'
        }}
      >
        <Form.Item
          name="deviceId"
          label="设备"
        >
          <Input
            value={device?.name}
            disabled
            placeholder={device?.deviceId}
          />
        </Form.Item>

        <Form.Item
          name="nicId"
          label={
            <Space>
              所属网卡
              <Tooltip title="可选，不选择则端口不归属于任何网卡">
                <InfoCircleOutlined style={{ color: '#999' }} />
              </Tooltip>
            </Space>
          }
        >
          <Select
            placeholder="选择网卡（可选）"
            allowClear
            showSearch
            optionFilterProp="children"
            style={{ width: '100%' }}
          >
            {nicList.map(nic => (
              <Option key={nic.nicId} value={nic.nicId}>
                {nic.name}
                {nic.slotNumber && ` (插槽${nic.slotNumber})`}
              </Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="portName"
          label={
            <Space>
              端口名称
              <Tooltip title="支持单个端口（如 eth0/1）或端口范围（如 1/0/1-1/0/48）" 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);
            }}
          />
        </Form.Item>

        {showPreview && (
          <Alert
            message={`将创建 ${previewPorts.length} 个端口`}
            description={
              <div style={{ marginTop: 8 }}>
                <Space wrap size={4}>
                  {previewPorts.map((port, index) => (
                    <Tag key={index} color="blue">{port}</Tag>
                  ))}
                  {previewPorts.length < parsePortRange(form.getFieldValue('portName'))?.portCount && (
                    <Tag color="default">...等</Tag>
                  )}
                </Space>
              </div>
            }
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
          />
        )}

        <Space style={{ display: 'flex', width: '100%' }}>
          <Form.Item
            name="portType"
            label="端口类型"
            rules={[{ required: true, message: '请选择端口类型' }]}
            style={{ flex: 1 }}
          >
            <Select placeholder="请选择">
              <Option value="RJ45">RJ45</Option>
              <Option value="SFP">SFP</Option>
              <Option value="SFP+">SFP+</Option>
              <Option value="SFP28">SFP28</Option>
              <Option value="QSFP">QSFP</Option>
              <Option value="QSFP28">QSFP28</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="portSpeed"
            label="端口速率"
            rules={[{ required: true, message: '请选择端口速率' }]}
            style={{ flex: 1 }}
          >
            <Select placeholder="请选择">
              <Option value="100M">100M</Option>
              <Option value="1G">1G</Option>
              <Option value="10G">10G</Option>
              <Option value="25G">25G</Option>
              <Option value="40G">40G</Option>
              <Option value="100G">100G</Option>
            </Select>
          </Form.Item>
        </Space>

        <Space style={{ display: 'flex', width: '100%' }}>
          <Form.Item
            name="vlanId"
            label="VLAN ID"
            style={{ flex: 1 }}
          >
            <InputNumber
              placeholder="1-4094"
              min={1}
              max={4094}
              style={{ width: '100%' }}
            />
          </Form.Item>

          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
            style={{ flex: 1 }}
          >
            <Select placeholder="请选择">
              <Option value="free">空闲</Option>
              <Option value="occupied">占用</Option>
              <Option value="fault">故障</Option>
            </Select>
          </Form.Item>
        </Space>

        <Form.Item
          name="description"
          label="描述"
        >
          <TextArea rows={2} placeholder="请输入描述信息（可选）" />
        </Form.Item>

        <div style={{ 
          background: '#f5f5f5', 
          padding: '12px 16px', 
          borderRadius: '8px',
          fontSize: '12px',
          color: '#666'
        }}>
          <strong>格式说明：</strong>
          <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
            <li>单个端口：<code>eth0/1</code>、<code>gigabitethernet1/0/1</code></li>
            <li>端口范围：<code>1/0/1-1/0/48</code>（创建 1/0/1 到 1/0/48 共48个端口）</li>
            <li>简单范围：<code>eth1-eth24</code>（创建 eth1 到 eth24 共24个端口）</li>
          </ul>
        </div>
      </Form>
    </Modal>
  );
}

export default React.memo(PortCreateModal);