feat: api-stats页面增加周限总限查询

web/admin-spa/src/components/apistats/LimitConfig.vue

@@ -135,6 +135,59 @@
           </div>
         </div>
 
+        <!-- 总费用限制 -->
+        <div>
+          <div class="mb-2 flex items-center justify-between">
+            <span class="text-sm font-medium text-gray-600 dark:text-gray-400 md:text-base"
+              >总费用限制</span
+            >
+            <span class="text-xs text-gray-500 dark:text-gray-400 md:text-sm">
+              <span v-if="statsData.limits.totalCostLimit > 0">
+                ${{ statsData.limits.currentTotalCost.toFixed(4) }} / ${{
+                  statsData.limits.totalCostLimit.toFixed(2)
+                }}
+              </span>
+              <span v-else class="flex items-center gap-1">
+                ${{ statsData.limits.currentTotalCost.toFixed(4) }} / <i class="fas fa-infinity" />
+              </span>
+            </span>
+          </div>
+          <div
+            v-if="statsData.limits.totalCostLimit > 0"
+            class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700"
+          >
+            <div
+              class="h-2 rounded-full transition-all duration-300"
+              :class="getTotalCostProgressColor()"
+              :style="{ width: getTotalCostProgress() + '%' }"
+            />
+          </div>
+          <div v-else class="h-2 w-full rounded-full bg-gray-200">
+            <div class="h-2 rounded-full bg-blue-500" style="width: 0%" />
+          </div>
+        </div>
+
+        <!-- Opus 模型周费用限制 -->
+        <div v-if="statsData.limits.weeklyOpusCostLimit > 0">
+          <div class="mb-2 flex items-center justify-between">
+            <span class="text-sm font-medium text-gray-600 dark:text-gray-400 md:text-base"
+              >Opus 模型周费用限制</span
+            >
+            <span class="text-xs text-gray-500 dark:text-gray-400 md:text-sm">
+              ${{ statsData.limits.weeklyOpusCost.toFixed(4) }} / ${{
+                statsData.limits.weeklyOpusCostLimit.toFixed(2)
+              }}
+            </span>
+          </div>
+          <div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+            <div
+              class="h-2 rounded-full transition-all duration-300"
+              :class="getOpusWeeklyCostProgressColor()"
+              :style="{ width: getOpusWeeklyCostProgress() + '%' }"
+            />
+          </div>
+        </div>
+
         <!-- 时间窗口限制 -->
         <div
           v-if="
@@ -334,6 +387,43 @@ const getDailyCostProgressColor = () => {
   return 'bg-green-500'
 }
 
+// 获取总费用进度
+const getTotalCostProgress = () => {
+  if (!statsData.value.limits.totalCostLimit || statsData.value.limits.totalCostLimit === 0)
+    return 0
+  const percentage =
+    (statsData.value.limits.currentTotalCost / statsData.value.limits.totalCostLimit) * 100
+  return Math.min(percentage, 100)
+}
+
+// 获取总费用进度条颜色
+const getTotalCostProgressColor = () => {
+  const progress = getTotalCostProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-blue-500'
+}
+
+// 获取Opus周费用进度
+const getOpusWeeklyCostProgress = () => {
+  if (
+    !statsData.value.limits.weeklyOpusCostLimit ||
+    statsData.value.limits.weeklyOpusCostLimit === 0
+  )
+    return 0
+  const percentage =
+    (statsData.value.limits.weeklyOpusCost / statsData.value.limits.weeklyOpusCostLimit) * 100
+  return Math.min(percentage, 100)
+}
+
+// 获取Opus周费用进度条颜色
+const getOpusWeeklyCostProgressColor = () => {
+  const progress = getOpusWeeklyCostProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-indigo-500' // 使用紫色表示Opus模型
+}
+
 // 格式化数字
 const formatNumber = (num) => {
   if (typeof num !== 'number') {