<script setup lang="ts">
|
import type { ToolbarType } from './types';
|
|
import { computed } from 'vue';
|
|
import { preferences, usePreferences } from '../../../../preferences/src';
|
|
import { Copyright } from '../basic/copyright';
|
import AuthenticationFormView from './form.vue';
|
import Toolbar from './toolbar.vue';
|
|
interface Props {
|
appName?: string;
|
logo?: string;
|
logoDark?: string;
|
pageTitle?: string;
|
pageDescription?: string;
|
sloganImage?: string;
|
toolbar?: boolean;
|
copyright?: boolean;
|
toolbarList?: ToolbarType[];
|
clickLogo?: () => void;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
appName: '',
|
copyright: true,
|
logo: '',
|
logoDark: '',
|
pageDescription: '',
|
pageTitle: '',
|
sloganImage: '',
|
toolbar: true,
|
toolbarList: () => ['color', 'language', 'layout', 'theme'],
|
clickLogo: () => {},
|
});
|
|
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
usePreferences();
|
|
/**
|
* @zh_CN 根据主题选择合适的 logo 图标
|
*/
|
const logoSrc = computed(() => {
|
// 如果是暗色主题且提供了 logoDark，则使用暗色主题的 logo
|
if (isDark.value && props.logoDark) {
|
return props.logoDark;
|
}
|
// 否则使用默认的 logo
|
return props.logo;
|
});
|
</script>
|
|
<template>
|
<div
|
:class="[isDark ? 'dark' : '']"
|
class="flex min-h-full flex-1 overflow-x-hidden select-none"
|
>
|
<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"
|
data-side="left"
|
>
|
<template v-if="copyright" #copyright>
|
<slot name="copyright">
|
<Copyright
|
v-if="preferences.copyright.enable"
|
v-bind="preferences.copyright"
|
/>
|
</slot>
|
</template>
|
</AuthenticationFormView>
|
|
<slot name="logo">
|
<!-- 头部 Logo 和应用名称 -->
|
<div
|
v-if="logoSrc || appName"
|
class="absolute top-0 left-0 z-10 flex flex-1"
|
@click="clickLogo"
|
>
|
<div
|
class="mt-4 ml-4 flex flex-1 items-center text-foreground sm:top-6 sm:left-6 lg:text-foreground"
|
>
|
<img
|
v-if="logoSrc"
|
:key="logoSrc"
|
:alt="appName"
|
:src="logoSrc"
|
class="mr-2"
|
width="42"
|
/>
|
<p v-if="appName" class="m-0 text-xl font-medium">
|
{{ appName }}
|
</p>
|
</div>
|
</div>
|
</slot>
|
|
<!-- 系统介绍：校园夜景插画铺满 + 左下角品牌文案 -->
|
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
|
<div
|
class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
|
>
|
<!-- 手绘校园插画；外部传入 sloganImage 时优先用外部图 -->
|
<img
|
v-if="sloganImage"
|
alt=""
|
class="campus-illustration"
|
:src="sloganImage"
|
/>
|
<img
|
v-else
|
alt=""
|
class="campus-illustration"
|
src="/static/imgs/jssm-campus.svg"
|
/>
|
<!-- 压暗叠层：底部加重，保证文字可读 -->
|
<div class="campus-overlay"></div>
|
<div class="academic-bg-pattern"></div>
|
|
<div
|
:key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
|
class="campus-content"
|
:class="{
|
'enter-x': authPanelLeft,
|
'-enter-x': authPanelRight,
|
}"
|
>
|
<div class="campus-rule"></div>
|
<div class="academic-brand-title">{{ pageTitle }}</div>
|
<div class="academic-brand-desc">{{ pageDescription }}</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 中心认证面板 -->
|
<div v-if="authPanelCenter" class="relative flex-center w-full">
|
<div class="login-background absolute top-0 left-0 size-full"></div>
|
<!-- 学术风装饰网格背景 -->
|
<div class="academic-bg-pattern"></div>
|
<AuthenticationFormView
|
class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
|
data-side="bottom"
|
>
|
<template v-if="copyright" #copyright>
|
<slot name="copyright">
|
<Copyright
|
v-if="preferences.copyright.enable"
|
v-bind="preferences.copyright"
|
/>
|
</slot>
|
</template>
|
</AuthenticationFormView>
|
</div>
|
|
<!-- 右侧认证面板 -->
|
<AuthenticationFormView
|
v-if="authPanelRight"
|
class="min-h-full w-2/5 flex-1"
|
data-side="right"
|
>
|
<template v-if="copyright" #copyright>
|
<slot name="copyright">
|
<Copyright
|
v-if="preferences.copyright.enable"
|
v-bind="preferences.copyright"
|
/>
|
</slot>
|
</template>
|
</AuthenticationFormView>
|
</div>
|
</template>
|
|
<style scoped>
|
/* 校园插画铺满左侧品牌区；object-position 略偏上，保住建筑主体 */
|
.campus-illustration {
|
position: absolute;
|
inset: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
object-position: center 34%;
|
}
|
|
/* 叠层：底部压暗给文字，左侧略暗以突出白色标题 */
|
.campus-overlay {
|
position: absolute;
|
inset: 0;
|
background:
|
linear-gradient(
|
180deg,
|
rgba(8, 24, 44, 0.12) 0%,
|
rgba(8, 24, 44, 0.22) 42%,
|
rgba(8, 24, 44, 0.86) 100%
|
),
|
linear-gradient(
|
90deg,
|
rgba(8, 24, 44, 0.4) 0%,
|
rgba(8, 24, 44, 0) 58%
|
);
|
}
|
|
/* 装饰网格：压到几乎不可见的金色细线 */
|
.academic-bg-pattern {
|
position: absolute;
|
inset: 0;
|
background-image:
|
linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
|
linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
|
background-size: 72px 72px;
|
pointer-events: none;
|
}
|
|
/* 品牌文案：定位到左下角 */
|
.campus-content {
|
position: absolute;
|
bottom: 68px;
|
left: 56px;
|
z-index: 10;
|
max-width: 64%;
|
}
|
|
/* 标题上方的金色短横线 */
|
.campus-rule {
|
width: 46px;
|
height: 2px;
|
margin-bottom: 20px;
|
border-radius: 2px;
|
background: linear-gradient(90deg, #e3c567, #b8901f);
|
}
|
|
/* 品牌区标题：米白，阴影收敛以保持庄重 */
|
.academic-brand-title {
|
color: #f5f0e4 !important;
|
font-size: 26px;
|
font-weight: 600;
|
letter-spacing: 5px;
|
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
|
}
|
|
.academic-brand-desc {
|
margin-top: 12px;
|
color: rgba(212, 175, 55, 0.85) !important;
|
font-size: 13.5px;
|
letter-spacing: 3px;
|
}
|
|
.dark {
|
.academic-bg-pattern {
|
background-image:
|
linear-gradient(rgba(212, 175, 55, 0.045) 1px, transparent 1px),
|
linear-gradient(90deg, rgba(212, 175, 55, 0.045) 1px, transparent 1px);
|
background-size: 72px 72px;
|
}
|
}
|
</style>
|
