handsome主题添加服务器状态栏最新版（Linux通用版）

<!-- 这里开始是新追加的内容 -->
<script>
var stateUrl = '/serverInfo.php';
    var se_rx = null;
    var se_tx = null;
    var si_rx = null;
    var si_tx = null;
    var lastCachedValue = 0;
    var lastBuffersValue = 0;
    var cacheHitRate = 0;

    function returnFloat(value) {
        return value.toFixed(2) + '%';
}

    function floats(value) {
    return value.toFixed(2);
}

function getPercent(curNum, totalNum, isHasPercentStr) {
    curNum = parseFloat(curNum);
    totalNum = parseFloat(totalNum);

    if (isNaN(curNum) || isNaN(totalNum)) {
        return 'Error';
    }

    return isHasPercentStr ?
        totalNum <= 0 ? '0%' : (Math.round(curNum / totalNum * 10000) / 100.00 + '%') :
            totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00 + '%');
}

function getPercents(curNum, totalNum, isHasPercentStr) {
    curNum = parseFloat(curNum);
    totalNum = parseFloat(totalNum);

    if (isNaN(curNum) || isNaN(totalNum)) {
        return 'Error';
    }

    return isHasPercentStr ?
        totalNum <= 0 ? '0%' : (Math.round(curNum / totalNum * 10000) / 100.00) :
        totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00);
}

    function setSize(value, d) {
    switch (d) {
        case 'bit':
                return bit = value * 8;
            break;
        case 'bytes':
            return value;
            break;
        case 'kb':
                return value / 1024;
            break;
        case 'mb':
                return value / 1024 / 1024;
            break;
        case 'gb':
                return value / 1024 / 1024 / 1024;
            break;
        case 'tb':
                return value / 1024 / 1024 / 1024 / 1024;
            break;
    }
}

    function ForDight(Dight) {
        if (Dight < 0) {
            var Last = 0 + "B/s";
        } else if (Dight < 1024) {
            var Last = setSize(Dight, 'bytes').toFixed(0) + "B/s";
        } else if (Dight < 1048576) {
            var Last = floats(setSize(Dight, 'kb')) + "K/s";
        } else {
            var Last = floats(setSize(Dight, 'mb')) + "MB/s";
    }
    return Last; 
}

    function state() {
    $.ajax({
        url: stateUrl,
        type: 'get',
        dataType: 'json',
        data: {
                action: 'fetch',
        },
            beforeSend: function() {
            
        },
            complete: function() {
            
        },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                // Maybe show a global error message in the UI
        }, 
            success: function(data) {
                // Defensively check for data and nested properties
                var serverStatus = data.serverStatus || {};
                var serverInfo = data.serverInfo || {};
                var networkStats = data.networkStats || {};
                var networks = networkStats.networks || {};

                // CPU Usage
                try {
                    var cpuData = serverStatus.cpuUsage || {};
                    var cpu = (parseFloat(cpuData['user']) || 0) + (parseFloat(cpuData['nice']) || 0) + (parseFloat(cpuData['sys']) || 0);
            $("#cpu").html(returnFloat(cpu));
                    $("#cpu_css").css("width", returnFloat(cpu));
                    if (cpu < 70) {
                        $("#cpu_css").removeClass().addClass("progress-bar bg-success");
                        $("#cpu").removeClass().addClass("pull-right text-success");
                    } else if (cpu >= 90) {
                        $("#cpu_css").removeClass().addClass("progress-bar bg-danger");
                        $("#cpu").removeClass().addClass("pull-right text-danger");
                    } else {
                        $("#cpu_css").removeClass().addClass("progress-bar bg-warning");
                        $("#cpu").removeClass().addClass("pull-right text-warning");
            }
                } catch (e) {
                    console.error("Error processing CPU:", e);
                    $("#cpu").html('Error');
                }

                // Memory Usage
                try {
                    var memData = serverStatus.memRealUsage || {};
                    var memory_value = memData.value || 0;
                    var memory_max = memData.max || 1; // Avoid division by zero
                    var memPercent = getPercent(memory_value, memory_max, true);
                    var me = getPercents(memory_value, memory_max, false);
                    
                    $("#memory").html(memPercent);
                    $("#memory_css").css("width", memPercent);

                    if (me < 70) {
                        $("#memory_css").removeClass().addClass("progress-bar bg-success");
                        $("#memory").removeClass().addClass("pull-right text-success");
                    } else if (me >= 90) {
                        $("#memory_css").removeClass().addClass("progress-bar bg-danger");
                        $("#memory").removeClass().addClass("pull-right text-danger");
                    } else {
                        $("#memory_css").removeClass().addClass("progress-bar bg-warning");
                        $("#memory").removeClass().addClass("pull-right text-warning");
            }

                    var memory_data_value = (floats(setSize(memory_value, 'mb')) > 1024) ? floats(setSize(memory_value, 'gb')) + "GB" : floats(setSize(memory_value, 'mb')) + "MB";
                    var memory_data_max = (floats(setSize(memory_max, 'mb')) > 1024) ? floats(setSize(memory_max, 'gb')) + "GB" : floats(setSize(memory_max, 'mb')) + "MB";
                    $("#memory_data").html(memory_data_value + " / " + memory_data_max);
                } catch (e) {
                    console.error("Error processing Memory:", e);
                    $("#memory").html('Error');
                }

                try {
                    var diskData = serverInfo.diskUsage || {};
                    var disk_value = diskData.value || 0;
                    var disk_max = diskData.max || 0;
                    var diskPercent = getPercent(disk_value, disk_max, true);
                    var dk = getPercents(disk_value, disk_max, false);

                    $("#disk").html(diskPercent);
                    $("#disk_css").css("width", diskPercent);

                    if (dk < 70) {
                        $("#disk_css").removeClass().addClass("progress-bar bg-success");
                        $("#disk").removeClass().addClass("pull-right text-success");
                    } else if (dk >= 90) {
                        $("#disk_css").removeClass().addClass("progress-bar bg-danger");
                        $("#disk").removeClass().addClass("pull-right text-danger");
                    } else {
                        $("#disk_css").removeClass().addClass("progress-bar bg-warning");
                        $("#disk").removeClass().addClass("pull-right text-warning");
            }

                    var disk_data_value = (floats(setSize(disk_value, 'mb')) > 1024) ? floats(setSize(disk_value, 'gb')) + "GB" : floats(setSize(disk_value, 'mb')) + "MB";
                    var disk_data_max = (floats(setSize(disk_max, 'mb')) > 1024) ? floats(setSize(disk_max, 'gb')) + "GB" : floats(setSize(disk_max, 'mb')) + "MB";
                    $("#disk_data").html(disk_data_value + " / " + disk_data_max);
                } catch (e) { console.error("Error processing Disk:", e); }

                try {
                    var memCachedData = serverStatus.memCached || {};
                    var memCached_value = memCachedData.value || 0;
                    var memCached_max = memCachedData.max || 0;
                    var memCachedPercent = getPercent(memCached_value, memCached_max, true);
                    var mem = getPercents(memCached_value, memCached_max, false);

                    $("#memCached").html(memCachedPercent);
                    $("#memCached_css").css("width", memCachedPercent);

                    if (mem < 70) {
                        $("#memCached_css").removeClass().addClass("progress-bar bg-success");
                        $("#memCached").removeClass().addClass("pull-right text-success");
                    } else if (mem >= 90) {
                        $("#memCached_css").removeClass().addClass("progress-bar bg-danger");
                        $("#memCached").removeClass().addClass("pull-right text-danger");
                    } else {
                        $("#memCached_css").removeClass().addClass("progress-bar bg-warning");
                        $("#memCached").removeClass().addClass("pull-right text-warning");
            }

                    var memCached_data_value = (floats(setSize(memCached_value, 'mb')) > 1024) ? floats(setSize(memCached_value, 'gb')) + "GB" : floats(setSize(memCached_value, 'mb')) + "MB";
                    var memCached_data_max = (floats(setSize(memCached_max, 'mb')) > 1024) ? floats(setSize(memCached_max, 'gb')) + "GB" : floats(setSize(memCached_max, 'mb')) + "MB";
                    $("#memCached_data").html(memCached_data_value + " / " + memCached_data_max);
                } catch (e) { console.error("Error processing MemCached:", e); }

                try {
                    var memBuffersData = serverStatus.memBuffers || {};
                    var memBuffers_value = memBuffersData.value || 0;
                    var memBuffers_max = memBuffersData.max || 0;
                    var memBuffersPercent = getPercent(memBuffers_value, memBuffers_max, true);
                    var memB = getPercents(memBuffers_value, memBuffers_max, false);

                    $("#memBuffers").html(memBuffersPercent);
                    $("#memBuffers_css").css("width", memBuffersPercent);

                    if (memB < 70) {
                        $("#memBuffers_css").removeClass().addClass("progress-bar bg-success");
                        $("#memBuffers").removeClass().addClass("pull-right text-success");
                    } else if (memB >= 90) {
                        $("#memBuffers_css").removeClass().addClass("progress-bar bg-danger");
                        $("#memBuffers").removeClass().addClass("pull-right text-danger");
                    } else {
                        $("#memBuffers_css").removeClass().addClass("progress-bar bg-warning");
                        $("#memBuffers").removeClass().addClass("pull-right text-warning");
            }

                    var memBuffers_data_value = (floats(setSize(memBuffers_value, 'mb')) > 1024) ? floats(setSize(memBuffers_value, 'gb')) + "GB" : floats(setSize(memBuffers_value, 'mb')) + "MB";
                    var memBuffers_data_max = (floats(setSize(memBuffers_max, 'mb')) > 1024) ? floats(setSize(memBuffers_max, 'gb')) + "GB" : floats(setSize(memBuffers_max, 'mb')) + "MB";
                    $("#memBuffers_data").html(memBuffers_data_value + " / " + memBuffers_data_max);
                } catch (e) { console.error("Error processing MemBuffers:", e); }

                try {
                    var sysLoad = serverStatus.sysLoad || [0, 0, 0];
            var state = "";
                    for (var i = 0; i < sysLoad.length; i++) {
                        state += '<span class="badge badge-sm bg-dark">' + sysLoad[i] + '</span>&nbsp;'
            }
            $("#state").html(state);
                    var state_s = getPercent(sysLoad[0], 2, true);
                    var sta = getPercents(sysLoad[0], 2, false);

                    $("#state_css").css("width", state_s);
            $("#state_s").html(state_s);

                    if (sta < 70) {
                        $("#state_css").removeClass().addClass("progress-bar bg-success");
                        $("#state_s").removeClass().addClass("pull-right text-success");
                    } else if (sta >= 90) {
                        $("#state_css").removeClass().addClass("progress-bar bg-danger");
                        $("#state_s").removeClass().addClass("pull-right text-danger");
                    } else {
                        $("#state_css").removeClass().addClass("progress-bar bg-warning");
                        $("#state_s").removeClass().addClass("pull-right text-warning");
                    }
                } catch (e) { console.error("Error processing SysLoad:", e); }
            
                $("#time").html('<span class="badge badge-sm bg-dark">' + data.serverInfo.serverTime + '</span>');

                // 更新动态系统信息
                if (data.serverInfo.sysInfo) {
                    $("#sys_info_badge").html('<span class="badge badge-sm bg-dark">' + data.serverInfo.sysInfo + '</span>');
                }
                if (data.serverInfo.osInfo) {
                    $("#os_info_badge").html('<span class="badge badge-sm bg-dark">' + data.serverInfo.osInfo + '</span>');
                }
            
                $("#u_time").html('<span class="badge badge-sm bg-dark">' + data.serverInfo.serverUptime["days"] + ' 天' + data.serverInfo.serverUptime["hours"] + ' 时 ' + data.serverInfo.serverUptime["mins"] + ' 分' + data.serverInfo.serverUptime["secs"] + ' 秒</span>');

                // Network Stats
                try {
                    var primaryNet = null;
                    var netPriority = ['eth0', 'ens3', 'ens33', 'eno1'];
                    for (var i = 0; i < netPriority.length; i++) {
                        if (networks[netPriority[i]]) {
                            primaryNet = netPriority[i];
                            break;
                        }
                    }
                    if (!primaryNet) {
                        for (var dev in networks) {
                            if (dev !== 'lo' && dev.indexOf('veth') === -1 && dev.indexOf('br-') === -1 && dev.indexOf('docker') === -1) {
                                primaryNet = dev;
                                break;
                            }
                        }
                    }

                    if (primaryNet && networks[primaryNet]) {
                        var net_tx = networks[primaryNet].tx || 0;
                        var net_rx = networks[primaryNet].rx || 0;

                        var aaa_tx = (floats(setSize(net_tx, 'mb')) > 1024) ?
                            floats(setSize(net_tx, 'gb')) + "GB" :
                            floats(setSize(net_tx, 'mb')) + "MB";

                        var aaa_rx = (floats(setSize(net_rx, 'mb')) > 1024) ?
                            floats(setSize(net_rx, 'gb')) + "GB" :
                            floats(setSize(net_rx, 'mb')) + "MB";

        
                        $("#eth").html('<span class="badge badge-sm bg-dark"><i class="fas fa-upload" aria-hidden="true"></i>&nbsp;' + aaa_tx + '</span>&nbsp;' +
                            '<span class="badge badge-sm bg-dark"><i class="fas fa-download" aria-hidden="true"></i>&nbsp;' + aaa_rx + '</span>');

                        if (se_tx === null) {
                            se_tx = net_tx;
                            se_rx = net_rx;
                        }

                        $("#eth1").html('<span class="badge badge-sm bg-dark"><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>&nbsp;' + ForDight(net_tx - se_tx) + '</span>&nbsp;' +
                            '<span class="badge badge-sm bg-dark"><i class="fas fa-cloud-download-alt" aria-hidden="true"></i>&nbsp;' + ForDight(net_rx - se_rx) + '</span>');
                        se_tx = net_tx;
                        se_rx = net_rx;
                    } else {
                        $("#eth").html('<span class="badge badge-sm bg-danger">N/A</span>');
                        $("#eth1").html('<span class="badge badge-sm bg-danger">N/A</span>');
                    }

                    var lo_data = networks['lo'] || {};
                    var lo_tx_val = lo_data.tx || 0;
                    var lo_rx_val = lo_data.rx || 0;

                    var lo_tx = (floats(setSize(lo_tx_val, 'mb')) > 1024) ?
                        floats(setSize(lo_tx_val, 'gb')) + "GB" :
                        floats(setSize(lo_tx_val, 'mb')) + "MB";

                    var lo_rx = (floats(setSize(lo_rx_val, 'mb')) > 1024) ?
                        floats(setSize(lo_rx_val, 'gb')) + "GB" :
                        floats(setSize(lo_rx_val, 'mb')) + "MB";

                    $("#io").html('<span class="badge badge-sm bg-dark"><i class="fas fa-upload" aria-hidden="true"></i>&nbsp;' + lo_tx + '</span>&nbsp;' +
                        '<span class="badge badge-sm bg-dark"><i class="fas fa-download" aria-hidden="true"></i>&nbsp;' + lo_rx + '</span>');

                    if (si_tx === null) {
                        si_tx = lo_tx_val;
                        si_rx = lo_rx_val;
                    }

                    $("#io1").html('<span class="badge badge-sm bg-dark"><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>&nbsp;' + ForDight(lo_tx_val - si_tx) + '</span>&nbsp;' +
                        '<span class="badge badge-sm bg-dark"><i class="fas fa-cloud-download-alt" aria-hidden="true"></i>&nbsp;' + ForDight(lo_rx_val - si_rx) + '</span>');
                    si_tx = lo_tx_val;
                    si_rx = lo_rx_val;
                } catch(e) {
                    console.error("Error processing Network:", e);
                    $("#eth, #eth1, #io, #io1").html('<span class="badge badge-sm bg-danger">Error</span>');
                }

                // 计算缓存命中率
                var memTotal = data.serverStatus.memRealUsage['max'];
                var memCached = data.serverStatus.memCached['value'];
                var memBuffers = data.serverStatus.memBuffers['value'];

                // 计算缓存命中率 - 使用缓存和缓冲占总内存的百分比
                var cacheRatio = ((memCached + memBuffers) / memTotal * 100).toFixed(2);

                // 如果是第一次加载，初始化lastCachedValue和lastBuffersValue
                if (lastCachedValue === 0 && lastBuffersValue === 0) {
                    lastCachedValue = memCached;
                    lastBuffersValue = memBuffers;
                    cacheHitRate = cacheRatio; // 初始值
                } else {
                    // 计算缓存命中率变化趋势 (平滑处理)
                    cacheHitRate = (parseFloat(cacheHitRate) * 0.7 + parseFloat(cacheRatio) * 0.3).toFixed(2);
                    if (cacheHitRate < 0) cacheHitRate = 0;
                    if (cacheHitRate > 100) cacheHitRate = 100;
                    lastCachedValue = memCached;
                    lastBuffersValue = memBuffers;
                }

                // 添加缓存命中率信息
                var hitRateHtml = '<span class="badge badge-sm bg-dark">' + cacheHitRate + '%</span>';
                $("#cacheHitRate").html(hitRateHtml);
                $("#cacheHitRate_css").css("width", cacheHitRate + "%");

                // 根据命中率调整颜色
                if (cacheHitRate < 30) {
                    $("#cacheHitRate_css").removeClass();
                    $("#cacheHitRate_css").addClass("progress-bar bg-danger");
                    $("#cacheHitRate").removeClass();
                    $("#cacheHitRate").addClass("pull-right text-danger");
                }
                if (cacheHitRate >= 30 && cacheHitRate < 70) {
                    $("#cacheHitRate_css").removeClass();
                    $("#cacheHitRate_css").addClass("progress-bar bg-warning");
                    $("#cacheHitRate").removeClass();
                    $("#cacheHitRate").addClass("pull-right text-warning");
                }
                if (cacheHitRate >= 70) {
                    $("#cacheHitRate_css").removeClass();
                    $("#cacheHitRate_css").addClass("progress-bar bg-success");
                    $("#cacheHitRate").removeClass();
                    $("#cacheHitRate").addClass("pull-right text-success");
                }
        }
    });
}

    function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
            " " + date.getHours() + seperator2 + date.getMinutes() +
            seperator2 + date.getSeconds();
    return currentdate;
}

    function UserInfo() {
    // 先根据UA设置设备和浏览器信息
    var ua = navigator.userAgent;
    var browserInfo = getBrowserInfo(ua);
    var osInfo = getOsInfo(ua);
    
    // 立即显示浏览器和系统信息（不依赖API）
        $("#b").html('<span class="badge badge-sm bg-dark">' + browserInfo + '</span>');
        $("#sys").html('<span class="badge badge-sm bg-dark">' + osInfo + '</span>');
    
    // 使用我们自己的serverInfo.php获取IP信息，避免跨域问题
    $.ajax({
        type: "get",
        url: stateUrl, // 使用之前已定义的stateUrl变量 (指向serverInfo.php)
            data: {
                action: 'getip'
            },
        async: true,
        dataType: "json",
            beforeSend: function() {
            $("#ip").html('<span class="badge badge-sm bg-dark">获取中...</span>');
            $("#address").html('<span class="badge badge-sm bg-dark">获取中...</span>');
        },
            error: function() {
                $("#ip").html('<span class="badge badge-sm bg-dark">' + window.location.hostname + '</span>');
            $("#address").html('<span class="badge badge-sm bg-dark">本地访问</span>');
        },
            success: function(data) {
                if (data && data.ip) {
                    $("#ip").html('<span class="badge badge-sm bg-dark">' + data.ip + '</span>');
                
                    if (data.location) {
                        $("#address").html('<span class="badge badge-sm bg-dark">' + data.location + '</span>');
                } else {
                    $("#address").html('<span class="badge badge-sm bg-dark">本地网络</span>');
                }
            } else {
                    $("#ip").html('<span class="badge badge-sm bg-dark">' + window.location.hostname + '</span>');
                $("#address").html('<span class="badge badge-sm bg-dark">本地访问</span>');
            }
        }
    });
}

// 获取设备系统信息的函数
function getOsInfo(ua) {
        if (!ua) ua = navigator.userAgent;
    
    if (ua.indexOf("Windows NT 10.0") != -1) {
        // 检测Win11
        if (ua.indexOf("Windows NT 10.0; Win64") != -1 && 
            ((ua.indexOf("Chrome/") != -1 && parseInt(ua.split("Chrome/")[1]) >= 90) || 
             (ua.indexOf("Firefox/") != -1 && parseInt(ua.split("Firefox/")[1]) >= 90))) {
            return "Windows 11";
        }
        return "Windows 10";
    }
    if (ua.indexOf("Windows NT 6.3") != -1) return "Windows 8.1";
    if (ua.indexOf("Windows NT 6.2") != -1) return "Windows 8";
    if (ua.indexOf("Windows NT 6.1") != -1) return "Windows 7";
    if (ua.indexOf("Windows NT 6.0") != -1) return "Windows Vista";
    if (ua.indexOf("Windows NT 5.1") != -1) return "Windows XP";
        if (ua.indexOf("Android") != -1) return "Android " + (ua.match(/Android [\d\.]+;/) ? ua.match(/Android [\d\.]+;/)[0].replace(";", "").replace("Android ", "") : "");
    if (ua.indexOf("iPhone") != -1) return "iPhone";
    if (ua.indexOf("iPad") != -1) return "iPad";
    if (ua.indexOf("Mac OS X") != -1) return "macOS";
    if (ua.indexOf("Linux") != -1) return "Linux";
    if (ua.indexOf("CentOS") != -1) return "CentOS";
    if (ua.indexOf("Ubuntu") != -1) return "Ubuntu";
    
    return "未知设备";
}

// 获取浏览器信息
function getBrowserInfo(ua) {
        if (!ua) ua = navigator.userAgent;
    
    // Edge
    if (ua.indexOf("Edg/") > -1) {
        return "Edge " + ua.match(/Edg\/([\d.]+)/)[1].split('.')[0];
    }
    // Chrome
    else if (ua.indexOf("Chrome/") > -1 && ua.indexOf("Safari/") > -1 && ua.indexOf("OPR/") == -1) {
        return "Chrome " + ua.match(/Chrome\/([\d.]+)/)[1].split('.')[0];
    }
    // Firefox
    else if (ua.indexOf("Firefox/") > -1) {
        return "Firefox " + ua.match(/Firefox\/([\d.]+)/)[1].split('.')[0];
    }
    // Opera
    else if (ua.indexOf("OPR/") > -1 || ua.indexOf("Opera/") > -1) {
        return "Opera " + (ua.match(/OPR\/([\d.]+)/) || ua.match(/Opera\/([\d.]+)/))[1].split('.')[0];
    }
    // Safari
    else if (ua.indexOf("Safari/") > -1 && ua.indexOf("Chrome/") == -1) {
        return "Safari " + (ua.match(/Version\/([\d.]+)/) ? ua.match(/Version\/([\d.]+)/)[1].split('.')[0] : "");
    }
    // 其他浏览器
    else {
        return "浏览器 " + (navigator.appVersion ? navigator.appVersion.split(" ")[0] : "");
    }
}

    $('#StateData').click(function() {
    clearInterval(window.getnet);
    clearInterval(window.info);

        function updateAll() {
            if ($('#StateDataPos').is('.open')) {
            state();
                $("#sys_times").html('<span class="badge badge-sm bg-dark">' + getNowFormatDate() + '</span>');
        }
        }

        // Call immediately after a short delay to allow dropdown to open
        setTimeout(updateAll, 50);

        window.getnet = setInterval(updateAll, 1000);

        if (!window.userInfoLoaded) {
    UserInfo();
            window.userInfoLoaded = true;
        }
});
</script>
<!-- 新追加的内容到此结束 -->