From 220fbe6544a7b082361302be57a9ab599c0ff3f1 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Sun, 15 Mar 2026 18:29:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=20UsageProgressBar=20?=
 =?UTF-8?q?=E4=B8=AD=E8=A2=AB=E6=84=8F=E5=A4=96=E7=A7=BB=E9=99=A4=E7=9A=84?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit 0debe0a8 在修复 OpenAI WS 用量窗口刷新问题时，意外删除了
UsageProgressBar 中的 window stats 渲染逻辑和格式化函数。

恢复进度条上方的统计行（requests, tokens, account cost, user cost）
及对应的 4 个格式化 computed 属性。
---
 .../components/account/UsageProgressBar.vue   | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/frontend/src/components/account/UsageProgressBar.vue b/frontend/src/components/account/UsageProgressBar.vue
index ea6c71f3..cd5c991f 100644
--- a/frontend/src/components/account/UsageProgressBar.vue
+++ b/frontend/src/components/account/UsageProgressBar.vue
@@ -1,5 +1,29 @@
 <template>
   <div>
+    <!-- Window stats row (above progress bar) -->
+    <div
+      v-if="windowStats"
+      class="mb-0.5 flex items-center"
+    >
+      <div class="flex items-center gap-1.5 text-[9px] text-gray-500 dark:text-gray-400">
+        <span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
+          {{ formatRequests }} req
+        </span>
+        <span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
+          {{ formatTokens }}
+        </span>
+        <span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
+          A ${{ formatAccountCost }}
+        </span>
+        <span
+          v-if="windowStats?.user_cost != null"
+          class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800"
+        >
+          U ${{ formatUserCost }}
+        </span>
+      </div>
+    </div>
+
     <!-- Progress bar row -->
     <div class="flex items-center gap-1">
       <!-- Label badge (fixed width for alignment) -->
@@ -108,4 +132,32 @@ const formatResetTime = computed(() => {
   }
 })
 
+// Window stats formatters
+const formatRequests = computed(() => {
+  if (!props.windowStats) return ''
+  const r = props.windowStats.requests
+  if (r >= 1000000) return `${(r / 1000000).toFixed(1)}M`
+  if (r >= 1000) return `${(r / 1000).toFixed(1)}K`
+  return r.toString()
+})
+
+const formatTokens = computed(() => {
+  if (!props.windowStats) return ''
+  const t = props.windowStats.tokens
+  if (t >= 1000000000) return `${(t / 1000000000).toFixed(1)}B`
+  if (t >= 1000000) return `${(t / 1000000).toFixed(1)}M`
+  if (t >= 1000) return `${(t / 1000).toFixed(1)}K`
+  return t.toString()
+})
+
+const formatAccountCost = computed(() => {
+  if (!props.windowStats) return '0.00'
+  return props.windowStats.cost.toFixed(2)
+})
+
+const formatUserCost = computed(() => {
+  if (!props.windowStats || props.windowStats.user_cost == null) return '0.00'
+  return props.windowStats.user_cost.toFixed(2)
+})
+
 </script>