Semi Design中Modal组件的关闭控制策略探讨

在Semi Design组件库的使用过程中，Modal弹窗组件的关闭行为控制是一个值得深入探讨的话题。本文将从实际业务场景出发，分析现有解决方案的优缺点，并探讨更优雅的实现方式。

业务场景分析

在表单编辑场景中，我们经常遇到这样的需求：

1. 用户通过Modal弹窗编辑表单数据
2. 点击蒙层或关闭按钮时可能出现两种情况：
   • 表单数据未修改：直接关闭
   • 表单数据已修改：提示用户确认

这种需求源于两个用户体验原则的平衡：

• 直觉性原则：有蒙层暗示可点击关闭
• 数据安全原则：防止误操作导致数据丢失

现有解决方案

目前Semi Design推荐的解决方案是使用受控模式，通过onClose事件手动控制关闭行为。基本实现方式如下：

const [visible, setVisible] = useState(false);
const [formModified, setFormModified] = useState(false);

const handleClose = () => {
  if(formModified) {
    Modal.confirm({
      title: '数据未保存',
      content: '确定要关闭吗？',
      onOk: () => setVisible(false)
    });
  } else {
    setVisible(false);
  }
};

<Modal 
  visible={visible}
  onClose={handleClose}
  // 其他props
>
  {/* 表单内容 */}
</Modal>

潜在优化方向

虽然受控模式可以解决问题，但从API设计角度考虑，可以有以下优化思路：

1. 统一关闭事件处理 将各种关闭来源（蒙层、关闭按钮、取消按钮）的事件统一处理，提供更简洁的API

2. 预关闭拦截机制 在真正关闭前提供拦截点，允许开发者决定是否继续关闭流程

3. 关闭来源区分 提供关闭来源信息，便于开发者根据不同来源采取不同策略

技术实现建议

从React组件设计角度，可以考虑以下实现方案：

interface ModalProps {
  // 现有props...
  onRequestClose?: (source: 'mask' | 'closeBtn' | 'cancelBtn') => boolean | Promise<boolean>;
}

这种设计具有以下优势：

1. 统一处理所有关闭途径
2. 支持同步/异步决策
3. 明确关闭来源，便于差异化处理
4. 保持与现有API的兼容性

最佳实践建议

在实际项目中，建议采用以下策略处理Modal关闭逻辑：

1. 对于简单场景，使用现有受控模式即可
2. 对于复杂场景，可以封装高阶组件统一处理关闭逻辑
3. 保持关闭确认提示的一致性，避免用户困惑
4. 考虑添加防抖处理，防止快速连续点击

总结

Modal组件的关闭控制是用户体验的关键环节。Semi Design当前提供的受控模式已经能够满足基本需求，但从API设计角度仍有优化空间。开发者可以根据项目复杂度选择合适的实现方案，在用户体验和开发效率之间取得平衡。