BBIT-Kai
148 lines
3.7 KiB
Vue
148 lines
3.7 KiB
Vue
<template>
|
|
<div class="login-page">
|
|
<div class="login-background"></div>
|
|
<n-card class="login-card">
|
|
<template #header>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-semibold text-slate-900">通用管理平台</div>
|
|
</div>
|
|
</template>
|
|
|
|
<n-form ref="formRef" :model="form" :rules="rules" size="large" @submit.prevent="onSubmit">
|
|
<n-form-item path="username" label="用户名">
|
|
<n-input v-model:value="form.username" placeholder="请输入用户名" />
|
|
</n-form-item>
|
|
<n-form-item path="password" label="密码">
|
|
<n-input
|
|
v-model:value="form.password"
|
|
type="password"
|
|
show-password-on="click"
|
|
placeholder="请输入密码"
|
|
/>
|
|
</n-form-item>
|
|
<n-button type="primary" block size="large" :loading="loading" attr-type="submit"
|
|
>登录</n-button
|
|
>
|
|
</n-form>
|
|
</n-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import type { FormInst, FormRules } from 'naive-ui'
|
|
import { useMessage } from 'naive-ui'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const message = useMessage()
|
|
const authStore = useAuthStore()
|
|
|
|
const loading = ref(false)
|
|
const formRef = ref<FormInst | null>(null)
|
|
const form = reactive({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
const rules: FormRules = {
|
|
username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'input'] }],
|
|
password: [{ required: true, message: '请输入密码', trigger: ['blur', 'input'] }]
|
|
}
|
|
|
|
async function onSubmit() {
|
|
await formRef.value?.validate()
|
|
loading.value = true
|
|
try {
|
|
await authStore.login(form)
|
|
message.success('登录成功')
|
|
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
|
|
await router.replace(redirect)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-page {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
padding: 24px clamp(24px, 9vw, 128px) 24px 16px;
|
|
background:
|
|
linear-gradient(
|
|
42deg,
|
|
rgba(226, 252, 244, 0.98),
|
|
rgba(224, 244, 255, 0.96),
|
|
rgba(241, 255, 250, 0.98),
|
|
rgba(230, 247, 255, 0.96),
|
|
rgba(226, 252, 244, 0.98)
|
|
),
|
|
#f5fbff;
|
|
background-size: 320% 320%;
|
|
animation: loginGradientFlow 18s ease-in-out infinite;
|
|
}
|
|
|
|
.login-background {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(90deg, rgba(14, 116, 144, 0.05) 1px, transparent 1px),
|
|
linear-gradient(180deg, rgba(15, 118, 110, 0.04) 1px, transparent 1px),
|
|
linear-gradient(145deg, transparent 0%, rgba(255, 255, 255, 0.76) 46%, transparent 74%);
|
|
background-size:
|
|
42px 42px,
|
|
42px 42px,
|
|
100% 100%;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.login-page::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(115deg, rgba(255, 255, 255, 0.82), transparent 35%),
|
|
linear-gradient(295deg, rgba(204, 251, 241, 0.34), transparent 42%);
|
|
}
|
|
|
|
.login-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 448px;
|
|
border: 1px solid rgba(255, 255, 255, 0.78);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.82);
|
|
box-shadow: 0 24px 60px rgba(15, 118, 110, 0.12);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
@keyframes loginGradientFlow {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.login-page {
|
|
justify-content: center;
|
|
padding: 24px 16px;
|
|
}
|
|
}
|
|
</style>
|