🔔 通知系统

ThinkAdmin 提供完善的通知系统，支持多种通知类型和自定义配置。

🚀 主要功能

多种类型: 支持 default、success、error、warning、info 等通知类型
灵活位置: 支持多种显示位置配置
自定义样式: 支持自定义宽度、图标等样式
交互控制: 支持点击关闭、按钮关闭等交互方式
动画效果: 支持多种动画效果
HTML 支持: 支持 HTML 内容显示

📋 基础参数配置

参数	类型	默认值	说明
`width`	number/string	'400px'	`$.msg.notify()` 包装层默认宽度，可传数值或字符串覆盖
`zIndex`	number	CSS 默认	通知框的 z-index 层级，只有在 `option` 中传入时才会写入行内样式
`type`	string	'default'	通知类型：`default`/`success`/`error`/`warning`/`info`
`position`	string	'top-right'	显示位置：`top-left`/`top-right`/`bottom-left`/`bottom-right`/`top-center`/`bottom-center`
`title`	string	''	标题（支持HTML，但不要直接传入用户输入）
`description`	string	''	内容描述（支持HTML，但不要直接传入用户输入）

🎨 通知类型

基础类型

default: 默认通知
success: 成功通知
error: 错误通知
warning: 警告通知
info: 信息通知

显示位置

top-left: 左上角
top-right: 右上角
bottom-left: 左下角
bottom-right: 右下角
top-center: 顶部居中
bottom-center: 底部居中

⚙️ 高级配置

图片配置

显示图标: 支持显示自定义图标
图标路径: 支持自定义图标路径
图标样式: 支持图标样式定制

交互控制

自动关闭: 支持自动关闭功能
关闭延时: 可设置自动关闭延时
关闭方式: 支持点击关闭、按钮关闭等

动画效果

进入动画: 支持进入动画效果
退出动画: 支持退出动画效果
动画时长: 可自定义动画时长

🖼️ 图片配置

参数	类型	默认值	说明
`image.visible`	boolean	false	是否显示图标
`image.customImage`	string	''	自定义图标路径（如 `"img/info.png"`）

🎮 交互控制

参数	类型	默认值	说明
`closeTimeout`	number/boolean	3000	自动关闭延时（毫秒），在 `option` 中传 `false` 表示不自动关闭
`closeWith`	string[]	['click']	关闭触发方式：`click`（点击关闭）/`button`（按钮关闭）

✨ 动画效果

参数	类型	默认值	说明
`animation.open`	string/null/false	'slide-in'	打开动画：`slide-in`/`fade-in`，`false` 表示无动画
`animation.close`	string/null/false	'slide-out'	关闭动画：`slide-out`/`fade-out`，`false` 表示无动画

🔧 实际应用示例

基础通知示例

// 简单通知（3秒后自动关闭）
$.msg.notify("操作成功", "数据已保存");

// 成功通知
$.msg.notify("成功", "操作成功完成", 3000, {
    type: 'success',
    position: 'top-right'
});

// 错误通知
$.msg.notify("错误", "操作失败，请重试", 5000, {
    type: 'error',
    position: 'top-right'
});

// 警告通知
$.msg.notify("警告", "请注意数据安全", 4000, {
    type: 'warning',
    position: 'top-right'
});

// 信息通知
$.msg.notify("提示", "这是一条提示信息", 3000, {
    type: 'info',
    position: 'top-right'
});

高级通知示例

// 带进度条和按钮的通知
$.msg.notify("系统通知", "有新的消息需要处理", 5000, {
    type: 'info',
    showProgress: true,
    position: 'bottom-right',
    animation: {
        open: 'fade-in',
        close: 'slide-out'
    },
    image: {
        visible: true,
        customImage: '/static/plugs/notify/img/danger.png'
    },
    showButtons: true,
    buttons: {
        action: {
            text: '查看',
            callback: function() {
                // 打开操作日志页面
                $.form.open("{:url('admin/oplog/index')}");
            }
        },
        cancel: {
            text: '取消',
            callback: function() {
                console.log('取消操作');
            }
        }
    }
});

在业务场景中使用

// 自动表单默认使用 $.msg.auto() 显示 layer 消息，不会自动调用 $.msg.notify()
// 需要通知样式时，请在自定义回调或手动请求中显式调用

// AJAX 请求完成后手动显示通知
$.form.load('{:url("save")}', data, 'post', function(res) {
    if (res.code === 1) {
        $.msg.notify("成功", res.info, 3000, {
            type: 'success',
            position: 'top-right'
        });
    } else {
        $.msg.notify("失败", res.info, 5000, {
            type: 'error',
            position: 'top-right'
        });
    }
    return false;
});

// 文件上传完成通知，具体事件对象取决于当前上传适配器
$('[data-file]').on('upload.done upload.complete', function() {
    $.msg.notify("上传完成", "文件已成功上传", 3000, {
        type: 'success'
    });
});

自定义通知样式

// 自定义宽度和位置
$.msg.notify("标题", "内容", 3000, {
    width: '400px',
    position: 'top-center',
    type: 'info'
});

// 不自动关闭：第三个参数会被包装层默认成 3000，需要在 option 中覆盖 closeTimeout
$.msg.notify("重要通知", "请仔细阅读", 3000, {
    type: 'warning',
    closeTimeout: false,
    showButtons: true,
    buttons: {
        action: {
            text: '我知道了',
            callback: function() {
                // 按钮回调执行后，通知组件会自动关闭当前通知
                console.log('已确认');
            }
        }
    }
});