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

liu

2026-09-29 7a6351a1fa5fc6e67b55c475bcd253d6d3e5d68f

 src/views/_core/authentication/login.vue

@@ -1,15 +1,15 @@
<script lang="ts" setup>
import type { VbenFormSchema } from '..\..\..\packages\effects\common-ui\src';
import type { VbenFormSchema } from '@vben/common-ui';

import type { AuthApi } from '#/api/core/auth';

import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { AuthenticationLogin, Verification, z } from '..\..\..\packages\effects\common-ui\src';
import { isCaptchaEnable, isTenantEnable } from '..\..\..\packages\effects\hooks\src';
import { $t } from '..\..\..\packages\locales\src';
import { useAccessStore } from '..\..\..\packages\stores\src';
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';

import {
  checkCaptcha,
@@ -22,7 +22,6 @@

defineOptions({ name: 'Login' });

const { query } = useRoute();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
@@ -33,35 +32,15 @@

const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'

/** 获取租户列表，并默认选中 */
/** 获取租户列表 */
const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
async function fetchTenantList() {
  if (!tenantEnable) {
    return;
  }
  try {
    // 获取租户列表、域名对应租户
    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
    // 获取租户列表
    tenantList.value = await getTenantSimpleList();

    // 选中租户：域名 > store 中的租户 > 首个租户
    let tenantId: null | number = null;
    const websiteTenant = await websiteTenantPromise;
    if (websiteTenant?.id) {
      tenantId = websiteTenant.id;
    }
    // 如果没有从域名获取到租户，尝试从 store 中获取
    if (!tenantId && accessStore.tenantId) {
      tenantId = accessStore.tenantId;
    }
    // 如果还是没有租户，使用列表中的第一个
    if (!tenantId && tenantList.value?.[0]?.id) {
      tenantId = tenantList.value[0].id;
    }

    // 设置选中的租户编号
    accessStore.setTenantId(tenantId);
    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
  } catch (error) {
    console.error('获取租户列表失败:', error);
  }
@@ -90,57 +69,63 @@
  }
}

/** 处理第三方登录 */
const redirect = query?.redirect;
async function handleThirdLogin(type: number) {
  if (type <= 0) {
    return;
  }
  try {
    // 计算 redirectUri
    // tricky: type、redirect 需要先 encode 一次，否则钉钉回调会丢失。配合 social-login.vue#getUrlValue() 使用
    const redirectUri = `${
      location.origin
    }/auth/social-login?${encodeURIComponent(
      `type=${type}&redirect=${redirect || '/'}`,
    )}`;

    // 进行跳转
    window.location.href = await socialAuthRedirect(type, redirectUri);
  } catch (error) {
    console.error('第三方登录处理失败:', error);
  }
}

/** 组件挂载时获取租户信息 */
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 [
    {
      component: 'VbenSelect',
      componentProps: {
        options: tenantList.value.map((item) => ({
          label: item.name,
          value: item.id.toString(),
        })),
        placeholder: $t('authentication.tenantTip'),
      },
      fieldName: 'tenantId',
      label: $t('authentication.tenant'),
      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
      dependencies: {
        triggerFields: ['tenantId'],
        if: tenantEnable,
        trigger(values) {
          if (values.tenantId) {
            accessStore.setTenantId(Number(values.tenantId));
          }
        },
      },
    },
    // {
    //   component: 'VbenSelect',
    //   componentProps: {
    //     options: tenantList.value.map((item) => ({
    //       label: item.name,
    //       value: item.id.toString(),
    //     })),
    //     placeholder: $t('authentication.tenantTip'),
    //   },
    //   fieldName: 'tenantId',
    //   label: $t('authentication.tenant'),
    //   dependencies: {
    //     triggerFields: ['tenantId'],
    //     if: tenantEnable,
    //     trigger(values) {
    //       accessStore.setTenantId(values.tenantId ? Number(values.tenantId) : null);
    //     },
    //   },
    // },
    {
      component: 'VbenInput',
      componentProps: {
@@ -175,9 +160,35 @@
      ref="loginRef"
      :form-schema="formSchema"
      :loading="authStore.loginLoading"
      :show-code-login="false"
      :show-qrcode-login="false"
      :show-third-party-login="false"
      :show-register="false"
      :show-forget-password="false"
      :show-doc-link="false"
      @submit="handleLogin"
      @third-login="handleThirdLogin"
    />
    >
      <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"