陈子默
7e7c236c2a
- 收敛 easyflow-ui-admin 的 lint、格式和类型问题 - 修正 demo 页面与管理端前端构建失败点 - 验证 pnpm lint 与 pnpm build 均已通过
141 lines
2.8 KiB
Vue
141 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { $t } from '@easyflow/locales';
|
|
|
|
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
|
|
|
|
import { useQRCode } from '@vueuse/integrations/useQRCode';
|
|
|
|
import Title from './auth-title.vue';
|
|
|
|
interface Props {
|
|
/**
|
|
* @zh_CN 是否处于加载处理状态
|
|
*/
|
|
loading?: boolean;
|
|
/**
|
|
* @zh_CN 登录路径
|
|
*/
|
|
loginPath?: string;
|
|
/**
|
|
* @zh_CN 标题
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* @zh_CN 描述
|
|
*/
|
|
subTitle?: string;
|
|
/**
|
|
* @zh_CN 按钮文本
|
|
*/
|
|
submitButtonText?: string;
|
|
/**
|
|
* @zh_CN 描述
|
|
*/
|
|
description?: string;
|
|
/**
|
|
* @zh_CN 是否显示返回按钮
|
|
*/
|
|
showBack?: boolean;
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'AuthenticationQrCodeLogin',
|
|
});
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
description: '',
|
|
loading: false,
|
|
showBack: true,
|
|
loginPath: '/auth/login',
|
|
submitButtonText: '',
|
|
subTitle: '',
|
|
title: '',
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
const text = ref('https://easyflow.vvbin.cn');
|
|
|
|
const qrcode = useQRCode(text, {
|
|
errorCorrectionLevel: 'H',
|
|
margin: 4,
|
|
});
|
|
|
|
function goToLogin() {
|
|
router.push(props.loginPath);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="auth-qrcode-login">
|
|
<Title>
|
|
<slot name="title">
|
|
{{ title || $t('authentication.welcomeBack') }}
|
|
</slot>
|
|
<template #desc>
|
|
<span class="text-muted-foreground">
|
|
<slot name="subTitle">
|
|
{{ subTitle || $t('authentication.qrcodeSubtitle') }}
|
|
</slot>
|
|
</span>
|
|
</template>
|
|
</Title>
|
|
|
|
<div class="auth-qrcode-panel mt-6">
|
|
<div class="auth-qrcode-frame">
|
|
<img :src="qrcode" alt="qrcode" class="auth-qrcode-image" />
|
|
</div>
|
|
<p class="text-muted-foreground mt-4 text-sm leading-6">
|
|
<slot name="description">
|
|
{{ description || $t('authentication.qrcodePrompt') }}
|
|
</slot>
|
|
</p>
|
|
</div>
|
|
|
|
<EasyFlowButton
|
|
v-if="showBack"
|
|
class="mt-6 h-11 w-full rounded-xl"
|
|
variant="outline"
|
|
@click="goToLogin()"
|
|
>
|
|
{{ $t('common.back') }}
|
|
</EasyFlowButton>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.auth-qrcode-panel {
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-qrcode-frame {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 17rem;
|
|
padding: 1rem;
|
|
margin: 0 auto;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(255 255 255 / 92%),
|
|
rgb(244 249 255 / 96%)
|
|
);
|
|
border: 1px solid hsl(var(--line-subtle));
|
|
border-radius: 1.5rem;
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
|
|
}
|
|
|
|
.auth-qrcode-image {
|
|
width: min(100%, 13rem);
|
|
aspect-ratio: 1;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.dark .auth-qrcode-frame {
|
|
background: linear-gradient(180deg, rgb(14 22 36 / 92%), rgb(11 19 31 / 96%));
|
|
}
|
|
</style>
|