feat(auth): reclaim stale identities and refresh profile UI

2026-04-21 07:48:24 -07:00
parent c0371e9104
commit d5819181ea
16 changed files with 633 additions and 105 deletions
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -361,11 +361,13 @@ export type WeChatOAuthUnavailableReason =
  | 'capability_unknown'
  | 'external_browser_required'
  | 'wechat_browser_required'
+  | 'native_app_required'

 export interface ResolvedWeChatOAuthStart {
  mode: WeChatOAuthMode | null
  openEnabled: boolean
  mpEnabled: boolean
+  mobileEnabled: boolean
  isWeChatBrowser: boolean
  unavailableReason: WeChatOAuthUnavailableReason | null
 }
@@ -374,6 +376,22 @@ export type WeChatOAuthPublicSettings = {
  wechat_oauth_enabled?: boolean
  wechat_oauth_open_enabled?: boolean
  wechat_oauth_mp_enabled?: boolean
+  wechat_oauth_mobile_enabled?: boolean
+}
+
+export function isWeChatWebOAuthEnabled(
+  settings: WeChatOAuthPublicSettings | null | undefined,
+): boolean {
+  const legacyEnabled = settings?.wechat_oauth_enabled ?? false
+  const hasExplicitCapabilities =
+    typeof settings?.wechat_oauth_open_enabled === 'boolean' ||
+    typeof settings?.wechat_oauth_mp_enabled === 'boolean'
+
+  if (!hasExplicitCapabilities) {
+    return legacyEnabled
+  }
+
+  return settings?.wechat_oauth_open_enabled === true || settings?.wechat_oauth_mp_enabled === true
 }

 export function hasExplicitWeChatOAuthCapabilities(
@@ -401,24 +419,27 @@ export function resolveWeChatOAuthStart(
  const mpEnabled = typeof settings?.wechat_oauth_mp_enabled === 'boolean'
    ? settings.wechat_oauth_mp_enabled
    : legacyEnabled
+  const mobileEnabled = typeof settings?.wechat_oauth_mobile_enabled === 'boolean'
+    ? settings.wechat_oauth_mobile_enabled
+    : false

  if (isWeChatBrowser) {
    if (mpEnabled) {
-      return { mode: 'mp', openEnabled, mpEnabled, isWeChatBrowser, unavailableReason: null }
+      return { mode: 'mp', openEnabled, mpEnabled, mobileEnabled, isWeChatBrowser, unavailableReason: null }
    }
    if (openEnabled) {
-      return { mode: null, openEnabled, mpEnabled, isWeChatBrowser, unavailableReason: 'external_browser_required' }
+      return { mode: null, openEnabled, mpEnabled, mobileEnabled, isWeChatBrowser, unavailableReason: 'external_browser_required' }
    }
-    return { mode: null, openEnabled, mpEnabled, isWeChatBrowser, unavailableReason: 'not_configured' }
+    return { mode: null, openEnabled, mpEnabled, mobileEnabled, isWeChatBrowser, unavailableReason: 'not_configured' }
  }

  if (openEnabled) {
-    return { mode: 'open', openEnabled, mpEnabled, isWeChatBrowser, unavailableReason: null }
+    return { mode: 'open', openEnabled, mpEnabled, mobileEnabled, isWeChatBrowser, unavailableReason: null }
  }
  if (mpEnabled) {
-    return { mode: null, openEnabled, mpEnabled, isWeChatBrowser, unavailableReason: 'wechat_browser_required' }
+    return { mode: null, openEnabled, mpEnabled, mobileEnabled, isWeChatBrowser, unavailableReason: 'wechat_browser_required' }
  }
-  return { mode: null, openEnabled, mpEnabled, isWeChatBrowser, unavailableReason: 'not_configured' }
+  return { mode: null, openEnabled, mpEnabled, mobileEnabled, isWeChatBrowser, unavailableReason: 'not_configured' }
 }

 export function resolveWeChatOAuthStartStrict(
@@ -435,6 +456,7 @@ export function resolveWeChatOAuthStartStrict(
      mode: null,
      openEnabled: false,
      mpEnabled: false,
+      mobileEnabled: false,
      isWeChatBrowser,
      unavailableReason: 'capability_unknown',
    }
--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -74,10 +74,14 @@
            class="flex items-center gap-2 rounded-xl p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-800"
            aria-label="User Menu"
          >
-            <div
-              class="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 text-sm font-medium text-white shadow-sm"
-            >
-              {{ userInitials }}
+            <div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 text-sm font-medium text-white shadow-sm">
+              <img
+                v-if="avatarUrl"
+                :src="avatarUrl"
+                :alt="displayName"
+                class="h-full w-full object-cover"
+              >
+              <span v-else>{{ userInitials }}</span>
            </div>
            <div class="hidden text-left md:block">
              <div class="text-sm font-medium text-gray-900 dark:text-white">
@@ -232,6 +236,7 @@ const dropdownOpen = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
 const contactInfo = computed(() => appStore.contactInfo)
 const docUrl = computed(() => appStore.docUrl)
+const avatarUrl = computed(() => user.value?.avatar_url?.trim() || '')

 // 只在标准模式的管理员下显示新手引导按钮
 const showOnboardingButton = computed(() => {
--- a/frontend/src/components/user/profile/ProfileAvatarCard.vue
+++ b/frontend/src/components/user/profile/ProfileAvatarCard.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="card">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.avatar.title') }}
      </h2>
@@ -9,8 +12,9 @@
      </p>
    </div>

-    <div class="flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start">
+    <div :class="props.embedded ? 'space-y-3' : 'flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start'">
      <div
+        v-if="!props.embedded"
        class="flex h-24 w-24 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-3xl font-bold text-white shadow-lg shadow-primary-500/20"
      >
        <img
@@ -22,9 +26,12 @@
        <span v-else>{{ avatarInitial }}</span>
      </div>

-      <div class="min-w-0 flex-1 space-y-4">
+      <div :class="props.embedded ? 'space-y-3' : 'min-w-0 flex-1 space-y-4'">
        <div class="space-y-1">
-          <p class="text-sm font-medium text-gray-900 dark:text-white">
+          <p v-if="props.embedded" class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ t('profile.avatar.title') }}
+          </p>
+          <p v-else class="text-sm font-medium text-gray-900 dark:text-white">
            {{ displayName }}
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400">
@@ -78,9 +85,12 @@ import { useAuthStore } from '@/stores/auth'
 import type { User } from '@/types'
 import { extractApiErrorMessage } from '@/utils/apiError'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  user: User | null
-}>()
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const { t } = useI18n()
 const authStore = useAuthStore()
--- a/frontend/src/components/user/profile/ProfileEditForm.vue
+++ b/frontend/src/components/user/profile/ProfileEditForm.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="card">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.editProfile') }}
      </h2>
    </div>
-    <div class="px-6 py-6">
+    <div :class="props.embedded ? '' : 'px-6 py-6'">
      <form @submit.prevent="handleUpdateProfile" class="space-y-4">
+        <div v-if="props.embedded">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ t('profile.editProfile') }}
+          </p>
+        </div>
        <div>
          <label for="username" class="input-label">
            {{ t('profile.username') }}
@@ -37,9 +45,12 @@ import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { userAPI } from '@/api'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  initialUsername: string
-}>()
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const { t } = useI18n()
 const authStore = useAuthStore()
--- a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
+++ b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="card overflow-hidden">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card overflow-hidden'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.authBindings.title') }}
      </h2>
@@ -9,11 +12,23 @@
      </p>
    </div>

-    <div class="divide-y divide-gray-100 dark:divide-dark-700">
+    <div :class="props.embedded ? 'space-y-4' : 'divide-y divide-gray-100 dark:divide-dark-700'">
+      <div v-if="props.embedded">
+        <p class="text-sm font-semibold text-gray-900 dark:text-white">
+          {{ t('profile.authBindings.title') }}
+        </p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          {{ t('profile.authBindings.description') }}
+        </p>
+      </div>
      <div
        v-for="item in providerItems"
        :key="item.provider"
-        class="px-6 py-5"
+        :class="
+          props.embedded
+            ? 'rounded-2xl border border-gray-100 bg-gray-50/70 p-4 dark:border-dark-700 dark:bg-dark-900/30'
+            : 'px-6 py-5'
+        "
      >
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div class="flex min-w-0 flex-1 items-start gap-4">
@@ -154,6 +169,7 @@ const props = withDefaults(
    wechatEnabled?: boolean
    wechatOpenEnabled?: boolean
    wechatMpEnabled?: boolean
+    embedded?: boolean
  }>(),
  {
    linuxdoEnabled: false,
@@ -162,6 +178,7 @@ const props = withDefaults(
    wechatEnabled: false,
    wechatOpenEnabled: undefined,
    wechatMpEnabled: undefined,
+    embedded: false,
  }
 )

--- a/frontend/src/components/user/profile/ProfileInfoCard.vue
+++ b/frontend/src/components/user/profile/ProfileInfoCard.vue
@@ -3,9 +3,9 @@
    <div
      class="border-b border-gray-100 bg-gradient-to-r from-primary-500/10 to-primary-600/5 px-6 py-5 dark:border-dark-700 dark:from-primary-500/20 dark:to-primary-600/10"
    >
-      <div class="flex items-center gap-4">
+      <div class="flex flex-col gap-5 lg:flex-row lg:items-start">
        <div
-          class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
+          class="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-[1.5rem] bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
        >
          <img
            v-if="avatarUrl"
@@ -15,48 +15,78 @@
          >
          <span v-else>{{ avatarInitial }}</span>
        </div>
-        <div class="min-w-0 flex-1">
-          <h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
-            {{ displayName }}
-          </h2>
-          <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
-            {{ user?.email }}
-          </p>
-          <div class="mt-1 flex items-center gap-2">
-            <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
-              {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
-            </span>
-            <span
-              :class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
-            >
-              {{
-                user?.status === 'active'
-                  ? t('common.active')
-                  : t('common.disabled')
-              }}
-            </span>
+        <div class="min-w-0 flex-1 space-y-5">
+          <div class="space-y-2">
+            <div class="flex flex-wrap items-center gap-2">
+              <h2 class="truncate text-xl font-semibold text-gray-900 dark:text-white">
+                {{ displayName }}
+              </h2>
+              <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
+                {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
+              </span>
+              <span
+                :class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
+              >
+                {{
+                  user?.status === 'active'
+                    ? t('common.active')
+                    : t('common.disabled')
+                }}
+              </span>
+            </div>
+            <p class="truncate text-sm text-gray-500 dark:text-gray-400">
+              {{ user?.email }}
+            </p>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.username') }}
+              </p>
+              <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">
+                {{ user?.username || displayName }}
+              </p>
+            </div>
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.email') }}
+              </p>
+              <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">
+                {{ user?.email || '-' }}
+              </p>
+            </div>
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.status') }}
+              </p>
+              <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+                {{
+                  user?.status === 'active'
+                    ? t('common.active')
+                    : user?.status
+                      ? t('common.disabled')
+                      : '-'
+                }}
+              </p>
+            </div>
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.role') }}
+              </p>
+              <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+                {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
+              </p>
+            </div>
          </div>
        </div>
      </div>
    </div>
-    <div class="px-6 py-4">
-      <div class="space-y-3">
-        <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
-          <Icon name="mail" size="sm" class="text-gray-400 dark:text-gray-500" />
-          <span class="truncate">{{ user?.email }}</span>
-        </div>
-        <div
-          v-if="user?.username"
-          class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
-        >
-          <Icon name="user" size="sm" class="text-gray-400 dark:text-gray-500" />
-          <span class="truncate">{{ user.username }}</span>
-        </div>
-      </div>

+    <div class="space-y-6 px-6 py-6">
      <div
        v-if="sourceHints.length"
-        class="mt-4 grid gap-2 rounded-2xl border border-gray-100 bg-gray-50/80 p-3 text-xs text-gray-500 dark:border-dark-700 dark:bg-dark-900/30 dark:text-gray-400"
+        class="grid gap-2 rounded-2xl border border-gray-100 bg-gray-50/80 p-4 text-xs text-gray-500 dark:border-dark-700 dark:bg-dark-900/30 dark:text-gray-400"
      >
        <div
          v-for="hint in sourceHints"
@@ -67,6 +97,39 @@
          <span>{{ hint.text }}</span>
        </div>
      </div>
+
+      <div class="grid gap-6 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+          <ProfileAvatarCard
+            :user="user"
+            embedded
+          />
+        </div>
+
+        <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+          <ProfileEditForm
+            :initial-username="user?.username || ''"
+            embedded
+          />
+        </div>
+      </div>
+
+      <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+        <ProfileIdentityBindingsSection
+          :user="user"
+          :linuxdo-enabled="linuxdoEnabled"
+          :oidc-enabled="oidcEnabled"
+          :oidc-provider-name="oidcProviderName"
+          :wechat-enabled="wechatEnabled"
+          :wechat-open-enabled="wechatOpenEnabled"
+          :wechat-mp-enabled="wechatMpEnabled"
+          embedded
+        />
+      </div>
+
+      <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+        <ProfilePasswordForm embedded />
+      </div>
    </div>
  </div>
 </template>
@@ -75,11 +138,28 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Icon from '@/components/icons/Icon.vue'
+import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
+import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
+import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
+import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
 import type { User, UserAuthProvider, UserProfileSourceContext } from '@/types'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  user: User | null
-}>()
+  linuxdoEnabled?: boolean
+  oidcEnabled?: boolean
+  oidcProviderName?: string
+  wechatEnabled?: boolean
+  wechatOpenEnabled?: boolean
+  wechatMpEnabled?: boolean
+}>(), {
+  linuxdoEnabled: false,
+  oidcEnabled: false,
+  oidcProviderName: 'OIDC',
+  wechatEnabled: false,
+  wechatOpenEnabled: undefined,
+  wechatMpEnabled: undefined,
+})

 const { t } = useI18n()

--- a/frontend/src/components/user/profile/ProfilePasswordForm.vue
+++ b/frontend/src/components/user/profile/ProfilePasswordForm.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="card">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.changePassword') }}
      </h2>
    </div>
-    <div class="px-6 py-6">
+    <div :class="props.embedded ? '' : 'px-6 py-6'">
      <form @submit.prevent="handleChangePassword" class="space-y-4">
+        <div v-if="props.embedded">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ t('profile.changePassword') }}
+          </p>
+        </div>
        <div>
          <label for="old_password" class="input-label">
            {{ t('profile.currentPassword') }}
@@ -70,6 +78,11 @@ import { userAPI } from '@/api'

 const { t } = useI18n()
 const appStore = useAppStore()
+const props = withDefaults(defineProps<{
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const loading = ref(false)
 const form = ref({
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -898,6 +898,9 @@ export default {
    administrator: 'Administrator',
    user: 'User',
    username: 'Username',
+    email: 'Email',
+    status: 'Status',
+    role: 'Role',
    enterUsername: 'Enter username',
    editProfile: 'Edit Profile',
    updateProfile: 'Update Profile',
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -902,6 +902,9 @@ export default {
    administrator: '管理员',
    user: '用户',
    username: '用户名',
+    email: '邮箱',
+    status: '状态',
+    role: '角色',
    enterUsername: '输入用户名',
    editProfile: '编辑个人资料',
    updateProfile: '更新资料',
--- a/frontend/src/views/user/ProfileView.vue
+++ b/frontend/src/views/user/ProfileView.vue
@@ -22,11 +22,7 @@
        />
      </div>

-      <ProfileInfoCard :user="user" />
-
-      <ProfileAvatarCard :user="user" />
-
-      <ProfileAccountBindingsCard
+      <ProfileInfoCard
        :user="user"
        :linuxdo-enabled="linuxdoOAuthEnabled"
        :oidc-enabled="oidcOAuthEnabled"
@@ -52,9 +48,6 @@
          </div>
        </div>
      </div>
-
-      <ProfileEditForm :initial-username="user?.username || ''" />
-
      <ProfileBalanceNotifyCard
        v-if="user && balanceLowNotifyEnabled"
        :enabled="user.balance_notify_enabled ?? true"
@@ -63,8 +56,6 @@
        :system-default-threshold="systemDefaultThreshold"
        :user-email="user.email"
      />
-
-      <ProfilePasswordForm />
      <ProfileTotpCard />
    </div>
  </AppLayout>
@@ -77,12 +68,9 @@ import { Icon } from '@/components/icons'
 import StatCard from '@/components/common/StatCard.vue'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue'
-import ProfileAccountBindingsCard from '@/components/user/profile/ProfileAccountBindingsCard.vue'
-import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
-import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
 import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
-import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
 import ProfileTotpCard from '@/components/user/profile/ProfileTotpCard.vue'
+import { isWeChatWebOAuthEnabled } from '@/api/auth'
 import { useAppStore } from '@/stores/app'
 import { useAuthStore } from '@/stores/auth'
 import { formatDate } from '@/utils/format'
@@ -141,7 +129,7 @@ onMounted(async () => {
      balanceLowNotifyEnabled.value = settings.balance_low_notify_enabled ?? false
      systemDefaultThreshold.value = settings.balance_low_notify_threshold ?? 0
      linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled ?? false
-      wechatOAuthEnabled.value = settings.wechat_oauth_enabled ?? false
+      wechatOAuthEnabled.value = isWeChatWebOAuthEnabled(settings)
      wechatOAuthOpenEnabled.value = typeof settings.wechat_oauth_open_enabled === 'boolean'
        ? settings.wechat_oauth_open_enabled
        : undefined