llmapi-v2 2.1.0

package/views/pages/dashboard.ejs

@@ -0,0 +1,441 @@
+<%- include('../partials/header', { pageTitle: '控制台' }) %>
+<%- include('../partials/nav') %>
+
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+
+  <!-- 页面标题 -->
+  <div class="mb-8">
+    <h1 class="text-2xl font-bold text-claude-dark">控制台</h1>
+    <p class="text-sm text-gray-500 mt-1">管理你的 API 密钥、查看用量统计</p>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
+    <!-- Token 用量 -->
+    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
+      <div class="flex items-center justify-between mb-3">
+        <span class="text-sm font-medium text-gray-500">Token 总用量</span>
+        <svg class="w-5 h-5 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+      </div>
+      <div class="text-2xl font-bold text-claude-dark" id="statTokens">--</div>
+      <div class="mt-3">
+        <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
+          <span>已用 / 总额度</span>
+          <span id="statTokenPercent">0%</span>
+        </div>
+        <div class="w-full bg-gray-100 rounded-full h-2">
+          <div class="bg-claude-orange rounded-full h-2 transition-all duration-500" id="statTokenBar" style="width: 0%"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 今日请求 -->
+    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
+      <div class="flex items-center justify-between mb-3">
+        <span class="text-sm font-medium text-gray-500">今日请求</span>
+        <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+      </div>
+      <div class="text-2xl font-bold text-claude-dark" id="statRequests">--</div>
+      <p class="text-xs text-gray-400 mt-2">较昨日 <span id="statRequestsDiff" class="text-green-500">--</span></p>
+    </div>
+
+    <!-- 当前套餐 -->
+    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
+      <div class="flex items-center justify-between mb-3">
+        <span class="text-sm font-medium text-gray-500">当前套餐</span>
+        <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
+      </div>
+      <div class="text-2xl font-bold text-claude-dark" id="statPlan">--</div>
+      <a href="/pricing" class="inline-block text-xs text-claude-orange hover:underline mt-2">升级套餐 &rarr;</a>
+    </div>
+
+    <!-- API Key 数量 -->
+    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
+      <div class="flex items-center justify-between mb-3">
+        <span class="text-sm font-medium text-gray-500">API 密钥</span>
+        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
+      </div>
+      <div class="text-2xl font-bold text-claude-dark" id="statKeys">--</div>
+      <p class="text-xs text-gray-400 mt-2">活跃密钥数</p>
+    </div>
+  </div>
+
+  <!-- Token 明细 + 7 日用量图表 -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+
+    <!-- Token 明细 -->
+    <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
+      <h2 class="text-lg font-semibold text-claude-dark mb-4">Token 明细</h2>
+      <div class="space-y-4" id="tokenBreakdown">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-2">
+            <span class="w-3 h-3 rounded-full bg-claude-orange"></span>
+            <span class="text-sm text-gray-600">输入 Tokens</span>
+          </div>
+          <span class="text-sm font-semibold" id="inputTokens">--</span>
+        </div>
+        <div class="w-full bg-gray-100 rounded-full h-2">
+          <div class="bg-claude-orange rounded-full h-2 transition-all duration-500" id="inputTokenBar" style="width: 0%"></div>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-2">
+            <span class="w-3 h-3 rounded-full bg-blue-500"></span>
+            <span class="text-sm text-gray-600">输出 Tokens</span>
+          </div>
+          <span class="text-sm font-semibold" id="outputTokens">--</span>
+        </div>
+        <div class="w-full bg-gray-100 rounded-full h-2">
+          <div class="bg-blue-500 rounded-full h-2 transition-all duration-500" id="outputTokenBar" style="width: 0%"></div>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-2">
+            <span class="w-3 h-3 rounded-full bg-purple-500"></span>
+            <span class="text-sm text-gray-600">思考 Tokens</span>
+          </div>
+          <span class="text-sm font-semibold" id="thinkingTokens">--</span>
+        </div>
+        <div class="w-full bg-gray-100 rounded-full h-2">
+          <div class="bg-purple-500 rounded-full h-2 transition-all duration-500" id="thinkingTokenBar" style="width: 0%"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 7 日用量图表 -->
+    <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
+      <h2 class="text-lg font-semibold text-claude-dark mb-4">近 7 日用量</h2>
+      <div class="flex items-center space-x-4 text-xs text-gray-500 mb-4">
+        <div class="flex items-center space-x-1"><span class="w-3 h-3 rounded-sm bg-claude-orange"></span><span>输入</span></div>
+        <div class="flex items-center space-x-1"><span class="w-3 h-3 rounded-sm bg-blue-500"></span><span>输出</span></div>
+      </div>
+      <div class="flex items-end justify-between space-x-2" id="usageChart" style="height: 180px;">
+        <!-- 动态填充 -->
+      </div>
+    </div>
+  </div>
+
+  <!-- API 密钥管理 -->
+  <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm mb-8">
+    <div class="flex items-center justify-between mb-6">
+      <h2 class="text-lg font-semibold text-claude-dark">API 密钥管理</h2>
+    </div>
+
+    <!-- 创建密钥 -->
+    <div class="flex items-center space-x-3 mb-6">
+      <input
+        type="text"
+        id="newKeyName"
+        placeholder="密钥名称（如 my-project）"
+        class="flex-1 max-w-xs px-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-claude-orange/40 focus:border-claude-orange"
+      />
+      <button
+        onclick="createApiKey()"
+        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-claude-orange rounded-lg hover:bg-opacity-90 transition-all shadow-sm"
+      >
+        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+        创建密钥
+      </button>
+    </div>
+
+    <!-- 新密钥展示 -->
+    <div id="newKeyDisplay" class="hidden mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+      <div class="flex items-start space-x-3">
+        <svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-green-800 mb-1">密钥创建成功！请立即复制保存，此密钥仅显示一次。</p>
+          <div class="flex items-center space-x-2">
+            <code class="text-sm bg-white px-3 py-1.5 rounded border border-green-200 font-mono break-all flex-1" id="newKeyValue"></code>
+            <button onclick="copyNewKey()" class="flex-shrink-0 px-3 py-1.5 text-xs font-medium text-green-700 bg-green-100 rounded hover:bg-green-200 transition-colors">复制</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 密钥列表 -->
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-gray-100">
+            <th class="text-left py-3 px-2 font-medium text-gray-500">名称</th>
+            <th class="text-left py-3 px-2 font-medium text-gray-500">密钥</th>
+            <th class="text-left py-3 px-2 font-medium text-gray-500">创建时间</th>
+            <th class="text-left py-3 px-2 font-medium text-gray-500">最后使用</th>
+            <th class="text-right py-3 px-2 font-medium text-gray-500">操作</th>
+          </tr>
+        </thead>
+        <tbody id="apiKeysList">
+          <tr><td colspan="5" class="text-center py-8 text-gray-400">加载中...</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- 快速开始 -->
+  <div class="bg-white rounded-xl border border-gray-100 p-6 shadow-sm mb-8">
+    <h2 class="text-lg font-semibold text-claude-dark mb-4">快速开始</h2>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Claude Code 配置 -->
+      <div>
+        <h3 class="text-sm font-medium text-gray-700 mb-2">Claude Code 配置</h3>
+        <p class="text-xs text-gray-500 mb-3">在终端中执行以下命令即可完成配置：</p>
+        <div class="relative">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-xs font-mono overflow-x-auto leading-relaxed"><code id="codeClaudeConfig"># macOS / Linux
+export ANTHROPIC_BASE_URL=https://llmapi.pro
+export ANTHROPIC_API_KEY=你的API密钥
+
+# Windows PowerShell
+$env:ANTHROPIC_BASE_URL="https://llmapi.pro"
+$env:ANTHROPIC_API_KEY="你的API密钥"</code></pre>
+          <button onclick="copyCode('codeClaudeConfig')" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">复制</button>
+        </div>
+      </div>
+
+      <!-- Python SDK -->
+      <div>
+        <h3 class="text-sm font-medium text-gray-700 mb-2">Python SDK</h3>
+        <p class="text-xs text-gray-500 mb-3">使用 Anthropic Python SDK 调用 API：</p>
+        <div class="relative">
+          <pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-xs font-mono overflow-x-auto leading-relaxed"><code id="codePython">import anthropic
+
+client = anthropic.Anthropic(
+    base_url="https://llmapi.pro",
+    api_key="你的API密钥",
+)
+
+message = client.messages.create(
+    model="claude-sonnet-4-20250514",
+    max_tokens=1024,
+    messages=[
+        {"role": "user", "content": "你好"}
+    ]
+)
+print(message.content[0].text)</code></pre>
+          <button onclick="copyCode('codePython')" class="absolute top-2 right-2 px-2 py-1 text-xs text-gray-400 bg-gray-800 rounded hover:text-white transition-colors">复制</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  // 格式化数字
+  function fmtNum(n) {
+    if (n == null) return '--';
+    if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
+    if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
+    if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+    return n.toLocaleString();
+  }
+
+  function fmtDate(d) {
+    if (!d) return '--';
+    const dt = new Date(d);
+    return dt.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+  }
+
+  // 复制功能
+  function copyCode(id) {
+    const el = document.getElementById(id);
+    navigator.clipboard.writeText(el.textContent).then(() => {
+      const btn = el.closest('.relative').querySelector('button');
+      btn.textContent = '已复制';
+      setTimeout(() => btn.textContent = '复制', 2000);
+    });
+  }
+
+  function copyNewKey() {
+    const val = document.getElementById('newKeyValue').textContent;
+    navigator.clipboard.writeText(val).then(() => {
+      const btn = document.querySelector('#newKeyDisplay button');
+      btn.textContent = '已复制';
+      setTimeout(() => btn.textContent = '复制', 2000);
+    });
+  }
+
+  // 加载统计数据
+  async function loadStats() {
+    try {
+      const res = await fetch('/api/dashboard/stats', { credentials: 'same-origin' });
+      if (!res.ok) throw new Error('请求失败');
+      const data = await res.json();
+      const s = data.data || data;
+
+      document.getElementById('statTokens').textContent = fmtNum(s.totalTokens);
+      const pct = s.tokenLimit ? Math.min(100, (s.totalTokens / s.tokenLimit * 100)).toFixed(1) : 0;
+      document.getElementById('statTokenPercent').textContent = pct + '%';
+      document.getElementById('statTokenBar').style.width = pct + '%';
+
+      document.getElementById('statRequests').textContent = fmtNum(s.todayRequests);
+      const diff = s.requestsDiff;
+      const diffEl = document.getElementById('statRequestsDiff');
+      if (diff != null) {
+        diffEl.textContent = (diff >= 0 ? '+' : '') + diff + '%';
+        diffEl.className = diff >= 0 ? 'text-green-500' : 'text-red-500';
+      }
+
+      document.getElementById('statPlan').textContent = s.plan || '免费版';
+      document.getElementById('statKeys').textContent = s.apiKeyCount ?? '--';
+
+      // Token 明细
+      const total = (s.inputTokens || 0) + (s.outputTokens || 0) + (s.thinkingTokens || 0) || 1;
+      document.getElementById('inputTokens').textContent = fmtNum(s.inputTokens);
+      document.getElementById('inputTokenBar').style.width = ((s.inputTokens || 0) / total * 100) + '%';
+      document.getElementById('outputTokens').textContent = fmtNum(s.outputTokens);
+      document.getElementById('outputTokenBar').style.width = ((s.outputTokens || 0) / total * 100) + '%';
+      document.getElementById('thinkingTokens').textContent = fmtNum(s.thinkingTokens);
+      document.getElementById('thinkingTokenBar').style.width = ((s.thinkingTokens || 0) / total * 100) + '%';
+    } catch (e) {
+      console.error('加载统计失败:', e);
+    }
+  }
+
+  // 加载 7 日用量图表
+  async function loadUsage() {
+    try {
+      const res = await fetch('/api/dashboard/usage', { credentials: 'same-origin' });
+      if (!res.ok) throw new Error('请求失败');
+      const data = await res.json();
+      const days = data.data || data || [];
+
+      const chart = document.getElementById('usageChart');
+      chart.innerHTML = '';
+
+      if (!days.length) {
+        chart.innerHTML = '<div class="flex items-center justify-center w-full text-gray-400 text-sm">暂无数据</div>';
+        return;
+      }
+
+      const maxVal = Math.max(...days.map(d => Math.max(d.input || 0, d.output || 0)), 1);
+
+      days.forEach(day => {
+        const col = document.createElement('div');
+        col.className = 'flex-1 flex flex-col items-center justify-end space-y-1';
+
+        const inputH = Math.max(4, ((day.input || 0) / maxVal) * 140);
+        const outputH = Math.max(4, ((day.output || 0) / maxVal) * 140);
+
+        col.innerHTML = `
+          <div class="w-full flex justify-center space-x-1">
+            <div class="w-3 bg-claude-orange rounded-t transition-all" style="height:${inputH}px" title="输入: ${fmtNum(day.input)}"></div>
+            <div class="w-3 bg-blue-500 rounded-t transition-all" style="height:${outputH}px" title="输出: ${fmtNum(day.output)}"></div>
+          </div>
+          <span class="text-xs text-gray-400 mt-1">${day.date ? new Date(day.date).toLocaleDateString('zh-CN', {month:'numeric', day:'numeric'}) : ''}</span>
+        `;
+        chart.appendChild(col);
+      });
+    } catch (e) {
+      console.error('加载用量失败:', e);
+    }
+  }
+
+  // 加载 API 密钥列表
+  async function loadApiKeys() {
+    try {
+      const res = await fetch('/api/dashboard/api-keys', { credentials: 'same-origin' });
+      if (!res.ok) throw new Error('请求失败');
+      const data = await res.json();
+      const keys = data.data || data || [];
+
+      const tbody = document.getElementById('apiKeysList');
+      if (!keys.length) {
+        tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-gray-400">暂无 API 密钥，点击上方按钮创建</td></tr>';
+        return;
+      }
+
+      tbody.innerHTML = keys.map(k => `
+        <tr class="border-b border-gray-50 hover:bg-gray-50/50">
+          <td class="py-3 px-2 font-medium text-claude-dark">${escHtml(k.name || '未命名')}</td>
+          <td class="py-3 px-2">
+            <code class="text-xs font-mono bg-gray-100 px-2 py-1 rounded">${escHtml(k.maskedKey || k.key || '--')}</code>
+          </td>
+          <td class="py-3 px-2 text-gray-500">${fmtDate(k.createdAt)}</td>
+          <td class="py-3 px-2 text-gray-500">${k.lastUsedAt ? fmtDate(k.lastUsedAt) : '从未'}</td>
+          <td class="py-3 px-2 text-right">
+            <button onclick="deleteApiKey('${k.id || k._id}')" class="text-xs text-red-500 hover:text-red-700 hover:underline transition-colors">删除</button>
+          </td>
+        </tr>
+      `).join('');
+    } catch (e) {
+      console.error('加载密钥失败:', e);
+    }
+  }
+
+  function escHtml(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  // 创建 API 密钥
+  async function createApiKey() {
+    const nameInput = document.getElementById('newKeyName');
+    const name = nameInput.value.trim();
+    if (!name) {
+      nameInput.focus();
+      nameInput.classList.add('ring-2', 'ring-red-300');
+      setTimeout(() => nameInput.classList.remove('ring-2', 'ring-red-300'), 2000);
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/dashboard/api-keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ name })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.message || '创建失败');
+      }
+      const data = await res.json();
+      const key = data.data || data;
+
+      // 显示新密钥
+      document.getElementById('newKeyValue').textContent = key.key || key.apiKey || '';
+      document.getElementById('newKeyDisplay').classList.remove('hidden');
+      nameInput.value = '';
+
+      // 刷新列表
+      loadApiKeys();
+      loadStats();
+    } catch (e) {
+      alert('创建密钥失败：' + e.message);
+    }
+  }
+
+  // 删除 API 密钥
+  async function deleteApiKey(id) {
+    if (!confirm('确定要删除该密钥吗？删除后使用此密钥的服务将立即失效。')) return;
+
+    try {
+      const res = await fetch('/api/dashboard/api-keys/' + id, {
+        method: 'DELETE',
+        credentials: 'same-origin'
+      });
+      if (!res.ok) throw new Error('删除失败');
+      loadApiKeys();
+      loadStats();
+    } catch (e) {
+      alert('删除失败：' + e.message);
+    }
+  }
+
+  // 初始化加载
+  loadStats();
+  loadUsage();
+  loadApiKeys();
+
+  // 自动刷新 30s
+  setInterval(() => {
+    loadStats();
+    loadUsage();
+    loadApiKeys();
+  }, 30000);
+</script>
+
+</body>
+</html>