<script setup lang="ts">
|
import { $t } from '@vben/locales';
|
|
import { Col, Row, Tooltip } from 'ant-design-vue';
|
|
import { accountBindList } from '../oauth-common';
|
|
defineOptions({
|
name: 'OAuthLogin',
|
});
|
|
/**
|
* 有action方法才会显示
|
*/
|
const clientList = accountBindList.filter((item) => item.action);
|
</script>
|
|
<template>
|
<div class="w-full sm:mx-auto md:max-w-md">
|
<div class="mt-4 flex items-center justify-between">
|
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
<span class="text-muted-foreground text-center text-xs uppercase">
|
{{ $t('authentication.thirdPartyLogin') }}
|
</span>
|
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
</div>
|
<Row class="enter-x flex items-center justify-evenly">
|
<!-- todo 这里在点击登录时要disabled -->
|
<Col v-for="item in clientList" :key="item.key" :span="4" class="my-2">
|
<Tooltip :title="`${item.title}登录`">
|
<span class="flex cursor-pointer items-center justify-center">
|
<component
|
:is="item.avatar"
|
v-if="item.avatar"
|
:style="{ color: item.color }"
|
class="size-[24px]"
|
@click="item.action"
|
/>
|
</span>
|
</Tooltip>
|
</Col>
|
</Row>
|
</div>
|
</template>
|
