🔔 通知系统

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

🚀 主要功能

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

📋 基础参数配置

参数	类型	默认值	说明
`width`	number/string	null	自定义宽度（如 `"100px"` 或 `"50%"`）
`zIndex`	number	1056	通知框的 z-index 层级
`type`	string	'alert'	通知类型：`alert`/`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，但不要直接传入用户输入）

🎨 通知类型

基础类型

alert: 警告通知
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	false	自动关闭延时（毫秒），`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(event) {
                // 打开操作日志页面
                $.form.open("{:url('admin/oplog/index')}");
            }
        },
        cancel: {
            text: '取消',
            callback: function(event) {
                console.log('取消操作');
            }
        }
    }
});

在业务场景中使用

// 表单提交成功通知
$('form[data-auto]').on('submit', function() {
    // 表单提交成功后会自动显示通知
    // 后端返回 success 响应时会自动调用 $.msg.notify
});

// AJAX 请求成功通知
$.post('{:url("save")}', data, 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'
        });
    }
});

// 文件上传进度通知
$('[data-file]').on('upload.progress', function(event, obj) {
    if (obj.number === 100) {
        $.msg.notify("上传完成", "文件已成功上传", 3000, {
            type: 'success'
        });
    }
});

自定义通知样式

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

// 不自动关闭
$.msg.notify("重要通知", "请仔细阅读", false, {
    type: 'warning',
    showButtons: true,
    buttons: {
        action: {
            text: '我知道了',
            callback: function(event) {
                // 手动关闭通知
                event.target.closest('.notifyjs-wrapper').remove();
            }
        }
    }
});