2024-05-19 21:20:42 +08:00
|
|
|
<script setup lang="ts">
|
2024-06-08 19:49:06 +08:00
|
|
|
import { computed } from 'vue';
|
2024-06-01 23:15:29 +08:00
|
|
|
|
2024-07-23 00:03:59 +08:00
|
|
|
import { $t } from '@vben/locales';
|
|
|
|
import { preferences, usePreferences } from '@vben/preferences';
|
2024-05-19 21:20:42 +08:00
|
|
|
|
2024-07-15 23:22:00 +08:00
|
|
|
import AuthenticationFormView from './form.vue';
|
2024-05-19 21:20:42 +08:00
|
|
|
import SloganIcon from './icons/slogan.vue';
|
2024-08-17 22:38:37 +08:00
|
|
|
import Toolbar from './toolbar.vue';
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
pageTitle?: string;
|
|
|
|
pageDescription?: string;
|
|
|
|
sloganImage?: string;
|
|
|
|
toolbar?: boolean;
|
|
|
|
toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
|
|
|
|
}
|
2024-05-19 21:20:42 +08:00
|
|
|
|
2024-07-15 23:22:00 +08:00
|
|
|
defineOptions({ name: 'Authentication' });
|
2024-05-19 21:20:42 +08:00
|
|
|
|
2024-08-17 22:38:37 +08:00
|
|
|
withDefaults(defineProps<Props>(), {
|
|
|
|
pageDescription: '',
|
|
|
|
pageTitle: '',
|
|
|
|
sloganImage: '',
|
|
|
|
toolbar: true,
|
|
|
|
toolbarList: () => ['color', 'language', 'layout', 'theme'],
|
|
|
|
});
|
|
|
|
|
2024-06-01 23:15:29 +08:00
|
|
|
const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
|
|
|
|
const appName = computed(() => preferences.app.name);
|
2024-07-15 23:22:00 +08:00
|
|
|
const logoSource = computed(() => preferences.logo.source);
|
2024-05-19 21:20:42 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2024-06-23 19:17:31 +08:00
|
|
|
<div class="flex min-h-full flex-1 select-none overflow-x-hidden">
|
2024-07-15 23:22:00 +08:00
|
|
|
<!-- 左侧认证面板 -->
|
|
|
|
<AuthenticationFormView
|
2024-05-19 21:20:42 +08:00
|
|
|
v-if="authPanelLeft"
|
2024-07-15 23:22:00 +08:00
|
|
|
class="min-h-full w-2/5"
|
2024-05-19 21:20:42 +08:00
|
|
|
transition-name="slide-left"
|
2024-08-17 22:38:37 +08:00
|
|
|
>
|
|
|
|
<template v-if="toolbar" #toolbar>
|
|
|
|
<Toolbar :toolbar-list="toolbarList" />
|
|
|
|
</template>
|
|
|
|
</AuthenticationFormView>
|
2024-05-19 21:20:42 +08:00
|
|
|
|
2024-07-15 23:22:00 +08:00
|
|
|
<!-- 头部 Logo 和应用名称 -->
|
2024-05-19 21:20:42 +08:00
|
|
|
<div class="absolute left-0 top-0 z-10 flex flex-1">
|
|
|
|
<div
|
2024-08-13 21:48:01 +08:00
|
|
|
:class="authPanelRight ? 'lg:text-white' : 'lg:text-foreground'"
|
2024-06-09 13:31:43 +08:00
|
|
|
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
|
2024-05-19 21:20:42 +08:00
|
|
|
>
|
2024-07-15 23:22:00 +08:00
|
|
|
<img :alt="appName" :src="logoSource" class="mr-2" width="42" />
|
2024-05-19 21:20:42 +08:00
|
|
|
<p class="text-xl font-medium">
|
2024-06-01 23:15:29 +08:00
|
|
|
{{ appName }}
|
2024-05-19 21:20:42 +08:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-15 23:22:00 +08:00
|
|
|
|
|
|
|
<!-- 中间内容 -->
|
2024-05-19 21:20:42 +08:00
|
|
|
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
|
2024-08-13 21:17:10 +08:00
|
|
|
<div class="absolute inset-0 h-full w-full bg-[#070709]">
|
|
|
|
<div class="login-background absolute left-0 top-0 size-full"></div>
|
2024-06-02 20:47:50 +08:00
|
|
|
<div class="flex-col-center -enter-x mr-20 h-full">
|
2024-08-17 22:38:37 +08:00
|
|
|
<template v-if="sloganImage">
|
|
|
|
<img
|
|
|
|
:alt="appName"
|
|
|
|
:src="sloganImage"
|
|
|
|
class="animate-float h-64 w-2/5"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
<SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
|
2024-05-28 23:38:36 +08:00
|
|
|
<div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
|
2024-08-17 22:38:37 +08:00
|
|
|
{{ pageTitle || $t('authentication.pageTitle') }}
|
2024-05-19 21:20:42 +08:00
|
|
|
</div>
|
2024-05-28 23:38:36 +08:00
|
|
|
<div class="dark:text-muted-foreground mt-2 text-white/60">
|
2024-08-17 22:38:37 +08:00
|
|
|
{{ pageDescription || $t('authentication.pageDesc') }}
|
2024-05-19 21:20:42 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-15 23:22:00 +08:00
|
|
|
|
|
|
|
<!-- 中心认证面板 -->
|
2024-08-13 21:17:10 +08:00
|
|
|
<div v-if="authPanelCenter" class="flex-center relative w-full">
|
|
|
|
<div class="login-background absolute left-0 top-0 size-full"></div>
|
2024-07-15 23:22:00 +08:00
|
|
|
<AuthenticationFormView
|
2024-08-13 21:17:10 +08:00
|
|
|
class="md:bg-background shadow-primary/10 w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-[36%]"
|
2024-08-17 22:38:37 +08:00
|
|
|
>
|
|
|
|
<template v-if="toolbar" #toolbar>
|
|
|
|
<Toolbar :toolbar-list="toolbarList" />
|
|
|
|
</template>
|
|
|
|
</AuthenticationFormView>
|
2024-05-19 21:20:42 +08:00
|
|
|
</div>
|
2024-07-15 23:22:00 +08:00
|
|
|
|
|
|
|
<!-- 右侧认证面板 -->
|
|
|
|
<AuthenticationFormView
|
2024-05-19 21:20:42 +08:00
|
|
|
v-if="authPanelRight"
|
2024-07-15 23:22:00 +08:00
|
|
|
class="min-h-full w-2/5 flex-1"
|
2024-08-17 22:38:37 +08:00
|
|
|
>
|
|
|
|
<template v-if="toolbar" #toolbar>
|
|
|
|
<Toolbar :toolbar-list="toolbarList" />
|
|
|
|
</template>
|
|
|
|
</AuthenticationFormView>
|
2024-05-19 21:20:42 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
2024-08-13 21:17:10 +08:00
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.login-background {
|
|
|
|
background: linear-gradient(
|
|
|
|
154deg,
|
2024-08-13 21:48:01 +08:00
|
|
|
#07070915 30%,
|
2024-08-13 21:17:10 +08:00
|
|
|
hsl(var(--primary) / 15%) 48%,
|
2024-08-13 21:48:01 +08:00
|
|
|
#07070915 64%
|
2024-08-13 21:17:10 +08:00
|
|
|
);
|
|
|
|
filter: blur(100px);
|
|
|
|
}
|
|
|
|
</style>
|