@wendongfly/myhi 1.0.52 → 1.0.54

package/dist/index.html

@@ -415,6 +415,7 @@
     <div class="logo">my<span>hi</span></div>
     <div style="display:flex;align-items:center;gap:0.6rem">
       <span id="user-name" style="font-size:0.8rem;color:var(--muted)"></span>
+      <button id="usage-btn" onclick="showUsage()" style="background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">用量</button>
       <button id="logout-btn" onclick="doLogout()" style="display:none;background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">退出</button>
       <div id="conn-dot"></div>
     </div>
@@ -524,6 +525,85 @@
     }
   }).catch(() => {});
 
+  async function showUsage() {
+    try {
+      const res = await fetch('/api/usage');
+      const data = await res.json();
+      let html = '<div style="padding:1.25rem;max-width:500px">';
+      html += '<h3 style="margin:0 0 1rem;font-size:1rem">Claude 用量统计</h3>';
+
+      // 5小时限额
+      if (data.rateLimit) {
+        const rl = data.rateLimit;
+        const resetTime = new Date(rl.resetsAt * 1000);
+        const remaining = Math.max(0, Math.ceil((resetTime - Date.now()) / 60000));
+        html += '<div style="margin-bottom:1rem;padding:0.8rem;background:var(--bg);border-radius:8px">';
+        html += '<div style="font-size:0.85rem;font-weight:600;margin-bottom:0.4rem">5小时窗口</div>';
+        html += `<div style="font-size:0.8rem;color:var(--muted)">状态: ${rl.status === 'allowed' ? '✓ 正常' : '⚠ 受限'}</div>`;
+        html += `<div style="font-size:0.8rem;color:var(--muted)">重置时间: ${remaining} 分钟后</div>`;
+        html += '</div>';
+      } else {
+        html += '<div style="margin-bottom:1rem;padding:0.8rem;background:var(--bg);border-radius:8px">';
+        html += '<div style="font-size:0.85rem;color:var(--muted)">5小时窗口: 发送一条 Agent 消息后可查看</div></div>';
+      }
+
+      // 7天用量
+      if (data.sevenDay) {
+        const s = data.sevenDay;
+        html += '<div style="margin-bottom:1rem;padding:0.8rem;background:var(--bg);border-radius:8px">';
+        html += '<div style="font-size:0.85rem;font-weight:600;margin-bottom:0.4rem">近7天</div>';
+        html += `<div style="font-size:0.8rem;color:var(--muted)">消息: ${s.messageCount.toLocaleString()}</div>`;
+        html += `<div style="font-size:0.8rem;color:var(--muted)">会话: ${s.sessionCount}</div>`;
+        html += `<div style="font-size:0.8rem;color:var(--muted)">工具调用: ${s.toolCallCount.toLocaleString()}</div>`;
+        html += '</div>';
+      }
+
+      // 活跃会话用量
+      if (data.activeSessions?.length) {
+        html += '<div style="margin-bottom:1rem;padding:0.8rem;background:var(--bg);border-radius:8px">';
+        html += '<div style="font-size:0.85rem;font-weight:600;margin-bottom:0.4rem">当前会话</div>';
+        for (const s of data.activeSessions) {
+          if (!s.usage) continue;
+          const u = s.usage;
+          html += `<div style="font-size:0.8rem;color:var(--muted);margin-top:0.3rem">${s.title}: ${u.queryCount}次查询, $${u.totalCostUSD.toFixed(4)}</div>`;
+        }
+        html += '</div>';
+      }
+
+      // 累计总量
+      if (data.totalStats) {
+        const t = data.totalStats;
+        html += '<div style="padding:0.8rem;background:var(--bg);border-radius:8px">';
+        html += '<div style="font-size:0.85rem;font-weight:600;margin-bottom:0.4rem">累计（截至 ' + (t.lastComputedDate || '未知') + '）</div>';
+        html += `<div style="font-size:0.8rem;color:var(--muted)">总会话: ${t.totalSessions}</div>`;
+        html += `<div style="font-size:0.8rem;color:var(--muted)">总消息: ${t.totalMessages?.toLocaleString()}</div>`;
+        if (t.modelUsage) {
+          for (const [model, u] of Object.entries(t.modelUsage)) {
+            if (u.outputTokens > 0) {
+              const shortName = model.replace(/claude-/, '').replace(/-\d{8}$/, '');
+              html += `<div style="font-size:0.75rem;color:var(--muted);margin-top:0.2rem">${shortName}: 输入${(u.inputTokens/1000).toFixed(0)}K 输出${(u.outputTokens/1000).toFixed(0)}K</div>`;
+            }
+          }
+        }
+        html += '</div>';
+      }
+
+      html += '<button onclick="this.parentElement.parentElement.remove()" style="margin-top:1rem;width:100%;padding:0.6rem;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:0.85rem">关闭</button>';
+      html += '</div>';
+
+      const overlay = document.createElement('div');
+      overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999;display:flex;align-items:center;justify-content:center';
+      overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+      const box = document.createElement('div');
+      box.style.cssText = 'background:var(--surface);border-radius:16px;max-height:80vh;overflow-y:auto;width:90%;max-width:400px';
+      box.innerHTML = html;
+      overlay.appendChild(box);
+      document.body.appendChild(overlay);
+    } catch (err) {
+      alert('获取用量失败: ' + err.message);
+    }
+  }
+
   function doLogout() {
     if (!confirm('确定退出登录？当前所有会话将被关闭。')) return;
     fetch('/logout', { method: 'POST' }).then(() => { location.href = '/login'; });