mod: 补充API KEY详情页进度条

scripts/data-transfer.js

@@ -117,7 +117,7 @@ const CSV_FIELD_MAPPING = {
   concurrencyLimit: '并发限制',
   dailyCostLimit: '日费用限制(美元)',
   totalCostLimit: '总费用限制(美元)',
-  weeklyOpusCostLimit: '周Opus费用限制(美元)',
+  weeklyOpusCostLimit: '周Claude费用限制(美元)',
 
   // 账户绑定
   claudeAccountId: 'Claude专属账户',

src/routes/admin/apiKeys.js

@@ -1029,6 +1029,7 @@ router.post('/api-keys/batch-stats', authenticateAdmin, async (req, res) => {
             cost: 0,
             formattedCost: '$0.00',
             dailyCost: 0,
+            weeklyOpusCost: 0,
             currentWindowCost: 0,
             windowRemainingSeconds: null,
             allTimeCost: 0,
@@ -1109,6 +1110,7 @@ async function calculateKeyStats(keyId, timeRange, startDate, endDate) {
 
   // 获取实时限制数据（窗口数据不受时间范围筛选影响，始终获取当前窗口状态）
   let dailyCost = 0
+  let weeklyOpusCost = 0 // 字段名沿用 weeklyOpusCost*，语义为“Claude 周费用”
   let currentWindowCost = 0
   let windowRemainingSeconds = null
   let windowStartTime = null
@@ -1121,6 +1123,7 @@ async function calculateKeyStats(keyId, timeRange, startDate, endDate) {
     const rateLimitWindow = parseInt(apiKey?.rateLimitWindow) || 0
     const dailyCostLimit = parseFloat(apiKey?.dailyCostLimit) || 0
     const totalCostLimit = parseFloat(apiKey?.totalCostLimit) || 0
+    const weeklyOpusCostLimit = parseFloat(apiKey?.weeklyOpusCostLimit) || 0
 
     // 只在启用了每日费用限制时查询
     if (dailyCostLimit > 0) {
@@ -1133,6 +1136,11 @@ async function calculateKeyStats(keyId, timeRange, startDate, endDate) {
       allTimeCost = parseFloat((await client.get(totalCostKey)) || '0')
     }
 
+    // 只在启用了 Claude 周费用限制时查询（字段名沿用 weeklyOpusCostLimit）
+    if (weeklyOpusCostLimit > 0) {
+      weeklyOpusCost = await redis.getWeeklyOpusCost(keyId)
+    }
+
     // 🔧 FIX: 对于 "全部时间" 时间范围，直接使用 allTimeCost
     // 因为 usage:*:model:daily:* 键有 30 天 TTL，旧数据已经过期
     if (timeRange === 'all' && allTimeCost > 0) {
@@ -1149,6 +1157,7 @@ async function calculateKeyStats(keyId, timeRange, startDate, endDate) {
         formattedCost: CostCalculator.formatCost(allTimeCost),
         // 实时限制数据（始终返回，不受时间范围影响）
         dailyCost,
+        weeklyOpusCost,
         currentWindowCost,
         windowRemainingSeconds,
         windowStartTime,
@@ -1199,6 +1208,7 @@ async function calculateKeyStats(keyId, timeRange, startDate, endDate) {
       formattedCost: '$0.00',
       // 实时限制数据（始终返回，不受时间范围影响）
       dailyCost,
+      weeklyOpusCost,
       currentWindowCost,
       windowRemainingSeconds,
       windowStartTime,
@@ -1317,6 +1327,7 @@ async function calculateKeyStats(keyId, timeRange, startDate, endDate) {
     formattedCost: CostCalculator.formatCost(totalCost),
     // 实时限制数据
     dailyCost,
+    weeklyOpusCost,
     currentWindowCost,
     windowRemainingSeconds,
     windowStartTime,

src/services/apiKeyService.js

@@ -762,7 +762,7 @@ class ApiKeyService {
       for (const key of apiKeys) {
         key.usage = await redis.getUsageStats(key.id)
         const costStats = await redis.getCostStats(key.id)
-        // Add cost information to usage object for frontend compatibility
+        // 为前端兼容性：把费用信息同步到 usage 对象里
         if (key.usage && costStats) {
           key.usage.total = key.usage.total || {}
           key.usage.total.cost = costStats.total

web/admin-spa/src/components/apikeys/LimitProgressBar.vue

@@ -2,7 +2,7 @@
   <div class="w-full">
     <!-- 检查是否为无限制状态 -->
     <div
-      v-if="!limit || limit <= 0"
+      v-if="!limitValue || limitValue <= 0"
       class="flex items-center justify-center rounded-lg px-3 py-2 text-xs"
     >
       <div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-300">
@@ -18,7 +18,7 @@
           <span>{{ label }}</span>
         </div>
         <span class="text-gray-700 dark:text-gray-200"
-          >${{ current.toFixed(2) }} / ${{ limit.toFixed(2) }}</span
+          >${{ currentValue.toFixed(2) }} / ${{ limitValue.toFixed(2) }}</span
         >
       </div>
       <div class="relative h-1.5 overflow-hidden rounded-full bg-gray-200/85 dark:bg-gray-700/70">
@@ -57,7 +57,7 @@
         </div>
         <div class="flex items-center gap-1.5">
           <span class="text-xs font-bold tabular-nums" :class="currentValueClass">
-            ${{ current.toFixed(2) }} / ${{ limit.toFixed(2) }}
+            ${{ currentValue.toFixed(2) }} / ${{ limitValue.toFixed(2) }}
           </span>
         </div>
       </div>
@@ -95,11 +95,11 @@ const props = defineProps({
     required: true
   },
   current: {
-    type: Number,
+    type: [Number, String],
     default: 0
   },
   limit: {
-    type: Number,
+    type: [Number, String],
     required: true
   },
   showShine: {
@@ -109,10 +109,18 @@ const props = defineProps({
 })
 
 const isCompact = computed(() => props.variant === 'compact')
+const currentValue = computed(() => {
+  const n = Number(props.current)
+  return Number.isFinite(n) ? n : 0
+})
+const limitValue = computed(() => {
+  const n = Number(props.limit)
+  return Number.isFinite(n) ? n : 0
+})
 const progress = computed(() => {
   // 无限制时不显示进度条
-  if (!props.limit || props.limit <= 0) return 0
-  const percentage = (props.current / props.limit) * 100
+  if (!limitValue.value || limitValue.value <= 0) return 0
+  const percentage = (currentValue.value / limitValue.value) * 100
   return Math.min(percentage, 100)
 })
 

web/admin-spa/src/components/apikeys/UsageDetailModal.vue

@@ -155,11 +155,11 @@
               限制设置
             </h4>
             <div class="space-y-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700/50">
-              <div v-if="apiKey.dailyCostLimit > 0" class="space-y-1.5">
+              <div v-if="Number(apiKey.dailyCostLimit) > 0" class="space-y-1.5">
                 <LimitProgressBar
-                  :current="dailyCost"
+                  :current="Number(dailyCost) || 0"
                   label="每日费用限制"
-                  :limit="apiKey.dailyCostLimit"
+                  :limit="Number(apiKey.dailyCostLimit) || 0"
                   :show-shine="true"
                   type="daily"
                 />
@@ -168,11 +168,11 @@
                 </div>
               </div>
 
-              <div v-if="apiKey.weeklyOpusCostLimit > 0" class="space-y-1.5">
+              <div v-if="Number(apiKey.weeklyOpusCostLimit) > 0" class="space-y-1.5">
                 <LimitProgressBar
-                  :current="weeklyOpusCost"
-                  label="Opus 周费用限制"
-                  :limit="apiKey.weeklyOpusCostLimit"
+                  :current="Number(weeklyOpusCost) || 0"
+                  label="Claude 周费用限制"
+                  :limit="Number(apiKey.weeklyOpusCostLimit) || 0"
                   :show-shine="true"
                   type="opus"
                 />
@@ -181,11 +181,11 @@
                 </div>
               </div>
 
-              <div v-if="apiKey.totalCostLimit > 0" class="space-y-1.5">
+              <div v-if="Number(apiKey.totalCostLimit) > 0" class="space-y-1.5">
                 <LimitProgressBar
-                  :current="totalCost"
+                  :current="Number(totalCost) || 0"
                   label="总费用限制"
-                  :limit="apiKey.totalCostLimit"
+                  :limit="Number(apiKey.totalCostLimit) || 0"
                   :show-shine="true"
                   type="total"
                 />
@@ -195,7 +195,7 @@
               </div>
 
               <div
-                v-if="apiKey.concurrencyLimit > 0"
+                v-if="Number(apiKey.concurrencyLimit) > 0"
                 class="flex items-center justify-between rounded-lg border border-purple-200/70 bg-white/60 px-3 py-2 text-sm shadow-sm dark:border-purple-500/40 dark:bg-purple-950/20"
               >
                 <span class="text-gray-600 dark:text-gray-300">并发限制</span>
@@ -204,11 +204,25 @@
                 </span>
               </div>
 
-              <div v-if="apiKey.rateLimitWindow > 0" class="space-y-2">
+              <div
+                v-if="
+                  apiKey.rateLimitWindow > 0 ||
+                  apiKey.rateLimitRequests > 0 ||
+                  apiKey.tokenLimit > 0 ||
+                  apiKey.rateLimitCost > 0
+                "
+                class="space-y-2"
+              >
                 <h5 class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   <i class="fas fa-clock mr-1 text-blue-500" />
                   时间窗口限制
                 </h5>
+                <div
+                  v-if="apiKey.rateLimitWindow <= 0"
+                  class="rounded-lg border border-yellow-200 bg-yellow-50 px-3 py-2 text-xs text-yellow-800 dark:border-yellow-700/50 dark:bg-yellow-900/20 dark:text-yellow-200"
+                >
+                  未设置窗口时长（rateLimitWindow=0），窗口限制不会生效。
+                </div>
                 <WindowCountdown
                   :cost-limit="apiKey.rateLimitCost"
                   :current-cost="apiKey.currentWindowCost"
@@ -225,6 +239,69 @@
                   :window-start-time="apiKey.windowStartTime"
                 />
               </div>
+
+              <!-- 访问控制限制（模型/客户端/服务权限） -->
+              <div v-if="hasAccessRestrictions" class="space-y-2">
+                <h5 class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <i class="fas fa-lock mr-1 text-gray-500" />
+                  访问控制
+                </h5>
+
+                <div
+                  class="rounded-lg border border-gray-200 bg-white/60 px-3 py-2 text-sm shadow-sm dark:border-gray-600/50 dark:bg-gray-800/40"
+                >
+                  <div class="flex items-center justify-between">
+                    <span class="text-gray-600 dark:text-gray-300">服务权限</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">
+                      {{ permissionsDisplay }}
+                    </span>
+                  </div>
+                </div>
+
+                <div
+                  v-if="enableModelRestriction"
+                  class="rounded-lg border border-gray-200 bg-white/60 px-3 py-2 text-sm shadow-sm dark:border-gray-600/50 dark:bg-gray-800/40"
+                >
+                  <div class="mb-1 flex items-center justify-between">
+                    <span class="text-gray-600 dark:text-gray-300">模型限制（禁用列表）</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">
+                      {{ restrictedModels.length }}
+                    </span>
+                  </div>
+                  <div v-if="restrictedModels.length > 0" class="flex flex-wrap gap-1.5">
+                    <span
+                      v-for="model in restrictedModels"
+                      :key="model"
+                      class="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-200"
+                    >
+                      {{ model }}
+                    </span>
+                  </div>
+                  <div v-else class="text-xs text-gray-500 dark:text-gray-400">未配置具体模型</div>
+                </div>
+
+                <div
+                  v-if="enableClientRestriction"
+                  class="rounded-lg border border-gray-200 bg-white/60 px-3 py-2 text-sm shadow-sm dark:border-gray-600/50 dark:bg-gray-800/40"
+                >
+                  <div class="mb-1 flex items-center justify-between">
+                    <span class="text-gray-600 dark:text-gray-300">客户端限制（允许列表）</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">
+                      {{ allowedClients.length }}
+                    </span>
+                  </div>
+                  <div v-if="allowedClients.length > 0" class="flex flex-wrap gap-1.5">
+                    <span
+                      v-for="client in allowedClients"
+                      :key="client"
+                      class="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-200"
+                    >
+                      {{ client }}
+                    </span>
+                  </div>
+                  <div v-else class="text-xs text-gray-500 dark:text-gray-400">未配置客户端</div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -280,14 +357,48 @@ const cacheReadTokens = computed(() => props.apiKey.usage?.total?.cacheReadToken
 const rpm = computed(() => props.apiKey.usage?.averages?.rpm || 0)
 const tpm = computed(() => props.apiKey.usage?.averages?.tpm || 0)
 
+const enableModelRestriction = computed(
+  () =>
+    props.apiKey.enableModelRestriction === true || props.apiKey.enableModelRestriction === 'true'
+)
+const restrictedModels = computed(() =>
+  Array.isArray(props.apiKey.restrictedModels) ? props.apiKey.restrictedModels : []
+)
+const enableClientRestriction = computed(
+  () =>
+    props.apiKey.enableClientRestriction === true || props.apiKey.enableClientRestriction === 'true'
+)
+const allowedClients = computed(() =>
+  Array.isArray(props.apiKey.allowedClients) ? props.apiKey.allowedClients : []
+)
+const permissions = computed(() => props.apiKey.permissions || [])
+
+const permissionsDisplay = computed(() => {
+  if (!Array.isArray(permissions.value) || permissions.value.length === 0) {
+    return '全部'
+  }
+  return permissions.value.join(', ')
+})
+
+const hasAccessRestrictions = computed(() => {
+  return (
+    enableModelRestriction.value ||
+    enableClientRestriction.value ||
+    (Array.isArray(permissions.value) && permissions.value.length > 0)
+  )
+})
+
 const hasLimits = computed(() => {
   return (
-    props.apiKey.dailyCostLimit > 0 ||
-    props.apiKey.totalCostLimit > 0 ||
-    props.apiKey.concurrencyLimit > 0 ||
-    props.apiKey.weeklyOpusCostLimit > 0 ||
-    props.apiKey.rateLimitWindow > 0 ||
-    props.apiKey.tokenLimit > 0
+    Number(props.apiKey.dailyCostLimit) > 0 ||
+    Number(props.apiKey.totalCostLimit) > 0 ||
+    Number(props.apiKey.concurrencyLimit) > 0 ||
+    Number(props.apiKey.weeklyOpusCostLimit) > 0 ||
+    Number(props.apiKey.rateLimitWindow) > 0 ||
+    Number(props.apiKey.rateLimitRequests) > 0 ||
+    Number(props.apiKey.rateLimitCost) > 0 ||
+    Number(props.apiKey.tokenLimit) > 0 ||
+    hasAccessRestrictions.value
   )
 })
 

web/admin-spa/src/views/ApiKeysView.vue

@@ -4261,6 +4261,7 @@ const showUsageDetails = (apiKey) => {
   const enrichedApiKey = {
     ...apiKey,
     dailyCost: cachedStats?.dailyCost ?? apiKey.dailyCost ?? 0,
+    weeklyOpusCost: cachedStats?.weeklyOpusCost ?? apiKey.weeklyOpusCost ?? 0,
     currentWindowCost: cachedStats?.currentWindowCost ?? apiKey.currentWindowCost ?? 0,
     windowRemainingSeconds: cachedStats?.windowRemainingSeconds ?? apiKey.windowRemainingSeconds,
     windowStartTime: cachedStats?.windowStartTime ?? apiKey.windowStartTime ?? null,