style: refactor quota monitor into a 4-tab layout

Converted the Quota Monitor's vertical scroll layout into a clean 4-tab interface: 1. Trend Statistics (使用趋势统计) 2. Agent Ranking (各 Agent 计算力消耗排行榜) 3. Task Breakdown (任务级成本分析) 4. Recent Logs (最近的大模型调用日志) This significantly improves usability and avoids excessive scrolling while keeping the top overview indicators universally visible.

style: refactor quota monitor into a 4-tab layout
Converted the Quota Monitor's vertical scroll layout into a clean 4-tab interface: 1. Trend Statistics (使用趋势统计) 2. Agent Ranking (各 Agent 计算力消耗排行榜) 3. Task Breakdown (任务级成本分析) 4. Recent Logs (最近的大模型调用日志) This significantly improves usability and avoids excessive scrolling while keeping the top overview indicators universally visible.
yibo
1 parent 958af56b
Showing 1 changed file with 163 additions and 129 deletions
web/src/views/QuotaMonitor.vue
@@ -28,54 +28,62 @@
           </div>
         </section>
  
-        <!-- 按照时间维度的调用频次柱状图 -->
-        <section class="chart-card flex-double time-chart-section">
-          <div class="card-header">
-            <h3>📈 使用趋势统计</h3>
-            <div class="time-filters">
-              <button :class="{active: timeScale === 'hour'}" @click="timeScale = 'hour'">按小时</button>
-              <button :class="{active: timeScale === 'day'}" @click="timeScale = 'day'">按天</button>
-              <button :class="{active: timeScale === 'week'}" @click="timeScale = 'week'">按周</button>
-              <button :class="{active: timeScale === 'month'}" @click="timeScale = 'month'">按月</button>
+        <!-- 导航 Tabs -->
+        <div class="tabs-nav">
+          <button :class="{active: activeTab === 'trend'}" @click="activeTab = 'trend'">📈 使用趋势统计</button>
+          <button :class="{active: activeTab === 'agent'}" @click="activeTab = 'agent'">🤖 Agent 排行榜</button>
+          <button :class="{active: activeTab === 'task'}" @click="activeTab = 'task'">🎯 任务级成本分析</button>
+          <button :class="{active: activeTab === 'log'}" @click="activeTab = 'log'">🕒 最近调用日志</button>
+        </div>
+
+        <div class="tab-content">
+          <!-- 按照时间维度的调用频次柱状图 -->
+          <section v-if="activeTab === 'trend'" class="chart-card flex-double time-chart-section">
+            <div class="card-header">
+              <h3>使用趋势统计</h3>
+              <div class="time-filters">
+                <button :class="{active: timeScale === 'hour'}" @click="timeScale = 'hour'">按小时</button>
+                <button :class="{active: timeScale === 'day'}" @click="timeScale = 'day'">按天</button>
+                <button :class="{active: timeScale === 'week'}" @click="timeScale = 'week'">按周</button>
+                <button :class="{active: timeScale === 'month'}" @click="timeScale = 'month'">按月</button>
+              </div>
             </div>
-          </div>
-          
-          <div class="trend-charts-wrapper">
-            <!-- Tokens 柱状图 -->
-            <div class="chart-box">
-              <h4 class="chart-title">Token 消耗量 <span class="legend"><span class="c-in">■</span>输入 <span class="c-out">■</span>输出</span></h4>
-              <div class="trend-bars">
-                <div v-for="t in timeStats" :key="t.label" class="trend-bar-col">
-                  <div class="bar-stack" title="Input: {{ t.input }} | Output: {{ t.output }}">
-                    <div class="bar-portion-out" :style="{ height: ((t.output / maxTimeTokens) * 100) + '%' }"></div>
-                    <div class="bar-portion-in" :style="{ height: ((t.input / maxTimeTokens) * 100) + '%' }"></div>
+            
+            <div class="trend-charts-wrapper">
+              <!-- Tokens 柱状图 -->
+              <div class="chart-box">
+                <h4 class="chart-title">Token 消耗量 <span class="legend"><span class="c-in">■</span>输入 <span class="c-out">■</span>输出</span></h4>
+                <div class="trend-bars">
+                  <div v-for="t in timeStats" :key="t.label" class="trend-bar-col">
+                    <div class="bar-stack" title="Input: {{ t.input }} | Output: {{ t.output }}">
+                      <div class="bar-portion-out" :style="{ height: ((t.output / maxTimeTokens) * 100) + '%' }"></div>
+                      <div class="bar-portion-in" :style="{ height: ((t.input / maxTimeTokens) * 100) + '%' }"></div>
+                    </div>
+                    <div class="trend-label">{{ t.label }}</div>
                   </div>
-                  <div class="trend-label">{{ t.label }}</div>
+                  <div v-if="timeStats.length === 0" class="empty-state">无数据</div>
                 </div>
-                <div v-if="timeStats.length === 0" class="empty-state">无数据</div>
               </div>
-            </div>
  
-            <!-- 调用次数柱状图 -->
-            <div class="chart-box">
-              <h4 class="chart-title">API 调用频次</h4>
-              <div class="trend-bars">
-                <div v-for="t in timeStats" :key="t.label" class="trend-bar-col">
-                  <div class="bar-stack" title="{{ t.calls }} 次">
-                    <div class="bar-portion-calls" :style="{ height: ((t.calls / maxTimeCalls) * 100) + '%' }"></div>
+              <!-- 调用次数柱状图 -->
+              <div class="chart-box">
+                <h4 class="chart-title">API 调用频次</h4>
+                <div class="trend-bars">
+                  <div v-for="t in timeStats" :key="t.label" class="trend-bar-col">
+                    <div class="bar-stack" title="{{ t.calls }} 次">
+                      <div class="bar-portion-calls" :style="{ height: ((t.calls / maxTimeCalls) * 100) + '%' }"></div>
+                    </div>
+                    <div class="trend-label">{{ t.label }}</div>
                   </div>
-                  <div class="trend-label">{{ t.label }}</div>
+                  <div v-if="timeStats.length === 0" class="empty-state">无数据</div>
                 </div>
-                <div v-if="timeStats.length === 0" class="empty-state">无数据</div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
  
-        <div class="charts-row">
           <!-- 按照 Agent 的消耗排行榜 -->
-          <section class="chart-card flex-double">
-            <h3>🤖 各 Agent 计算力消耗排行榜</h3>
+          <section v-if="activeTab === 'agent'" class="chart-card flex-double">
+            <h3>各 Agent 计算力消耗排行榜</h3>
             <div class="bar-chart">
               <div v-for="agent in agentStats" :key="agent.id" class="bar-row">
                 <div class="bar-label">
@@ -95,100 +103,100 @@
               <div v-if="agentStats.length === 0" class="empty-state">暂无数据</div>
             </div>
           </section>
-        </div>
  
-        <!-- 🆕 按任务链聚合的成本分析 -->
-        <section class="chart-card">
-          <div class="card-header">
-            <h3>🎯 任务级成本分析</h3>
-            <div class="time-filters">
-              <button :class="{active: taskSort === 'cost'}" @click="taskSort = 'cost'">按花费</button>
-              <button :class="{active: taskSort === 'tokens'}" @click="taskSort = 'tokens'">按 Tokens</button>
-              <button :class="{active: taskSort === 'time'}" @click="taskSort = 'time'">按时间</button>
+          <!-- 🆕 按任务链聚合的成本分析 -->
+          <section v-if="activeTab === 'task'" class="chart-card">
+            <div class="card-header">
+              <h3>任务级成本分析</h3>
+              <div class="time-filters">
+                <button :class="{active: taskSort === 'cost'}" @click="taskSort = 'cost'">按花费</button>
+                <button :class="{active: taskSort === 'tokens'}" @click="taskSort = 'tokens'">按 Tokens</button>
+                <button :class="{active: taskSort === 'time'}" @click="taskSort = 'time'">按时间</button>
+              </div>
             </div>
-          </div>
-          <div class="task-table-wrapper">
-            <table class="log-table task-table">
-              <thead>
-                <tr>
-                  <th>任务 ID</th>
-                  <th>Agent 链路</th>
-                  <th>调用次数</th>
-                  <th>Input Tokens</th>
-                  <th>Output Tokens</th>
-                  <th>总耗时</th>
-                  <th>总花费</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="task in taskStats" :key="task.taskId"
-                    :class="{'task-row-expensive': task.cost > 2}"
-                    @click="task.expanded = !task.expanded">
-                  <td class="log-agent task-id-cell">
-                    <span class="expand-icon">{{ task.expanded ? '▼' : '▶' }}</span>
-                    {{ task.taskId }}
-                  </td>
-                  <td class="task-agents">
-                    <span v-for="(a, i) in task.agents" :key="a" class="agent-badge">
-                      {{ a }}<span v-if="i < task.agents.length - 1"> → </span>
-                    </span>
-                  </td>
-                  <td>{{ task.calls }}</td>
-                  <td class="log-tokens in">{{ (task.input / 1000).toFixed(0) }}k</td>
-                  <td class="log-tokens out">{{ (task.output / 1000).toFixed(0) }}k</td>
-                  <td class="log-duration">{{ (task.duration / 1000).toFixed(0) }}s</td>
-                  <td class="log-cost" :class="{'cost-warn': task.cost > 2, 'cost-danger': task.cost > 5}">
-                    ${{ task.cost.toFixed(2) }}
-                  </td>
-                </tr>
-                <template v-for="task in taskStats" :key="'detail-'+task.taskId">
-                  <tr v-if="task.expanded" v-for="(call, ci) in task.details" :key="ci" class="task-detail-row">
-                    <td></td>
-                    <td class="log-agent">{{ call.agentId }}</td>
-                    <td class="log-model">{{ call.convId }}</td>
-                    <td class="log-tokens in">{{ (call.usage?.input || 0).toLocaleString() }}</td>
-                    <td class="log-tokens out">{{ (call.usage?.output || 0).toLocaleString() }}</td>
-                    <td class="log-duration">{{ (call.durationMs / 1000).toFixed(1) }}s</td>
-                    <td class="log-cost">${{ call.costUsd.toFixed(4) }}</td>
+            <div class="task-table-wrapper">
+              <table class="log-table task-table">
+                <thead>
+                  <tr>
+                    <th>任务 ID</th>
+                    <th>Agent 链路</th>
+                    <th>调用次数</th>
+                    <th>Input Tokens</th>
+                    <th>Output Tokens</th>
+                    <th>总耗时</th>
+                    <th>总花费</th>
                   </tr>
-                </template>
-              </tbody>
-            </table>
-            <div v-if="taskStats.length === 0" class="empty-state">暂无任务数据</div>
-          </div>
-        </section>
+                </thead>
+                <tbody>
+                  <tr v-for="task in taskStats" :key="task.taskId"
+                      :class="{'task-row-expensive': task.cost > 2}"
+                      @click="task.expanded = !task.expanded">
+                    <td class="log-agent task-id-cell">
+                      <span class="expand-icon">{{ task.expanded ? '▼' : '▶' }}</span>
+                      {{ task.taskId }}
+                    </td>
+                    <td class="task-agents">
+                      <span v-for="(a, i) in task.agents" :key="a" class="agent-badge">
+                        {{ a }}<span v-if="i < task.agents.length - 1"> → </span>
+                      </span>
+                    </td>
+                    <td>{{ task.calls }}</td>
+                    <td class="log-tokens in">{{ (task.input / 1000).toFixed(0) }}k</td>
+                    <td class="log-tokens out">{{ (task.output / 1000).toFixed(0) }}k</td>
+                    <td class="log-duration">{{ (task.duration / 1000).toFixed(0) }}s</td>
+                    <td class="log-cost" :class="{'cost-warn': task.cost > 2, 'cost-danger': task.cost > 5}">
+                      ${{ task.cost.toFixed(2) }}
+                    </td>
+                  </tr>
+                  <template v-for="task in taskStats" :key="'detail-'+task.taskId">
+                    <tr v-if="task.expanded" v-for="(call, ci) in task.details" :key="ci" class="task-detail-row">
+                      <td></td>
+                      <td class="log-agent">{{ call.agentId }}</td>
+                      <td class="log-model">{{ call.convId }}</td>
+                      <td class="log-tokens in">{{ (call.usage?.input || 0).toLocaleString() }}</td>
+                      <td class="log-tokens out">{{ (call.usage?.output || 0).toLocaleString() }}</td>
+                      <td class="log-duration">{{ (call.durationMs / 1000).toFixed(1) }}s</td>
+                      <td class="log-cost">${{ call.costUsd.toFixed(4) }}</td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+              <div v-if="taskStats.length === 0" class="empty-state">暂无任务数据</div>
+            </div>
+          </section>
  
-        <!-- 详细调用日志 -->
-        <section class="chart-card">
-          <h3>🕒 最近的大模型调用日志</h3>
-          <div class="log-table-wrapper">
-            <table class="log-table">
-              <thead>
-                <tr>
-                  <th>时间</th>
-                  <th>模型 (Model)</th>
-                  <th>Agent</th>
-                  <th>耗时</th>
-                  <th>输入 Tokens</th>
-                  <th>输出 Tokens</th>
-                  <th>计算预估*</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(log, i) in recentLogs" :key="i">
-                  <td class="log-time">{{ formatTime(log.timestamp) }}</td>
-                  <td class="log-model">{{ log.model || 'unknown' }}</td>
-                  <td class="log-agent">{{ log.agentId }}</td>
-                  <td class="log-duration">{{ (log.durationMs / 1000).toFixed(1) }}s</td>
-                  <td class="log-tokens in">+{{ (log.usage?.input || 0).toLocaleString() }}</td>
-                  <td class="log-tokens out">+{{ (log.usage?.output || 0).toLocaleString() }}</td>
-                  <td class="log-cost">${{ log.costUsd.toFixed(6) }}</td>
-                </tr>
-              </tbody>
-            </table>
-            <div v-if="recentLogs.length === 0" class="empty-state">暂无日志</div>
-          </div>
-        </section>
+          <!-- 详细调用日志 -->
+          <section v-if="activeTab === 'log'" class="chart-card">
+            <h3>最近的大模型调用日志</h3>
+            <div class="log-table-wrapper">
+              <table class="log-table">
+                <thead>
+                  <tr>
+                    <th>时间</th>
+                    <th>模型 (Model)</th>
+                    <th>Agent</th>
+                    <th>耗时</th>
+                    <th>输入 Tokens</th>
+                    <th>输出 Tokens</th>
+                    <th>计算预估*</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(log, i) in recentLogs" :key="i">
+                    <td class="log-time">{{ formatTime(log.timestamp) }}</td>
+                    <td class="log-model">{{ log.model || 'unknown' }}</td>
+                    <td class="log-agent">{{ log.agentId }}</td>
+                    <td class="log-duration">{{ (log.durationMs / 1000).toFixed(1) }}s</td>
+                    <td class="log-tokens in">+{{ (log.usage?.input || 0).toLocaleString() }}</td>
+                    <td class="log-tokens out">+{{ (log.usage?.output || 0).toLocaleString() }}</td>
+                    <td class="log-cost">${{ log.costUsd.toFixed(6) }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div v-if="recentLogs.length === 0" class="empty-state">暂无日志</div>
+            </div>
+          </section>
+        </div>
       </main>
  
       <div v-else class="loading-state">
@@ -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);