:root{--cyan:#10b7d6;--cyan2:#0796b8;--ink:#17395b;--text:#304357;--muted:#728499;--line:#d9e4ee;--line2:#e8f0f6;--bg:#f7fafc;--soft:#fbfdff;--bad:#c9273f;--ok:#138052}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:14px;line-height:1.58}a{color:inherit;text-decoration:none}button,input{font:inherit}.wrap{width:min(1120px,calc(100% - 24px));margin:0 auto}.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav-inner{height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:850;color:var(--ink)}.logo-mark{width:32px;height:32px;border-radius:12px;background:linear-gradient(135deg,#12c7df,#0a8fbd);color:#fff;display:grid;place-items:center}.logo-mark svg{width:26px;height:26px}.k-header-actions{display:flex;align-items:center;gap:8px}.k-login-link,.k-category-toggle{border:1px solid var(--line);background:#fff;color:#2c5268;border-radius:999px;padding:6px 12px;font-weight:750}.k-category-wrap{position:relative}.k-category-menu{position:absolute;right:0;top:36px;width:260px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:0 12px 28px rgba(23,57,91,.12);border-radius:8px;padding:10px;z-index:20}.k-cat-title{font-weight:850;color:var(--ink);font-size:13px;margin:6px 0}.k-cat-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}.k-cat-links a{border:1px solid var(--line2);background:#fafdff;border-radius:6px;padding:6px 8px;font-size:13px}.hero{padding:18px 0 10px}.tag{display:inline-flex;border:1px solid #dff1f6;background:#f5fdff;color:#567087;border-radius:999px;padding:5px 9px;font-size:12px}.hero h1{margin:10px 0 6px;color:var(--ink);font-size:30px}.lead{max-width:820px;color:#61758a;margin:0}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin:12px 0 42px}.panel{border:1px solid var(--line);background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(32,72,105,.035);padding:16px}.panel h2{margin:0 0 12px;color:var(--ink);font-size:18px;border-bottom:1px solid var(--line2);padding-bottom:9px}.panel h2:before{content:"";display:inline-block;width:3px;height:16px;border-radius:2px;background:var(--cyan);margin-right:7px;vertical-align:-2px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.tabs button{border:1px solid var(--line);background:#fff;color:#35536b;border-radius:999px;padding:7px 12px;font-weight:750}.tabs button.active{background:#e9f9fc;color:var(--cyan2);border-color:#b8eaf3}.form{display:grid;gap:10px}.input{height:40px;border:1px solid var(--line);border-radius:6px;padding:0 11px;background:#fff;color:var(--ink);min-width:0}.btn{height:40px;border:0;border-radius:6px;background:var(--cyan);color:#fff;font-weight:850;cursor:pointer;padding:0 14px}.btn.secondary{background:#eef7fa;color:#256176;border:1px solid #cfe9f1}.btn.danger{background:#fff0f2;color:#b8233b;border:1px solid #ffd6dc}.hidden{display:none!important}.hint{color:var(--muted);font-size:13px}.msg{white-space:pre-wrap;background:#f8fbfd;border:1px solid var(--line2);padding:10px;border-radius:6px;color:#50667a}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{border:1px solid var(--line2);background:#fbfdff;border-radius:8px;padding:12px}.metric b{display:block;color:var(--ink);font-size:20px}.metric span{color:var(--muted);font-size:12px}.list{display:grid;gap:8px}.item{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:10px}.item strong{display:block;color:var(--ink);margin-bottom:4px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f6f9fb;border:1px solid #e6eef4;border-radius:6px;padding:8px;word-break:break-all}.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick a{border:1px solid var(--line2);background:#fbfdff;border-radius:8px;padding:10px;color:#28566a;font-weight:750}.rules li{margin:5px 0}.ok{color:var(--ok)}.bad{color:var(--bad)}@media(max-width:760px){.wrap{width:min(100% - 16px,1120px)}.nav-inner{height:52px}.logo{font-size:18px}.logo-mark{width:28px;height:28px}.hero h1{font-size:24px}.grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.quick{grid-template-columns:1fr 1fr}.panel{padding:12px}.k-category-menu{right:-2px;width:min(88vw,280px)}.k-cat-links{grid-template-columns:1fr 1fr}.btn,.input{height:38px}}
</style>  <link rel="stylesheet" href="/assets/kaluo-unified.css?v=20260630">
</head><body><nav class="nav"><div class="wrap nav-inner"><a class="logo" href="/"><span class="logo-mark"><svg viewBox="0 0 64 64" aria-hidden="true"><rect x="6" y="6" width="52" height="52" rx="18" fill="currentColor"/><circle cx="32" cy="32" r="18" fill="none" stroke="#fff" stroke-width="4"/><path d="M24 34h11.5c4.2 0 7.5-3.3 7.5-7.3S39.7 19.5 35.5 19.5H27" fill="none" stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 44V20" fill="none" stroke="#fff" stroke-width="4.5" stroke-linecap="round"/><path d="M34 34l10 10" fill="none" stroke="#fff" stroke-width="4.5" stroke-linecap="round"/></svg></span>Kaluo.net</a><div class="k-header-actions"><a class="k-login-link" href="/user-login.html" id="topLogin">登录</a><div class="k-category-wrap"><button class="k-category-toggle" type="button" onclick="var m=this.nextElementSibling;m.hidden=!m.hidden;this.setAttribute('aria-expanded',m.hidden?'false':'true')" aria-expanded="false">分类</button><div class="k-category-menu" hidden><a href="/http.html">网站测速</a><a href="/ping.html">PING测速</a><a href="/dns.html">DNS查询</a><a href="/check.html">综合检测</a></div></div></div></div></nav><main class="wrap"><section class="hero"><span class="tag">User Center · 用户中心</span><h1>用户中心</h1><p class="lead" id="accountLead" hidden></p></section><section id="authPanel" class="panel"><h2>注册 / 登录</h2><div class="tabs"><button id="tabLogin" class="active">登录</button><button id="tabRegister">注册</button><button id="tabKey" class="hidden">仅查询 API Key</button></div><div id="loginBox" class="form"><input id="loginEmail" class="input" placeholder="邮箱"><input id="loginPassword" class="input" type="password" placeholder="密码"><button class="btn" id="loginBtn">登录用户中心</button></div><div id="registerBox" class="form hidden"><input id="regEmail" class="input" placeholder="邮箱"><input id="regNick" class="input" placeholder="昵称，可不填"><input id="regPassword" class="input" type="password" placeholder="密码，至少 8 位"><button class="btn" id="registerBtn">注册</button><p class="hint">注册后自动生成基础 API Key，方便后续调用和查看额度。</p></div><div id="keyBox" class="form hidden" data-api-key-query-box="1"><input id="apiKey" class="input" placeholder="已有 API Key，例如 kal_xxx"><button class="btn" id="queryKeyBtn">查询 Key 用量</button><p class="hint">兼容旧链接：<code>/account.html?api_key=kal_xxx&auto=1</code></p></div><p id="authMsg" class="msg hidden"></p></section><section id="center" class="grid hidden"><div><section class="panel"><div class="row"><h2>账号概览</h2><button class="btn danger" id="logoutBtn">退出登录</button></div><div class="cards"><div class="metric"><b id="nickname">-</b><span>账号昵称</span></div><div class="metric"><b id="subCount">0</b><span>套餐 / API Key</span></div><div class="metric"><b id="quotaLeft">0</b><span>今日剩余额度</span></div></div><p id="profile" class="msg"></p></section><section class="panel"><h2>API Key 与额度</h2><div id="keys" class="list"></div><div class="form" style="margin-top:10px"><input id="bindKey" class="input" placeholder="绑定已有 API Key"><button class="btn secondary" id="bindBtn">绑定到当前账号</button></div></section><section class="panel"><h2>套餐订单</h2><div id="orders" class="list"></div></section><section class="panel"><h2>我的报告</h2><div id="reports" class="list"></div></section></div><aside><section class="panel"><h2>常用功能</h2><div class="quick"><a href="/check.html">综合检测</a><a href="/download.html">下载测速</a><a href="/monitors.html">监控任务</a><a href="/history.html">检测历史</a><a href="/pricing.html">套餐购买</a><a href="/api.html">API文档</a></div></section><section class="panel"><h2>账号服务</h2><ul class="rules"><li>查看自己的 API Key、套餐额度和订单记录。</li><li>管理个人报告、监控任务和常用工具入口。</li><li>如需更多额度，可前往套餐页面升级。</li></ul></section></aside></section></main><script>
function $(id){return document.getElementById(id)}function esc(v){return String(v==null?'':v).replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]))}function mask(k){return k&&k.length>14?k.slice(0,8)+'***'+k.slice(-5):k||'-'}function msg(t,bad){authMsg.classList.remove('hidden');authMsg.innerHTML=(bad?'<span class="bad">':'<span class="ok">')+esc(t)+'</span>'}let apiKeyQueryEnabled=false;function setApiKeyQueryEnabled(v){apiKeyQueryEnabled=v===true;tabKey.classList.toggle('hidden',!apiKeyQueryEnabled);if(!apiKeyQueryEnabled&&tabKey.classList.contains('active'))showTab('login')}function showTab(t){if(t==='key'&&!apiKeyQueryEnabled)t='login';['login','register','key'].forEach(x=>{document.getElementById(x+'Box').classList.toggle('hidden',x!==t)});tabLogin.classList.toggle('active',t==='login');tabRegister.classList.toggle('active',t==='register');tabKey.classList.toggle('active',t==='key')}tabLogin.onclick=()=>showTab('login');tabRegister.onclick=()=>showTab('register');tabKey.onclick=()=>showTab('key');function setAccountLead(cfg){const el=$('accountLead');const text=(cfg.account_lead_text||'').trim();if(cfg.account_lead_enabled===true&&text){el.textContent=text;el.hidden=false}else{el.textContent='';el.hidden=true}}
async function post(url,body){const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams(body)});const d=await r.json();if(!r.ok||!d.ok)throw new Error(d.error||('HTTP '+r.status));return d}
async function loadMe(){const r=await fetch('/api/user/me');const d=await r.json();if(!r.ok||!d.ok)throw new Error(d.error||'未登录');renderCenter(d.result);return d.result}
function renderCenter(res){authPanel.classList.add('hidden');center.classList.remove('hidden');topLogin.textContent='用户中心';topLogin.href='/account.html';const u=res.user||{};const subs=res.subscriptions||[];const usage=res.usage||[];const orders=res.orders||[];const reports=res.reports||[];nickname.textContent=u.nickname||u.email||'-';subCount.textContent=subs.length;let remain=usage.reduce((a,x)=>a+(Number(x.remaining)||0),0);quotaLeft.textContent=remain;profile.textContent='邮箱：'+(u.email||'-')+'\n注册时间：'+(u.created_at||'-')+'\n账号ID：'+(u.id||'-');keys.innerHTML=subs.length?subs.map(s=>{const u1=usage.find(x=>x.api_key===s.api_key)||{};return '<div class="item"><strong>'+esc(s.plan||'套餐')+' · '+esc(s.status||'-')+'</strong><div class="code">'+esc(mask(s.api_key))+'</div><p>今日用量：'+esc(u1.used??0)+' / '+esc(u1.quota??s.quota_daily??'-')+'，剩余 '+esc(u1.remaining??'-')+'</p><p>到期：'+esc(s.expires_at||'-')+'</p></div>'}).join(''):'<p class="hint">暂无 API Key</p>';orders.innerHTML=orders.length?orders.map(o=>'<div class="item"><strong>'+esc(o.name||o.plan||'订单')+'</strong><p>状态：'+esc(o.status||'-')+'，金额：'+esc(o.amount||'-')+'</p><p>订单号：'+esc(o.out_trade_no||'-')+'</p></div>').join(''):'<p class="hint">暂无订单，购买套餐后会显示在这里。</p>';reports.innerHTML=reports.length?reports.map(r=>'<div class="item"><strong>'+esc(r.title||'检测报告')+'</strong><p>'+esc(r.target||'-')+' · '+esc(r.created_at||'-')+'</p><a class="btn secondary" href="/report.html?id='+encodeURIComponent(r.id)+'">打开报告</a></div>').join(''):'<p class="hint">暂无个人报告，登录后生成的新报告会归到这里。</p>'}
loginBtn.onclick=async()=>{try{await post('/api/user/login',{email:loginEmail.value,password:loginPassword.value});msg('登录成功');await loadMe()}catch(e){msg(e.message,true)}};registerBtn.onclick=async()=>{try{await post('/api/user/register',{email:regEmail.value,nickname:regNick.value,password:regPassword.value});msg('注册成功，已生成免费 API Key');await loadMe()}catch(e){msg(e.message,true)}};logoutBtn.onclick=async()=>{await post('/api/user/logout',{}).catch(()=>{});location.reload()};bindBtn.onclick=async()=>{try{await post('/api/user/bind-api-key',{api_key:bindKey.value});msg('绑定成功');await loadMe()}catch(e){msg(e.message,true)}};queryKeyBtn.onclick=async()=>{const key=apiKey.value.trim();if(!key)return;authMsg.classList.remove('hidden');authMsg.textContent='查询中...';try{const r=await fetch('/api/account/me',{headers:{'X-API-Key':key}});const d=await r.json();if(!r.ok||!d.ok)throw new Error(d.error||'查询失败');const sub=d.result.subscription||{},u=d.result.usage||{};authMsg.textContent='API Key：'+mask(key)+'\n套餐：'+(sub.plan||'-')+'\n状态：'+(sub.status||'-')+'\n今日用量：'+(u.used??0)+' / '+(u.quota??'-')+'\n剩余额度：'+(u.remaining??'-')}catch(e){msg(e.message,true)}};function qs(n){return new URLSearchParams(location.search).get(n)||''}function initAccountEntry(){apiKey.value=apiKeyQueryEnabled?qs('api_key'):'';if(apiKeyQueryEnabled&&qs('auto')==='1'&&apiKey.value){showTab('key');queryKeyBtn.click()}else{loadMe().catch(()=>{})}}
fetch('/api/site-config').then(r=>r.json()).then(d=>{const cfg=(d.result&&d.result.config)||{};setApiKeyQueryEnabled(cfg.account_api_key_query_enabled===true);setAccountLead(cfg);initAccountEntry();document.querySelectorAll('.k-category-menu').forEach(menu=>{const groups=(cfg.function_tool_categories||[]).filter(g=>g&&g.enabled!==false);if(groups.length){menu.innerHTML=groups.map(g=>'<div class="k-cat-group"><div class="k-cat-title">'+esc(g.title)+'</div><div class="k-cat-links">'+(g.items||[]).filter(x=>x&&x.enabled!==false).map(x=>'<a href="'+esc(x.path)+'">'+esc(x.title)+'</a>').join('')+'</div></div>').join('')}})}).catch(()=>{setApiKeyQueryEnabled(false);setAccountLead({});initAccountEntry()});
</script></body></html>