☰

Git仓库一键跳转HPX

在Git仓库页面添加跳转到HPX打包页面的按钮

// ==UserScript==
// @name         Git仓库一键跳转HPX
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在Git仓库页面添加跳转到HPX打包页面的按钮
// @author       Dean
// @match        https://dev.sankuai.com/code/repo-detail/*
// @grant        GM_xmlhttpRequest
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function() {
    'use strict';

    // 添加样式
    const style = document.createElement('style');
    style.textContent = `
        #zy_hpx_button {
            margin-right: 8px;
            position: relative;
            overflow: hidden;
        }
        .mtd-button-content {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
        }
        .mtdicon-fast-forward {
            margin-right: 4px;
        }

        /* 节日装饰样式 */
        .festival-icon {
            position: absolute;
            pointer-events: none;
            font-size: 12px;
            z-index: 1;
        }

        /* 春节样式 */
        .spring-festival .festival-icon {
            animation: springFestival 2s infinite;
        }

        /* 圣诞节样式 */
        .christmas .festival-icon {
            animation: snowfall 3s infinite;
        }

        /* 万圣节样式 */
        .halloween .festival-icon {
            animation: spooky 3s infinite;
        }

        /* 元宵节样式 */
        .lantern-festival .festival-icon {
            animation: floating 3s infinite;
        }

        /* 动画效果 */
        @keyframes springFestival {
            0% { transform: scale(1) rotate(0deg); opacity: 1; }
            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
            100% { transform: scale(1) rotate(360deg); opacity: 1; }
        }

        @keyframes snowfall {
            0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100%) rotate(360deg); opacity: 0; }
        }

        @keyframes spooky {
            0% { transform: translateX(-20px) translateY(0); opacity: 1; }
            50% { transform: translateX(20px) translateY(-10px); opacity: 0.7; }
            100% { transform: translateX(-20px) translateY(0); opacity: 1; }
        }

        @keyframes floating {
            0% { transform: translateY(0) rotate(-5deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
            100% { transform: translateY(0) rotate(-5deg); }
        }

        /* 光效装饰 */
        .festival-sparkle {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }
        .festival-sparkle::before,
        .festival-sparkle::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: rgba(255,255,255,0.6);
            animation: sparkle 2s infinite;
        }
        .festival-sparkle::after {
            animation-delay: 1s;
        }

        @keyframes sparkle {
            0%, 100% { transform: translate(0, 0) scale(0); opacity: 0; }
            50% { transform: translate(20px, -20px) scale(1); opacity: 1; }
        }
    `;
    document.head.appendChild(style);

    // 页面加载完成后执行
    if (window.location.toString().indexOf('dev.sankuai.com/code/repo-detail') >= 0) {
        // 使用 MutationObserver 监听DOM变化
        const observer = new MutationObserver((mutations, observer) => {
            if ($(".btn-box").length > 0 && $("#zy_hpx_button").length === 0) {
                logger('检测到按钮容器');
                observer.disconnect(); // 停止观察
                inject(() => {});
            }
        });

        // 立即检查是否已存在按钮容器
        if ($(".btn-box").length > 0) {
            logger('按钮容器已存在');
            inject(() => {});
        } else {
            logger('等待按钮容器');
            // 开始观察
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        }

        // 添加页面 URL 变化监听
        let lastUrl = location.href;
        new MutationObserver(() => {
            const url = location.href;
            if (url !== lastUrl) {
                lastUrl = url;
                logger('URL 发生变化');
                if (url.indexOf('dev.sankuai.com/code/repo-detail') >= 0) {
                    inject(() => {});
                }
            }
        }).observe(document, {subtree: true, childList: true});
    }

    // 缓存键名
    const CACHE_KEY = 'HPX_PROJECT_CACHE';
    const CACHE_EXPIRE = 24 * 60 * 60 * 1000; // 24小时缓存

    // 获取缓存的项目数据
    function getCachedProject(git) {
        try {
            const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
            const data = cache[git];
            if (data && (Date.now() - data.timestamp) < CACHE_EXPIRE) {
                return data.project;
            }
        } catch (e) {
            logger('读取缓存失败', e);
        }
        return null;
    }

    // 设置项目缓存
    function setCachedProject(git, project) {
        try {
            const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
            cache[git] = {
                project: project,
                timestamp: Date.now()
            };
            localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
        } catch (e) {
            logger('设置缓存失败', e);
        }
    }

    // 入侵
    function inject(callback) {
        if ($(".btn-box").length <= 0) {
            logger('没有查到元素');
            return false;
        }
        logger('查到元素');

        // 先渲染一个加载中的按钮
        renderLoadingButton();

        // 查询git地址
        getGitAddress(function(git) {
            if (git.length <= 0) {
                removeButton();
                callback(true);
                return;
            }

            // 先检查缓存
            const cachedProject = getCachedProject(git);
            if (cachedProject) {
                logger('使用缓存数据');
                renderHPXButton(cachedProject);
                callback(true);

                // 异步更新缓存
                updateProjectCache(git);
                return;
            }

            // 无缓存时请求新数据
            requestProjectData(git, callback);
        });
    }

    // 异步更新缓存
    function updateProjectCache(git) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://hpx.sankuai.com/api/open/getProjectUrlList?repoUrl=' + git,
            onload: function(response) {
                try {
                    const data = JSON.parse(response.responseText);
                    if (data.data && data.data.length > 0) {
                        const project = data.data[data.data.length - 1];
                        setCachedProject(git, project);
                        logger('缓存已更新');
                    }
                } catch (e) {
                    logger('更新缓存失败', e);
                }
            }
        });
    }

    // 请求项目数据
    function requestProjectData(git, callback) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://hpx.sankuai.com/api/open/getProjectUrlList?repoUrl=' + git,
            onload: function(response) {
                try {
                    const data = JSON.parse(response.responseText);
                    if (data.data && data.data.length > 0) {
                        const project = data.data[data.data.length - 1];
                        if (project.length > 0) {
                            logger('获取新数据');
                            setCachedProject(git, project);
                            renderHPXButton(project);
                            callback(true);
                            return;
                        }
                    }
                    // 如果没有获取到有效数据，移除loading按钮
                    removeButton();
                    callback(true);
                } catch (e) {
                    logger('请求数据失败', e);
                    removeButton();
                    callback(true);
                }
            },
            onerror: function() {
                logger('网络请求失败');
                removeButton();
                callback(true);
            }
        });
    }

    // 渲染加载中按钮
    function renderLoadingButton() {
        removeButton(); // 先移除已存在的按钮
        $(".btn-box").prepend(`
            <button id="zy_hpx_button" type="button" class="mtd-btn mtd-btn-primary">
                <span>
                    <div class="mtd-button-content">
                        <span class="mtdicon mtdicon-fast-forward"></span>
                        <span>Loading...</span>
                    </div>
                </span>
            </button>
        `);
    }

    // 渲染按钮
    function renderHPXButton(project) {
        removeButton(); // 先移除已存在的按钮
        const festival = getFestival();
        const festivalConfig = {
            'spring-festival': {
                icon: '🏮',
                text: '新年快乐',
                icons: ['🏮', '💰', '🧨', '🎊', '🐲', '福']
            },
            'lantern-festival': {
                icon: '🏮',
                text: '元宵节快乐',
                icons: ['🏮', '👻', '🌕', '⭐']
            },
            'halloween': {
                icon: '🎃',
                text: 'Happy Halloween',
                icons: ['🎃', '👻', '🦇', '🕷️', '🕸️']
            },
            'christmas': {
                icon: '🎄',
                text: 'Merry Xmas',
                icons: ['❄️', '🎄', '🎅', '🎁', '⛄', '🦌']
            }
        };

        // 在首部插入Button
        $(".btn-box").prepend(`
            <button id="zy_hpx_button" type="button" class="mtd-btn mtd-btn-primary ${festival}">
                ${festival ? '<div class="festival-sparkle"></div>' : ''}
                <span>
                    <div class="mtd-button-content">
                        <span class="mtdicon mtdicon-fast-forward"></span>
                        <span>Go to HyperloopX</span>
                        ${festival ? `<span style="margin-left: 4px">${festivalConfig[festival].icon}</span>` : ''}
                    </div>
                </span>
            </button>
        `);

        $("#zy_hpx_button").click(function(){
            // 点击效果
            if (festival) {
                const config = festivalConfig[festival];
                const icon = config.icons[Math.floor(Math.random() * config.icons.length)];
                const $icon = $(`<span class="festival-icon">${icon}</span>`);
                $icon.css({
                    left: '50%',
                    top: '50%',
                    transform: 'translate(-50%, -50%) scale(3)',
                    opacity: 0
                });
                $(this).append($icon);
                setTimeout(() => $icon.remove(), 500);
            }

            // 打开窗口
            window.open(project);
        });
    }

    // 统一的按钮移除函数
    function removeButton() {
        $("#zy_hpx_button").remove();
    }

    // 查询git地址
    function getGitAddress(callback) {
        var str = 'dev.sankuai.com/code/repo-detail';
        var index = window.location.toString().indexOf(str);
        var reset = window.location.toString().substring(index + str.length);
        var components = reset.split('/');

        if (components.length >= 3) {
            var url = 'https://dev.sankuai.com/rest/api/2.0/projects/' + components[1] + '/repos/' + components[2];
            $.get(url, {}, function(data){
                var git = '';
                for (let i = 0; i < data.links.clone.length; i++) {
                    let item = data.links.clone[i];
                    if (item.name === 'ssh') {
                        git = item.href;
                        break;
                    }
                }
                callback(git);
            });
        }
        return '';
    }

    // 获取当前节日
    function getFestival() {
        const date = new Date();
        const month = date.getMonth() + 1;
        const day = date.getDate();

        // 农历新年判断（这里使用简化判断，实际应该使用农历计算）
        if (month === 1 && day >= 20 || month === 2 && day <= 20) {
            return 'spring-festival';
        }

        // 元宵节
        if (month === 2 && day >= 24 && day <= 26) {
            return 'lantern-festival';
        }

        // 万圣节
        if (month === 10 && day >= 29 || month === 11 && day <= 2) {
            return 'halloween';
        }

        // 圣诞节
        if (month === 12 && day >= 20 && day <= 26) {
            return 'christmas';
        }

        return '';
    }

    // log
    function logger(log) {
        console.log("[go to HPX]", log);
    }
})();