实时系统监控面板

作者头像
首页 编程语言区 正文

1ec6749626510126a979dac4253c8e6f_4e4ea48ef21400a0.jpg

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

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

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 = '检测失败';
    }
}

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:本站资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系客服并出示版权证明以便删除!
DS生成的代码-考场监考人员抽签系统
« 上一篇 07-04
一个简单网页预约会议室系统
下一篇 » 07-04

发表评论

  • 泡泡
  • 阿呆
  • 阿鲁
  • 蛆音娘
    没有更多评论了

个人信息

HI ! 请登录
开通会员,享受下载全站资源特权。
百度一下

随便看看

大家都在看

标签TAG