html消息提示框封装，默认，失败，警告，成功四个状态

message.none("请输入用户名");
message.error("请输入搜索内容");
message.info("请输入用户名");
message.success("登录成功");

封装了四种样式 默认，成功，失败，警告 

// 消息提示弹窗
const message = (function () {
  let zIndex = 999;
  let marginTop = "26rem";
  let lastMessage = null; // 存储上一个提示框元素

  const iconMap = {
    info: "https://phadwiki-1308066085.file.myqcloud.com/phadcalc/images/info.png",
    error:
      "https://phadwiki-1308066085.file.myqcloud.com/phadcalc/images/error.png",
    success:
      "https://phadwiki-1308066085.file.myqcloud.com/phadcalc/images/succee.png",
  };

  const styleMap = {
    none: { bgColor: "rgba(0, 0, 0, 0.6)", borderColor: "none", color: "#fff" },
    info: { bgColor: "#edf2fc", borderColor: "#ebeef5", color: "#909399" },
    error: { bgColor: "#fef0f0", borderColor: "#fde2e2", color: "#f56c6c" },
    success: { bgColor: "#f0f9eb", borderColor: "#e1f3d8", color: "#67c23a" },
  };

  function clearLastMessage() {
    if (lastMessage) {
      lastMessage.classList.add("message-out");
      setTimeout(() => {
        lastMessage.remove();
        lastMessage = null;
      }, 300);
    }
  }

  function createMessageElement(type, val) {
    const style = styleMap[type] || styleMap.none;
    const icon = iconMap[type] || "";

    const div = document.createElement("div");
    div.className = "message_list message-in";
    div.style.cssText = `
      z-index: ${zIndex++};
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: ${marginTop};
      background-color: ${style.bgColor};
      border: 1px solid ${style.borderColor};
      padding: 8px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      pointer-events: auto;
      transition: opacity 0.3s ease, transform 0.3s ease;
    `;

    const img = document.createElement("img");
    img.src = icon;
    img.alt = type;
    img.style.cssText = `
      width: 16px;
      height: 16px;
      margin-right: 8px;
      display: ${icon ? "inline-block" : "none"};
    `;

    const span = document.createElement("span");
    span.textContent = val;
    span.style.cssText = `
      color: ${style.color};
      font-size: 14px;
    `;

    div.appendChild(img);
    div.appendChild(span);
    return div;
  }

  function showMessage(type, val, time = 1000) {
    clearLastMessage();

    const messageEl = createMessageElement(type, val);
    document.body.appendChild(messageEl);

    lastMessage = messageEl;

    setTimeout(() => {
      messageEl.classList.remove("message-in");
      messageEl.classList.add("message-out");
      setTimeout(() => {
        if (messageEl) {
          messageEl.remove();
          if (lastMessage === messageEl) {
            lastMessage = null;
          }
        }
      }, 300);
    }, time);

    return this;
  }

  return {
    none(val, time) {
      return showMessage.call(this, "none", val, time);
    },
    info(val, time) {
      return showMessage.call(this, "info", val, time);
    },
    error(val, time) {
      return showMessage.call(this, "error", val, time);
    },
    success(val, time) {
      return showMessage.call(this, "success", val, time);
    },
  };
})();