fix(@vben/web-antd): 优化企业微信扫码登录体验

自动社交登录时显示 loading 状态,跳过租户列表加载,
避免闪烁显示登录表单和租户错误信息。
租户 ID 已持久化在 store 中,无需重新获取。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
lzh
2026-03-24 09:38:05 +08:00
parent f77a8c3e4c
commit 2c678c3a82

View File

@@ -137,11 +137,19 @@ async function handleVerifySuccess({ captchaVerification }: any) {
}
}
/** 组件挂载时获取租户信息 */
onMounted(async () => {
await fetchTenantList();
// 是否正在自动社交登录(有 code 说明是 OAuth 回调,直接登录无需展示表单)
const isAutoSocialLogin = ref(!!socialCode);
await tryLogin();
/** 组件挂载时 */
onMounted(async () => {
if (socialCode) {
// 自动社交登录跳过租户列表加载tenantId 已持久化在 store 中)
await tryLogin();
return;
}
// 手动登录绑定:需要展示表单和租户列表
isAutoSocialLogin.value = false;
await fetchTenantList();
});
const formSchema = computed((): VbenFormSchema[] => {
@@ -198,25 +206,39 @@ const formSchema = computed((): VbenFormSchema[] => {
<template>
<div>
<AuthenticationLogin
ref="loginRef"
:form-schema="formSchema"
:loading="authStore.loginLoading"
:show-code-login="false"
:show-qrcode-login="false"
:show-third-party-login="false"
:show-register="false"
@submit="handleLogin"
/>
<Verification
ref="verifyRef"
v-if="captchaEnable"
:captcha-type="captchaType"
:check-captcha-api="checkCaptcha"
:get-captcha-api="getCaptcha"
:img-size="{ width: '400px', height: '200px' }"
mode="pop"
@on-success="handleVerifySuccess"
/>
<!-- 自动社交登录中显示 loading -->
<div
v-if="isAutoSocialLogin"
class="flex flex-col items-center justify-center py-20"
>
<div
class="mb-4 size-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
/>
<span class="text-sm text-muted-foreground">正在登录中...</span>
</div>
<!-- 未绑定时显示账号密码表单供用户绑定登录 -->
<template v-else>
<AuthenticationLogin
ref="loginRef"
:form-schema="formSchema"
:loading="authStore.loginLoading"
:show-code-login="false"
:show-qrcode-login="false"
:show-third-party-login="false"
:show-register="false"
@submit="handleLogin"
/>
<Verification
v-if="captchaEnable"
ref="verifyRef"
:captcha-type="captchaType"
:check-captcha-api="checkCaptcha"
:get-captcha-api="getCaptcha"
:img-size="{ width: '400px', height: '200px' }"
mode="pop"
@on-success="handleVerifySuccess"
/>
</template>
</div>
</template>