feat(wxcp): 新增企业微信模块页面与扫码登录入口

liu

2026-09-29 7a6351a1fa5fc6e67b55c475bcd253d6d3e5d68f

 src/views/_core/authentication/login.vue

@@ -5,8 +5,9 @@

import { computed, onMounted, ref } from 'vue';

import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
import { AuthenticationLogin, VbenButton, Verification, z } from '@vben/common-ui';
import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
import { SvgWeChatIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { useAccessStore } from '@vben/stores';

@@ -15,6 +16,7 @@
  getCaptcha,
  getTenantByWebsite,
  getTenantSimpleList,
  socialAuthRedirect,
} from '#/api/core/auth';
import { useAuthStore } from '#/store';

@@ -71,6 +73,37 @@
onMounted(() => {
  fetchTenantList();
});

// ========== 企业微信登录 ==========

/** 企业微信的社交类型，对应后端 SocialTypeEnum.WECHAT_ENTERPRISE */
const WXCP_SOCIAL_TYPE = 30;

const wxcpLoading = ref(false);

/**
 * 企业微信扫码登录
 *
 * 流程：取授权地址 -> 整页跳转到企业微信扫码页 -> 扫码后企业微信带 code/state
 * 回跳到 social-login 页面 -> 该页面调用 /system/auth/social-login 换取令牌
 */
async function handleWxcpLogin() {
  try {
    wxcpLoading.value = true;
    // 注意：type 需要先 encode 一次，配合 social-login 页面的 getUrlValue() 使用；
    // 否则企业微信回跳后 type 参数会被吞掉，导致无法识别社交类型
    const redirectUri = `${location.origin}/auth/social-login?${encodeURIComponent(
      `type=${WXCP_SOCIAL_TYPE}`,
    )}`;
    window.location.href = await socialAuthRedirect(
      WXCP_SOCIAL_TYPE,
      redirectUri,
    );
  } catch (error) {
    console.error('企业微信登录失败:', error);
    wxcpLoading.value = false;
  }
}

const formSchema = computed((): VbenFormSchema[] => {
  return [
@@ -134,7 +167,28 @@
      :show-forget-password="false"
      :show-doc-link="false"
      @submit="handleLogin"
    />
    >
      <template #third-party-login>
        <div class="mt-4">
          <div class="mb-4 flex items-center justify-between">
            <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
            <span class="text-center text-xs text-muted-foreground">
              其他登录方式
            </span>
            <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
          </div>
          <VbenButton
            class="w-full"
            variant="outline"
            :loading="wxcpLoading"
            @click="handleWxcpLogin"
          >
            <SvgWeChatIcon class="mr-2 size-5" />
            企业微信登录
          </VbenButton>
        </div>
      </template>
    </AuthenticationLogin>
    <Verification
      ref="verifyRef"
      v-if="captchaEnable"