From ace0869dacdf8c3ed27bee2f33bf68d22972a1a8 Mon Sep 17 00:00:00 2001 From: yibo Date: Mon, 13 Apr 2026 20:35:28 +0800 Subject: [PATCH] style: refactor quota monitor into a 4-tab layout --- web/src/views/QuotaMonitor.vue | 292 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------- 1 file changed, 163 insertions(+), 129 deletions(-) diff --git a/web/src/views/QuotaMonitor.vue b/web/src/views/QuotaMonitor.vue index 199a5d3..8b0a8cd 100644 --- a/web/src/views/QuotaMonitor.vue +++ b/web/src/views/QuotaMonitor.vue @@ -28,54 +28,62 @@ - -
-
-

📈 使用趋势统计

-
- - - - + +
+ + + + +
+ +
+ +
+
+

使用趋势统计

+
+ + + + +
-
- -
- -
-

Token 消耗量 ■输入 ■输出

-
-
-
-
-
+ +
+ +
+

Token 消耗量 ■输入 ■输出

+
+
+
+
+
+
+
{{ t.label }}
-
{{ t.label }}
+
无数据
-
无数据
-
- -
-

API 调用频次

-
-
-
-
+ +
+

API 调用频次

+
+
+
+
+
+
{{ t.label }}
-
{{ t.label }}
+
无数据
-
无数据
-
-
+ -
-
-

🤖 各 Agent 计算力消耗排行榜

+
+

各 Agent 计算力消耗排行榜

@@ -95,100 +103,100 @@
暂无数据
-
- -
-
-

🎯 任务级成本分析

-
- - - + +
+
+

任务级成本分析

+
+ + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
任务 IDAgent 链路调用次数Input TokensOutput Tokens总耗时总花费
- {{ task.expanded ? '▼' : '▶' }} - {{ task.taskId }} - - - {{ a }} → - - {{ task.calls }}{{ (task.input / 1000).toFixed(0) }}k{{ (task.output / 1000).toFixed(0) }}k{{ (task.duration / 1000).toFixed(0) }}s - ${{ task.cost.toFixed(2) }} -
-
暂无任务数据
-
-
+ + + + + {{ task.expanded ? '▼' : '▶' }} + {{ task.taskId }} + + + + {{ a }} → + + + {{ task.calls }} + {{ (task.input / 1000).toFixed(0) }}k + {{ (task.output / 1000).toFixed(0) }}k + {{ (task.duration / 1000).toFixed(0) }}s + + ${{ task.cost.toFixed(2) }} + + + + + +
暂无任务数据
+ + - -
-

🕒 最近的大模型调用日志

-
- - - - - - - - - - - - - - - - - - - - - - - -
时间模型 (Model)Agent耗时输入 Tokens输出 Tokens计算预估*
{{ formatTime(log.timestamp) }}{{ log.model || 'unknown' }}{{ log.agentId }}{{ (log.durationMs / 1000).toFixed(1) }}s+{{ (log.usage?.input || 0).toLocaleString() }}+{{ (log.usage?.output || 0).toLocaleString() }}${{ log.costUsd.toFixed(6) }}
-
暂无日志
-
-
+ +
+

最近的大模型调用日志

+
+ + + + + + + + + + + + + + + + + + + + + + + +
时间模型 (Model)Agent耗时输入 Tokens输出 Tokens计算预估*
{{ formatTime(log.timestamp) }}{{ log.model || 'unknown' }}{{ log.agentId }}{{ (log.durationMs / 1000).toFixed(1) }}s+{{ (log.usage?.input || 0).toLocaleString() }}+{{ (log.usage?.output || 0).toLocaleString() }}${{ log.costUsd.toFixed(6) }}
+
暂无日志
+
+
+
@@ -207,6 +215,7 @@ const rawData = ref([]) const timeScale = ref('day') // hour, day, week, month const taskSort = ref('cost') // cost, tokens, time +const activeTab = ref('task') // 'trend', 'agent', 'task', 'log' onMounted(async () => { try { @@ -392,11 +401,36 @@ function formatTime(iso) { cursor: help; } -.charts-row { +/* 导航 Tabs */ +.tabs-nav { display: flex; - gap: 24px; + gap: 12px; margin-bottom: 24px; + border-bottom: 1px solid var(--border-color); + padding-bottom: 12px; } +.tabs-nav button { + background: transparent; + border: 1px solid transparent; + font-size: 14px; + font-weight: 500; + padding: 8px 16px; + border-radius: 8px; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; +} +.tabs-nav button:hover { + background: rgba(255, 255, 255, 0.05); + color: var(--text-primary); +} +.tabs-nav button.active { + background: var(--bg-surface); + border-color: var(--border-color); + color: var(--accent-primary); + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} + .chart-card { background: var(--bg-surface); border: 1px solid var(--border-color); -- libgit2 0.21.4