3a16b3ecde
10 HTML pages + puro.css + HANDOFF.md + 2 images (~810KB total). Reference artifacts for Stage 3 Vue 3 translation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
771 lines
32 KiB
HTML
771 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="color-scheme" content="dark">
|
|
<title>Dashboard — PURO AI</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="puro.css">
|
|
<style>
|
|
/* ---- page-local ---- */
|
|
.page-head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
gap: 24px;
|
|
}
|
|
.page-head h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 6px;
|
|
}
|
|
.page-head .sub { color: var(--text-2); font-size: 14px; }
|
|
|
|
/* ---- stat row ---- */
|
|
.stat-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.stat {
|
|
padding: 18px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-lg);
|
|
background: rgba(15, 23, 42, 0.6);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: var(--text-3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 10px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.stat-value {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.stat-value .unit { font-size: 14px; color: var(--text-3); margin-left: 4px; font-weight: 500; }
|
|
.stat-delta {
|
|
font-size: 11px;
|
|
color: var(--green);
|
|
margin-top: 6px;
|
|
font-family: var(--font-mono);
|
|
display: flex; align-items: center; gap: 4px;
|
|
}
|
|
.stat-delta.down { color: var(--red); }
|
|
.stat-delta.neutral { color: var(--text-3); }
|
|
.stat-spark {
|
|
position: absolute;
|
|
bottom: 0; right: 0;
|
|
width: 100px; height: 40px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.stat.credit {
|
|
background:
|
|
radial-gradient(400px 200px at 100% 0%, rgba(34,211,238,0.1), transparent 60%),
|
|
rgba(15, 23, 42, 0.6);
|
|
border-color: rgba(34, 211, 238, 0.2);
|
|
}
|
|
.stat.credit .stat-value { color: var(--cyan); }
|
|
.stat.credit .topup {
|
|
position: absolute; top: 14px; right: 14px;
|
|
font-size: 11px;
|
|
color: var(--cyan);
|
|
font-family: var(--font-mono);
|
|
padding: 3px 8px;
|
|
border: 1px solid rgba(34, 211, 238, 0.25);
|
|
border-radius: 4px;
|
|
background: rgba(34,211,238,0.05);
|
|
transition: all .15s;
|
|
}
|
|
.stat.credit .topup:hover { background: rgba(34,211,238,0.15); }
|
|
|
|
/* ---- chart + donut grid ---- */
|
|
.chart-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.chart-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-lg);
|
|
background: rgba(15, 23, 42, 0.6);
|
|
padding: 18px;
|
|
}
|
|
.chart-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
gap: 12px;
|
|
}
|
|
.chart-head .title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.chart-head .legend {
|
|
display: flex; gap: 14px; font-size: 11px; color: var(--text-3); font-family: var(--font-mono);
|
|
}
|
|
.chart-head .legend span { display: inline-flex; align-items: center; gap: 5px; }
|
|
.chart-head .legend .sw { width: 8px; height: 8px; border-radius: 2px; }
|
|
|
|
.range-switch {
|
|
display: inline-flex;
|
|
background: rgba(2, 6, 23, 0.5);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 2px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
}
|
|
.range-switch button {
|
|
padding: 4px 10px;
|
|
color: var(--text-3);
|
|
border-radius: 4px;
|
|
transition: all .12s;
|
|
}
|
|
.range-switch button.active { background: rgba(34,211,238,0.12); color: var(--cyan); }
|
|
.range-switch button:hover:not(.active) { color: var(--text-1); }
|
|
|
|
/* ---- accounts + log ---- */
|
|
.two-col-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.4fr;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.panel {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-lg);
|
|
background: rgba(15, 23, 42, 0.6);
|
|
overflow: hidden;
|
|
}
|
|
.panel-head {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.panel-head h3 { font-size: 13px; font-weight: 600; }
|
|
.panel-head .meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-3);
|
|
}
|
|
.panel-body { padding: 8px; }
|
|
|
|
/* account list row */
|
|
.acct-row {
|
|
display: grid;
|
|
grid-template-columns: 24px 1fr auto auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--r-sm);
|
|
transition: all .12s;
|
|
}
|
|
.acct-row:hover { background: rgba(255,255,255,0.02); }
|
|
.acct-logo {
|
|
width: 22px; height: 22px;
|
|
border-radius: 4px;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid var(--border);
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.acct-name {
|
|
font-size: 13px;
|
|
color: var(--text-0);
|
|
font-weight: 500;
|
|
}
|
|
.acct-name .tag {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-3);
|
|
margin-left: 6px;
|
|
}
|
|
.acct-meter {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: var(--border);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
.acct-meter span {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--green);
|
|
border-radius: 2px;
|
|
}
|
|
.acct-meter.warn span { background: var(--amber); }
|
|
.acct-meter.danger span { background: var(--red); }
|
|
|
|
.acct-status {
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
color: var(--green);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 72px;
|
|
justify-content: flex-end;
|
|
}
|
|
.acct-status.warn { color: var(--amber); }
|
|
.acct-status.off { color: var(--text-3); }
|
|
|
|
.add-acct {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin: 6px 6px 6px;
|
|
padding: 12px;
|
|
border: 1px dashed var(--border-2);
|
|
border-radius: var(--r-sm);
|
|
color: var(--text-2);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all .15s;
|
|
}
|
|
.add-acct:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.04); }
|
|
|
|
/* log table overrides */
|
|
.log-wrap { overflow: hidden; }
|
|
.log-wrap table { width: 100%; }
|
|
|
|
/* endpoint bar */
|
|
.endpoint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
background: rgba(2, 6, 23, 0.6);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-md);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.endpoint .method {
|
|
padding: 2px 8px;
|
|
background: rgba(34,211,238,0.1);
|
|
color: var(--cyan);
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.endpoint .url { color: var(--text-0); flex: 1; }
|
|
.endpoint .copy {
|
|
padding: 4px 10px;
|
|
color: var(--text-3);
|
|
font-size: 11px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all .12s;
|
|
}
|
|
.endpoint .copy:hover { color: var(--cyan); background: rgba(34,211,238,0.08); }
|
|
|
|
/* getting started banner */
|
|
.tips-banner {
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid rgba(251, 191, 36, 0.22);
|
|
border-radius: var(--r-md);
|
|
background: rgba(251, 191, 36, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
color: var(--text-1);
|
|
}
|
|
.tips-banner .spark { color: var(--amber); flex-shrink: 0; display: inline-flex; }
|
|
.tips-banner a { color: var(--amber); font-weight: 500; }
|
|
.tips-banner .dismiss { margin-left: auto; color: var(--text-3); cursor: pointer; padding: 4px; }
|
|
|
|
/* topbar custom */
|
|
.search {
|
|
flex: 1;
|
|
max-width: 360px;
|
|
position: relative;
|
|
}
|
|
.search input {
|
|
width: 100%;
|
|
height: 34px;
|
|
padding: 0 14px 0 36px;
|
|
background: rgba(2, 6, 23, 0.5);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-sm);
|
|
color: var(--text-1);
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: all .12s;
|
|
}
|
|
.search input::placeholder { color: var(--text-3); }
|
|
.search input:focus { border-color: var(--border-2); background: rgba(2, 6, 23, 0.8); }
|
|
.search .search-ico {
|
|
position: absolute; left: 12px; top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-3);
|
|
pointer-events: none;
|
|
}
|
|
.search .kbd {
|
|
position: absolute; right: 10px; top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.topbar-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.icon-btn {
|
|
width: 32px; height: 32px;
|
|
border-radius: var(--r-sm);
|
|
color: var(--text-2);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all .12s;
|
|
position: relative;
|
|
}
|
|
.icon-btn:hover { color: var(--text-0); background: rgba(255,255,255,0.04); }
|
|
.icon-btn .pulse {
|
|
position: absolute; top: 8px; right: 8px;
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--amber);
|
|
box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 10px 4px 4px;
|
|
border-radius: 100px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all .12s;
|
|
}
|
|
.user-menu:hover { background: rgba(255,255,255,0.06); }
|
|
.user-menu .name { font-size: 13px; font-weight: 500; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-glow soft"></div>
|
|
|
|
<div class="app-shell">
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside class="app-side">
|
|
<a class="brand" href="Landing.html">
|
|
<svg class="hex" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
|
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
|
</svg>
|
|
PURO
|
|
</a>
|
|
|
|
<div class="side-group">
|
|
<div class="side-label">Workspace</div>
|
|
<a class="side-item active" href="Dashboard.html">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
|
|
</span>
|
|
Dashboard
|
|
</a>
|
|
<a class="side-item" href="API Keys.html">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="3.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg>
|
|
</span>
|
|
API Keys
|
|
<span class="count">3</span>
|
|
</a>
|
|
<a class="side-item" href="Accounts.html">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
|
|
</span>
|
|
订阅账号
|
|
<span class="count">7</span>
|
|
</a>
|
|
<a class="side-item" href="#">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h8"/></svg>
|
|
</span>
|
|
调用日志
|
|
</a>
|
|
<a class="side-item" href="#">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</span>
|
|
账单 & 充值
|
|
</a>
|
|
</div>
|
|
|
|
<div class="side-group">
|
|
<div class="side-label">Resources</div>
|
|
<a class="side-item" href="Docs.html">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
</span>
|
|
文档
|
|
</a>
|
|
<a class="side-item" href="Design System.html">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L21 7V17L12 22L3 17V7L12 2Z"/></svg>
|
|
</span>
|
|
Design System
|
|
</a>
|
|
</div>
|
|
|
|
<div class="side-group" style="margin-top:auto; padding-top:20px; border-top:1px solid var(--border);">
|
|
<a class="side-item" href="#">
|
|
<span class="ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
|
|
</span>
|
|
设置
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAIN -->
|
|
<div class="app-main">
|
|
<header class="app-topbar">
|
|
<div class="search">
|
|
<span class="search-ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
|
</span>
|
|
<input placeholder="搜索 key / 账号 / 日志…">
|
|
<span class="kbd"><kbd>⌘</kbd><kbd>K</kbd></span>
|
|
</div>
|
|
|
|
<div class="topbar-right">
|
|
<button class="icon-btn" aria-label="通知">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
|
|
<span class="pulse"></span>
|
|
</button>
|
|
<button class="icon-btn" aria-label="帮助">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
|
|
</button>
|
|
<div class="user-menu">
|
|
<span class="avatar">Z</span>
|
|
<span class="name">zane</span>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="app-content">
|
|
|
|
<!-- tips -->
|
|
<div class="tips-banner">
|
|
<span class="spark">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
|
|
</span>
|
|
你还有 <b class="text-0">2 个 Claude Pro</b> 订阅未绑定 —— 绑定后立即享受多账号 failover 和请求加权调度。
|
|
<a href="Binding.html">去绑定 →</a>
|
|
<span class="dismiss">✕</span>
|
|
</div>
|
|
|
|
<!-- page head -->
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>Dashboard</h1>
|
|
<div class="sub">欢迎回来 <b class="text-0">Zane</b> · workspace <code class="pill">zane-personal</code></div>
|
|
</div>
|
|
<div style="display:flex; gap:10px;">
|
|
<div class="range-switch">
|
|
<button>1h</button>
|
|
<button>24h</button>
|
|
<button class="active">7d</button>
|
|
<button>30d</button>
|
|
<button>自定义</button>
|
|
</div>
|
|
<button class="btn btn-ghost">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
|
|
导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- endpoint -->
|
|
<div class="endpoint">
|
|
<span class="method">POST</span>
|
|
<span class="url">https://ai.puro.im/v1/chat/completions</span>
|
|
<span class="copy">复制</span>
|
|
<span style="color:var(--text-3); margin: 0 4px;">·</span>
|
|
<span class="copy">查看文档</span>
|
|
</div>
|
|
|
|
<!-- stats -->
|
|
<div class="stat-row">
|
|
<div class="stat credit">
|
|
<a class="topup" href="Pricing.html">充值 →</a>
|
|
<div class="stat-label">余额</div>
|
|
<div class="stat-value">$182.40<span class="unit">USD</span></div>
|
|
<div class="stat-delta neutral">按当前节奏约 <b class="text-1">23 天</b></div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">今日请求</div>
|
|
<div class="stat-value tabular">12,847</div>
|
|
<div class="stat-delta">▲ 18.2% vs 昨日</div>
|
|
<svg class="stat-spark" viewBox="0 0 100 40" preserveAspectRatio="none">
|
|
<path d="M0,30 L10,28 L20,22 L30,25 L40,18 L50,20 L60,12 L70,15 L80,8 L90,12 L100,5" stroke="#22d3ee" stroke-width="1.5" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">消耗 Tokens</div>
|
|
<div class="stat-value tabular">4.82<span class="unit">M</span></div>
|
|
<div class="stat-delta">▲ 12.5%</div>
|
|
<svg class="stat-spark" viewBox="0 0 100 40" preserveAspectRatio="none">
|
|
<path d="M0,25 L10,20 L20,22 L30,15 L40,18 L50,10 L60,14 L70,8 L80,12 L90,6 L100,4" stroke="#a855f7" stroke-width="1.5" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">平均延迟</div>
|
|
<div class="stat-value tabular">214<span class="unit">ms</span></div>
|
|
<div class="stat-delta down">▲ 4.1% vs 昨日</div>
|
|
<svg class="stat-spark" viewBox="0 0 100 40" preserveAspectRatio="none">
|
|
<path d="M0,20 L10,22 L20,18 L30,24 L40,20 L50,22 L60,18 L70,24 L80,22 L90,26 L100,22" stroke="#fbbf24" stroke-width="1.5" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- chart + donut -->
|
|
<div class="chart-grid">
|
|
<div class="chart-card">
|
|
<div class="chart-head">
|
|
<span class="title">请求趋势</span>
|
|
<div class="legend">
|
|
<span><span class="sw" style="background:#22d3ee"></span>Claude</span>
|
|
<span><span class="sw" style="background:#a855f7"></span>GPT</span>
|
|
<span><span class="sw" style="background:#fbbf24"></span>Gemini</span>
|
|
</div>
|
|
</div>
|
|
<svg viewBox="0 0 500 180" style="width:100%; height:180px; display:block;">
|
|
<defs>
|
|
<linearGradient id="gc" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.25"/>
|
|
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g stroke="#1e293b" stroke-width="1">
|
|
<line x1="0" y1="30" x2="500" y2="30"/>
|
|
<line x1="0" y1="75" x2="500" y2="75"/>
|
|
<line x1="0" y1="120" x2="500" y2="120"/>
|
|
<line x1="0" y1="165" x2="500" y2="165"/>
|
|
</g>
|
|
<path d="M0,120 L40,100 L80,110 L120,80 L160,95 L200,60 L240,70 L280,45 L320,55 L360,30 L400,50 L440,35 L500,25 L500,180 L0,180 Z" fill="url(#gc)"/>
|
|
<path d="M0,120 L40,100 L80,110 L120,80 L160,95 L200,60 L240,70 L280,45 L320,55 L360,30 L400,50 L440,35 L500,25" stroke="#22d3ee" stroke-width="2" fill="none"/>
|
|
<path d="M0,140 L40,135 L80,120 L120,130 L160,110 L200,115 L240,90 L280,100 L320,80 L360,90 L400,70 L440,75 L500,55" stroke="#a855f7" stroke-width="2" fill="none"/>
|
|
<path d="M0,160 L40,155 L80,150 L120,148 L160,145 L200,140 L240,135 L280,130 L320,125 L360,122 L400,118 L440,112 L500,108" stroke="#fbbf24" stroke-width="2" fill="none"/>
|
|
<g font-family="JetBrains Mono" font-size="9" fill="#64748b">
|
|
<text x="0" y="178">Mon</text>
|
|
<text x="83" y="178">Tue</text>
|
|
<text x="166" y="178">Wed</text>
|
|
<text x="249" y="178">Thu</text>
|
|
<text x="332" y="178">Fri</text>
|
|
<text x="415" y="178">Sat</text>
|
|
<text x="475" y="178">Sun</text>
|
|
</g>
|
|
<!-- hover indicator -->
|
|
<line x1="360" y1="30" x2="360" y2="165" stroke="#334155" stroke-width="1" stroke-dasharray="2,3"/>
|
|
<circle cx="360" cy="30" r="3" fill="#22d3ee"/>
|
|
<g transform="translate(370, 18)">
|
|
<rect width="92" height="28" fill="#020617" stroke="#334155" rx="4"/>
|
|
<text x="8" y="12" font-family="JetBrains Mono" font-size="9" fill="#cbd5e1">Fri · 16:00</text>
|
|
<text x="8" y="23" font-family="JetBrains Mono" font-size="10" fill="#22d3ee">Claude 3,824</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="chart-card">
|
|
<div class="chart-head">
|
|
<span class="title">模型分布</span>
|
|
<span class="mono text-xs text-3">7d</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:18px;">
|
|
<svg viewBox="0 0 42 42" style="width:120px; height:120px; transform:rotate(-90deg);">
|
|
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#1e293b" stroke-width="6"/>
|
|
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#22d3ee" stroke-width="6" stroke-dasharray="48 52" stroke-dashoffset="0"/>
|
|
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#a855f7" stroke-width="6" stroke-dasharray="32 68" stroke-dashoffset="-48"/>
|
|
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#fbbf24" stroke-width="6" stroke-dasharray="14 86" stroke-dashoffset="-80"/>
|
|
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#64748b" stroke-width="6" stroke-dasharray="6 94" stroke-dashoffset="-94"/>
|
|
</svg>
|
|
<div style="flex:1; display:flex; flex-direction:column; gap:8px; font-size:12px; font-family:var(--font-mono);">
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-1);"><span style="display:inline-block; width:8px; height:8px; background:#22d3ee; border-radius:2px; margin-right:6px;"></span>Claude</span><span style="color:var(--text-3);">48%</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-1);"><span style="display:inline-block; width:8px; height:8px; background:#a855f7; border-radius:2px; margin-right:6px;"></span>GPT</span><span style="color:var(--text-3);">32%</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-1);"><span style="display:inline-block; width:8px; height:8px; background:#fbbf24; border-radius:2px; margin-right:6px;"></span>Gemini</span><span style="color:var(--text-3);">14%</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span style="color:var(--text-1);"><span style="display:inline-block; width:8px; height:8px; background:#64748b; border-radius:2px; margin-right:6px;"></span>Codex</span><span style="color:var(--text-3);">6%</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- accounts + logs -->
|
|
<div class="two-col-grid">
|
|
<!-- accounts -->
|
|
<div class="panel">
|
|
<div class="panel-head">
|
|
<h3>订阅账号池</h3>
|
|
<a href="Accounts.html" class="meta" style="color:var(--cyan);">查看全部 →</a>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="acct-row">
|
|
<span class="acct-logo"><svg width="14" height="14" viewBox="0 0 24 24" fill="#d97757"><path d="M4.5 19L12 4l7.5 15H16l-4-8.5L8 19H4.5z"/></svg></span>
|
|
<div class="acct-name">claude-pool-01<span class="tag">Pro · OAuth</span></div>
|
|
<div class="acct-meter"><span style="width:68%"></span></div>
|
|
<span class="acct-status"><span class="status-chip" style="width:5px;height:5px;"></span>healthy</span>
|
|
</div>
|
|
<div class="acct-row">
|
|
<span class="acct-logo"><svg width="14" height="14" viewBox="0 0 24 24" fill="#d97757"><path d="M4.5 19L12 4l7.5 15H16l-4-8.5L8 19H4.5z"/></svg></span>
|
|
<div class="acct-name">claude-pool-02<span class="tag">Max · OAuth</span></div>
|
|
<div class="acct-meter"><span style="width:42%"></span></div>
|
|
<span class="acct-status"><span class="status-chip" style="width:5px;height:5px;"></span>healthy</span>
|
|
</div>
|
|
<div class="acct-row">
|
|
<span class="acct-logo"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10a37f" stroke-width="1.6"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg></span>
|
|
<div class="acct-name">gpt-plus-7<span class="tag">Plus · OAuth</span></div>
|
|
<div class="acct-meter warn"><span style="width:88%"></span></div>
|
|
<span class="acct-status warn"><span class="status-chip amber" style="width:5px;height:5px;"></span>near limit</span>
|
|
</div>
|
|
<div class="acct-row">
|
|
<span class="acct-logo"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10a37f" stroke-width="1.6"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg></span>
|
|
<div class="acct-name">gpt-plus-8<span class="tag">Pro · OAuth</span></div>
|
|
<div class="acct-meter"><span style="width:35%"></span></div>
|
|
<span class="acct-status"><span class="status-chip" style="width:5px;height:5px;"></span>healthy</span>
|
|
</div>
|
|
<div class="acct-row">
|
|
<span class="acct-logo"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="1.8"><path d="M12 2 L15 9 L22 10 L17 15 L19 22 L12 18 L5 22 L7 15 L2 10 L9 9 Z"/></svg></span>
|
|
<div class="acct-name">gemini-adv-01<span class="tag">Advanced</span></div>
|
|
<div class="acct-meter"><span style="width:12%"></span></div>
|
|
<span class="acct-status"><span class="status-chip" style="width:5px;height:5px;"></span>healthy</span>
|
|
</div>
|
|
<div class="acct-row">
|
|
<span class="acct-logo" style="opacity:0.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="#d97757"><path d="M4.5 19L12 4l7.5 15H16l-4-8.5L8 19H4.5z"/></svg></span>
|
|
<div class="acct-name" style="opacity:0.7">claude-pool-03<span class="tag">Pro · expired</span></div>
|
|
<div class="acct-meter"><span style="width:0%"></span></div>
|
|
<span class="acct-status off">● offline</span>
|
|
</div>
|
|
<a class="add-acct" href="Binding.html">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
绑定新订阅
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- logs -->
|
|
<div class="panel log-wrap">
|
|
<div class="panel-head">
|
|
<h3>最近请求</h3>
|
|
<span class="meta">live · 12 of 18,294</span>
|
|
</div>
|
|
<table class="tbl">
|
|
<thead>
|
|
<tr>
|
|
<th class="mono">TIME</th>
|
|
<th>ACCOUNT</th>
|
|
<th class="mono">MODEL</th>
|
|
<th class="mono">TOKENS</th>
|
|
<th class="mono">COST</th>
|
|
<th class="mono">STATUS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="mono">13:42:18</td>
|
|
<td><span class="provider claude"><span class="dot"></span>claude-pool-01</span></td>
|
|
<td class="mono">sonnet-4-5</td>
|
|
<td class="mono tabular">2,847</td>
|
|
<td class="mono tabular">$0.042</td>
|
|
<td class="mono text-green">200 · 213ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:42:11</td>
|
|
<td><span class="provider gpt"><span class="dot"></span>gpt-plus-7</span></td>
|
|
<td class="mono">gpt-5-codex</td>
|
|
<td class="mono tabular">1,204</td>
|
|
<td class="mono tabular">$0.018</td>
|
|
<td class="mono text-green">200 · 167ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:42:03</td>
|
|
<td><span class="provider gemini"><span class="dot"></span>gemini-adv-01</span></td>
|
|
<td class="mono">gemini-2.5-pro</td>
|
|
<td class="mono tabular">4,102</td>
|
|
<td class="mono tabular">$0.000</td>
|
|
<td class="mono text-green">200 · 392ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:41:58</td>
|
|
<td><span class="provider claude"><span class="dot"></span>claude-pool-02</span></td>
|
|
<td class="mono">sonnet-4-5</td>
|
|
<td class="mono tabular">6,318</td>
|
|
<td class="mono tabular">$0.095</td>
|
|
<td class="mono text-green">200 · 288ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:41:49</td>
|
|
<td><span class="provider gpt"><span class="dot"></span>gpt-plus-7</span></td>
|
|
<td class="mono">gpt-5</td>
|
|
<td class="mono tabular">892</td>
|
|
<td class="mono tabular">$0.013</td>
|
|
<td class="mono text-amber">429 · retry</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:41:42</td>
|
|
<td><span class="provider gpt"><span class="dot"></span>gpt-plus-8</span></td>
|
|
<td class="mono">gpt-5</td>
|
|
<td class="mono tabular">892</td>
|
|
<td class="mono tabular">$0.013</td>
|
|
<td class="mono text-green">200 · 198ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:41:35</td>
|
|
<td><span class="provider claude"><span class="dot"></span>claude-pool-01</span></td>
|
|
<td class="mono">haiku-4-5</td>
|
|
<td class="mono tabular">512</td>
|
|
<td class="mono tabular">$0.004</td>
|
|
<td class="mono text-green">200 · 98ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">13:41:28</td>
|
|
<td><span class="provider gemini"><span class="dot"></span>gemini-adv-01</span></td>
|
|
<td class="mono">gemini-2.5-flash</td>
|
|
<td class="mono tabular">1,824</td>
|
|
<td class="mono tabular">$0.000</td>
|
|
<td class="mono text-green">200 · 156ms</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|