From 1589292bbb49d75d45071f8c39d62bc9af2eccbf Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 9 Aug 2024 09:00:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20oauth=E7=99=BB=E5=BD=95(=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20=E4=B8=8D=E5=8C=85=E5=90=AB=E9=80=BB=E8=BE=91)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/_core/authentication/login.vue  | 15 +++++++++++
 packages/@core/base/icons/src/mdi.ts          |  2 ++
 .../common-ui/src/authentication/login.vue    |  9 ++++++-
 .../src/authentication/third-party-login.vue  | 27 ++++++++++++-------
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index 3544971e..6454fe96 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/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>
diff --git a/packages/@core/base/icons/src/mdi.ts b/packages/@core/base/icons/src/mdi.ts
index 4a5fbb52..781845a9 100644
--- a/packages/@core/base/icons/src/mdi.ts
+++ b/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');
diff --git a/packages/effects/common-ui/src/authentication/login.vue b/packages/effects/common-ui/src/authentication/login.vue
index d5f4a7f5..552ae1af 100644
--- a/packages/effects/common-ui/src/authentication/login.vue
+++ b/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') }}
diff --git a/packages/effects/common-ui/src/authentication/third-party-login.vue b/packages/effects/common-ui/src/authentication/third-party-login.vue
index 47326796..98afc9a8 100644
--- a/packages/effects/common-ui/src/authentication/third-party-login.vue
+++ b/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">
-      <VbenIconButton class="mb-3">
-        <MdiWechat />
+    <div class="mt-4 flex flex-wrap justify-around">
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'wechat')">
+        <MdiWechat class="size-[24px] text-green-600" />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
-        <MdiQqchat />
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'qq')">
+        <MdiQqchat class="size-[24px]" />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
-        <MdiGithub />
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'github')">
+        <MdiGithub class="size-[24px]" />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
-        <MdiGoogle />
+      <VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'gitee')">
+        <GiteeIcon class="size-[24px] text-red-700" />
       </VbenIconButton>
     </div>
   </div>