消息提示演示示例

/**
* 示例10: 消息提示演示
* 功能：演示各种类型的消息提示功能
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  try {
    // 创建消息提示演示面板
    const messagePanel = document.createElement('div');
    messagePanel.style.margin = '10px 0';
    messagePanel.style.padding = '20px';
    messagePanel.style.backgroundColor = '#f8f9fa';
    messagePanel.style.border = '1px solid #dee2e6';
    messagePanel.style.borderRadius = '8px';
    messagePanel.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

    // 面板标题
    const panelTitle = document.createElement('h3');
    panelTitle.textContent = '消息提示演示面板';
    panelTitle.style.margin = '0 0 15px 0';
    panelTitle.style.color = '#2c3e50';
    panelTitle.style.fontSize = '18px';
    panelTitle.style.fontWeight = 'bold';

    // 按钮容器
    const buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'grid';
    buttonContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';
    buttonContainer.style.gap = '10px';
    buttonContainer.style.marginBottom = '15px';

    // 通用按钮样式
    const buttonStyle = {
      padding: '10px 15px',
      border: 'none',
      borderRadius: '6px',
      cursor: 'pointer',
      fontSize: '14px',
      fontWeight: '500',
      color: 'white',
      transition: 'all 0.2s ease',
    };

    // 成功消息按钮
    const successBtn = document.createElement('button');
    successBtn.textContent = '✅ 显示成功消息';
    Object.assign(successBtn.style, buttonStyle, {
      backgroundColor: '#27ae60',
    });
    successBtn.addEventListener('click', () => {
      kinlink.formApi.showMessage(
        'success',
        '操作成功完成！数据已保存。',
        4
      );
    });

    // 错误消息按钮
    const errorBtn = document.createElement('button');
    errorBtn.textContent = '❌ 显示错误消息';
    Object.assign(errorBtn.style, buttonStyle, {
      backgroundColor: '#e74c3c',
    });
    errorBtn.addEventListener('click', () => {
      kinlink.formApi.showMessage(
        'error',
        '操作失败：请检查网络连接并重试。',
        5
      );
    });

    // 信息消息按钮
    const infoBtn = document.createElement('button');
    infoBtn.textContent = 'ℹ️ 显示信息消息';
    Object.assign(infoBtn.style, buttonStyle, {
      backgroundColor: '#3498db',
    });
    infoBtn.addEventListener('click', () => {
      kinlink.formApi.showMessage(
        'info',
        '温馨提示：建议在网络稳定的环境下操作。',
        3
      );
    });

    // 警告消息按钮
    const warningBtn = document.createElement('button');
    warningBtn.textContent = '⚠️ 显示警告消息';
    Object.assign(warningBtn.style, buttonStyle, {
      backgroundColor: '#f39c12',
    });
    warningBtn.addEventListener('click', () => {
      kinlink.formApi.showMessage(
        'warning',
        '注意：此操作将影响现有数据，请谨慎操作。',
        6
      );
    });

    // 综合演示按钮
    const demoBtn = document.createElement('button');
    demoBtn.textContent = '🎭 综合演示';
    Object.assign(demoBtn.style, buttonStyle, {
      backgroundColor: '#9b59b6',
    });
    demoBtn.addEventListener('click', () => {
      // 依次显示不同类型的消息
      setTimeout(() => {
        kinlink.formApi.showMessage('info', '开始处理您的请求...', 2);
      }, 0);
      
      setTimeout(() => {
        kinlink.formApi.showMessage('warning', '正在验证数据，请稍候...', 2);
      }, 2500);
      
      setTimeout(() => {
        kinlink.formApi.showMessage('success', '数据验证通过，处理完成！', 3);
      }, 5000);
    });

    // 添加按钮到容器
    buttonContainer.appendChild(successBtn);
    buttonContainer.appendChild(errorBtn);
    buttonContainer.appendChild(infoBtn);
    buttonContainer.appendChild(warningBtn);
    buttonContainer.appendChild(demoBtn);

    // 使用说明
    const instructions = document.createElement('div');
    instructions.innerHTML = `
      <div style="background: #e8f4fd; padding: 12px; border-radius: 6px; border-left: 4px solid #3498db;">
        <strong>使用说明：</strong><br>
        • 点击不同按钮可以看到各种类型的消息提示<br>
        • 每种消息类型都有对应的颜色和图标<br>
        • 消息会在指定时间后自动消失<br>
        • 综合演示展示了消息的时序控制
      </div>
    `;

    // 组装面板
    messagePanel.appendChild(panelTitle);
    messagePanel.appendChild(buttonContainer);
    messagePanel.appendChild(instructions);

    // 添加面板到表单
    const formElement = document.querySelector('.ant-form') || document.body;
    formElement.insertBefore(messagePanel, formElement.firstChild);

  } catch (error) {
    console.error('消息提示演示初始化失败:', error);
  }
});
})();