feat: oauth登录(页面 不包含逻辑)

apps/web-antd/src/views/_core/authentication/login.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
 
 import { AuthenticationLogin } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
 import { omit } from 'lodash-es';
 
 import { tenantList, type TenantResp } from '#/api';
@@ -73,6 +74,18 @@ async function handleAccountLogin(values: LoginForm) {
     }
   }
 }
+
+function handleOauthLogin(provider: string) {
+  switch (provider) {
+    case 'gitee': {
+      message.success('todo gitee login');
+      break;
+    }
+    default: {
+      message.warn('暂不支持该登录方式');
+    }
+  }
+}
 </script>
 
 <template>
@@ -80,12 +93,14 @@ async function handleAccountLogin(values: LoginForm) {
     ref="loginRef"
     :captcha-base64="captchaInfo.img"
     :loading="authStore.loginLoading"
+    :show-register="false"
     :tenant-options="tenantInfo.voList"
     :use-captcha="captchaInfo.captchaEnabled"
     :use-tenant="tenantInfo.tenantEnabled"
     password-placeholder="密码"
     username-placeholder="用户名"
     @captcha-click="loadCaptcha"
+    @oauth-login="handleOauthLogin"
     @submit="handleAccountLogin"
   />
 </template>

packages/@core/base/icons/src/mdi.ts

@@ -25,3 +25,5 @@ export const CommandLineIcon = createIconifyIcon(
   'flat-color-icons:command-line',
 );
 export const MemoryIcon = createIconifyIcon('la:memory');
+
+export const GiteeIcon = createIconifyIcon('simple-icons:gitee');

packages/effects/common-ui/src/authentication/login.vue

@@ -69,6 +69,10 @@ const emit = defineEmits<{
    * 验证码点击
    */
   captchaClick: [];
+  /**
+   * 第三方登录 platfrom 对应平台的string
+   */
+  oauthLogin: [plateform: string];
   submit: LoginEmits['submit'];
 }>();
 
@@ -269,7 +273,10 @@ defineExpose({ resetCaptcha });
     </div>
 
     <!-- 第三方登录 -->
-    <ThirdPartyLogin v-if="showThirdPartyLogin" />
+    <ThirdPartyLogin
+      v-if="showThirdPartyLogin"
+      @oauth-login="(e) => emit('oauthLogin', e)"
+    />
 
     <div v-if="showRegister" class="text-center text-sm">
       {{ $t('authentication.accountTip') }}

packages/effects/common-ui/src/authentication/third-party-login.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben/icons';
+import { GiteeIcon, MdiGithub, MdiQqchat, MdiWechat } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
   name: 'ThirdPartyLogin',
 });
+
+defineEmits<{
+  /**
+   * 第三方登录 platfrom 对应平台的string
+   */
+  oauthLogin: [plateform: string];
+}>();
 </script>
 
 <template>
@@ -18,18 +25,18 @@ defineOptions({
       <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
     </div>
 
-    <div class="mt-4 flex flex-wrap justify-center">
+    <div class="mt-4 flex flex-wrap justify-around">
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'wechat')">
-        <MdiWechat />
+        <MdiWechat class="size-[24px] text-green-600" />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'qq')">
-        <MdiQqchat />
+        <MdiQqchat class="size-[24px]" />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'github')">
-        <MdiGithub />
+        <MdiGithub class="size-[24px]" />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'gitee')">
-        <MdiGoogle />
+        <GiteeIcon class="size-[24px] text-red-700" />
       </VbenIconButton>
     </div>
   </div>