MiModal 模态框组件文档

组件概述

MiModal 是一个增强型模态框组件，基于 Ant Design 的 Modal 组件封装，提供全局主题管理和批量更新功能。支持动态切换亮色/暗色主题，并可通过静态方法全局控制所有已打开的模态框。

组件特性

• 全局主题管理：支持动态切换亮色/暗色主题
• 批量更新：可同时更新所有已打开的模态框
• 自定义主题配置：支持完全自定义主题算法
• 生命周期事件：提供 onClosed 回调统一处理关闭事件

组件属性 (IMiModalProps)

继承自 IModalBaseProps 并扩展以下属性：

属性名	类型	默认值	描述
mode	string	'default'	主题模式 ('light'/'dark'/'default' 或自定义模式)
onClosed	(result: { ok?: boolean; cancel?: boolean }) => void	-	弹窗关闭回调（统一处理确定/取消）

静态方法

MiModal.setMode(mode: string)

设置全局主题模式并更新所有已打开的模态框。

示例：

// 设置为暗黑模式
MiModal.setMode('dark');

// 设置为亮色模式
MiModal.setMode('light');

// 设置为默认模式
MiModal.setThemeConfig(fn: (mode: string) => ThemeConfig)

自定义主题配置函数，覆盖默认的主题配置逻辑。

示例：

MiModal.setThemeConfig(mode => {
    return {
        algorithm: mode === 'dark' ? [theme.darkAlgorithm] : [theme.defaultAlgorithm],
        token: {
            colorPrimary: '#00b96b',
        },
    };
});

MiModal.open(props: IMiModalProps)

以编程方式打开模态框，返回包含 update 和 destroy 方法的实例对象。

示例：

const modal = MiModal.open({
    title: '提示',
    content: '确认执行此操作吗？',
    onOk: handleConfirm,
});

// 更新弹窗属性
modal.update({ title: '新标题' });

// 关闭弹窗
modal.destroy();

使用示例

基本使用

<MiModal open={visible} title='基本弹窗' onCancel={() => setVisible(false)} onOk={handleSubmit}>
    <p>弹窗内容</p>
</MiModal>

全局主题控制

// 在应用入口设置全局模式
MiModal.setMode('dark');

// 某个组件中
const App = () => {
    return (
        <>
            <button onClick={() => MiModal.setMode('light')}>切换亮色主题</button>
            <button onClick={() => MiModal.setMode('dark')}>切换暗色主题</button>

            <MiModal open={visible} title='主题弹窗' onCancel={() => setVisible(false)}>
                <p>此弹窗会响应全局主题变化</p>
            </MiModal>
        </>
    );
};

编程式调用

const showConfirm = () => {
    MiModal.open({
        title: '确认删除',
        content: '确定要删除此项吗？',
        onOk: deleteItem,
        onClosed: ({ ok }) => {
            if (ok) {
                message.success('删除成功');
            }
        },
    });
};