Skip to content

GitLab

"git@web.lueluesay.top:chenxi/sub2api.git" did not exist on "fb119f9a67c3b6d45453e49f330c5cbb0136dcab"
Commit 83688c92 authored by IanShaw027's avatar IanShaw027
Browse files

feat(frontend): optimize gemini setup ui and usage visualization 

- refactor: clarify gemini auth types (Built-in vs Custom)
- feat: add setup guide with checklist and official links
- feat: display simulated daily quota progress bar
- style: apply brand-aligned colors (Blue/Gray) to gemini sections
parent 06d483fa
Hide whitespace changes
Inline Side-by-side
frontend/src/components/account/AccountUsageCell.vue
View file @ 83688c92
...@@ -169,9 +169,44 @@ ...@@ -169,9 +169,44 @@
<div v-else class="text-xs text-gray-400">-</div> <div v-else class="text-xs text-gray-400">-</div>
</template> </template>
<!-- Gemini platform: show quota info with AccountQuotaInfo component --> <!-- Gemini platform: show quota + local usage window -->
<template v-else-if="account.platform === 'gemini'"> <template v-else-if="account.platform === 'gemini'">
<AccountQuotaInfo :account="account" /> <div class="space-y-1">
<AccountQuotaInfo :account="account" />
<div v-if="loading" class="space-y-1">
<div class="flex items-center gap-1">
<div class="h-3 w-[32px] animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
<div class="h-1.5 w-8 animate-pulse rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="h-3 w-[32px] animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
</div>
</div>
<div v-else-if="error" class="text-xs text-red-500">
{{ error }}
</div>
<div v-else-if="geminiUsageAvailable" class="space-y-1">
<UsageProgressBar
v-if="usageInfo?.gemini_pro_daily"
:label="t('admin.accounts.usageWindow.geminiProDaily')"
:utilization="usageInfo.gemini_pro_daily.utilization"
:resets-at="usageInfo.gemini_pro_daily.resets_at"
:window-stats="usageInfo.gemini_pro_daily.window_stats"
:stats-title="t('admin.accounts.usageWindow.statsTitleDaily')"
color="indigo"
/>
<UsageProgressBar
v-if="usageInfo?.gemini_flash_daily"
:label="t('admin.accounts.usageWindow.geminiFlashDaily')"
:utilization="usageInfo.gemini_flash_daily.utilization"
:resets-at="usageInfo.gemini_flash_daily.resets_at"
:window-stats="usageInfo.gemini_flash_daily.window_stats"
:stats-title="t('admin.accounts.usageWindow.statsTitleDaily')"
color="emerald"
/>
<p class="mt-1 text-[9px] leading-tight text-gray-400 dark:text-gray-500 italic">
* {{ t('admin.accounts.gemini.quotaPolicy.simulatedNote') || 'Simulated quota' }}
</p>
</div>
</div>
</template> </template>
<!-- Other accounts: no usage window --> <!-- Other accounts: no usage window -->
...@@ -211,6 +246,23 @@ const showUsageWindows = computed( ...@@ -211,6 +246,23 @@ const showUsageWindows = computed(
() => props.account.type === 'oauth' || props.account.type === 'setup-token' () => props.account.type === 'oauth' || props.account.type === 'setup-token'
) )
const shouldFetchUsage = computed(() => {
if (props.account.platform === 'anthropic') {
return props.account.type === 'oauth' || props.account.type === 'setup-token'
}
if (props.account.platform === 'gemini') {
return props.account.type === 'oauth'
}
return false
})
const geminiUsageAvailable = computed(() => {
return (
!!usageInfo.value?.gemini_pro_daily ||
!!usageInfo.value?.gemini_flash_daily
)
})
// OpenAI Codex usage computed properties // OpenAI Codex usage computed properties
const hasCodexUsage = computed(() => { const hasCodexUsage = computed(() => {
const extra = props.account.extra const extra = props.account.extra
...@@ -498,10 +550,7 @@ const hasIneligibleTiers = computed(() => { ...@@ -498,10 +550,7 @@ const hasIneligibleTiers = computed(() => {
}) })
const loadUsage = async () => { const loadUsage = async () => {
// Fetch usage for Anthropic OAuth and Setup Token accounts if (!shouldFetchUsage.value) return
// OpenAI usage comes from account.extra field (updated during forwarding)
if (props.account.platform !== 'anthropic') return
if (props.account.type !== 'oauth' && props.account.type !== 'setup-token') return
loading.value = true loading.value = true
error.value = null error.value = null
......
frontend/src/components/account/CreateAccountModal.vue
View file @ 83688c92
...@@ -373,8 +373,12 @@ ...@@ -373,8 +373,12 @@
</svg> </svg>
</div> </div>
<div> <div>
<span class="block text-sm font-medium text-gray-900 dark:text-white">OAuth</span> <span class="block text-sm font-medium text-gray-900 dark:text-white">
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.types.googleOauth') }}</span> {{ t('admin.accounts.gemini.accountType.oauthTitle') }}
</span>
<span class="text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.accounts.gemini.accountType.oauthDesc') }}
</span>
</div> </div>
</button> </button>
...@@ -411,12 +415,42 @@ ...@@ -411,12 +415,42 @@
</svg> </svg>
</div> </div>
<div> <div>
<span class="block text-sm font-medium text-gray-900 dark:text-white">API Key</span> <span class="block text-sm font-medium text-gray-900 dark:text-white">
<span class="text-xs text-gray-500 dark:text-gray-400">AI Studio API Key</span> {{ t('admin.accounts.gemini.accountType.apiKeyTitle') }}
</span>
<span class="text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.accounts.gemini.accountType.apiKeyDesc') }}
</span>
</div> </div>
</button> </button>
</div> </div>
<div
v-if="accountCategory === 'apikey'"
class="mt-3 rounded-lg border border-purple-200 bg-purple-50 px-3 py-2 text-xs text-purple-800 dark:border-purple-800/40 dark:bg-purple-900/20 dark:text-purple-200"
>
<p>{{ t('admin.accounts.gemini.accountType.apiKeyNote') }}</p>
<div class="mt-2 flex flex-wrap gap-2">
<a
:href="geminiHelpLinks.apiKey"
class="font-medium text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.accountType.apiKeyLink') }}
</a>
<span class="text-purple-400">·</span>
<a
:href="geminiHelpLinks.aiStudioPricing"
class="font-medium text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.accountType.quotaLink') }}
</a>
</div>
</div>
<!-- OAuth Type Selection (only show when oauth-based is selected) --> <!-- OAuth Type Selection (only show when oauth-based is selected) -->
<div v-if="accountCategory === 'oauth-based'" class="mt-4"> <div v-if="accountCategory === 'oauth-based'" class="mt-4">
<label class="input-label">{{ t('admin.accounts.oauth.gemini.oauthTypeLabel') }}</label> <label class="input-label">{{ t('admin.accounts.oauth.gemini.oauthTypeLabel') }}</label>
...@@ -443,10 +477,41 @@ ...@@ -443,10 +477,41 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<span class="block text-sm font-medium text-gray-900 dark:text-white">{{ t('admin.accounts.types.codeAssist') }}</span> <span class="block text-sm font-medium text-gray-900 dark:text-white">
<span class="block text-xs font-medium text-blue-600 dark:text-blue-400">{{ t('admin.accounts.oauth.gemini.needsProjectId') }}</span> {{ t('admin.accounts.gemini.oauthType.builtInTitle') }}
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.oauth.gemini.needsProjectIdDesc') }}</span> </span>
<span class="text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.accounts.gemini.oauthType.builtInDesc') }}
</span>
<div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.accounts.gemini.oauthType.builtInRequirement') }}
<a
:href="geminiHelpLinks.gcpProject"
class="ml-1 text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.oauthType.gcpProjectLink') }}
</a>
</div>
<div class="mt-2 flex flex-wrap gap-1">
<span
class="rounded bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
>
{{ t('admin.accounts.gemini.oauthType.badges.recommended') }}
</span>
<span
class="rounded bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300"
>
{{ t('admin.accounts.gemini.oauthType.badges.highConcurrency') }}
</span>
<span
class="rounded bg-gray-100 px-2 py-0.5 text-[10px] font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300"
>
{{ t('admin.accounts.gemini.oauthType.badges.noAdmin') }}
</span>
</div>
</div> </div>
</button> </button>
...@@ -486,13 +551,27 @@ ...@@ -486,13 +551,27 @@
</svg> </svg>
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<span class="block text-sm font-medium text-gray-900 dark:text-white">AI Studio</span> <span class="block text-sm font-medium text-gray-900 dark:text-white">
<span class="block text-xs font-medium text-purple-600 dark:text-purple-400">{{ {{ t('admin.accounts.gemini.oauthType.customTitle') }}
t('admin.accounts.oauth.gemini.noProjectIdNeeded') </span>
}}</span> <span class="text-xs text-gray-500 dark:text-gray-400">
<span class="text-xs text-gray-500 dark:text-gray-400">{{ {{ t('admin.accounts.gemini.oauthType.customDesc') }}
t('admin.accounts.oauth.gemini.noProjectIdNeededDesc') </span>
}}</span> <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.accounts.gemini.oauthType.customRequirement') }}
</div>
<div class="mt-2 flex flex-wrap gap-1">
<span
class="rounded bg-purple-100 px-2 py-0.5 text-[10px] font-semibold text-purple-700 dark:bg-purple-900/40 dark:text-purple-300"
>
{{ t('admin.accounts.gemini.oauthType.badges.orgManaged') }}
</span>
<span
class="rounded bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/40 dark:text-amber-300"
>
{{ t('admin.accounts.gemini.oauthType.badges.adminRequired') }}
</span>
</div>
</div> </div>
<span <span
v-if="!geminiAIStudioOAuthEnabled" v-if="!geminiAIStudioOAuthEnabled"
...@@ -511,6 +590,79 @@ ...@@ -511,6 +590,79 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-4 text-xs text-blue-900 dark:border-blue-800/40 dark:bg-blue-900/20 dark:text-blue-200">
<div class="flex items-start gap-3">
<svg
class="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div class="min-w-0">
<p class="text-sm font-medium text-blue-800 dark:text-blue-300">
{{ t('admin.accounts.gemini.setupGuide.title') }}
</p>
<div class="mt-2 space-y-2">
<div>
<p class="font-semibold text-blue-800 dark:text-blue-300">
{{ t('admin.accounts.gemini.setupGuide.checklistTitle') }}
</p>
<ul class="mt-1 list-disc space-y-1 pl-4">
<li>
{{ t('admin.accounts.gemini.setupGuide.checklistItems.usIp') }}
<a
:href="geminiHelpLinks.countryCheck"
class="ml-1 text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.setupGuide.links.countryCheck') }}
</a>
</li>
<li>{{ t('admin.accounts.gemini.setupGuide.checklistItems.age') }}</li>
</ul>
</div>
<div>
<p class="font-semibold text-blue-800 dark:text-blue-300">
{{ t('admin.accounts.gemini.setupGuide.activationTitle') }}
</p>
<ul class="mt-1 list-disc space-y-1 pl-4">
<li>
{{ t('admin.accounts.gemini.setupGuide.activationItems.geminiWeb') }}
<a
:href="geminiHelpLinks.geminiWebActivation"
class="ml-1 text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.setupGuide.links.geminiWebActivation') }}
</a>
</li>
<li>
{{ t('admin.accounts.gemini.setupGuide.activationItems.gcpProject') }}
<a
:href="geminiHelpLinks.gcpProject"
class="ml-1 text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.setupGuide.links.gcpProject') }}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- Account Type Selection (Antigravity - OAuth only) --> <!-- Account Type Selection (Antigravity - OAuth only) -->
...@@ -969,6 +1121,165 @@ ...@@ -969,6 +1121,165 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Gemini 配额与限流政策说明 -->
<div v-if="form.platform === 'gemini'" class="border-t border-gray-200 pt-4 dark:border-dark-600">
<div class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800/40">
<div class="flex items-start gap-3">
<svg
class="h-5 w-5 flex-shrink-0 text-gray-500 dark:text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
/>
</svg>
<div class="min-w-0">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
{{ t('admin.accounts.gemini.quotaPolicy.title') }}
</p>
<p class="mt-1 text-xs text-gray-600 dark:text-gray-400">
{{ t('admin.accounts.gemini.quotaPolicy.note') }}
</p>
<div class="mt-3 overflow-x-auto">
<table class="min-w-full text-xs text-gray-700 dark:text-gray-300">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th class="px-2 py-1.5 text-left font-semibold">
{{ t('admin.accounts.gemini.quotaPolicy.columns.channel') }}
</th>
<th class="px-2 py-1.5 text-left font-semibold">
{{ t('admin.accounts.gemini.quotaPolicy.columns.account') }}
</th>
<th class="px-2 py-1.5 text-left font-semibold">
{{ t('admin.accounts.gemini.quotaPolicy.columns.limits') }}
</th>
<th class="px-2 py-1.5 text-left font-semibold">
{{ t('admin.accounts.gemini.quotaPolicy.columns.docs') }}
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-2 py-1.5 align-top" rowspan="2">
{{ t('admin.accounts.gemini.quotaPolicy.rows.cli.channel') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.cli.free') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.cli.limitsFree') }}
</td>
<td class="px-2 py-1.5 align-top" rowspan="2">
<a
:href="geminiQuotaDocs.codeAssist"
class="text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.quotaPolicy.docs.codeAssist') }}
</a>
</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.cli.premium') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.cli.limitsPremium') }}
</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-2 py-1.5 align-top">
{{ t('admin.accounts.gemini.quotaPolicy.rows.gcloud.channel') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.gcloud.account') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.gcloud.limits') }}
</td>
<td class="px-2 py-1.5 align-top">
<a
:href="geminiQuotaDocs.codeAssist"
class="text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.quotaPolicy.docs.codeAssist') }}
</a>
</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-2 py-1.5 align-top" rowspan="2">
{{ t('admin.accounts.gemini.quotaPolicy.rows.aiStudio.channel') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.aiStudio.free') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.aiStudio.limitsFree') }}
</td>
<td class="px-2 py-1.5 align-top" rowspan="2">
<a
:href="geminiQuotaDocs.aiStudio"
class="text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.quotaPolicy.docs.aiStudio') }}
</a>
</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.aiStudio.paid') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.aiStudio.limitsPaid') }}
</td>
</tr>
<tr>
<td class="px-2 py-1.5 align-top" rowspan="2">
{{ t('admin.accounts.gemini.quotaPolicy.rows.customOAuth.channel') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.customOAuth.free') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.customOAuth.limitsFree') }}
</td>
<td class="px-2 py-1.5 align-top" rowspan="2">
<a
:href="geminiQuotaDocs.vertex"
class="text-blue-600 hover:underline dark:text-blue-400"
target="_blank"
rel="noreferrer"
>
{{ t('admin.accounts.gemini.quotaPolicy.docs.vertex') }}
</a>
</td>
</tr>
<tr>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.customOAuth.paid') }}
</td>
<td class="px-2 py-1.5">
{{ t('admin.accounts.gemini.quotaPolicy.rows.customOAuth.limitsPaid') }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- Intercept Warmup Requests (Anthropic only) --> <!-- Intercept Warmup Requests (Anthropic only) -->
...@@ -1333,6 +1644,20 @@ const geminiModels = [ ...@@ -1333,6 +1644,20 @@ const geminiModels = [
{ value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' } { value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' }
] ]
const geminiQuotaDocs = {
codeAssist: 'https://developers.google.com/gemini-code-assist/resources/quotas',
aiStudio: 'https://ai.google.dev/pricing',
vertex: 'https://cloud.google.com/vertex-ai/generative-ai/docs/quotas'
}
const geminiHelpLinks = {
apiKey: 'https://aistudio.google.com/app/apikey',
aiStudioPricing: 'https://ai.google.dev/pricing',
gcpProject: 'https://console.cloud.google.com/welcome/new',
geminiWebActivation: 'https://gemini.google.com/gems/create?hl=en-US',
countryCheck: 'https://policies.google.com/country-association-form'
}
// Computed: current models based on platform // Computed: current models based on platform
const commonModels = computed(() => { const commonModels = computed(() => {
if (form.platform === 'openai') return openaiModels if (form.platform === 'openai') return openaiModels
......
frontend/src/components/account/ReAuthAccountModal.vue
View file @ 83688c92
...@@ -121,16 +121,13 @@ ...@@ -121,16 +121,13 @@
/> />
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<span class="block text-sm font-medium text-gray-900 dark:text-white">{{ <span class="block text-sm font-medium text-gray-900 dark:text-white">
t('admin.accounts.types.codeAssist') {{ t('admin.accounts.gemini.oauthType.builtInTitle') }}
}}</span> </span>
<span class="block text-xs font-medium text-blue-600 dark:text-blue-400">{{ <span class="text-xs text-gray-500 dark:text-gray-400">
t('admin.accounts.oauth.gemini.needsProjectId') {{ t('admin.accounts.gemini.oauthType.builtInDesc') }}
}}</span> </span>
<span class="text-xs text-gray-500 dark:text-gray-400">{{
t('admin.accounts.oauth.gemini.needsProjectIdDesc')
}}</span>
</div> </div>
</button> </button>
...@@ -168,14 +165,13 @@ ...@@ -168,14 +165,13 @@
/> />
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<span class="block text-sm font-medium text-gray-900 dark:text-white">AI Studio</span> <span class="block text-sm font-medium text-gray-900 dark:text-white">
<span class="block text-xs font-medium text-purple-600 dark:text-purple-400">{{ {{ t('admin.accounts.gemini.oauthType.customTitle') }}
t('admin.accounts.oauth.gemini.noProjectIdNeeded') </span>
}}</span> <span class="text-xs text-gray-500 dark:text-gray-400">
<span class="text-xs text-gray-500 dark:text-gray-400">{{ {{ t('admin.accounts.gemini.oauthType.customDesc') }}
t('admin.accounts.oauth.gemini.noProjectIdNeededDesc') </span>
}}</span>
<div v-if="!geminiAIStudioOAuthEnabled" class="group relative mt-1 inline-block"> <div v-if="!geminiAIStudioOAuthEnabled" class="group relative mt-1 inline-block">
<span <span
class="rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-700 dark:bg-amber-900/30 dark:text-amber-300" class="rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
......
frontend/src/components/account/UsageProgressBar.vue
View file @ 83688c92
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div <div
v-if="windowStats" v-if="windowStats"
class="mb-0.5 flex items-center justify-between" class="mb-0.5 flex items-center justify-between"
:title="t('admin.accounts.usageWindow.statsTitle')" :title="statsTitle || t('admin.accounts.usageWindow.statsTitle')"
> >
<div <div
class="flex cursor-help items-center gap-1.5 text-[9px] text-gray-500 dark:text-gray-400" class="flex cursor-help items-center gap-1.5 text-[9px] text-gray-500 dark:text-gray-400"
...@@ -60,6 +60,7 @@ const props = defineProps<{ ...@@ -60,6 +60,7 @@ const props = defineProps<{
resetsAt?: string | null resetsAt?: string | null
color: 'indigo' | 'emerald' | 'purple' | 'amber' color: 'indigo' | 'emerald' | 'purple' | 'amber'
windowStats?: WindowStats | null windowStats?: WindowStats | null
statsTitle?: string
}>() }>()
const { t } = useI18n() const { t } = useI18n()
......
frontend/src/i18n/locales/en.ts
View file @ 83688c92
...@@ -1082,10 +1082,10 @@ export default { ...@@ -1082,10 +1082,10 @@ export default {
stateWarningTitle: 'Note', stateWarningTitle: 'Note',
stateWarningDesc: 'Recommended: paste the full callback URL (includes code & state).', stateWarningDesc: 'Recommended: paste the full callback URL (includes code & state).',
oauthTypeLabel: 'OAuth Type', oauthTypeLabel: 'OAuth Type',
needsProjectId: 'For GCP Developers', needsProjectId: 'Built-in OAuth (Code Assist)',
needsProjectIdDesc: 'Requires GCP project', needsProjectIdDesc: 'Requires GCP project and Project ID',
noProjectIdNeeded: 'For Regular Users', noProjectIdNeeded: 'Custom OAuth (AI Studio)',
noProjectIdNeededDesc: 'Requires admin-configured OAuth client', noProjectIdNeededDesc: 'Requires admin-configured OAuth client',
aiStudioNotConfiguredShort: 'Not configured', aiStudioNotConfiguredShort: 'Not configured',
aiStudioNotConfiguredTip: aiStudioNotConfiguredTip:
'AI Studio OAuth is not configured: set GEMINI_OAUTH_CLIENT_ID / GEMINI_OAUTH_CLIENT_SECRET and add Redirect URI: http://localhost:1455/auth/callback (Consent screen scopes must include https://www.googleapis.com/auth/generative-language.retriever)', 'AI Studio OAuth is not configured: set GEMINI_OAUTH_CLIENT_ID / GEMINI_OAUTH_CLIENT_SECRET and add Redirect URI: http://localhost:1455/auth/callback (Consent screen scopes must include https://www.googleapis.com/auth/generative-language.retriever)',
...@@ -1120,7 +1120,95 @@ export default { ...@@ -1120,7 +1120,95 @@ export default {
modelPassthroughDesc: modelPassthroughDesc:
'All model requests are forwarded directly to the Gemini API without model restrictions or mappings.', 'All model requests are forwarded directly to the Gemini API without model restrictions or mappings.',
baseUrlHint: 'Leave default for official Gemini API', baseUrlHint: 'Leave default for official Gemini API',
apiKeyHint: 'Your Gemini API Key (starts with AIza)' apiKeyHint: 'Your Gemini API Key (starts with AIza)',
accountType: {
oauthTitle: 'OAuth (Gemini)',
oauthDesc: 'Authorize with your Google account and choose an OAuth type.',
apiKeyTitle: 'API Key (AI Studio)',
apiKeyDesc: 'Fastest setup. Use an AIza API key.',
apiKeyNote:
'Best for light testing. Free tier has strict rate limits and data may be used for training.',
apiKeyLink: 'Get API Key',
quotaLink: 'Quota guide'
},
oauthType: {
builtInTitle: 'Built-in OAuth (Gemini CLI / Code Assist)',
builtInDesc: 'Uses Google built-in client ID. No admin configuration required.',
builtInRequirement: 'Requires a GCP project and Project ID.',
gcpProjectLink: 'Create project',
customTitle: 'Custom OAuth (AI Studio OAuth)',
customDesc: 'Uses admin-configured OAuth client for org management.',
customRequirement: 'Admin must configure Client ID and add you as a test user.',
badges: {
recommended: 'Recommended',
highConcurrency: 'High concurrency',
noAdmin: 'No admin setup',
orgManaged: 'Org managed',
adminRequired: 'Admin required'
}
},
setupGuide: {
title: 'Gemini Setup Checklist',
checklistTitle: 'Checklist',
checklistItems: {
usIp: 'Use a US IP and ensure your account country is set to US.',
age: 'Account must be 18+.'
},
activationTitle: 'One-click Activation',
activationItems: {
geminiWeb: 'Activate Gemini Web to avoid User not initialized.',
gcpProject: 'Activate a GCP project and get the Project ID for Code Assist.'
},
links: {
countryCheck: 'Check country association',
geminiWebActivation: 'Activate Gemini Web',
gcpProject: 'Open GCP Console'
}
},
quotaPolicy: {
title: 'Gemini Quota & Limit Policy (Reference)',
note: 'Note: Gemini does not provide an official quota inquiry API. The "Daily Quota" shown here is an estimate simulated by the system based on account tiers for scheduling reference only. Please refer to official Google errors for actual limits.',
columns: {
channel: 'Auth Channel',
account: 'Account Status',
limits: 'Limit Policy',
docs: 'Official Docs'
},
docs: {
codeAssist: 'Code Assist Quotas',
aiStudio: 'AI Studio Pricing',
vertex: 'Vertex AI Quotas'
},
simulatedNote: 'Simulated quota, for reference only',
rows: {
cli: {
channel: 'Gemini CLI (Official Google Login / Code Assist)',
free: 'Free Google Account',
premium: 'Google One AI Premium',
limitsFree: 'RPD ~1000; RPM ~60 (soft)',
limitsPremium: 'RPD ~1500+; RPM ~60+ (priority queue)'
},
gcloud: {
channel: 'GCP Code Assist (gcloud auth)',
account: 'No Code Assist subscription',
limits: 'RPD ~1000; RPM ~60 (preview)'
},
aiStudio: {
channel: 'AI Studio API Key / OAuth',
free: 'No billing (free tier)',
paid: 'Billing enabled (pay-as-you-go)',
limitsFree: 'RPD 50; RPM 2 (Pro) / 15 (Flash)',
limitsPaid: 'RPD unlimited; RPM 1000+ (per model quota)'
},
customOAuth: {
channel: 'Custom OAuth Client (GCP)',
free: 'Project not billed',
paid: 'Project billed',
limitsFree: 'RPD 50; RPM 2 (project quota)',
limitsPaid: 'RPD unlimited; RPM 1000+ (project quota)'
}
}
}
}, },
// Re-Auth Modal // Re-Auth Modal
reAuthorizeAccount: 'Re-Authorize Account', reAuthorizeAccount: 'Re-Authorize Account',
...@@ -1186,6 +1274,9 @@ export default { ...@@ -1186,6 +1274,9 @@ export default {
}, },
usageWindow: { usageWindow: {
statsTitle: '5-Hour Window Usage Statistics', statsTitle: '5-Hour Window Usage Statistics',
statsTitleDaily: 'Daily Usage Statistics',
geminiProDaily: 'RPD Pro',
geminiFlashDaily: 'RPD Flash',
gemini3Pro: 'G3P', gemini3Pro: 'G3P',
gemini3Flash: 'G3F', gemini3Flash: 'G3F',
gemini3Image: 'G3I', gemini3Image: 'G3I',
......
frontend/src/i18n/locales/zh.ts
View file @ 83688c92
...@@ -985,6 +985,9 @@ export default { ...@@ -985,6 +985,9 @@ export default {
}, },
usageWindow: { usageWindow: {
statsTitle: '5小时窗口用量统计', statsTitle: '5小时窗口用量统计',
statsTitleDaily: '每日用量统计',
geminiProDaily: 'RPD Pro',
geminiFlashDaily: 'RPD Flash',
gemini3Pro: 'G3P', gemini3Pro: 'G3P',
gemini3Flash: 'G3F', gemini3Flash: 'G3F',
gemini3Image: 'G3I', gemini3Image: 'G3I',
...@@ -1217,10 +1220,10 @@ export default { ...@@ -1217,10 +1220,10 @@ export default {
stateWarningTitle: '提示', stateWarningTitle: '提示',
stateWarningDesc: '建议粘贴完整回调链接（包含 code 和 state）。', stateWarningDesc: '建议粘贴完整回调链接（包含 code 和 state）。',
oauthTypeLabel: 'OAuth 类型', oauthTypeLabel: 'OAuth 类型',
needsProjectId: '适合 GCP 开发者', needsProjectId: '内置授权（Code Assist）',
needsProjectIdDesc: '需 GCP 项目', needsProjectIdDesc: '需要 GCP 项目与 Project ID',
noProjectIdNeeded: '适合普通用户', noProjectIdNeeded: '自定义授权（AI Studio）',
noProjectIdNeededDesc: '需管理员配置 OAuth Client', noProjectIdNeededDesc: '需管理员配置 OAuth Client',
aiStudioNotConfiguredShort: '未配置', aiStudioNotConfiguredShort: '未配置',
aiStudioNotConfiguredTip: 'AI Studio OAuth 未配置：请先设置 GEMINI_OAUTH_CLIENT_ID / GEMINI_OAUTH_CLIENT_SECRET，并在 Google OAuth Client 添加 Redirect URI：http://localhost:1455/auth/callback（Consent Screen scopes 需包含 https://www.googleapis.com/auth/generative-language.retriever）', aiStudioNotConfiguredTip: 'AI Studio OAuth 未配置：请先设置 GEMINI_OAUTH_CLIENT_ID / GEMINI_OAUTH_CLIENT_SECRET，并在 Google OAuth Client 添加 Redirect URI：http://localhost:1455/auth/callback（Consent Screen scopes 需包含 https://www.googleapis.com/auth/generative-language.retriever）',
aiStudioNotConfigured: 'AI Studio OAuth 未配置：请先设置 GEMINI_OAUTH_CLIENT_ID / GEMINI_OAUTH_CLIENT_SECRET，并在 Google OAuth Client 添加 Redirect URI：http://localhost:1455/auth/callback' aiStudioNotConfigured: 'AI Studio OAuth 未配置：请先设置 GEMINI_OAUTH_CLIENT_ID / GEMINI_OAUTH_CLIENT_SECRET，并在 Google OAuth Client 添加 Redirect URI：http://localhost:1455/auth/callback'
...@@ -1252,7 +1255,94 @@ export default { ...@@ -1252,7 +1255,94 @@ export default {
modelPassthrough: 'Gemini 直接转发模型', modelPassthrough: 'Gemini 直接转发模型',
modelPassthroughDesc: '所有模型请求将直接转发至 Gemini API，不进行模型限制或映射。', modelPassthroughDesc: '所有模型请求将直接转发至 Gemini API，不进行模型限制或映射。',
baseUrlHint: '留空使用官方 Gemini API', baseUrlHint: '留空使用官方 Gemini API',
apiKeyHint: '您的 Gemini API Key（以 AIza 开头）' apiKeyHint: '您的 Gemini API Key（以 AIza 开头）',
accountType: {
oauthTitle: 'OAuth 授权（Gemini）',
oauthDesc: '使用 Google 账号授权，并选择 OAuth 子类型。',
apiKeyTitle: 'API 密钥（AI Studio）',
apiKeyDesc: '最快接入方式，使用 AIza API Key。',
apiKeyNote: '适合轻量测试。免费层限流严格，数据可能用于训练。',
apiKeyLink: '获取 API Key',
quotaLink: '配额说明'
},
oauthType: {
builtInTitle: '内置授权（Gemini CLI / Code Assist）',
builtInDesc: '使用 Google 内置客户端 ID，无需管理员配置。',
builtInRequirement: '需要 GCP 项目并填写 Project ID。',
gcpProjectLink: '创建项目',
customTitle: '自定义授权（AI Studio OAuth）',
customDesc: '使用管理员预设的 OAuth 客户端，适合组织管理。',
customRequirement: '需管理员配置 Client ID 并加入测试用户白名单。',
badges: {
recommended: '推荐',
highConcurrency: '高并发',
noAdmin: '无需管理员配置',
orgManaged: '组织管理',
adminRequired: '需要管理员'
}
},
setupGuide: {
title: 'Gemini 使用准备',
checklistTitle: '准备工作',
checklistItems: {
usIp: '使用美国 IP，并确保账号归属地为美国。',
age: '账号需满 18 岁。'
},
activationTitle: '服务激活',
activationItems: {
geminiWeb: '激活 Gemini Web，避免 User not initialized。',
gcpProject: '激活 GCP 项目，获取 Code Assist 所需 Project ID。'
},
links: {
countryCheck: '检查归属地',
geminiWebActivation: '激活 Gemini Web',
gcpProject: '打开 GCP 控制台'
}
},
quotaPolicy: {
title: 'Gemini 配额与限流政策（参考）',
note: '注意：Gemini 官方未提供用量查询接口。此处显示的“每日配额”是由系统根据账号等级模拟计算的估算值，仅供调度参考，请以 Google 官方实际报错为准。',
columns: {
channel: '授权通道',
account: '账号状态',
limits: '限流政策',
docs: '官方文档'
},
docs: {
codeAssist: 'Code Assist 配额',
aiStudio: 'AI Studio 定价',
vertex: 'Vertex AI 配额'
},
simulatedNote: '本地模拟配额，仅供参考',
rows: {
cli: {
channel: 'Gemini CLI（官方 Google 登录 / Code Assist）',
free: '免费 Google 账号',
premium: 'Google One AI Premium',
limitsFree: 'RPD ~1000；RPM ~60（软限制）',
limitsPremium: 'RPD ~1500+；RPM ~60+（优先队列）'
},
gcloud: {
channel: 'GCP Code Assist（gcloud 登录）',
account: '未购买 Code Assist 订阅',
limits: 'RPD ~1000；RPM ~60（预览期）'
},
aiStudio: {
channel: 'AI Studio API Key / OAuth',
free: '未绑卡（免费层）',
paid: '已绑卡（按量付费）',
limitsFree: 'RPD 50；RPM 2（Pro）/ 15（Flash）',
limitsPaid: 'RPD 不限；RPM 1000+（按模型配额）'
},
customOAuth: {
channel: 'Custom OAuth Client（GCP）',
free: '项目未绑卡',
paid: '项目已绑卡',
limitsFree: 'RPD 50；RPM 2（项目配额）',
limitsPaid: 'RPD 不限；RPM 1000+（项目配额）'
}
}
}
}, },
// Re-Auth Modal // Re-Auth Modal
reAuthorizeAccount: '重新授权账号', reAuthorizeAccount: '重新授权账号',
......
frontend/src/types/index.ts
View file @ 83688c92
...@@ -382,6 +382,8 @@ export interface AccountUsageInfo { ...@@ -382,6 +382,8 @@ export interface AccountUsageInfo {
five_hour: UsageProgress | null five_hour: UsageProgress | null
seven_day: UsageProgress | null seven_day: UsageProgress | null
seven_day_sonnet: UsageProgress | null seven_day_sonnet: UsageProgress | null
gemini_pro_daily?: UsageProgress | null
gemini_flash_daily?: UsageProgress | null
} }
// OpenAI Codex usage snapshot (from response headers) // OpenAI Codex usage snapshot (from response headers)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment