131 lines
4.6 KiB
Vue
131 lines
4.6 KiB
Vue
<template>
|
||
<div class="flex items-center justify-center min-h-screen px-5 py-5 bg-gray-100 dark:bg-slate-900 min-w-screen">
|
||
<!-- 右上角控制组件 -->
|
||
<Control />
|
||
|
||
<div
|
||
class="w-full overflow-hidden bg-white border border-gray-200 shadow-lg dark:bg-slate-800 rounded-3xl dark:border-slate-700"
|
||
style="max-width: 1000px"
|
||
>
|
||
<div class="w-full md:flex">
|
||
<!-- 左侧插图区域 -->
|
||
<div
|
||
class="hidden w-[55%] bg-gradient-to-br from-blue-400 via-blue-300 to-blue-200 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900/95 md:flex md:items-center md:justify-center"
|
||
>
|
||
<img
|
||
class="w-[85%] h-auto max-h-[650px] object-contain opacity-100 dark:opacity-75 transition-opacity duration-300 hover:opacity-90"
|
||
:src="$fileUrl(!themeConfig.background ? illustration : themeConfig.background)"
|
||
alt="Login illustration"
|
||
@error="$fileRetry(!themeConfig.background ? illustration : themeConfig.background)" />
|
||
</div>
|
||
|
||
<!-- 右侧登录表单区域 -->
|
||
<div class="w-full px-5 py-12 md:w-[45%] md:px-12">
|
||
<div class="mb-12 text-center">
|
||
<h1 class="text-4xl font-bold text-gray-900 dark:text-white tracking-wide font-['Inter']">{{ getThemeConfig.globalTitle }}</h1>
|
||
<!-- 租户选择 -->
|
||
<div class="mt-6">
|
||
<tenant class="shadow-sm" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full px-5">
|
||
<!-- 登录表单组件 -->
|
||
<register v-if="loginType === LoginTypeEnum.REGISTER" @change="changeLoginType" />
|
||
<password v-if="loginType === LoginTypeEnum.PASSWORD" @signInSuccess="signInSuccess" @change="changeLoginType" />
|
||
<mobile v-if="loginType === LoginTypeEnum.MOBILE" @signInSuccess="signInSuccess" @change="changeLoginType" />
|
||
<expire v-if="loginType === LoginTypeEnum.EXPIRE" :username="username" @change="changeLoginType" />
|
||
|
||
<!-- 社交登录 -->
|
||
<!-- <social @signInSuccess="signInSuccess" /> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小程序二维码 -->
|
||
<!-- <Qrcode /> -->
|
||
|
||
<!-- Footer 组件 -->
|
||
<!-- <Footer /> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="loginIndex">
|
||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||
import { NextLoading } from '/@/utils/loading';
|
||
import illustration from '/@/assets/login/login_bg.svg';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { formatAxis } from '/@/utils/formatTime';
|
||
import { useMessage } from '/@/hooks/message';
|
||
import { Session, Local } from '/@/utils/storage';
|
||
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
||
import { LoginTypeEnum } from '/@/api/login';
|
||
|
||
// 引入组件
|
||
const Password = defineAsyncComponent(() => import('./component/password.vue'));
|
||
const Mobile = defineAsyncComponent(() => import('./component/mobile.vue'));
|
||
const Social = defineAsyncComponent(() => import('./component/social.vue'));
|
||
const Register = defineAsyncComponent(() => import('./component/register.vue'));
|
||
const Expire = defineAsyncComponent(() => import('./component/expire.vue'));
|
||
const Tenant = defineAsyncComponent(() => import('./component/tenant.vue'));
|
||
const Control = defineAsyncComponent(() => import('./component/control.vue'));
|
||
const Qrcode = defineAsyncComponent(() => import('./component/qrcode.vue'));
|
||
const Footer = defineAsyncComponent(() => import('./component/footer.vue'));
|
||
|
||
// 定义变量内容
|
||
const storesThemeConfig = useThemeConfig();
|
||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||
const { t } = useI18n();
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
// 登录方式
|
||
const loginType = ref(LoginTypeEnum.PASSWORD);
|
||
// 用户名
|
||
const username = ref('');
|
||
|
||
// 修改登录类型
|
||
const changeLoginType = (type: LoginTypeEnum, name?: string) => {
|
||
loginType.value = type;
|
||
if (name) {
|
||
username.value = name;
|
||
}
|
||
};
|
||
|
||
// 获取布局配置信息
|
||
const getThemeConfig = computed(() => {
|
||
return themeConfig.value;
|
||
});
|
||
|
||
// 登录成功后的跳转处理事件
|
||
const signInSuccess = async () => {
|
||
const isNoPower = await initBackEndControlRoutes();
|
||
if (isNoPower) {
|
||
useMessage().warning('抱歉，您没有登录权限');
|
||
Session.clear();
|
||
} else {
|
||
// 初始化登录成功时间问候语
|
||
let currentTimeInfo = formatAxis(new Date());
|
||
if (route.query?.redirect) {
|
||
router.push({
|
||
path: <string>route.query?.redirect,
|
||
query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
|
||
});
|
||
} else {
|
||
router.push('/');
|
||
}
|
||
// 登录成功提示
|
||
const signInText = t('signInText');
|
||
useMessage().success(`${currentTimeInfo}，${signInText}`);
|
||
// 添加 loading，防止第一次进入界面时出现短暂空白
|
||
NextLoading.start();
|
||
}
|
||
};
|
||
|
||
// 页面加载时初始化语言
|
||
onMounted(() => {
|
||
NextLoading.done();
|
||
});
|
||
</script>
|