oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

refactor(accounts): 优化用量窗口显示，统一 OAuth 和 Setup Token 处理

Browse Source 
- Setup Token 账号现在也调用 API 获取 5h 窗口用量数据
- 重新设计 UsageProgressBar UI，将用量统计移到进度条上方
- 删除冗余的 SetupTokenTimeWindow 组件
- 请求数/Token数支持 K/M/B 单位显示
This commit is contained in:
shaw
2025-12-24 10:57:40 +08:00
parent 7d9a757a26
commit b071511676
3 changed files with 79 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/account/AccountUsageCell.vue
View File

@@ -1,24 +1,27 @@
<template>
<div v-if="showUsageWindows">
<!-- Anthropic OAuth accounts: fetch real usage data -->
<template v-if="account.platform === 'anthropic' && account.type === 'oauth'">
<!-- Anthropic OAuth and Setup Token accounts: fetch real usage data -->
<template v-if="account.platform === 'anthropic' && (account.type === 'oauth' || account.type === 'setup-token')">
<!-- Loading state -->
<div v-if="loading" class="space-y-1.5">
<!-- OAuth: 3 rows, Setup Token: 1 row -->
<div class="flex items-center gap-1">
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div class="w-8 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
</div>
<div class="flex items-center gap-1">
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div class="w-8 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
</div>
<div class="flex items-center gap-1">
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div class="w-8 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
</div>
<template v-if="account.type === 'oauth'">
<div class="flex items-center gap-1">
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div class="w-8 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
</div>
<div class="flex items-center gap-1">
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div class="w-8 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
<div class="w-[32px] h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
</div>
</template>
</div>
<!-- Error state -->
@@ -38,7 +41,7 @@
color="indigo"
/>
<!-- 7d Window -->
<!-- 7d Window (OAuth only) -->
<UsageProgressBar
v-if="usageInfo.seven_day"
label="7d"
@@ -47,7 +50,7 @@
color="emerald"
/>
<!-- 7d Sonnet Window -->
<!-- 7d Sonnet Window (OAuth only) -->
<UsageProgressBar
v-if="usageInfo.seven_day_sonnet"
label="7d S"
@@ -63,11 +66,6 @@
</div>
</template>
<!-- Anthropic Setup Token accounts: show time-based window progress -->
<template v-else-if="account.platform === 'anthropic' && account.type === 'setup-token'">
<SetupTokenTimeWindow :account="account" />
</template>
<!-- OpenAI OAuth accounts: show Codex usage from extra field -->
<template v-else-if="account.platform === 'openai' && account.type === 'oauth'">
<div v-if="hasCodexUsage" class="space-y-1">
@@ -109,7 +107,6 @@ import { ref, computed, onMounted } from 'vue'
import { adminAPI } from '@/api/admin'
import type { Account, AccountUsageInfo } from '@/types'
import UsageProgressBar from './UsageProgressBar.vue'
import SetupTokenTimeWindow from './SetupTokenTimeWindow.vue'
const props = defineProps<{
account: Account
@@ -160,9 +157,10 @@ const codexSecondaryResetAt = computed(() => {
})
const loadUsage = async () => {
// Only fetch usage for Anthropic OAuth accounts
// Fetch usage for Anthropic OAuth and Setup Token accounts
// OpenAI usage comes from account.extra field (updated during forwarding)
if (props.account.platform !== 'anthropic' || props.account.type !== 'oauth') return
if (props.account.platform !== 'anthropic') return
if (props.account.type !== 'oauth' && props.account.type !== 'setup-token') return
loading.value = true
error.value = null