Nga弹窗变轻提示

将 window.alert 对话框替换成 naive-ui 风格的 Notification
当前为 2025-09-08 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Nga弹窗变轻提示
// @author       monat151
// @namespace    https://gf.qytechs.cn/zh-CN/scripts/548779
// @license      None
// @version      1.0
// @description  将 window.alert 对话框替换成 naive-ui 风格的 Notification
// @match        http*://bbs.nga.cn/*
// @match        http*://nga.178.com/*
// @match        http*://ngabbs.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nga.cn
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  const CONTAINER_ID = "monat-nga-notification-container";

  // 确保容器存在
  function ensureContainer() {
    let container = document.getElementById(CONTAINER_ID);
    if (!container) {
      container = document.createElement("div");
      container.id = CONTAINER_ID;
      container.style.position = "fixed";
      container.style.top = "16px";
      container.style.right = "16px";
      container.style.zIndex = "999999";
      container.style.display = "flex";
      container.style.flexDirection = "column";
      container.style.gap = "8px";
      document.body.appendChild(container);
    }
    return container;
  }

  // 创建一个通知
  function showNotification(message) {
    const container = ensureContainer();

    const notif = document.createElement("div");
    notif.style.display = "flex";
    notif.style.alignItems = "flex-start";
    notif.style.background = "#fff";
    notif.style.color = "#333";
    notif.style.padding = "12px 16px";
    notif.style.borderRadius = "8px";
    notif.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)";
    notif.style.fontSize = "14px";
    notif.style.minWidth = "220px";
    notif.style.maxWidth = "320px";
    notif.style.wordBreak = "break-word";
    notif.style.opacity = "0";
    notif.style.transform = "translateY(-10px)";
    notif.style.transition = "all 0.3s ease";

    // 左侧图标
    const icon = document.createElement("div");
    icon.innerHTML = `
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="12" y1="16" x2="12" y2="12"></line>
        <line x1="12" y1="8" x2="12" y2="8"></line>
      </svg>
    `;
    icon.style.flex = "0 0 auto";
    icon.style.marginRight = "10px";
    icon.style.marginTop = "2px";

    // 右侧内容
    const content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";

    // 标题
    const title = document.createElement("div");
    title.innerText = "提示";
    title.style.fontSize = "16px";
    title.style.fontWeight = "600";
    title.style.marginBottom = "4px";
    title.style.color = "#111";

    // 内容
    const text = document.createElement("div");
    text.innerText = message;
    text.style.lineHeight = "1.4";

    content.appendChild(title);
    content.appendChild(text);

    notif.appendChild(icon);
    notif.appendChild(content);
    container.appendChild(notif);

    // 动画进入
    void notif.offsetWidth;
    notif.style.opacity = "1";
    notif.style.transform = "translateY(0)";

    // 自动关闭
    setTimeout(() => {
      notif.style.opacity = "0";
      notif.style.transform = "translateY(-10px)";
      setTimeout(() => {
        notif.remove();
      }, 300);
    }, 3000);
  }

  // 替换 window.alert
  window.alert = function (msg) {
    showNotification(String(msg));
  };

  // 监控 DOM，保证容器存在
  const observer = new MutationObserver(() => {
    ensureContainer();
  });
  observer.observe(document.documentElement, { childList: true, subtree: true });
})();
欢迎访问Greasy Fork镜像
