refactor(ui): extract mixed channel warning handler

2026-04-13 19:34:45 +08:00 · 2026-02-13 00:22:14 +08:00
parent 5715587baf
commit 6218eefd61
3 changed files with 152 additions and 104 deletions
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -1964,6 +1964,7 @@ import {
 import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
 import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
 import { useAntigravityOAuth } from '@/composables/useAntigravityOAuth'
+import { useMixedChannelWarning } from '@/composables/useMixedChannelWarning'
 import type { Proxy, AdminGroup, AccountPlatform, AccountType } from '@/types'
 import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
@@ -2102,10 +2103,9 @@ const tempUnschedRules = ref<TempUnschedRuleForm[]>([])
 const geminiOAuthType = ref<'code_assist' | 'google_one' | 'ai_studio'>('google_one')
 const geminiAIStudioOAuthEnabled = ref(false)

-// Mixed channel warning dialog state
-const showMixedChannelWarning = ref(false)
-const mixedChannelWarningDetails = ref<{ groupName: string; currentPlatform: string; otherPlatform: string } | null>(null)
-const pendingCreatePayload = ref<any>(null)
+const mixedChannelWarning = useMixedChannelWarning()
+const showMixedChannelWarning = mixedChannelWarning.show
+const mixedChannelWarningDetails = mixedChannelWarning.details
 const showAdvancedOAuth = ref(false)
 const showGeminiHelpDialog = ref(false)

@@ -2583,6 +2583,7 @@ const resetForm = () => {
  geminiOAuth.resetState()
  antigravityOAuth.resetState()
  oauthFlowRef.value?.reset()
+  mixedChannelWarning.cancel()
 }

 const handleClose = () => {
@@ -2593,24 +2594,16 @@ const handleClose = () => {
 const doCreateAccount = async (payload: any) => {
  submitting.value = true
  try {
-    await adminAPI.accounts.create(payload)
-    appStore.showSuccess(t('admin.accounts.accountCreated'))
-    emit('created')
-    handleClose()
-  } catch (error: any) {
-    // Handle 409 mixed_channel_warning - show confirmation dialog
-    if (error.response?.status === 409 && error.response?.data?.error === 'mixed_channel_warning') {
-      const details = error.response.data.details || {}
-      mixedChannelWarningDetails.value = {
-        groupName: details.group_name || 'Unknown',
-        currentPlatform: details.current_platform || 'Unknown',
-        otherPlatform: details.other_platform || 'Unknown'
+    await mixedChannelWarning.tryRequest(payload, (p) => adminAPI.accounts.create(p), {
+      onSuccess: () => {
+        appStore.showSuccess(t('admin.accounts.accountCreated'))
+        emit('created')
+        handleClose()
+      },
+      onError: (error: any) => {
+        appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToCreate'))
      }
-      pendingCreatePayload.value = payload
-      showMixedChannelWarning.value = true
-    } else {
-      appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToCreate'))
-    }
+    })
  } finally {
    submitting.value = false
  }
@@ -2618,28 +2611,16 @@ const doCreateAccount = async (payload: any) => {

 // Handle mixed channel warning confirmation
 const handleMixedChannelConfirm = async () => {
-  showMixedChannelWarning.value = false
-  if (pendingCreatePayload.value) {
-    pendingCreatePayload.value.confirm_mixed_channel_risk = true
-    submitting.value = true
-    try {
-      await adminAPI.accounts.create(pendingCreatePayload.value)
-      appStore.showSuccess(t('admin.accounts.accountCreated'))
-      emit('created')
-      handleClose()
-    } catch (error: any) {
-      appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToCreate'))
-    } finally {
-      submitting.value = false
-      pendingCreatePayload.value = null
-    }
+  submitting.value = true
+  try {
+    await mixedChannelWarning.confirm()
+  } finally {
+    submitting.value = false
  }
 }

 const handleMixedChannelCancel = () => {
-  showMixedChannelWarning.value = false
-  pendingCreatePayload.value = null
-  mixedChannelWarningDetails.value = null
+  mixedChannelWarning.cancel()
 }

 const handleSubmit = async () => {
@@ -2795,7 +2776,7 @@ const createAccountAndFinish = async (
  if (!applyTempUnschedConfig(credentials)) {
    return
  }
-  const payload: any = {
+  await doCreateAccount({
    name: form.name,
    notes: form.notes,
    platform,
@@ -2809,31 +2790,7 @@ const createAccountAndFinish = async (
    group_ids: form.group_ids,
    expires_at: form.expires_at,
    auto_pause_on_expired: autoPauseOnExpired.value
-  }
-
-  try {
-    await adminAPI.accounts.create(payload)
-  } catch (error: any) {
-    // Handle 409 mixed_channel_warning - show confirmation dialog
-    // Note: upstream Antigravity create path uses createAccountAndFinish directly, so mixed warning
-    // must be handled here as well (otherwise user only sees a generic "failed" toast).
-    if (error.response?.status === 409 && error.response?.data?.error === 'mixed_channel_warning') {
-      const details = error.response.data.details || {}
-      mixedChannelWarningDetails.value = {
-        groupName: details.group_name || 'Unknown',
-        currentPlatform: details.current_platform || 'Unknown',
-        otherPlatform: details.other_platform || 'Unknown'
-      }
-      pendingCreatePayload.value = payload
-      showMixedChannelWarning.value = true
-      return
-    }
-    throw error
-  }
-
-  appStore.showSuccess(t('admin.accounts.accountCreated'))
-  emit('created')
-  handleClose()
+  })
 }

 // OpenAI OAuth 授权码兑换
--- a/frontend/src/components/account/EditAccountModal.vue
+++ b/frontend/src/components/account/EditAccountModal.vue
@@ -994,6 +994,7 @@ import ProxySelector from '@/components/common/ProxySelector.vue'
 import GroupSelector from '@/components/common/GroupSelector.vue'
 import ModelWhitelistSelector from '@/components/account/ModelWhitelistSelector.vue'
 import { formatDateTimeLocalInput, parseDateTimeLocalInput } from '@/utils/format'
+import { useMixedChannelWarning } from '@/composables/useMixedChannelWarning'
 import {
  getPresetMappingsByPlatform,
  commonErrorCodes,
@@ -1060,10 +1061,9 @@ const antigravityModelMappings = ref<ModelMapping[]>([])
 const tempUnschedEnabled = ref(false)
 const tempUnschedRules = ref<TempUnschedRuleForm[]>([])

-// Mixed channel warning dialog state
-const showMixedChannelWarning = ref(false)
-const mixedChannelWarningDetails = ref<{ groupName: string; currentPlatform: string; otherPlatform: string } | null>(null)
-const pendingUpdatePayload = ref<Record<string, unknown> | null>(null)
+const mixedChannelWarning = useMixedChannelWarning()
+const showMixedChannelWarning = mixedChannelWarning.show
+const mixedChannelWarningDetails = mixedChannelWarning.details

 // Quota control state (Anthropic OAuth/SetupToken only)
 const windowCostEnabled = ref(false)
@@ -1525,11 +1525,13 @@ const parseDateTimeLocal = parseDateTimeLocalInput

 // Methods
 const handleClose = () => {
+  mixedChannelWarning.cancel()
  emit('close')
 }

 const handleSubmit = async () => {
  if (!props.account) return
+  const accountID = props.account.id

  submitting.value = true
  const updatePayload: Record<string, unknown> = { ...form }
@@ -1698,24 +1700,18 @@ const handleSubmit = async () => {
      updatePayload.extra = newExtra
    }

-    await adminAPI.accounts.update(props.account.id, updatePayload)
-    appStore.showSuccess(t('admin.accounts.accountUpdated'))
-    emit('updated')
-    handleClose()
-  } catch (error: any) {
-    // Handle 409 mixed_channel_warning - show confirmation dialog
-    if (error.response?.status === 409 && error.response?.data?.error === 'mixed_channel_warning') {
-      const details = error.response.data.details || {}
-      mixedChannelWarningDetails.value = {
-        groupName: details.group_name || 'Unknown',
-        currentPlatform: details.current_platform || 'Unknown',
-        otherPlatform: details.other_platform || 'Unknown'
+    await mixedChannelWarning.tryRequest(updatePayload, (p) => adminAPI.accounts.update(accountID, p), {
+      onSuccess: () => {
+        appStore.showSuccess(t('admin.accounts.accountUpdated'))
+        emit('updated')
+        handleClose()
+      },
+      onError: (error: any) => {
+        appStore.showError(error.response?.data?.message || error.response?.data?.detail || t('admin.accounts.failedToUpdate'))
      }
-      pendingUpdatePayload.value = updatePayload
-      showMixedChannelWarning.value = true
-    } else {
-      appStore.showError(error.response?.data?.message || error.response?.data?.detail || t('admin.accounts.failedToUpdate'))
-    }
+    })
+  } catch (error: any) {
+    appStore.showError(error.response?.data?.message || error.response?.data?.detail || t('admin.accounts.failedToUpdate'))
  } finally {
    submitting.value = false
  }
@@ -1723,27 +1719,15 @@ const handleSubmit = async () => {

 // Handle mixed channel warning confirmation
 const handleMixedChannelConfirm = async () => {
-  showMixedChannelWarning.value = false
-  if (pendingUpdatePayload.value && props.account) {
-    pendingUpdatePayload.value.confirm_mixed_channel_risk = true
-    submitting.value = true
-    try {
-      await adminAPI.accounts.update(props.account.id, pendingUpdatePayload.value)
-      appStore.showSuccess(t('admin.accounts.accountUpdated'))
-      emit('updated')
-      handleClose()
-    } catch (error: any) {
-      appStore.showError(error.response?.data?.message || error.response?.data?.detail || t('admin.accounts.failedToUpdate'))
-    } finally {
-      submitting.value = false
-      pendingUpdatePayload.value = null
-    }
+  submitting.value = true
+  try {
+    await mixedChannelWarning.confirm()
+  } finally {
+    submitting.value = false
  }
 }

 const handleMixedChannelCancel = () => {
-  showMixedChannelWarning.value = false
-  pendingUpdatePayload.value = null
-  mixedChannelWarningDetails.value = null
+  mixedChannelWarning.cancel()
 }
 </script>