923 lines
29 KiB
HTML
923 lines
29 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>TokenLens Dashboard Concept</title>
|
|
<style>
|
|
:root {
|
|
--bg: #08111d;
|
|
--panel: rgba(19, 31, 47, 0.88);
|
|
--panel-2: rgba(16, 26, 40, 0.94);
|
|
--line: rgba(151, 174, 205, 0.18);
|
|
--line-strong: rgba(163, 188, 224, 0.28);
|
|
--text: #f2f6ff;
|
|
--muted: #95a3b8;
|
|
--blue: #2e83ff;
|
|
--cyan: #2dd4cf;
|
|
--violet: #9b5cf6;
|
|
--green: #2ed06e;
|
|
--orange: #ff9a31;
|
|
--red: #ff6363;
|
|
--shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
width: 1440px;
|
|
height: 900px;
|
|
overflow: hidden;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 28% 14%, rgba(46, 131, 255, 0.18), transparent 28%),
|
|
radial-gradient(circle at 72% 22%, rgba(45, 212, 207, 0.12), transparent 26%),
|
|
linear-gradient(135deg, #070d17 0%, #0a1422 48%, #07111d 100%);
|
|
}
|
|
|
|
.app {
|
|
width: 1440px;
|
|
height: 900px;
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
border: 1px solid rgba(162, 186, 220, 0.22);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
background: rgba(8, 17, 29, 0.9);
|
|
}
|
|
|
|
aside {
|
|
position: relative;
|
|
padding: 22px 0;
|
|
border-right: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(180deg, rgba(14, 28, 48, 0.98), rgba(8, 17, 29, 0.98)),
|
|
radial-gradient(circle at 0 0, rgba(46, 131, 255, 0.18), transparent 38%);
|
|
}
|
|
|
|
.traffic {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 12px 24px 30px;
|
|
}
|
|
|
|
.dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.red { background: #ff5f57; }
|
|
.yellow { background: #ffbd2e; }
|
|
.green { background: #28c840; }
|
|
|
|
.nav {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 0 0 0 6px;
|
|
}
|
|
|
|
.nav-item {
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 0 22px;
|
|
color: #c7d1df;
|
|
font-size: 16px;
|
|
font-weight: 560;
|
|
letter-spacing: 0;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.nav-item svg {
|
|
width: 23px;
|
|
height: 23px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #fff;
|
|
border-left-color: var(--blue);
|
|
background: linear-gradient(90deg, rgba(46, 131, 255, 0.56), rgba(46, 131, 255, 0.2));
|
|
border-radius: 8px 8px 8px 0;
|
|
box-shadow: inset 0 0 0 1px rgba(81, 143, 255, 0.2);
|
|
}
|
|
|
|
.side-foot {
|
|
position: absolute;
|
|
left: 24px;
|
|
right: 22px;
|
|
bottom: 42px;
|
|
display: grid;
|
|
gap: 14px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.health,
|
|
.updated {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pulse {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 0 5px rgba(46, 208, 110, 0.1);
|
|
}
|
|
|
|
main {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-rows: 74px 1fr;
|
|
background: linear-gradient(180deg, rgba(9, 18, 31, 0.62), rgba(8, 17, 29, 0.84));
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 28px 0 32px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(9, 17, 29, 0.68);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #f9fbff;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.control,
|
|
.search,
|
|
.avatar {
|
|
height: 42px;
|
|
border: 1px solid var(--line-strong);
|
|
background: rgba(13, 24, 38, 0.8);
|
|
color: #e9eef8;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
padding: 0 14px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.control.primary {
|
|
background: rgba(33, 49, 70, 0.92);
|
|
}
|
|
|
|
.search {
|
|
width: 238px;
|
|
justify-content: flex-start;
|
|
color: #8f9bb0;
|
|
}
|
|
|
|
.kbd {
|
|
margin-left: auto;
|
|
padding: 2px 6px;
|
|
border: 1px solid rgba(167, 185, 215, 0.18);
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
color: #aeb9ca;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.avatar {
|
|
width: 78px;
|
|
padding: 0 10px;
|
|
justify-content: space-between;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.avatar .circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #7c4dff, #bc75ff);
|
|
box-shadow: 0 8px 24px rgba(124, 77, 255, 0.32);
|
|
}
|
|
|
|
.content {
|
|
padding: 24px 20px 24px 18px;
|
|
display: grid;
|
|
grid-template-rows: 145px 325px 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.card,
|
|
.panel {
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 11px;
|
|
background:
|
|
linear-gradient(145deg, rgba(24, 38, 57, 0.88), rgba(13, 24, 38, 0.88)),
|
|
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 35%);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.card {
|
|
display: grid;
|
|
grid-template-columns: 74px 1fr;
|
|
align-items: center;
|
|
padding: 0 22px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.metric-icon {
|
|
width: 58px;
|
|
height: 58px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.metric-icon.blue { background: radial-gradient(circle at 35% 24%, #408dff, #123c88); }
|
|
.metric-icon.green { background: radial-gradient(circle at 35% 24%, #37d48b, #126545); }
|
|
.metric-icon.violet { background: radial-gradient(circle at 35% 24%, #a970ff, #42217b); }
|
|
.metric-icon.orange { background: radial-gradient(circle at 35% 24%, #e28b35, #6e3a0d); }
|
|
|
|
.metric-label {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
color: #c3ccda;
|
|
font-size: 14px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 35px;
|
|
line-height: 1;
|
|
font-weight: 780;
|
|
letter-spacing: 0;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.delta {
|
|
font-size: 14px;
|
|
color: #aab4c5;
|
|
}
|
|
|
|
.delta .up-blue { color: #3d91ff; font-weight: 720; }
|
|
.delta .up-green { color: var(--green); font-weight: 720; }
|
|
.delta .up-violet { color: #b36cff; font-weight: 720; }
|
|
.delta .up-orange { color: var(--orange); font-weight: 720; }
|
|
|
|
.middle {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.panel {
|
|
padding: 18px 22px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.panel-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 17px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.select {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 11px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 7px;
|
|
color: #dce4ef;
|
|
font-size: 13px;
|
|
background: rgba(8, 17, 29, 0.35);
|
|
}
|
|
|
|
.trend {
|
|
height: 220px;
|
|
position: relative;
|
|
}
|
|
|
|
.trend svg {
|
|
height: 220px;
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 38px;
|
|
margin-top: 0;
|
|
color: #cdd6e4;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.legend span,
|
|
.share-row span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.key {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.key.blue { background: var(--blue); box-shadow: 0 0 10px rgba(46, 131, 255, 0.7); }
|
|
.key.violet { background: var(--violet); box-shadow: 0 0 10px rgba(155, 92, 246, 0.7); }
|
|
.key.cyan { background: var(--cyan); box-shadow: 0 0 10px rgba(45, 212, 207, 0.7); }
|
|
|
|
.share-body {
|
|
display: grid;
|
|
grid-template-columns: 210px 1fr;
|
|
align-items: center;
|
|
gap: 18px;
|
|
height: 225px;
|
|
}
|
|
|
|
.donut {
|
|
width: 205px;
|
|
height: 205px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background:
|
|
conic-gradient(var(--blue) 0 151deg, var(--violet) 151deg 252deg, var(--cyan) 252deg 360deg);
|
|
box-shadow: 0 0 34px rgba(46, 131, 255, 0.18);
|
|
position: relative;
|
|
}
|
|
|
|
.donut::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 108px;
|
|
height: 108px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #101f31, #0b1726);
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
|
|
}
|
|
|
|
.donut-text {
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.donut-text strong {
|
|
display: block;
|
|
font-size: 25px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.donut-text small {
|
|
color: #a8b4c5;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.share-list {
|
|
display: grid;
|
|
gap: 22px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.share-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 58px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.share-row strong {
|
|
font-size: 19px;
|
|
text-align: right;
|
|
}
|
|
|
|
.share-row small {
|
|
grid-column: 1 / -1;
|
|
padding-left: 21px;
|
|
color: #9ca8ba;
|
|
margin-top: -14px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.bottom {
|
|
display: grid;
|
|
grid-template-columns: 1.55fr 0.72fr;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.table-panel {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-head {
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 22px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th {
|
|
height: 37px;
|
|
color: #9aa7b9;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
th:first-child,
|
|
td:first-child { padding-left: 22px; }
|
|
|
|
td {
|
|
height: 42px;
|
|
color: #d4dce8;
|
|
border-bottom: 1px solid rgba(151, 174, 205, 0.1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.provider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-weight: 650;
|
|
color: #eef4ff;
|
|
min-width: 0;
|
|
}
|
|
|
|
.logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 7px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.claude-logo { background: linear-gradient(135deg, #fb8947, #df5e2f); }
|
|
.codex-logo { background: #05070b; border: 1px solid rgba(255,255,255,0.14); }
|
|
.gemini-logo { background: conic-gradient(from 45deg, #3debd4, #395fff, #ffb34d, #3debd4); }
|
|
|
|
.spark {
|
|
width: 74px;
|
|
height: 22px;
|
|
}
|
|
|
|
.more {
|
|
color: #7e8aa0;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.table-foot {
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 22px;
|
|
color: #9ba7b8;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.link {
|
|
color: #4b99ff;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.alerts {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.alerts .table-head {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.alert-list {
|
|
display: grid;
|
|
gap: 7px;
|
|
padding: 0 10px 10px;
|
|
}
|
|
|
|
.alert {
|
|
min-height: 66px;
|
|
border: 1px solid rgba(151, 174, 205, 0.15);
|
|
border-radius: 8px;
|
|
padding: 10px 12px 10px 54px;
|
|
position: relative;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.alert.warn { background: linear-gradient(90deg, rgba(255, 154, 49, 0.13), rgba(255, 154, 49, 0.04)); border-color: rgba(255,154,49,0.24); }
|
|
.alert.good { background: linear-gradient(90deg, rgba(46, 208, 110, 0.13), rgba(46, 208, 110, 0.04)); border-color: rgba(46,208,110,0.2); }
|
|
.alert.spike { background: linear-gradient(90deg, rgba(155, 92, 246, 0.13), rgba(155, 92, 246, 0.04)); border-color: rgba(155,92,246,0.22); }
|
|
|
|
.alert-icon {
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 12px;
|
|
width: 31px;
|
|
height: 31px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 900;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.warn .alert-icon { color: var(--orange); background: rgba(255, 154, 49, 0.16); }
|
|
.good .alert-icon { color: var(--green); background: rgba(46, 208, 110, 0.14); }
|
|
.spike .alert-icon { color: var(--violet); background: rgba(155, 92, 246, 0.14); }
|
|
|
|
.alert-title {
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
font-weight: 740;
|
|
padding-right: 42px;
|
|
}
|
|
|
|
.alert-copy {
|
|
font-size: 13px;
|
|
color: #aab5c6;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 12px;
|
|
font-size: 12px;
|
|
color: #94a0b3;
|
|
}
|
|
|
|
svg.icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.grid-line { stroke: rgba(151, 174, 205, 0.14); stroke-width: 1; }
|
|
.axis-text { fill: #93a0b3; font-size: 13px; }
|
|
.line-blue { fill: none; stroke: var(--blue); stroke-width: 3; }
|
|
.line-violet { fill: none; stroke: var(--violet); stroke-width: 3; }
|
|
.line-cyan { fill: none; stroke: var(--cyan); stroke-width: 3; }
|
|
.point-blue { fill: var(--blue); stroke: rgba(255,255,255,0.28); }
|
|
.point-violet { fill: var(--violet); stroke: rgba(255,255,255,0.28); }
|
|
.point-cyan { fill: var(--cyan); stroke: rgba(255,255,255,0.28); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside>
|
|
<div class="traffic">
|
|
<span class="dot red"></span>
|
|
<span class="dot yellow"></span>
|
|
<span class="dot green"></span>
|
|
</div>
|
|
|
|
<nav class="nav" aria-label="主导航">
|
|
<div class="nav-item active">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
Dashboard
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24"><path d="M4 19V9"/><path d="M10 19V5"/><path d="M16 19v-7"/><path d="M22 19H2"/></svg>
|
|
Usage
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24"><path d="M12 3l8 4v10l-8 4-8-4V7z"/><path d="M12 8v8"/><path d="M9.5 10.5c0-1.2 1-2 2.5-2s2.5.8 2.5 2c0 2.8-5 1.4-5 4 0 1.2 1 2 2.5 2s2.5-.8 2.5-2"/></svg>
|
|
Cost View
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 014 4v1a4 4 0 01-8 0V7a4 4 0 014-4z"/><path d="M4 15a8 8 0 0016 0"/><path d="M12 19v2"/></svg>
|
|
Sources
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 109-9"/><path d="M3 5v7h7"/></svg>
|
|
History
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24"><path d="M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z"/><path d="M19.4 15a1.8 1.8 0 00.36 1.98l.04.04a2 2 0 01-2.83 2.83l-.04-.04A1.8 1.8 0 0015 19.4a1.8 1.8 0 00-1 .6 1.8 1.8 0 00-.4 1.1V21a2 2 0 01-4 0v-.09A1.8 1.8 0 008 19.4a1.8 1.8 0 00-1.98.36l-.04.04a2 2 0 01-2.83-2.83l.04-.04A1.8 1.8 0 003.6 15a1.8 1.8 0 00-.6-1 1.8 1.8 0 00-1.1-.4H1.8a2 2 0 010-4h.09A1.8 1.8 0 003.6 8a1.8 1.8 0 00-.36-1.98l-.04-.04a2 2 0 012.83-2.83l.04.04A1.8 1.8 0 008 3.6a1.8 1.8 0 001-.6A1.8 1.8 0 009.4 1.9V1.8a2 2 0 014 0v.09A1.8 1.8 0 0015 3.6a1.8 1.8 0 001.98-.36l.04-.04a2 2 0 012.83 2.83l-.04.04A1.8 1.8 0 0019.4 8c.22.38.58.74 1 .9.34.13.7.2 1.1.2h.1a2 2 0 010 4h-.1a1.8 1.8 0 00-2.1 1.9z"/></svg>
|
|
Settings
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="side-foot">
|
|
<div class="health"><span class="pulse"></span>Local scan healthy</div>
|
|
<div class="updated">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M21 12a9 9 0 11-2.64-6.36"/><path d="M21 3v7h-7"/></svg>
|
|
Updated just now
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main>
|
|
<header>
|
|
<div class="brand">
|
|
<div class="brand-mark">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M4 19V5"/><path d="M9 19V9"/><path d="M14 19V3"/><path d="M19 19v-6"/><path d="M3 19h18"/></svg>
|
|
</div>
|
|
TokenLens
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<div class="control">
|
|
<svg class="icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
|
Last 30 Days
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
|
|
</div>
|
|
<div class="control primary">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M21 12a9 9 0 11-2.64-6.36"/><path d="M21 3v7h-7"/></svg>
|
|
Sync
|
|
</div>
|
|
<div class="search">
|
|
<svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
|
Search...
|
|
<span class="kbd">⌘K</span>
|
|
</div>
|
|
<div class="avatar">
|
|
<div class="circle">JD</div>
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="content">
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="metric-icon blue">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M12 3l8 4-8 4-8-4z"/><path d="M4 12l8 4 8-4"/><path d="M4 17l8 4 8-4"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="metric-label">今日 Tokens ⓘ</div>
|
|
<div class="metric-value">4.8M</div>
|
|
<div class="delta"><span class="up-blue">↑ 12.8%</span> vs. yesterday</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="metric-icon green">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 000 7H14a3.5 3.5 0 010 7H6"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="metric-label">本月 Tokens ⓘ</div>
|
|
<div class="metric-value">128.4M</div>
|
|
<div class="delta"><span class="up-green">↑ 9.7%</span> vs. last month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="metric-icon violet">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="metric-label">历史总量 ⓘ</div>
|
|
<div class="metric-value">1.02B</div>
|
|
<div class="delta"><span class="up-violet">3,842</span> sessions scanned</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="metric-icon orange">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M4 19l6-6 4 4 6-9"/><path d="M15 8h5v5"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="metric-label">缓存命中 ⓘ</div>
|
|
<div class="metric-value">42%</div>
|
|
<div class="delta"><span class="up-orange">↑ 8.6%</span> saved context load</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="middle">
|
|
<div class="panel">
|
|
<div class="panel-head">
|
|
<div class="panel-title">Token Usage Trend</div>
|
|
<div class="select">Daily <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div>
|
|
</div>
|
|
<div class="trend">
|
|
<svg width="100%" height="250" viewBox="0 0 640 250" preserveAspectRatio="none">
|
|
<line class="grid-line" x1="58" y1="15" x2="622" y2="15"/>
|
|
<line class="grid-line" x1="58" y1="66" x2="622" y2="66"/>
|
|
<line class="grid-line" x1="58" y1="117" x2="622" y2="117"/>
|
|
<line class="grid-line" x1="58" y1="168" x2="622" y2="168"/>
|
|
<line class="grid-line" x1="58" y1="219" x2="622" y2="219"/>
|
|
<text class="axis-text" x="10" y="20">10M</text>
|
|
<text class="axis-text" x="18" y="71">8M</text>
|
|
<text class="axis-text" x="18" y="122">6M</text>
|
|
<text class="axis-text" x="18" y="173">4M</text>
|
|
<text class="axis-text" x="26" y="224">0</text>
|
|
<text class="axis-text" x="58" y="243">May 12</text>
|
|
<text class="axis-text" x="178" y="243">May 18</text>
|
|
<text class="axis-text" x="305" y="243">May 24</text>
|
|
<text class="axis-text" x="432" y="243">May 30</text>
|
|
<text class="axis-text" x="555" y="243">Jun 06</text>
|
|
<polyline class="line-blue" points="64,100 84,82 104,94 124,76 144,65 164,98 184,86 204,68 224,78 244,100 264,78 284,57 304,45 324,62 344,86 364,104 384,70 404,50 424,78 444,88 464,54 484,38 504,50 524,46 544,34 564,80 584,60 604,70 622,52"/>
|
|
<polyline class="line-violet" points="64,165 84,150 104,164 124,152 144,142 164,158 184,150 204,139 224,157 244,173 264,152 284,132 304,149 324,153 344,137 364,144 384,162 404,154 424,138 444,126 464,142 484,146 504,134 524,124 544,113 564,130 584,142 604,128 622,143"/>
|
|
<polyline class="line-cyan" points="64,190 84,183 104,196 124,188 144,174 164,190 184,182 204,196 224,190 244,201 264,192 284,168 304,190 324,181 344,192 364,186 384,164 404,183 424,195 444,180 464,168 484,184 504,190 524,182 544,173 564,184 584,178 604,192 622,169"/>
|
|
<g>
|
|
<circle class="point-blue" cx="64" cy="100" r="4"/><circle class="point-blue" cx="144" cy="65" r="4"/><circle class="point-blue" cx="304" cy="45" r="4"/><circle class="point-blue" cx="484" cy="38" r="4"/><circle class="point-blue" cx="622" cy="52" r="4"/>
|
|
<circle class="point-violet" cx="64" cy="165" r="4"/><circle class="point-violet" cx="284" cy="132" r="4"/><circle class="point-violet" cx="444" cy="126" r="4"/><circle class="point-violet" cx="544" cy="113" r="4"/><circle class="point-violet" cx="622" cy="143" r="4"/>
|
|
<circle class="point-cyan" cx="64" cy="190" r="4"/><circle class="point-cyan" cx="284" cy="168" r="4"/><circle class="point-cyan" cx="384" cy="164" r="4"/><circle class="point-cyan" cx="484" cy="184" r="4"/><circle class="point-cyan" cx="622" cy="169" r="4"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="legend">
|
|
<span><i class="key blue"></i>Claude</span>
|
|
<span><i class="key violet"></i>Codex</span>
|
|
<span><i class="key cyan"></i>Gemini</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-head">
|
|
<div class="panel-title">Usage Share</div>
|
|
<div class="select">By Tokens <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div>
|
|
</div>
|
|
<div class="share-body">
|
|
<div class="donut">
|
|
<div class="donut-text">
|
|
<strong>128.4M</strong>
|
|
<small>This Month</small>
|
|
</div>
|
|
</div>
|
|
<div class="share-list">
|
|
<div class="share-row">
|
|
<span><i class="key blue"></i>Claude</span>
|
|
<strong>42%</strong>
|
|
<small>53.9M tokens</small>
|
|
</div>
|
|
<div class="share-row">
|
|
<span><i class="key violet"></i>Codex</span>
|
|
<strong>31%</strong>
|
|
<small>39.8M tokens</small>
|
|
</div>
|
|
<div class="share-row">
|
|
<span><i class="key cyan"></i>Gemini</span>
|
|
<strong>27%</strong>
|
|
<small>34.7M tokens</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<div class="panel table-panel">
|
|
<div class="table-head">
|
|
<div class="panel-title">Provider Breakdown</div>
|
|
<div class="select">All sources <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 105px;">Provider</th>
|
|
<th style="width: 165px;">Source</th>
|
|
<th>Input</th>
|
|
<th>Output</th>
|
|
<th>Cached</th>
|
|
<th>Total</th>
|
|
<th style="width: 88px;">Trend</th>
|
|
<th style="width: 38px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><div class="provider"><span class="logo claude-logo">C</span>Claude</div></td>
|
|
<td>projects/*.jsonl</td>
|
|
<td>28.7M</td><td>18.2M</td><td>12.2M</td><td>59.1M</td>
|
|
<td><svg class="spark" viewBox="0 0 74 22"><polyline class="line-blue" points="1,17 8,12 15,16 22,8 29,12 36,6 43,10 50,4 57,8 64,5 72,9"/></svg></td>
|
|
<td class="more">⋮</td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="provider"><span class="logo codex-logo">◎</span>Codex</div></td>
|
|
<td>sessions/*.jsonl</td>
|
|
<td>18.9M</td><td>13.4M</td><td>3.6M</td><td>35.9M</td>
|
|
<td><svg class="spark" viewBox="0 0 74 22"><polyline class="line-violet" points="1,18 8,11 15,15 22,17 29,10 36,13 43,7 50,12 57,6 64,8 72,4"/></svg></td>
|
|
<td class="more">⋮</td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="provider"><span class="logo gemini-logo"></span>Gemini</div></td>
|
|
<td>tmp/chats/*.jsonl</td>
|
|
<td>17.2M</td><td>10.6M</td><td>4.8M</td><td>33.4M</td>
|
|
<td><svg class="spark" viewBox="0 0 74 22"><polyline class="line-cyan" points="1,16 8,16 15,10 22,18 29,14 36,9 43,12 50,6 57,5 64,8 72,8"/></svg></td>
|
|
<td class="more">⋮</td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="provider"><span class="logo claude-logo">H</span>Claude</div></td>
|
|
<td>HUD cache</td>
|
|
<td>8.8M</td><td>5.4M</td><td>9.1M</td><td>23.3M</td>
|
|
<td><svg class="spark" viewBox="0 0 74 22"><polyline class="line-blue" points="1,13 8,14 15,10 22,12 29,8 36,13 43,9 50,6 57,10 64,7 72,5"/></svg></td>
|
|
<td class="more">⋮</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="table-foot">
|
|
<span>Showing 4 local sources · content is never uploaded</span>
|
|
<span class="link">Open raw report →</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel alerts">
|
|
<div class="table-head">
|
|
<div class="panel-title">Insights</div>
|
|
<span class="link">View all</span>
|
|
</div>
|
|
<div class="alert-list">
|
|
<div class="alert warn">
|
|
<div class="alert-icon">!</div>
|
|
<div class="time">1h</div>
|
|
<div class="alert-title">Claude usage exceeded daily average</div>
|
|
<div class="alert-copy">Today is 80% above the 7-day baseline.</div>
|
|
</div>
|
|
<div class="alert good">
|
|
<div class="alert-icon">✓</div>
|
|
<div class="time">2h</div>
|
|
<div class="alert-title">Gemini source parsed cleanly</div>
|
|
<div class="alert-copy">2 chat files scanned, no malformed rows.</div>
|
|
</div>
|
|
<div class="alert spike">
|
|
<div class="alert-icon">↗</div>
|
|
<div class="time">3h</div>
|
|
<div class="alert-title">Codex reasoning tokens spiked today</div>
|
|
<div class="alert-copy">Reasoning share is up 32% vs. yesterday.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|