Hexo Stellar 添加 Toast Notification 通知悬浮窗

(function () {
  "use strict";

  const CONFIG = {
    duration: 5000,
    maxCount: 5,
  };

  const ICONS = {
    success: '<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>',
    error: '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
    warning: '<svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>',
    info: '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>',
    close: '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
  };

  let toastContainer = null;
  const activeToasts = new Map();

  function getContainer() {
    if (!toastContainer) {
      toastContainer = document.createElement("div");
      toastContainer.id = "toast-container";
      document.body.appendChild(toastContainer);
    }
    return toastContainer;
  }

  function show(options) {
    const config = {
      type: "info",
      title: "",
      message: "",
      duration: CONFIG.duration,
      ...options,
    };

    // 创建通知元素...
    // 详细代码见完整文件
  }

  // 快捷方法
  function success(message, title, options = {}) {
    return show({ type: "success", message, title, ...options });
  }

  function error(message, title, options = {}) {
    return show({ type: "error", message, title, ...options });
  }

  function warning(message, title, options = {}) {
    return show({ type: "warning", message, title, ...options });
  }

  function info(message, title, options = {}) {
    return show({ type: "info", message, title, ...options });
  }

  // 暴露全局 API
  window.Toast = {
    show,
    success,
    error,
    warning,
    info,
  };
})();

// 显示成功通知
Toast.success('操作成功！');

// 显示错误通知
Toast.error('操作失败，请重试。');

// 显示警告通知
Toast.warning('请注意，此操作不可撤销。');

// 显示信息通知
Toast.info('这是一条提示信息。');

Toast.success('文章发布成功！', '发布成功', {
  duration: 3000  // 3秒后自动关闭
});

Toast.show({
  type: 'success',      // 类型：success, error, warning, info
  title: '标题',        // 标题（可选）
  message: '消息内容',   // 消息内容
  duration: 5000        // 显示时长（毫秒），0 表示不自动关闭
});

Toast.closeAll();

// 左上角
Toast.info('左上角通知', '提示', {
  position: 'top-left'
});

// 右上角（默认）
Toast.info('右上角通知', '提示', {
  position: 'top-right'
});

// 左下角
Toast.info('左下角通知', '提示', {
  position: 'bottom-left'
});

// 右下角
Toast.info('右下角通知', '提示', {
  position: 'bottom-right'
});

Toast.show({
  type: 'info',
  title: '发现新版本',
  message: '是否立即更新？',
  button: {
    text: '立即更新',
    icon: '<svg viewBox="0 0 24 24"><path d="M12 4v12m0 0l-4-4m4 4l4-4M4 12h16"/></svg>',
    onclick: function() {
      console.log('用户点击了更新按钮');
      // 执行更新操作
    }
  }
});

const toast = Toast.success('操作成功！', '成功', {
  duration: 3000
});

// 监听关闭事件
toast.onClose = function() {
  console.log('通知已关闭');
};

// 手动关闭
toast.close();

Toast.info('这条通知会在鼠标悬停时暂停计时', '提示', {
  duration: 10000  // 10秒
});