comfyui_o1key/web/js/updateNotifier.js

import { api } from "../../../scripts/api.js";

function startCountdown(toast, closeBtn, seconds, accentColor) {
    let remaining = seconds;
    closeBtn.textContent = `× ${remaining}s`;

    const interval = setInterval(() => {
        remaining--;
        if (remaining <= 0) {
            clearInterval(interval);
            toast.style.transition = "opacity 0.4s ease";
            toast.style.opacity = "0";
            setTimeout(() => toast.remove(), 400);
        } else {
            closeBtn.textContent = `× ${remaining}s`;
        }
    }, 1000);

    closeBtn.onclick = () => {
        clearInterval(interval);
        toast.remove();
    };
}

api.addEventListener("o1key.update_available", (event) => {
    const message = event.detail?.message || "欢迎使用o1key工作流";

    const style = document.createElement("style");
    style.textContent = `
        @keyframes o1key-fadein {
            from { opacity: 0; transform: translateY(16px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
    `;
    document.head.appendChild(style);

    const toast = document.createElement("div");
    toast.style.cssText = `
        position: fixed;
        bottom: 28px;
        left: 28px;
        background: linear-gradient(135deg, #0d3320 0%, #145a32 60%, #1e8449 100%);
        color: #d5f5e3;
        border: 1px solid #27ae60;
        border-radius: 12px;
        padding: 18px 20px 16px 20px;
        font-size: 15px;
        z-index: 99999;
        box-shadow: 0 6px 24px rgba(39,174,96,0.35), 0 2px 8px rgba(0,0,0,0.5);
        max-width: 340px;
        animation: o1key-fadein 0.4s cubic-bezier(.22,.68,0,1.2);
    `;

    const header = document.createElement("div");
    header.style.cssText = `display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;`;

    const title = document.createElement("span");
    title.textContent = "🐴 o1key 工作流";
    title.style.cssText = `font-weight: bold; font-size: 13px; color: #82e0aa; letter-spacing: 0.5px;`;

    const closeBtn = document.createElement("button");
    closeBtn.style.cssText = `background: none; border: none; color: #82e0aa; font-size: 13px; cursor: pointer; padding: 0; line-height: 1;`;

    header.appendChild(title);
    header.appendChild(closeBtn);

    const divider = document.createElement("div");
    divider.style.cssText = `height: 1px; background: rgba(39,174,96,0.3); margin-bottom: 10px;`;

    const text = document.createElement("div");
    text.textContent = message;
    text.style.cssText = `line-height: 1.7; color: #d5f5e3;`;

    toast.appendChild(header);
    toast.appendChild(divider);
    toast.appendChild(text);
    document.body.appendChild(toast);

    startCountdown(toast, closeBtn, 5, "#82e0aa");
});

api.addEventListener("o1key.new_version", (event) => {
    const changelog = event.detail?.changelog || [];

    const style = document.createElement("style");
    style.textContent = `
        @keyframes o1key-slide-in {
            from { opacity: 0; transform: translateY(16px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
    `;
    document.head.appendChild(style);

    const toast = document.createElement("div");
    toast.style.cssText = `
        position: fixed;
        bottom: 148px;
        left: 28px;
        background: linear-gradient(135deg, #0a1628 0%, #0d2b4e 60%, #1a4a7a 100%);
        color: #d6eaf8;
        border: 1px solid #2e86c1;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 14px;
        z-index: 100000;
        box-shadow: 0 6px 24px rgba(46,134,193,0.35), 0 2px 8px rgba(0,0,0,0.5);
        max-width: 340px;
        animation: o1key-slide-in 0.4s cubic-bezier(.22,.68,0,1.2);
    `;

    const header = document.createElement("div");
    header.style.cssText = `display: flex; align-items: center; justify-content: space-between;`;

    const title = document.createElement("span");
    title.textContent = "🔔 检测到有新版本发布！";
    title.style.cssText = `font-weight: bold; font-size: 13px; color: #7fb3d3; letter-spacing: 0.5px;`;

    const closeBtn = document.createElement("button");
    closeBtn.style.cssText = `background: none; border: none; color: #7fb3d3; font-size: 13px; cursor: pointer; padding: 0; line-height: 1;`;

    header.appendChild(title);
    header.appendChild(closeBtn);

    const divider = document.createElement("div");
    divider.style.cssText = `height: 1px; background: rgba(46,134,193,0.3); margin: 8px 0;`;

    toast.appendChild(header);
    toast.appendChild(divider);

    const body = document.createElement("div");
    const items = changelog.length > 0 ? changelog : ["暂无更新说明"];
    items.forEach(item => {
        const line = document.createElement("div");
        line.textContent = `• ${item}`;
        line.style.cssText = `margin-bottom: 4px; font-size: 12px; line-height: 1.6; color: #d6eaf8;`;
        body.appendChild(line);
    });
    const more = document.createElement("div");
    more.textContent = "...";
    more.style.cssText = `color: #7fb3d3; font-size: 12px; margin-top: 2px;`;
    body.appendChild(more);

    toast.appendChild(body);
    document.body.appendChild(toast);

    startCountdown(toast, closeBtn, 5, "#7fb3d3");
});