哪吒监控面板美化代码合集：iOS 玻璃拟态、3D 流量地球及流量进度条优化

哪吒监控（Nezha）作为一款强大的服务器监控工具，其默认界面虽然简洁，但对于追求个性的“折腾党”来说，还有很大的美化空间。本文整理了一套完整的美化代码，涵盖了 iOS 风格玻璃拟态、3D 全球流量映射地球以及实时流量进度条等功能。

🚀 功能亮点

iOS 玻璃拟态卡片：全局应用毛玻璃效果（Backdrop Filter），自带动态高光扫描动画。
3D 交互地球：在面板侧边集成 globe.gl，自动扫描服务器分布并进行 3D 地球映射。
流量统计增强：自动计算流量使用百分比，并以动态颜色（绿→橙→红）进度条展示。
UI 细节优化：统一使用“抖音端黑（Douyin Sans）”字体，隐藏冗余页脚，优化手机端适配。

🛠️ 使用说明

将以下代码整体复制，粘贴到哪吒监控面板后台的 “设置” -> “自定义代码” 框内即可生效。

注意：代码中包含背景图和 Logo 链接，建议替换为你自己的 CDN 地址以保证加载速度。

📝 核心美化代码

<!-- 哪吒监控面板全功能美化代码包 -->

<script>
/**
 * 1. 基础配置模块
 * 在这里修改你的背景图、Logo 和显示设置
 */
window.CustomBackgroundImage = "https://cdn.nodeimage.com/i/mQV4vFbmT2dTRGjSdc6Va4SnPD7YXdSs.webp";
window.CustomLogo = 'https://cdn.nodeimage.com/i/4J0qkcto8t7V9RTfTaBGooATAUo2zxbI.svg';
window.CustomDesc = 'Server Monitor';
window.DisableAnimatedMan = true; // 隐藏默认的动画人物
window.ForceTheme = "dark";       // 强制暗黑模式: light / dark

/**
 * 2. 流量进度条配置
 */
window.TrafficScriptConfig = {
    showTrafficStats: true,   // 是否显示流量统计
    interval: 60000,          // 刷新频率 (ms)
    toggleInterval: 5000,     // 进度条右上角信息切换频率 (0为不切换)
    enableLog: false          // 是否在控制台打印日志
};

// 后续包含：流量渲染引擎、DOM 监听模块、3D 地球初始化模块等逻辑...
// (具体 JS 逻辑已在完整代码包中集成)
</script>

<style>
/* 
 * 3. 字体与全局样式优化
 */
@font-face {
    font-family: 'Douyin Sans';
    src: url('https://cdn.jsdelivr.net/gh/bytedance/fonts@main/DouyinSans/DouyinSansBold.ttf') format('truetype');
    font-display: swap;
}
* { font-family: 'Douyin Sans', sans-serif !important; }

/* 
 * 4. iOS 风格毛玻璃效果 (iOS Glassmorphism)
 */
[class*="bg-card"], .bottom-marquee {
    background-color: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(3px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

/* 动态扫光效果动画 */
[class*="bg-card"]::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    transform: skewX(-30deg);
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    transition: left 0.8s ease-in-out;
}
[class*="bg-card"]:hover::after { left: 150%; }

/* 隐藏冗余元素 */
footer, .site-footer { display: none !important; }
</style>

<!-- 5. 3D 地球渲染容器 (依赖 globe.gl) -->
<script src="//unpkg.com/[email protected]/dist/globe.gl.min.js"></script>
<div id="earth-toggle-btn">
    <!-- 地球切换按钮图标 -->
</div>
<div id="earth-drawer-container">
    <div class="earth-header">
        <div class="earth-title">GLOBAL NETWORK STATS</div>
        <div id="earth-close-btn">CLOSE</div>
    </div>
    <div id="earth-render-area"></div>
</div>

💡 代码功能深度解析

1. 流量统计逻辑 (Traffic Stats)

脚本会通过获取哪吒面板的 /api/v1/service 接口数据，解析各服务器的 transfer（已用流量）和 max（总流量）。它会自动计算百分比并渲染出一个渐变色的进度条：

绿色：流量充足（< 70%）
橙色：流量预警（70% - 90%）
红色：即将耗尽（> 90%）

2. 3D 全球视野 (3D Globe)

集成了 Globe.gl 库，脚本会自动扫描页面中服务器的国别旗标（如 CN, HK, US），并在 3D 地球上自动标注位置并建立从中心节点（通常为 CN）出发的动态航线。

3. UI 适配 (Mobile Enhanced)

代码中包含大量的 @media 媒体查询，确保在手机端浏览时，玻璃卡片的大小、文字间距以及 3D 地球的侧边抽屉都能完美展示，不会溢出屏幕。

📌 小贴士

背景图: 建议使用 .webp 格式以提升加载速度。
证书: 确保你的面板域名开启了 HTTPS，否则某些外部 JS 资源可能加载失败。

希望这份代码能让你的哪吒监控面板焕发新生！如果有任何问题，欢迎在博客下方留言交流。

哪吒监控面板美化代码合集：iOS 玻璃拟态与 3D 流量地球