实时系统监控面板

yibeijiu

基于 Web 的实时系统监控面板，提供系统信息查看、网址收藏管理等功能。界面采用现代化设计，支持响应式布局。（练习版本）

完整源码开放测试结束，若有亟需可PM
V1：单色背景，下载后双击，浏览器打开即可
V2：[ 渐进色背景，下载后双击，浏览器打开即可
硬件信息获取：

[Asm] 纯文本查看 复制代码

async function getHardwareInfo() {
    try {
        // 获取显卡信息
        let gpuInfo = '未知';
        try {
            const canvas = document.createElement('canvas');
            const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
            
            if (gl) {
                const renderer = gl.getParameter(gl.RENDERER);
                const vendor = gl.getParameter(gl.VENDOR);
                
                // 尝试获取更详细的显卡信息
                const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
                if (debugInfo) {
                    const unmaskedRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
                    if (unmaskedRenderer && unmaskedRenderer !== 'WebKit WebGL') {
                        gpuInfo = unmaskedRenderer;
                    } else {
                        gpuInfo = renderer || '集成显卡';
                    }
                } else {
                    gpuInfo = renderer || '集成显卡';
                }
                
                // 清理显卡名称
                if (gpuInfo.includes('ANGLE')) {
                    gpuInfo = gpuInfo.replace(/ANGLE \([^)]*\)/, '').trim();
                }
            }
        } catch (e) {
            gpuInfo = '检测失败';
        }
        document.getElementById('gpuInfo').textContent = gpuInfo;

        // CPU架构和核心数
        const cores = navigator.hardwareConcurrency || 0;
        let cpuArch = '未知架构';
        
        // 检测CPU架构
        const ua = navigator.userAgent.toLowerCase();
        const platform = (navigator.platform || '').toLowerCase();
        
        if (platform.includes('win64') || platform.includes('x64') || ua.includes('x64')) {
            cpuArch = 'x64 (64位)';
        } else if (platform.includes('win32') || platform.includes('x86') || ua.includes('x86')) {
            cpuArch = 'x86 (32位)';
        } else if (platform.includes('arm') || ua.includes('arm')) {
            cpuArch = 'ARM 架构';
        } else if (ua.includes('aarch64')) {
            cpuArch = 'ARM64 架构';
        } else if (platform.includes('mac')) {
            cpuArch = ua.includes('intel') ? 'Intel x64' : 'Apple Silicon';
        }

        document.getElementById('cpuModel').textContent = cpuArch;
        document.getElementById('cpuCores').textContent = cores > 0 ? `${cores} 个逻辑核心` : '无法检测';

        // 内存信息
        const memory = navigator.deviceMemory;
        if (memory) {
            document.getElementById('memoryCapacity').textContent = `${memory} GB`;
        } else {
            document.getElementById('memoryCapacity').textContent = '无法检测';
        }

        // 浏览器存储配额
        if ('storage' in navigator && 'estimate' in navigator.storage) {
            try {
                const estimate = await navigator.storage.estimate();
                const quota = estimate.quota || 0;
                const usage = estimate.usage || 0;
                
                if (quota > 0) {
                    const quotaGB = (quota / (1024 * 1024 * 1024)).toFixed(1);
                    const usageGB = (usage / (1024 * 1024 * 1024)).toFixed(2);
                    const usagePercent = Math.round((usage / quota) * 100);
                    
                    document.getElementById('storageInfo').textContent = 
                        `浏览器存储: ${usageGB}GB / ${quotaGB}GB`;
                    document.getElementById('storageProgress').style.width = `${usagePercent}%`;
                    document.getElementById('storageProgress').textContent = `${usagePercent}%`;
                } else {
                    document.getElementById('storageInfo').textContent = '存储信息不可用';
                    document.getElementById('storageProgress').style.width = '0%';
                    document.getElementById('storageProgress').textContent = '0%';
                }
            } catch (e) {
                document.getElementById('storageInfo').textContent = '存储检测失败';
            }
        } else {
            document.getElementById('storageInfo').textContent = '不支持存储API';
        }

        // 平台信息
        const platformInfo = navigator.platform || navigator.userAgentData?.platform || '未知平台';
        document.getElementById('platformInfo').textContent = platformInfo;

    } catch (error) {
        console.error('获取硬件信息失败:', error);
        // 设置默认值
        document.getElementById('gpuInfo').textContent = '检测失败';
        document.getElementById('cpuModel').textContent = '检测失败';
        document.getElementById('cpuCores').textContent = '检测失败';
        document.getElementById('memoryCapacity').textContent = '检测失败';
        document.getElementById('storageInfo').textContent = '检测失败';
        document.getElementById('platformInfo').textContent = '检测失败';
    }
}

dysunb

背景颜色看着不太好看

panda92

界面看起来还不错，但不知怎的获取有误，我是win11X64，显示win32平台，16G内存显示8G。天气一直获取中。

流浪情人

这个界面看着不错哦

N964342931

收藏下载 感谢

wyp123

这个界面怎么有一种macos的气质

RyesLai

界面看起来很舒服，也实用

bubu5617

看看是否匹配，谢谢

pixcn007

界面看起来很舒服

ltgb

请问用什么语言写的
源码咋用

sunjuny

试用一下。谢谢分享。