哪吒监控面板美化进阶：3D 交互地球、流量进度条与 iOS 拟态全局重塑

继上篇基础美化后，本次分享一套更为硬核的哪吒监控美化方案。本套方案通过 JS 注入，实现了从底层 UI 到交互功能的全面升级。

🌟 核心改进点

1. 3D 动态地球 (Globe.gl)：

   • 自动扫描: 脚本会自动识别页面中服务器的国旗标签类名。
   • 动态航线: 以 CN 节点为中心，建立全球服务器的动态连接航线。
   • 交互体验: 支持 360 度旋转、缩放，并集成在精致的侧边抽屉中。

2. iOS 毛玻璃全局应用：

   • 深度拟态: 所有卡片、按钮、过滤条均应用 效果。
   • 动态扫光: 鼠标悬停时触发高光扫描动画，极具高级感。

3. 智能流量监控引擎：

   • 实时数据: 异步抓取接口数据，无需手动计算。
   • 三色渐变: 进度条根据流量剩余情况自动切换 绿/橙/红 颜色。
   • 信息轮播: 进度条上方循环展示流量使用百分比、账单周期及结算时间。

4. 全局细节优化：

   • 字体重塑: 集成抖音端黑（Douyin Sans），针对数字显示进行深度优化。
   • 移动端适配: 针对不同屏幕尺寸编写了大量媒体查询，保证手机端完美展示。

🛠️ 安装与使用

将提供的完整代码块复制到哪吒监控面板后台的 设置 -> 自定义代码 框中保存即可。

核心代码包 (包含中文注释与优化)

<!-- 哪吒监控面板美化进阶版 -->
<script>
/**
 * 1. 基础视觉配置
 */
window.CustomBackgroundImage = "https://cdn.nodeimage.com/i/mQV4vFbmT2dTRGjSdc6Va4SnPD7YXdSs.webp";
window.CustomLogo = 'https://cdn.nodeimage.com/i/4J0qkcto8t7V9RTfTaBGooATAUo2zxbI.svg';
window.CustomDesc = 'Global Infrastructure Monitor';
window.DisableAnimatedMan = true;  // 关闭默认插图
window.ForceTheme = "dark";        // 强制暗色模式

/**
 * 2. 流量统计逻辑配置
 */
window.TrafficScriptConfig = {
    showTrafficStats: true, 
    interval: 60000,      // 数据刷新频率 (ms)
    toggleInterval: 5000,   // 右上角信息切换频率
    enableLog: false
};
</script>

<style>
/* iOS 玻璃质感全局样式 */
[class*="bg-card"], .bottom-marquee {
    background-color: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 动态扫光动画 */
[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%; }
</style>

<!-- 3D渲染组件 -->
<script src="//unpkg.com/[email protected]/dist/globe.gl.min.js"></script>
<!-- 详细地理坐标库与逻辑代码... (请参照源文件) -->

💡 结语

这套代码不仅是视觉上的美化，更通过对原本隐藏数据的挖掘（如流量周期），极大提升了运维监控的效率。希望这套方案能为你的“折腾”之旅增添色彩。