用Ai手搓了一个探针小工具中心

先上效果图

感觉还是挺美观的，将下面代码粘贴到komari后台的自定义头部即可，期待论坛大佬更好的作品

<script>

/**

 * ================================================================

 * Network Visitor Panel 

 * ================================================================

 */



// 1. 自动注入国旗图标库 CSS

if (!document.getElementById('nz-flag-icons')) {

    const link = document.createElement('link');

    link.id = 'nz-flag-icons';

    link.rel = 'stylesheet';

    link.href = 'https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css';

    document.head.appendChild(link);

}



// 面板显示多久后自动收回 (毫秒)，如果不想自动收回可以改大

window.VisitorInfoAutoHideDelay = 5000;



async function measureLatency() {

  const url = "https://cloudflare.com/cdn-cgi/trace";

  const times = [];

  for (let i = 0; i < 5; i++) {

    try {

      const t0 = performance.now();

      await fetch(url, { cache: "no-store", mode: "no-cors" });

      times.push(performance.now() - t0);

    } catch {}

  }

  return times.length ? Math.round(times.reduce((a, b) => a + b, 0) / times.length) : "N/A";

}



function toChineseCountryName(code) {

  if (!code) return "未知区域";

  try {

    return new Intl.DisplayNames(["zh-Hans"], { type: "region" }).of(code);

  } catch { return code; }

}



function initVisitorInfo() {

  fetch("https://ipinfo.io/json")

    .then((res) => res.json())

    .then(async (data) => {

      const latency = await measureLatency();

      createUI(data, latency);

    });



  function createUI(data, latency) {

    // 清理旧实例

    document.getElementById("nezha-net-glass-panel")?.remove();

    document.getElementById("nezha-net-glass-btn")?.remove();



    // 样式注入

    if (!document.getElementById("nezha-net-glass-style")) {

      const st = document.createElement("style");

      st.id = "nezha-net-glass-style";

      st.textContent = `

       .nz-tool{

    height:72px;

    border-radius:14px;

    background:rgba(255,255,255,.30);

    border:1px solid rgba(255,255,255,.25);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s;

    user-select:none;

}



.nz-tool:hover{

    background:rgba(255,255,255,.45);

    transform:translateY(-2px);

}



.nz-tool-icon{

    font-size:22px;

    margin-bottom:6px;

}



.nz-tool-text{

    font-size:12px;

    font-weight:800;

}

      `;

      document.head.appendChild(st);

    }



    const panel = document.createElement("div");

    const btn = document.createElement("div");

    panel.id = "nezha-net-glass-panel";

    btn.id = "nezha-net-glass-btn";

    document.body.append(panel, btn);



    const countryCode = (data.country || "").toLowerCase();

    const flagHTML = `<span class="fi fi-${countryCode}"></span>`;



    // 面板初始状态：隐藏在左侧屏幕外

    Object.assign(panel.style, {

      position: "fixed", left: "-380px", bottom: "22px", width: "340px", padding: "16px", zIndex: "9999",

      background: "rgba(255,255,255,0.75)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)",

      border: "1px solid rgba(255,255,255,0.4)", borderRadius: "18px",

      boxShadow: "0 8px 32px 0 rgba(31,38,135,0.15)", transition: "transform .6s cubic-bezier(.22,1,.36,1)",

    });



    // 按钮初始状态：直接可见

    Object.assign(btn.style, {

      position: "fixed", left: "14px", bottom: "22px", width: "1.05cm", height: "1.05cm", borderRadius: "14px",

      display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.72)",

      backdropFilter: "blur(10px)", border: "1px solid rgba(255,255,255,0.48)",

      opacity: "1", pointerEvents: "auto", cursor: "pointer", zIndex: "9999",

      boxShadow: "0 10px 26px rgba(31,38,135,0.14)", transition: "all .35s ease"

    });



    btn.innerHTML = countryCode ? flagHTML : "🌐";



    const row = (label, value) => `

      <div style="display:flex; justify-content:space-between; align-items:center; margin:8px 0; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,0.32); border: 1px solid rgba(255,255,255,0.25);">

        <span class="nz-lab" style="font-size:13px;">${label}</span>

        <span class="nz-val" style="font-size:12px;">${value}</span>

      </div>`;



panel.innerHTML = `

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 5px;">

    <div class="nz-lab" style="font-size:16px;">网络轨迹</div>

    <div style="

        padding:4px 10px;

        border-radius:999px;

        background:rgba(255,255,255,0.35);">

        <span style="font-size:11px;">延迟 ${latency} ms</span>

    </div>

</div>



${row("当前 IP", data.ip)}

${row("所在地", `${flagHTML} ${toChineseCountryName(data.country)}`)}

${row("运营商", data.org || "未知")}



<!-- 分割线 -->

<div style="

    margin:14px 0 12px;

    border-top:1px solid rgba(255,255,255,.3);

"></div>



<!-- 工具栏 -->

<div style="

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

">



    <div class="nz-tool" id="nz-tool-calc">

        <div class="nz-tool-icon">🧮</div>

        <div class="nz-tool-text">余值</div>

    </div>



    <div class="nz-tool" id="nz-tool-speed">

        <div class="nz-tool-icon">📊</div>

        <div class="nz-tool-text">测速</div>

    </div>



    <div class="nz-tool" id="nz-tool-ip">

        <div class="nz-tool-icon">🌐</div>

        <div class="nz-tool-text">IP查询</div>

    </div>



</div>

`;

document.getElementById("nz-tool-calc").onclick = (e)=>{

    e.stopPropagation();

    window.open("https://tool.moorli.de","_blank");

};



document.getElementById("nz-tool-speed").onclick = (e)=>{

    e.stopPropagation();

    window.open("https://fast.com","_blank");

};



document.getElementById("nz-tool-ip").onclick = (e)=>{

    e.stopPropagation();

    window.open("https://ippure.com","_blank");

};

    // 动作逻辑

    const show = () => { 

        panel.style.transform = "translateX(394px)"; 

        btn.style.opacity = "0";

        btn.style.pointerEvents = "none";

    };

    const hide = () => {

        panel.style.transform = "translateX(0)";

        setTimeout(() => {

            btn.style.opacity = "1";

            btn.style.pointerEvents = "auto";

        }, 600);

    };



    // 绑定点击事件：点图标弹出面板

    btn.onclick = show;

    

    // 点击面板本身或等待超时后自动收回

    panel.onclick = hide;

    

    // 如果想要点击后过几秒自动关掉，可以保留下面这行，不想要就删掉

     btn.addEventListener('click', () => { setTimeout(hide, window.VisitorInfoAutoHideDelay); });

  }

}



initVisitorInfo();

</script>