mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
79 lines
2.6 KiB
Vue
79 lines
2.6 KiB
Vue
<template>
|
|
<div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
|
|
<dark-mode-switch
|
|
:dark="theme.darkMode"
|
|
class="absolute left-48px top-24px z-3 text-20px"
|
|
@update:dark="theme.setDarkMode"
|
|
/>
|
|
<n-card :bordered="false" size="large" class="z-4 !w-auto rounded-20px shadow-sm">
|
|
<div class="w-300px sm:w-360px">
|
|
<header class="flex-y-center justify-between">
|
|
<system-logo class="text-64px text-primary" />
|
|
<n-gradient-text type="primary" :size="28">{{ $t('system.title') }}</n-gradient-text>
|
|
</header>
|
|
<main class="pt-24px">
|
|
<h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
|
|
<div class="pt-24px">
|
|
<transition name="fade-slide" mode="out-in" appear>
|
|
<component :is="activeModule.component" />
|
|
</transition>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</n-card>
|
|
<login-bg :theme-color="bgThemeColor" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import type { Component } from 'vue';
|
|
import { loginModuleLabels } from '@/constants';
|
|
import { useThemeStore } from '@/store';
|
|
import { getColorPalette, mixColor } from '@/utils';
|
|
import { $t } from '@/locales';
|
|
import { BindWechat, CodeLogin, LoginBg, PwdLogin, Register, ResetPwd } from './components';
|
|
|
|
interface Props {
|
|
/** 登录模块分类 */
|
|
module: UnionKey.LoginModule;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const theme = useThemeStore();
|
|
|
|
interface LoginModule {
|
|
key: UnionKey.LoginModule;
|
|
label: string;
|
|
component: Component;
|
|
}
|
|
|
|
const modules: LoginModule[] = [
|
|
{ key: 'pwd-login', label: loginModuleLabels['pwd-login'], component: PwdLogin },
|
|
{ key: 'code-login', label: loginModuleLabels['code-login'], component: CodeLogin },
|
|
{ key: 'register', label: loginModuleLabels.register, component: Register },
|
|
{ key: 'reset-pwd', label: loginModuleLabels['reset-pwd'], component: ResetPwd },
|
|
{ key: 'bind-wechat', label: loginModuleLabels['bind-wechat'], component: BindWechat }
|
|
];
|
|
|
|
const activeModule = computed(() => {
|
|
const active: LoginModule = { ...modules[0] };
|
|
const findItem = modules.find(item => item.key === props.module);
|
|
if (findItem) {
|
|
Object.assign(active, findItem);
|
|
}
|
|
return active;
|
|
});
|
|
|
|
const bgThemeColor = computed(() => (theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor));
|
|
|
|
const bgColor = computed(() => {
|
|
const COLOR_WHITE = '#ffffff';
|
|
const ratio = theme.darkMode ? 0.5 : 0.2;
|
|
return mixColor(COLOR_WHITE, theme.themeColor, ratio);
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|