From fd797e3e36db9070ebad1fd282cc93abe830d2c1 Mon Sep 17 00:00:00 2001 From: JOJO <1498581755@qq.com> Date: Mon, 24 Nov 2025 00:59:43 +0800 Subject: [PATCH] feat: redesign token usage dashboard --- static/index.html | 158 ++++++++++++++++++++++------------------------ static/style.css | 141 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+), 82 deletions(-) diff --git a/static/index.html b/static/index.html index 40139e7..f31ef03 100644 --- a/static/index.html +++ b/static/index.html @@ -333,99 +333,93 @@
-
-
-
-
Token 统计
-
-
- 当前上下文 - {{ formatTokenCount(currentContextTokens || 0) }} -
-
- 累计输入 - {{ formatTokenCount(currentConversationTokens.cumulative_input_tokens || 0) }} -
-
- 累计输出 - {{ formatTokenCount(currentConversationTokens.cumulative_output_tokens || 0) }} -
+
+
+
Token 统计
+
+
+
当前上下文
+
{{ formatTokenCount(currentContextTokens || 0) }}
-
-
-
- CPU / 内存 - {{ containerStatusText() }} +
+
累计输入
+
{{ formatTokenCount(currentConversationTokens.cumulative_input_tokens || 0) }}
-
-
- CPU - {{ formatPercentage(containerStatus.stats?.cpu_percent) }} -
-
- 内存 - - {{ formatBytes(containerStatus.stats?.memory?.used_bytes) }} - - - - {{ formatPercentage(containerStatus.stats.memory.percent) }} - -
-
-
-
-
- 当前运行在宿主机模式，暂无容器指标。 +
+
累计输出
+
{{ formatTokenCount(currentConversationTokens.cumulative_output_tokens || 0) }}
-
-
-
模型 / 搜索 用量
-
-
-
常规模型
-
{{ formatQuotaValue(usageQuota.fast) }}
-
重置 {{ formatResetTime(usageQuota.fast.reset_at) }}
+
+
+ 性能统计 + {{ containerStatusText() }} +
+ +
+ 当前运行在宿主机模式，暂无容器指标。 +
+
+
+
额度统计
+
+
+
常规模型
+
{{ formatQuotaValue(usageQuota.fast) }}
+
重置 {{ formatResetTime(usageQuota.fast.reset_at) }}
+
+
+
思考模型
+
{{ formatQuotaValue(usageQuota.thinking) }}
+
重置 {{ formatResetTime(usageQuota.thinking.reset_at) }}
+
+
+
搜索
+
{{ formatQuotaValue(usageQuota.search) }}
+
重置 {{ formatResetTime(usageQuota.search.reset_at) }}
+
-
-
- 网络 / 存储 -
-
-
- 网络 - - ↓{{ formatRate(containerNetRate.down_bps) }} - ↑{{ formatRate(containerNetRate.up_bps) }} - +
+
+
资源统计
+
+
+
网络
+
+ ↓{{ formatRate(containerNetRate.down_bps) }} + ↑{{ formatRate(containerNetRate.up_bps) }}
-
- 存储 - - {{ formatBytes(projectStorage.used_bytes) }} - - - - {{ projectStorage.usage_percent.toFixed(1) }}% - +
+
+
存储
+
+ {{ formatBytes(projectStorage.used_bytes) }} + +
+
+ {{ projectStorage.usage_percent.toFixed(1) }}%
diff --git a/static/style.css b/static/style.css index 0215a24..34209ff 100644 --- a/static/style.css +++ b/static/style.css @@ -2430,6 +2430,128 @@ o-files { gap: 24px; } +.usage-dashboard { + position: relative; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-auto-rows: auto; + column-gap: 48px; + row-gap: 32px; + padding: 8px 0; +} + +.usage-dashboard::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 1px; + background: var(--claude-border); + transform: translateX(-0.5px); + pointer-events: none; + z-index: 0; +} + +.usage-cell { + display: flex; + flex-direction: column; + gap: 16px; + position: relative; + z-index: 1; +} + +.usage-dashboard .panel-card { + border-left: none; + padding: 0; +} + +.usage-cell--left { + padding-right: 24px; +} + +.usage-cell--right { + padding-left: 24px; +} + +.usage-title { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + font-weight: 600; + color: var(--claude-text); +} + +.stat-grid { + display: grid; + gap: 12px; +} + +.stat-grid--triple { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.stat-grid--double { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.stat-block { + display: flex; + flex-direction: column; + gap: 6px; +} + +.stat-label { + color: var(--claude-text-secondary); + font-size: 12px; + letter-spacing: 0.04em; +} + +.stat-value { + font-weight: 600; + font-size: 18px; + font-variant-numeric: tabular-nums; + color: var(--claude-text); +} + +.stat-value--accent { + color: var(--claude-accent); + font-size: 20px; +} + +.stat-value--success { + color: var(--claude-success); +} + +.stat-value--warning { + color: var(--claude-warning); +} + +.stat-value--mono { + font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; + font-size: 16px; +} + +.stat-meta, +.stat-foot { + font-size: 12px; + color: var(--claude-text-secondary); +} + +.stat-meta { + text-transform: none; +} + +.stat-foot { + margin-top: 2px; +} + +.usage-placeholder { + font-size: 13px; + color: var(--claude-text-secondary); +} + .panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); @@ -2662,6 +2784,25 @@ o-files { gap: 16px; } + .usage-dashboard { + grid-template-columns: 1fr; + row-gap: 20px; + padding: 0; + } + + .usage-dashboard::before { + display: none; + } + + .usage-cell--left, + .usage-cell--right { + padding: 0; + } + + .stat-grid--triple { + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + } + .token-item { min-width: auto; }