☰

S1头像替换

在 S1 论坛头像右上角显示按钮，点击后替换为 Dicebear 图像。

// ==UserScript==
// @name         S1头像替换
// @namespace    https://bbs.saraba1st.com
// @version      1.4
// @description  在 S1 论坛头像右上角显示按钮，点击后替换为 Dicebear 图像。
// @author       hexie
// @match        https://*.saraba1st.com/2b/*
// @match        https://stage1st.com/2b/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=saraba1st.com
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Dicebear API 配置
    const DICEBEAR_API_URL = 'https://api.dicebear.com/9.x/thumbs/svg';

    /**
     * 从用户链接中提取 uid。
     */
    function extractUidFromHref(href) {
        if (!href) return null;
        const match = href.match(/uid-(\d+)\.html/);
        return match ? match[1] : null;
    }

    /**
     * 替换指定 uid 的头像。
     */
    function replaceAvatar(uid) {
        if (!uid) return;
        const seed = uid;
        const newSrc = `${DICEBEAR_API_URL}?seed=${seed}`;

        document.querySelectorAll(`img[data-uid="${uid}"]`).forEach((imgElement) => {
            if (!imgElement.hasAttribute('data-original-src')) {
                imgElement.setAttribute('data-original-src', imgElement.dataset.original || imgElement.src);
            }
            imgElement.src = newSrc;
        });

        GM_setValue(uid, newSrc);
        // console.log(`[S1 Avatar Replacer] Replaced avatar for UID: ${uid}`);
    }

    /**
     * 恢复指定 uid 的头像为原始头像。
     */
    function resetAvatar(uid) {
        if (!uid) return;
        GM_deleteValue(uid);

        document.querySelectorAll(`img[data-uid="${uid}"]`).forEach((imgElement) => {
            const originalSrc = imgElement.getAttribute('data-original-src');
            if (originalSrc) {
                imgElement.src = originalSrc;
            }
        });
        // console.log(`[S1 Avatar Replacer] Reset avatar for UID: ${uid}`);
    }

    /**
     * 为头像元素添加替换按钮。
     */
    function addReplaceButton(avatarContainer, imgElement, uid) {
        const button = document.createElement('button');
        button.textContent = '㔢';
        button.title = '替换为 Dicebear 头像';

        // --- 按钮样式 ---
        button.style.position = 'absolute';
        button.style.top = '2px';
        button.style.right = '2px';
        button.style.zIndex = '1001';
        button.style.cursor = 'pointer';
        button.style.background = 'rgba(0, 123, 255, 0.8)';
        button.style.color = '#ffffff';
        button.style.border = '1px solid rgba(255, 255, 255, 0.5)';
        button.style.borderRadius = '50%';
        button.style.width = '18px';
        button.style.height = '18px';
        button.style.fontSize = '10px';
        button.style.lineHeight = '16px';
        button.style.textAlign = 'center';
        button.style.padding = '0';
        button.style.display = 'none';
        button.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.3)';
        button.style.transition = 'background-color 0.2s ease, opacity 0.2s ease';
        button.style.opacity = '0.8';

        // --- 按钮交互 ---
        avatarContainer.style.position = 'relative';

        avatarContainer.addEventListener('mouseover', () => {
            button.style.display = 'block';
        });

        avatarContainer.addEventListener('mouseout', () => {
            button.style.display = 'none';
        });

        button.addEventListener('mouseover', () => {
            button.style.background = 'rgba(0, 100, 210, 0.9)';
            button.style.opacity = '1';
        });
        button.addEventListener('mouseout', () => {
             button.style.background = 'rgba(0, 123, 255, 0.8)';
             button.style.opacity = '0.8';
        });

        button.onclick = function(event) {
            event.preventDefault();
            event.stopPropagation();
            replaceAvatar(uid);
        };

        avatarContainer.appendChild(button);
    }

    /**
     * 初始化页面上的所有头像。
     */
    function initializeAvatars() {
        document.querySelectorAll('div.avatar, div.icn.avt').forEach(function(avatarContainer) {
            const imgElement = avatarContainer.querySelector('img');
            const linkElement = avatarContainer.querySelector('a[href*="uid-"]');

            if (!imgElement) return;

            const uid = linkElement ? extractUidFromHref(linkElement.href) : null;

            if (uid) {
                imgElement.setAttribute('data-uid', uid);

                if (!imgElement.hasAttribute('data-original-src')) {
                    const originalSrc = imgElement.dataset.original || imgElement.src;
                    imgElement.setAttribute('data-original-src', originalSrc);
                }

                const savedSrc = GM_getValue(uid);
                if (savedSrc) {
                    imgElement.src = savedSrc;
                } else {
                    imgElement.src = imgElement.getAttribute('data-original-src');
                }

                addReplaceButton(avatarContainer, imgElement, uid);

            } else {
                 if (!imgElement.hasAttribute('data-original-src')) {
                    const originalSrc = imgElement.dataset.original || imgElement.src;
                    imgElement.setAttribute('data-original-src', originalSrc);
                    imgElement.src = originalSrc;
                 }
            }
        });
    }

    // --- Greasemonkey 菜单命令 ---

    // 清除所有保存的头像数据并恢复原始头像
    GM_registerMenuCommand("清除所有S1替换头像数据", function() {
        let clearedCount = 0;
        document.querySelectorAll('img[data-uid]').forEach(function(imgElement) {
            const uid = imgElement.getAttribute('data-uid');
            if (uid && GM_getValue(uid)) {
                resetAvatar(uid);
                clearedCount++;
            } else if (uid) {
                 const originalSrc = imgElement.getAttribute('data-original-src');
                 if (originalSrc && imgElement.src !== originalSrc) {
                    imgElement.src = originalSrc;
                 }
            }
        });

        if (clearedCount > 0) {
            alert(`已清除 ${clearedCount} 个用户的替换头像数据并恢复原始头像。`);
        } else {
            alert("没有找到已保存的替换头像数据。");
        }
    });

    // --- 初始化脚本 ---
    initializeAvatars();

    // 使用 MutationObserver 监听 DOM 变化，处理动态加载的头像
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length) {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        if (node.matches('div.avatar, div.icn.avt') || node.querySelector('div.avatar, div.icn.avt')) {
                             // 简单的重新扫描整个文档，确保处理新加载的头像
                             // 对于大型或频繁更新的页面，可以优化为只处理新添加的节点
                             initializeAvatars();
                             return;
                        }
                    }
                });
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

})();