feat(accounts): 账户列表显示实时并发数

- 在账户列表 API 返回中添加 current_concurrency 字段 - 合并平台和类型列为 PlatformTypeBadge 组件，节省表格空间 - 新增并发状态列，显示当前/最大并发数，支持颜色编码
2025-12-24 15:44:45 +08:00
parent b071511676
commit 0abe322cca
8 changed files with 157 additions and 29 deletions
--- a/frontend/src/components/common/PlatformTypeBadge.vue
+++ b/frontend/src/components/common/PlatformTypeBadge.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="inline-flex items-center rounded-md overflow-hidden text-xs font-medium">
+    <!-- Platform part -->
+    <span
+      :class="[
+        'inline-flex items-center gap-1 px-2 py-1',
+        platformClass
+      ]"
+    >
+      <PlatformIcon :platform="platform" size="xs" />
+      <span>{{ platformLabel }}</span>
+    </span>
+    <!-- Type part -->
+    <span
+      :class="[
+        'inline-flex items-center gap-1 px-1.5 py-1',
+        typeClass
+      ]"
+    >
+      <!-- OAuth icon -->
+      <svg v-if="type === 'oauth'" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+      </svg>
+      <!-- Setup Token icon -->
+      <svg v-else-if="type === 'setup-token'" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+      </svg>
+      <!-- API Key icon -->
+      <svg v-else class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+      </svg>
+      <span>{{ typeLabel }}</span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AccountPlatform, AccountType } from '@/types'
+import PlatformIcon from './PlatformIcon.vue'
+
+interface Props {
+  platform: AccountPlatform
+  type: AccountType
+}
+
+const props = defineProps<Props>()
+
+const platformLabel = computed(() => {
+  return props.platform === 'anthropic' ? 'Anthropic' : 'OpenAI'
+})
+
+const typeLabel = computed(() => {
+  switch (props.type) {
+    case 'oauth': return 'OAuth'
+    case 'setup-token': return 'Token'
+    case 'apikey': return 'Key'
+    default: return props.type
+  }
+})
+
+const platformClass = computed(() => {
+  if (props.platform === 'anthropic') {
+    return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+  }
+  return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+})
+
+const typeClass = computed(() => {
+  if (props.platform === 'anthropic') {
+    return 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
+  }
+  return 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400'
+})
+</script>
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -702,8 +702,10 @@ export default {
      },
      columns: {
        name: 'Name',
+        platformType: 'Platform/Type',
        platform: 'Platform',
        type: 'Type',
+        concurrencyStatus: 'Concurrency',
        status: 'Status',
        schedulable: 'Schedule',
        todayStats: "Today's Stats",
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -796,8 +796,10 @@ export default {
      failedToToggleSchedulable: '切换调度状态失败',
      columns: {
        name: '名称',
+        platformType: '平台/类型',
        platform: '平台',
        type: '类型',
+        concurrencyStatus: '并发',
        priority: '优先级',
        weight: '权重',
        status: '状态',
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -319,6 +319,7 @@ export interface Account {
  extra?: CodexUsageSnapshot & Record<string, unknown>; // Extra fields including Codex usage
  proxy_id: number | null;
  concurrency: number;
+  current_concurrency?: number; // Real-time concurrency count from Redis
  priority: number;
  status: 'active' | 'inactive' | 'error';
  error_message: string | null;
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -73,29 +73,30 @@
            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
          </template>

-          <template #cell-platform="{ value }">
-            <span
-              :class="[
-                'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
-                value === 'anthropic'
-                  ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
-                  : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
-              ]"
-            >
-              <PlatformIcon :platform="value" size="xs" />
-              {{ value === 'anthropic' ? 'Anthropic' : 'OpenAI' }}
-            </span>
+          <template #cell-platform_type="{ row }">
+            <PlatformTypeBadge :platform="row.platform" :type="row.type" />
          </template>

-          <template #cell-type="{ value }">
-            <span
-              :class="[
-                'badge',
-                value === 'oauth' ? 'badge-primary' : value === 'setup-token' ? 'badge-info' : 'badge-purple'
-              ]"
-            >
-              {{ value === 'oauth' ? 'Oauth' : value === 'setup-token' ? t('admin.accounts.setupToken') : t('admin.accounts.apiKey') }}
-            </span>
+          <template #cell-concurrency="{ row }">
+            <div class="flex items-center gap-1.5">
+              <span
+                :class="[
+                  'inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium',
+                  (row.current_concurrency || 0) >= row.concurrency
+                    ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                    : (row.current_concurrency || 0) > 0
+                      ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+                      : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
+                ]"
+              >
+                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+                </svg>
+                <span class="font-mono">{{ row.current_concurrency || 0 }}</span>
+                <span class="text-gray-400 dark:text-gray-500">/</span>
+                <span class="font-mono">{{ row.concurrency }}</span>
+              </span>
+            </div>
          </template>

          <template #cell-status="{ row }">
@@ -336,7 +337,7 @@ import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
 import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
 import AccountTestModal from '@/components/account/AccountTestModal.vue'
 import GroupBadge from '@/components/common/GroupBadge.vue'
-import PlatformIcon from '@/components/common/PlatformIcon.vue'
+import PlatformTypeBadge from '@/components/common/PlatformTypeBadge.vue'
 import { formatRelativeTime } from '@/utils/format'

 const { t } = useI18n()
@@ -345,8 +346,8 @@ const appStore = useAppStore()
 // Table columns
 const columns = computed<Column[]>(() => [
  { key: 'name', label: t('admin.accounts.columns.name'), sortable: true },
-  { key: 'platform', label: t('admin.accounts.columns.platform'), sortable: true },
-  { key: 'type', label: t('admin.accounts.columns.type'), sortable: true },
+  { key: 'platform_type', label: t('admin.accounts.columns.platformType'), sortable: false },
+  { key: 'concurrency', label: t('admin.accounts.columns.concurrencyStatus'), sortable: false },
  { key: 'status', label: t('admin.accounts.columns.status'), sortable: true },
  { key: 'schedulable', label: t('admin.accounts.columns.schedulable'), sortable: true },
  { key: 'today_stats', label: t('admin.accounts.columns.todayStats'), sortable: false },