221 lines
8.3 KiB
HTML
221 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OpenCode Go 用量</title>
|
|
<link rel="stylesheet" href="/src/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header>
|
|
<h1>OpenCode Go 用量</h1>
|
|
<div id="status">
|
|
<span id="status-dot"></span>
|
|
<span id="status-text">连接中…</span>
|
|
</div>
|
|
</header>
|
|
<nav id="plan-tabs">
|
|
<button class="plan-tab active" data-plan="go">Go 套餐</button>
|
|
<button class="plan-tab" data-plan="zen">Zen</button>
|
|
</nav>
|
|
<nav id="tabs">
|
|
<button class="tab active" data-view="overview">用量概览</button>
|
|
<button class="tab" data-view="details">用量明细</button>
|
|
<button class="tab" data-view="report">每日报表</button>
|
|
<button class="tab" data-view="pricing">模型定价</button>
|
|
<button class="tab" data-view="keys">API Key</button>
|
|
</nav>
|
|
<main id="content">
|
|
<section id="view-overview">
|
|
<div id="cards"></div>
|
|
<div class="card" id="zen-card">
|
|
<div class="card-head">
|
|
<span class="card-name">Zen 账户与余额</span>
|
|
<button id="btn-zen-refresh">刷新</button>
|
|
</div>
|
|
<div id="zen-state" class="model-empty">登录并连接后自动读取</div>
|
|
<div id="zen-rows">
|
|
<div class="zen-balance-row">
|
|
<span class="zen-balance-label" id="zen-balance-label">当前余额</span>
|
|
<span class="zen-balance" id="zen-balance">—</span>
|
|
</div>
|
|
<div class="zen-row">
|
|
<span class="zen-label">本月已用</span>
|
|
<span class="zen-value" id="zen-usage">—</span>
|
|
</div>
|
|
<div class="bar zen-bar"><div class="bar-fill" id="zen-usage-bar" style="width:0%"></div></div>
|
|
<div class="zen-row">
|
|
<span class="zen-label">月度限额</span>
|
|
<span class="zen-value" id="zen-limit">—</span>
|
|
</div>
|
|
<div class="zen-row">
|
|
<span class="zen-label">自动充值</span>
|
|
<span class="zen-value" id="zen-reload">—</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot">
|
|
<span id="zen-meta"></span>
|
|
</div>
|
|
</div>
|
|
<div class="card" id="model-card">
|
|
<div class="card-head">
|
|
<span class="card-name">模型使用与费用</span>
|
|
<span id="model-total" class="model-total"></span>
|
|
</div>
|
|
<div id="model-list">
|
|
<div class="model-empty">读取中…</div>
|
|
</div>
|
|
<div class="card-foot">
|
|
<span id="model-meta"></span>
|
|
<button id="btn-model-refresh">刷新</button>
|
|
</div>
|
|
</div>
|
|
<div class="card" id="requests-card">
|
|
<div class="card-head">
|
|
<span class="card-name">最近请求</span>
|
|
<span id="requests-total" class="model-total"></span>
|
|
</div>
|
|
<div id="requests-list">
|
|
<div class="model-empty">暂无数据</div>
|
|
</div>
|
|
<div class="card-foot">
|
|
<span id="requests-meta"></span>
|
|
<button id="btn-requests-refresh">刷新</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="view-details" class="hidden">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<span class="card-name">OpenCode 控制台用量明细</span>
|
|
<button id="btn-details-refresh">刷新</button>
|
|
</div>
|
|
<div id="details-state" class="model-empty">加载中…</div>
|
|
<div id="details-table-wrap" class="hidden">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>日期</th>
|
|
<th>模型</th>
|
|
<th>输入</th>
|
|
<th>输出</th>
|
|
<th>花费</th>
|
|
<th>会话</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="details-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="view-report" class="hidden">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<span class="card-name">每日使用金额报表</span>
|
|
<span id="report-total" class="model-total"></span>
|
|
</div>
|
|
<div id="report-bars">
|
|
<div class="model-empty">读取中…</div>
|
|
</div>
|
|
<div id="report-table-wrap" class="hidden">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>日期</th>
|
|
<th>请求数</th>
|
|
<th>输入</th>
|
|
<th>输出</th>
|
|
<th>总Tokens</th>
|
|
<th>花费</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="report-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-foot">
|
|
<span id="report-meta"></span>
|
|
<button id="btn-report-refresh">刷新</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="view-pricing" class="hidden">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<span class="card-name">模型官方定价</span>
|
|
<span class="model-total" id="pricing-count"></span>
|
|
</div>
|
|
<div class="pricing-bar">
|
|
<input id="pricing-search" type="text" placeholder="搜索模型名称…" />
|
|
</div>
|
|
<div id="pricing-table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>模型</th>
|
|
<th>提供商</th>
|
|
<th>输入 $/M</th>
|
|
<th>输出 $/M</th>
|
|
<th>缓存读 $/M</th>
|
|
<th>缓存写 $/M</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="pricing-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-foot">
|
|
<span id="pricing-meta">正在从官网获取官方定价…</span>
|
|
<button id="btn-pricing-refresh">刷新</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="view-keys" class="hidden">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<span class="card-name">API Key 管理</span>
|
|
<button id="btn-keys-refresh">刷新</button>
|
|
</div>
|
|
<div class="keys-create">
|
|
<input id="key-name-input" type="text" placeholder="新 API Key 名称，例如 cli-local" />
|
|
<button id="btn-key-create">新建 Key</button>
|
|
</div>
|
|
<div id="new-key-box" class="hidden">
|
|
<span class="nkb-label">新 Key（完整值仅此一次）</span>
|
|
<code id="new-key-value"></code>
|
|
<button id="btn-copy-new-key">复制</button>
|
|
</div>
|
|
<div id="keys-state" class="model-empty">加载中…</div>
|
|
<div id="keys-table-wrap" class="hidden">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>名称</th>
|
|
<th>Key</th>
|
|
<th>创建者</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="keys-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-foot">
|
|
<span id="keys-meta"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
<p id="meta"></p>
|
|
<div id="actions">
|
|
<button id="btn-login" class="hidden">去登录</button>
|
|
<button id="btn-show">打开控制台</button>
|
|
<button id="btn-hide" disabled>隐藏</button>
|
|
<button id="btn-refresh" disabled>立即刷新</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div id="toast" class="hidden"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|