From f9f33e7b5c1aa665b67434e83da37b0d7dbc08f4 Mon Sep 17 00:00:00 2001
From: ianshaw <ianshaw027@gmail.com>
Date: Thu, 25 Dec 2025 23:52:55 -0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20UI=20=E6=98=BE=E7=A4=BA=20AI?=
 =?UTF-8?q?=20Studio=20OAuth=20=E9=85=8D=E7=BD=AE=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CreateAccountModal:
- 检测 AI Studio OAuth 是否可用（服务器配置了自定义 OAuth 客户端）
- 未配置时禁用 AI Studio 选项并显示提示
- 添加悬停提示说明配置要求

ReAuthAccountModal:
- 同步 AI Studio OAuth 可用性检测逻辑
- 未配置时自动回退到 Code Assist
---
 .../components/account/CreateAccountModal.vue | 105 ++++++++++++++----
 .../components/account/ReAuthAccountModal.vue |  36 +++++-
 2 files changed, 115 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index de0f45af..b3ef4fd5 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -387,7 +387,7 @@
           <div class="mt-2 grid grid-cols-2 gap-3">
             <button
               type="button"
-              @click="geminiOAuthType = 'code_assist'"
+              @click="handleSelectGeminiOAuthType('code_assist')"
               :class="[
                 'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
                 geminiOAuthType === 'code_assist'
@@ -414,34 +414,65 @@
               </div>
             </button>
 
-            <button
-              type="button"
-              @click="geminiOAuthType = 'ai_studio'"
-              :class="[
-                'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
-                geminiOAuthType === 'ai_studio'
-                  ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
-                  : 'border-gray-200 hover:border-purple-300 dark:border-dark-600 dark:hover:border-purple-700'
-              ]"
-            >
-              <div
+            <div class="group relative">
+              <button
+                type="button"
+                :disabled="!geminiAIStudioOAuthEnabled"
+                @click="handleSelectGeminiOAuthType('ai_studio')"
                 :class="[
-                  'flex h-8 w-8 items-center justify-center rounded-lg',
+                  'flex w-full items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
+                  !geminiAIStudioOAuthEnabled ? 'cursor-not-allowed opacity-60' : '',
                   geminiOAuthType === 'ai_studio'
-                    ? 'bg-purple-500 text-white'
-                    : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+                    ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
+                    : 'border-gray-200 hover:border-purple-300 dark:border-dark-600 dark:hover:border-purple-700'
                 ]"
               >
-                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
-                </svg>
+                <div
+                  :class="[
+                    'flex h-8 w-8 items-center justify-center rounded-lg',
+                    geminiOAuthType === 'ai_studio'
+                      ? 'bg-purple-500 text-white'
+                      : 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
+                  ]"
+                >
+                  <svg
+                    class="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
+                    />
+                  </svg>
+                </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-xs font-medium text-purple-600 dark:text-purple-400">{{
+                    t('admin.accounts.oauth.gemini.noProjectIdNeeded')
+                  }}</span>
+                  <span class="text-xs text-gray-500 dark:text-gray-400">{{
+                    t('admin.accounts.oauth.gemini.noProjectIdNeededDesc')
+                  }}</span>
+                </div>
+                <span
+                  v-if="!geminiAIStudioOAuthEnabled"
+                  class="ml-auto shrink-0 rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
+                >
+                  {{ t('admin.accounts.oauth.gemini.aiStudioNotConfiguredShort') }}
+                </span>
+              </button>
+
+              <div
+                v-if="!geminiAIStudioOAuthEnabled"
+                class="pointer-events-none absolute left-0 top-full z-10 mt-2 w-[28rem] rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 dark:border-amber-700 dark:bg-amber-900/40 dark:text-amber-200"
+              >
+                {{ t('admin.accounts.oauth.gemini.aiStudioNotConfiguredTip') }}
               </div>
-              <div>
-                <span class="block text-sm font-medium text-gray-900 dark:text-white">AI Studio</span>
-                <span class="block text-xs font-medium text-purple-600 dark:text-purple-400">{{ t('admin.accounts.oauth.gemini.noProjectIdNeeded') }}</span>
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.oauth.gemini.noProjectIdNeededDesc') }}</span>
-              </div>
-            </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1134,6 +1165,7 @@ const selectedErrorCodes = ref<number[]>([])
 const customErrorCodeInput = ref<number | null>(null)
 const interceptWarmupRequests = ref(false)
 const geminiOAuthType = ref<'code_assist' | 'ai_studio'>('code_assist')
+const geminiAIStudioOAuthEnabled = ref(false)
 
 // Common models for whitelist - Anthropic
 const anthropicModels = [
@@ -1385,6 +1417,31 @@ watch(
   }
 )
 
+// Gemini AI Studio OAuth availability (requires operator-configured OAuth client)
+watch(
+  [() => props.show, () => form.platform, accountCategory],
+  async ([show, platform, category]) => {
+    if (!show || platform !== 'gemini' || category !== 'oauth-based') {
+      geminiAIStudioOAuthEnabled.value = false
+      return
+    }
+    const caps = await geminiOAuth.getCapabilities()
+    geminiAIStudioOAuthEnabled.value = !!caps?.ai_studio_oauth_enabled
+    if (!geminiAIStudioOAuthEnabled.value && geminiOAuthType.value === 'ai_studio') {
+      geminiOAuthType.value = 'code_assist'
+    }
+  },
+  { immediate: true }
+)
+
+const handleSelectGeminiOAuthType = (oauthType: 'code_assist' | 'ai_studio') => {
+  if (oauthType === 'ai_studio' && !geminiAIStudioOAuthEnabled.value) {
+    appStore.showError(t('admin.accounts.oauth.gemini.aiStudioNotConfigured'))
+    return
+  }
+  geminiOAuthType.value = oauthType
+}
+
 // Model mapping helpers
 const addModelMapping = () => {
   modelMappings.value.push({ from: '', to: '' })
diff --git a/frontend/src/components/account/ReAuthAccountModal.vue b/frontend/src/components/account/ReAuthAccountModal.vue
index a4f172c4..f3395869 100644
--- a/frontend/src/components/account/ReAuthAccountModal.vue
+++ b/frontend/src/components/account/ReAuthAccountModal.vue
@@ -85,7 +85,7 @@
         <div class="mt-2 grid grid-cols-2 gap-3">
           <button
             type="button"
-            @click="geminiOAuthType = 'code_assist'"
+            @click="handleSelectGeminiOAuthType('code_assist')"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               geminiOAuthType === 'code_assist'
@@ -128,9 +128,11 @@
 
           <button
             type="button"
-            @click="geminiOAuthType = 'ai_studio'"
+            :disabled="!geminiAIStudioOAuthEnabled"
+            @click="handleSelectGeminiOAuthType('ai_studio')"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
+              !geminiAIStudioOAuthEnabled ? 'cursor-not-allowed opacity-60' : '',
               geminiOAuthType === 'ai_studio'
                 ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
                 : 'border-gray-200 hover:border-purple-300 dark:border-dark-600 dark:hover:border-purple-700'
@@ -166,6 +168,18 @@
               <span class="text-xs text-gray-500 dark:text-gray-400">{{
                 t('admin.accounts.oauth.gemini.noProjectIdNeededDesc')
               }}</span>
+              <div v-if="!geminiAIStudioOAuthEnabled" class="group relative mt-1 inline-block">
+                <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"
+                >
+                  {{ t('admin.accounts.oauth.gemini.aiStudioNotConfiguredShort') }}
+                </span>
+                <div
+                  class="pointer-events-none absolute left-0 top-full z-10 mt-2 w-[28rem] rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 dark:border-amber-700 dark:bg-amber-900/40 dark:text-amber-200"
+                >
+                  {{ t('admin.accounts.oauth.gemini.aiStudioNotConfiguredTip') }}
+                </div>
+              </div>
             </div>
           </button>
         </div>
@@ -283,6 +297,7 @@ const oauthFlowRef = ref<OAuthFlowExposed | null>(null)
 // State
 const addMethod = ref<AddMethod>('oauth')
 const geminiOAuthType = ref<'code_assist' | 'ai_studio'>('code_assist')
+const geminiAIStudioOAuthEnabled = ref(false)
 
 // Computed - check if this is an OpenAI account
 const isOpenAI = computed(() => props.account?.platform === 'openai')
@@ -348,6 +363,14 @@ watch(
         const creds = (props.account.credentials || {}) as Record<string, unknown>
         geminiOAuthType.value = creds.oauth_type === 'ai_studio' ? 'ai_studio' : 'code_assist'
       }
+      if (isGemini.value) {
+        geminiOAuth.getCapabilities().then((caps) => {
+          geminiAIStudioOAuthEnabled.value = !!caps?.ai_studio_oauth_enabled
+          if (!geminiAIStudioOAuthEnabled.value && geminiOAuthType.value === 'ai_studio') {
+            geminiOAuthType.value = 'code_assist'
+          }
+        })
+      }
     } else {
       resetState()
     }
@@ -358,12 +381,21 @@ watch(
 const resetState = () => {
   addMethod.value = 'oauth'
   geminiOAuthType.value = 'code_assist'
+  geminiAIStudioOAuthEnabled.value = false
   claudeOAuth.resetState()
   openaiOAuth.resetState()
   geminiOAuth.resetState()
   oauthFlowRef.value?.reset()
 }
 
+const handleSelectGeminiOAuthType = (oauthType: 'code_assist' | 'ai_studio') => {
+  if (oauthType === 'ai_studio' && !geminiAIStudioOAuthEnabled.value) {
+    appStore.showError(t('admin.accounts.oauth.gemini.aiStudioNotConfigured'))
+    return
+  }
+  geminiOAuthType.value = oauthType
+}
+
 const handleClose = () => {
   emit('close')
 }