|
|
|
@ -1,24 +1,28 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
import { computed } from 'vue'; |
|
|
|
import type { ToolbarType } from './types'; |
|
|
|
|
|
|
|
import { $t } from '@vben/locales'; |
|
|
|
import { preferences, usePreferences } from '@vben/preferences'; |
|
|
|
|
|
|
|
import { Copyright } from '../basic/copyright'; |
|
|
|
import AuthenticationFormView from './form.vue'; |
|
|
|
import SloganIcon from './icons/slogan.vue'; |
|
|
|
import Toolbar from './toolbar.vue'; |
|
|
|
|
|
|
|
interface Props { |
|
|
|
appName?: string; |
|
|
|
logo?: string; |
|
|
|
pageTitle?: string; |
|
|
|
pageDescription?: string; |
|
|
|
sloganImage?: string; |
|
|
|
toolbar?: boolean; |
|
|
|
toolbarList?: ('color' | 'language' | 'layout' | 'theme')[]; |
|
|
|
copyright?: boolean; |
|
|
|
toolbarList?: ToolbarType[]; |
|
|
|
} |
|
|
|
|
|
|
|
defineOptions({ name: 'Authentication' }); |
|
|
|
|
|
|
|
withDefaults(defineProps<Props>(), { |
|
|
|
appName: '', |
|
|
|
copyright: true, |
|
|
|
logo: '', |
|
|
|
pageDescription: '', |
|
|
|
pageTitle: '', |
|
|
|
sloganImage: '', |
|
|
|
@ -26,31 +30,42 @@ withDefaults(defineProps<Props>(), { |
|
|
|
toolbarList: () => ['color', 'language', 'layout', 'theme'], |
|
|
|
}); |
|
|
|
|
|
|
|
const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences(); |
|
|
|
const appName = computed(() => preferences.app.name); |
|
|
|
const logoSource = computed(() => preferences.logo.source); |
|
|
|
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } = |
|
|
|
usePreferences(); |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="flex min-h-full flex-1 select-none overflow-x-hidden"> |
|
|
|
<div |
|
|
|
:class="[isDark]" |
|
|
|
class="flex min-h-full flex-1 select-none overflow-x-hidden" |
|
|
|
> |
|
|
|
<template v-if="toolbar"> |
|
|
|
<slot name="toolbar"> |
|
|
|
<Toolbar :toolbar-list="toolbarList" /> |
|
|
|
</slot> |
|
|
|
</template> |
|
|
|
<!-- 左侧认证面板 --> |
|
|
|
<AuthenticationFormView |
|
|
|
v-if="authPanelLeft" |
|
|
|
class="min-h-full w-2/5 flex-1" |
|
|
|
transition-name="slide-left" |
|
|
|
> |
|
|
|
<template v-if="toolbar" #toolbar> |
|
|
|
<Toolbar :toolbar-list="toolbarList" /> |
|
|
|
<template v-if="copyright" #copyright> |
|
|
|
<slot name="copyright"> |
|
|
|
<Copyright |
|
|
|
v-if="preferences.copyright.enable" |
|
|
|
v-bind="preferences.copyright" |
|
|
|
/> |
|
|
|
</slot> |
|
|
|
</template> |
|
|
|
</AuthenticationFormView> |
|
|
|
|
|
|
|
<!-- 头部 Logo 和应用名称 --> |
|
|
|
<div class="absolute left-0 top-0 z-10 flex flex-1"> |
|
|
|
<div |
|
|
|
:class="authPanelRight ? 'lg:text-white' : 'lg:text-foreground'" |
|
|
|
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6" |
|
|
|
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6" |
|
|
|
> |
|
|
|
<img :alt="appName" :src="logoSource" class="mr-2" width="42" /> |
|
|
|
<img :alt="appName" :src="logo" class="mr-2" width="42" /> |
|
|
|
<p class="text-xl font-medium"> |
|
|
|
{{ appName }} |
|
|
|
</p> |
|
|
|
@ -59,7 +74,9 @@ const logoSource = computed(() => preferences.logo.source); |
|
|
|
|
|
|
|
<!-- 系统介绍 --> |
|
|
|
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block"> |
|
|
|
<div class="absolute inset-0 h-full w-full bg-[#070709]"> |
|
|
|
<div |
|
|
|
class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]" |
|
|
|
> |
|
|
|
<div class="login-background absolute left-0 top-0 size-full"></div> |
|
|
|
<div class="flex-col-center -enter-x mr-20 h-full"> |
|
|
|
<template v-if="sloganImage"> |
|
|
|
@ -70,11 +87,11 @@ const logoSource = computed(() => preferences.logo.source); |
|
|
|
/> |
|
|
|
</template> |
|
|
|
<SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" /> |
|
|
|
<div class="text-1xl mt-6 font-sans text-white lg:text-2xl"> |
|
|
|
{{ pageTitle || $t('authentication.pageTitle') }} |
|
|
|
<div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl"> |
|
|
|
{{ pageTitle }} |
|
|
|
</div> |
|
|
|
<div class="dark:text-muted-foreground mt-2 text-white/60"> |
|
|
|
{{ pageDescription || $t('authentication.pageDesc') }} |
|
|
|
<div class="dark:text-muted-foreground mt-2"> |
|
|
|
{{ pageDescription }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -84,10 +101,15 @@ const logoSource = computed(() => preferences.logo.source); |
|
|
|
<div v-if="authPanelCenter" class="flex-center relative w-full"> |
|
|
|
<div class="login-background absolute left-0 top-0 size-full"></div> |
|
|
|
<AuthenticationFormView |
|
|
|
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%]" |
|
|
|
class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]" |
|
|
|
> |
|
|
|
<template v-if="toolbar" #toolbar> |
|
|
|
<Toolbar :toolbar-list="toolbarList" /> |
|
|
|
<template v-if="copyright" #copyright> |
|
|
|
<slot name="copyright"> |
|
|
|
<Copyright |
|
|
|
v-if="preferences.copyright.enable" |
|
|
|
v-bind="preferences.copyright" |
|
|
|
/> |
|
|
|
</slot> |
|
|
|
</template> |
|
|
|
</AuthenticationFormView> |
|
|
|
</div> |
|
|
|
@ -95,10 +117,15 @@ const logoSource = computed(() => preferences.logo.source); |
|
|
|
<!-- 右侧认证面板 --> |
|
|
|
<AuthenticationFormView |
|
|
|
v-if="authPanelRight" |
|
|
|
class="min-h-full w-2/5 flex-1" |
|
|
|
class="min-h-full w-[34%] flex-1" |
|
|
|
> |
|
|
|
<template v-if="toolbar" #toolbar> |
|
|
|
<Toolbar :toolbar-list="toolbarList" /> |
|
|
|
<template v-if="copyright" #copyright> |
|
|
|
<slot name="copyright"> |
|
|
|
<Copyright |
|
|
|
v-if="preferences.copyright.enable" |
|
|
|
v-bind="preferences.copyright" |
|
|
|
/> |
|
|
|
</slot> |
|
|
|
</template> |
|
|
|
</AuthenticationFormView> |
|
|
|
</div> |
|
|
|
@ -109,9 +136,21 @@ const logoSource = computed(() => preferences.logo.source); |
|
|
|
background: linear-gradient( |
|
|
|
154deg, |
|
|
|
#07070915 30%, |
|
|
|
hsl(var(--primary) / 15%) 48%, |
|
|
|
hsl(var(--primary) / 30%) 48%, |
|
|
|
#07070915 64% |
|
|
|
); |
|
|
|
filter: blur(100px); |
|
|
|
} |
|
|
|
|
|
|
|
.dark { |
|
|
|
.login-background { |
|
|
|
background: linear-gradient( |
|
|
|
154deg, |
|
|
|
#07070915 30%, |
|
|
|
hsl(var(--primary) / 20%) 48%, |
|
|
|
#07070915 64% |
|
|
|
); |
|
|
|
filter: blur(100px); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Vben
1 year ago
GitHub