fix(frontend): 统一徽标样式并修复 Google One 用量显示

**修复内容:**

1. **统一徽标样式**
   - 所有徽标使用相同的 Tailwind 类
   - Free: gray-100/600, Pro: blue-100/600, Ultra: purple-100/600
   - 暗色模式统一使用 /40 透明度
   - Client 和 AI Studio 都使用蓝色徽标

2. **修复 Google One 用量显示**
   - 后端已为所有 Gemini OAuth (GCP/Google One/Client) 返回用量数据
   - 前端只要有用量数据就显示进度条(移除 isGeminiCodeAssist 限制)
   - Google One 现在也会显示 Pro/Flash 进度条 + 统计数据
   - 只有自定义 Client OAuth 显示「无限流」(无追踪)

**最终显示规则:**
- AI Studio API Key: 「无限流」或「限流 XX」
- Client OAuth: 「无限流」(无追踪)
- GCP OAuth: Pro/Flash 进度条 + 统计
- Google One OAuth: Pro/Flash 进度条 + 统计
This commit is contained in:
IanShaw027
2026-01-04 10:42:37 +08:00
parent 43d9ef7f62
commit 7fe09c8342
2 changed files with 22 additions and 22 deletions

View File

@@ -94,41 +94,41 @@ const tierLabel = computed(() => {
return 'AI Studio' return 'AI Studio'
}) })
// Tier Badge 样式 // Tier Badge 样式(统一样式)
const tierBadgeClass = computed(() => { const tierBadgeClass = computed(() => {
const creds = props.account.credentials as GeminiCredentials | undefined const creds = props.account.credentials as GeminiCredentials | undefined
if (isCodeAssist.value) { if (isCodeAssist.value) {
// GCP Code Assist 样式 // GCP Code Assist 样式
const tierColorMap: Record<string, string> = { const tierColorMap: Record<string, string> = {
LEGACY: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400', LEGACY: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
PRO: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', PRO: 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300',
ULTRA: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400', ULTRA: 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300',
'standard-tier': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400', 'standard-tier': 'bg-green-100 text-green-600 dark:bg-green-900/40 dark:text-green-300',
'pro-tier': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', 'pro-tier': 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300',
'ultra-tier': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' 'ultra-tier': 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300'
} }
return ( return (
tierColorMap[creds?.tier_id || ''] || tierColorMap[creds?.tier_id || ''] ||
'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400' 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
) )
} }
if (isGoogleOne.value) { if (isGoogleOne.value) {
// Google One tier 样式 // Google One tier 样式
const tierColorMap: Record<string, string> = { const tierColorMap: Record<string, string> = {
AI_PREMIUM: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400', AI_PREMIUM: 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300',
GOOGLE_ONE_STANDARD: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', GOOGLE_ONE_STANDARD: 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300',
GOOGLE_ONE_BASIC: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400', GOOGLE_ONE_BASIC: 'bg-green-100 text-green-600 dark:bg-green-900/40 dark:text-green-300',
FREE: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400', FREE: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
GOOGLE_ONE_UNKNOWN: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400', GOOGLE_ONE_UNKNOWN: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
GOOGLE_ONE_UNLIMITED: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' GOOGLE_ONE_UNLIMITED: 'bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-300'
} }
return tierColorMap[creds?.tier_id || ''] || 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' return tierColorMap[creds?.tier_id || ''] || 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
} }
// AI Studio 默认样式:蓝色 // AI Studio 默认样式:蓝色
return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
}) })
// 是否限流 // 是否限流

View File

@@ -241,8 +241,8 @@
<div v-else-if="error" class="text-xs text-red-500"> <div v-else-if="error" class="text-xs text-red-500">
{{ error }} {{ error }}
</div> </div>
<!-- Code Assist: show model usage bars --> <!-- GCP & Google One: show model usage bars when available -->
<div v-else-if="isGeminiCodeAssist && geminiUsageAvailable" class="space-y-1"> <div v-else-if="geminiUsageAvailable" class="space-y-1">
<UsageProgressBar <UsageProgressBar
v-if="usageInfo?.gemini_pro_daily" v-if="usageInfo?.gemini_pro_daily"
label="Pro" label="Pro"
@@ -263,7 +263,7 @@
* {{ t('admin.accounts.gemini.quotaPolicy.simulatedNote') || 'Simulated quota' }} * {{ t('admin.accounts.gemini.quotaPolicy.simulatedNote') || 'Simulated quota' }}
</p> </p>
</div> </div>
<!-- AI Studio & Google One: show unlimited flow --> <!-- AI Studio Client OAuth: show unlimited flow (no usage tracking) -->
<div v-else class="text-xs text-gray-400"> <div v-else class="text-xs text-gray-400">
{{ t('admin.accounts.gemini.rateLimit.unlimited') }} {{ t('admin.accounts.gemini.rateLimit.unlimited') }}
</div> </div>
@@ -613,14 +613,14 @@ const geminiAuthTypeLabel = computed(() => {
return null return null
}) })
// Gemini 账户类型徽章样式 // Gemini 账户类型徽章样式统一样式
const geminiTierClass = computed(() => { const geminiTierClass = computed(() => {
const creds = props.account.credentials as GeminiCredentials | undefined const creds = props.account.credentials as GeminiCredentials | undefined
const oauthType = creds?.oauth_type const oauthType = creds?.oauth_type
// AI Studio: use neutral gray color (no tier) // Client (自定义 OAuth): 使用蓝色(与 AI Studio 一致)
if (oauthType === 'ai_studio') { if (oauthType === 'ai_studio') {
return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300' return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
} }
if (!geminiTier.value) return '' if (!geminiTier.value) return ''