宝塔授权管理移动端整合优化（SVG菜单按钮）

移动端优化：菜单折叠、主内容全屏、字段名注入、按钮居中、隐藏客服模块，使用SVG图标美化菜单按钮，提升宝塔授权管理页面体验。
当前为 2025-04-21 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         宝塔授权管理移动端整合优化（SVG菜单按钮）
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  移动端优化：菜单折叠、主内容全屏、字段名注入、按钮居中、隐藏客服模块，使用SVG图标美化菜单按钮，提升宝塔授权管理页面体验。
// @author       Dia
// @match        https://www.bt.cn/admin/profe_ee
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // 样式注入
    GM_addStyle(`
        @media (max-width: 768px) {
            .sidebar-scroll {
                display: none !important;
            }
            .title.plr15 {
                height: 100px !important;
            }
            body.menu-open .sidebar-scroll {
                display: block !important;
                position: fixed;
                top: 0;
                left: 0;
                width: 220px;
                height: 100%;
                background: #2c3e50;
                z-index: 9998;
                overflow-y: auto;
                padding: 10px;
            }
            .menu-toggle-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                top: 12px;
                left: 12px;
                z-index: 9999;
                width: 48px;
                height: 48px;
                background: #007bff;
                color: white;
                border: none;
                border-radius: 50%;
                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                cursor: pointer;
                transition: background 0.3s ease;
            }
            .menu-toggle-btn:hover {
                background: #0056b3;
            }
            .menu-toggle-btn svg {
                width: 24px;
                height: 24px;
                fill: white;
            }
            .main-content {
                width: 100% !important;
                margin-left: 0 !important;
                padding: 10px !important;
            }
            body.menu-open .main-content {
                opacity: 0.3;
            }
            .wechat-customer {
                display: none !important;
            }

            /* 表格竖向显示 */
            table thead {
                display: none;
            }
            table tbody tr {
                display: block;
                margin: 12px 0;
                padding: 12px;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                background: #fff;
                text-align: center;
            }
            table tbody tr td {
                display: block;
                width: 100%;
                padding: 6px 0;
                font-size: 14px;
                border: none !important;
                text-align: center;
            }
            table tbody tr td::before {
                content: attr(data-label) ": ";
                font-weight: bold;
                display: block;
                margin-bottom: 2px;
                color: #555;
            }
            table tbody tr td:last-child {
                text-align: center !important;
            }
            table tbody tr td:last-child a {
                display: inline-block;
                margin: 6px auto;
                padding: 6px 12px;
                background: #007bff;
                color: white;
                border-radius: 4px;
                text-decoration: none;
                font-size: 14px;
            }
        }
    `);

    // 创建菜单按钮（使用 SVG 图标）
    const btn = document.createElement('button');
    btn.className = 'menu-toggle-btn';
    btn.style.display = 'none';
    btn.innerHTML = `
        <svg viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg">
            <rect width="100" height="12"></rect>
            <rect y="30" width="100" height="12"></rect>
            <rect y="60" width="100" height="12"></rect>
        </svg>
    `;
    document.body.appendChild(btn);

    // 切换菜单显示
    btn.addEventListener('click', () => {
        document.body.classList.toggle('menu-open');
    });

    // 判断是否为移动端
    const isMobile = () => window.innerWidth <= 768;

    // 初始化按钮显示
    const initToggle = () => {
        if (isMobile()) {
            btn.style.display = 'flex';
        } else {
            btn.style.display = 'none';
            document.body.classList.remove('menu-open');
        }
    };

    window.addEventListener('resize', initToggle);
    window.addEventListener('load', () => {
        initToggle();

        // 隐藏客服模块
        const tryHideCustomer = () => {
            const el = document.querySelector('.wechat-customer');
            if (el) el.style.display = 'none';
        };
        tryHideCustomer();
        setTimeout(tryHideCustomer, 1000);
    });

    // 字段名数组（与页面顺序严格对应）
    const fieldLabels = [
        "服务器IP",
        "适用产品",
        "备注",
        "本月剩余解绑次数",
        "到期时间",
        "状态",
        "操作"
    ];

    // 注入字段名
    function injectLabels() {
        const rows = document.querySelectorAll('table tbody tr');
        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            cells.forEach((td, i) => {
                if (fieldLabels[i]) {
                    td.setAttribute('data-label', fieldLabels[i]);
                }
            });
        });
    }

    // 使用 MutationObserver 监听表格变化
    const target = document.querySelector('table tbody');
    if (target) {
        const observer = new MutationObserver(() => {
            injectLabels();
        });
        observer.observe(target, { childList: true, subtree: true });
        injectLabels(); // 初始执行一次
    } else {
        setTimeout(injectLabels, 1000);
    }
})();
欢迎访问Greasy Fork镜像
