feat：增加 social-login.vue 社交登录

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

@@ -44,6 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   submit: [Recordable<any>];
+  thirdLogin: [type: number];
 }>();
 
 const [Form, formApi] = useVbenForm(
@@ -80,6 +81,15 @@ function handleGo(path: string) {
   router.push(path);
 }
 
+/**
+ * 处理第三方登录
+ *
+ * @param type 第三方平台类型
+ */
+function handleThirdLogin(type: number) {
+  emit('thirdLogin', type);
+}
+
 onMounted(() => {
   if (localUsername) {
     formApi.setFieldValue('username', localUsername);
@@ -168,7 +178,7 @@ defineExpose({
 
     <!-- 第三方登录 -->
     <slot name="third-party-login">
-      <ThirdPartyLogin v-if="showThirdPartyLogin" />
+      <ThirdPartyLogin v-if="showThirdPartyLogin" @third-login="handleThirdLogin" />
     </slot>
 
     <slot name="to-register">

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben/icons';
+import { MdiGithub, MdiQqchat, MdiWechat, AntdDingTalk } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { VbenIconButton } from '@vben-core/shadcn-ui';
@@ -7,6 +7,19 @@ import { VbenIconButton } from '@vben-core/shadcn-ui';
 defineOptions({
   name: 'ThirdPartyLogin',
 });
+
+const emit = defineEmits<{
+  thirdLogin: [type: number];
+}>();
+
+/**
+ * 处理第三方登录点击
+ *
+ * @param type 第三方平台类型
+ */
+function handleThirdLogin(type: number) {
+  emit('thirdLogin', type);
+}
 </script>
 
 <template>
@@ -20,18 +33,18 @@ defineOptions({
     </div>
 
     <div class="mt-4 flex flex-wrap justify-center">
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="handleThirdLogin(30)">
         <MdiWechat />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="handleThirdLogin(20)">
+        <AntdDingTalk />
+      </VbenIconButton>
+      <VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
         <MdiQqchat />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
+      <VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
         <MdiGithub />
       </VbenIconButton>
-      <VbenIconButton class="mb-3">
-        <MdiGoogle />
-      </VbenIconButton>
     </div>
   </div>
 </template>

packages/icons/src/iconify/index.ts

@@ -8,10 +8,10 @@ export const MdiWechat = createIconifyIcon('mdi:wechat');
 
 export const MdiGithub = createIconifyIcon('mdi:github');
 
-export const MdiGoogle = createIconifyIcon('mdi:google');
-
 export const MdiQqchat = createIconifyIcon('mdi:qqchat');
 
+export const AntdDingTalk = createIconifyIcon('ant-design:dingtalk')
+
 export const MdiCheckboxMarkedCircleOutline = createIconifyIcon(
   'mdi:checkbox-marked-circle-outline',
 );