148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<script lang="ts" setup>
|
|
import { reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import {ElMessage} from 'element-plus'
|
|
import { Lock, User } from '@element-plus/icons-vue';
|
|
|
|
import { useSuperbox } from '@/utils/Superbox'
|
|
|
|
import { useSetToken } from '@/utils/misc';
|
|
|
|
const router = useRouter();
|
|
const superbox = useSuperbox();
|
|
const loginForm = reactive({
|
|
username: '',
|
|
password: ''
|
|
});
|
|
|
|
const setToken = useSetToken();
|
|
|
|
const onSubmit = async () => {
|
|
try {
|
|
const token = await superbox.login(loginForm.username, loginForm.password, false);
|
|
if (token) {
|
|
setToken(token);
|
|
router.push('/');
|
|
}
|
|
} catch (error) {
|
|
ElMessage(
|
|
{
|
|
message: '用户名或密码错误，登录失败',
|
|
type: 'error',
|
|
duration: 5000
|
|
}
|
|
);
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const onReset = () => {
|
|
loginForm.username = '';
|
|
loginForm.password = '';
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="main-layout">
|
|
|
|
<div class="login-form">
|
|
<div class="login-header">
|
|
<el-row justify="center">
|
|
<el-image src="./logo.png" fit="contain" />
|
|
</el-row>
|
|
</div>
|
|
<div class="login-body">
|
|
<el-form :model="loginForm" style="max-width: 600px;">
|
|
|
|
<el-form-item>
|
|
<el-input v-model="loginForm.username" placeholder="用户名" clearable>
|
|
<template #prefix>
|
|
<el-icon class="el-input__icon">
|
|
<User />
|
|
</el-icon>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-input v-model="loginForm.password" placeholder="密码" type="password" show-password clearable>
|
|
<template #prefix>
|
|
<el-icon class="el-input__icon">
|
|
<Lock />
|
|
</el-icon>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-row justify="end">
|
|
<el-form-item size="small" :gutter="30">
|
|
<el-button type="primary" @click="onReset" plain>重置</el-button>
|
|
<el-button type="primary" @click="onSubmit">登录</el-button>
|
|
</el-form-item>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="login-footer">
|
|
<el-row justify="end">
|
|
<el-text class="plain-text">Powered by TuringAI</el-text>
|
|
</el-row>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.main-layout {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('./login-bg.jpg');
|
|
background-size: cover;
|
|
}
|
|
|
|
.login-form {
|
|
min-width: 350px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 10px;
|
|
background-color: #01111863;
|
|
}
|
|
|
|
.login-body {
|
|
padding-top: 30px;
|
|
padding-bottom: 5px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.login-header {
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
background-color: #01111863;
|
|
border-radius: 10px 10px 0px 0px;
|
|
}
|
|
|
|
.login-footer {
|
|
padding-top: 15px;
|
|
padding-bottom: 20px;
|
|
padding-right: 30px;
|
|
padding-left: 30px;
|
|
background-color: #01111863;
|
|
border-radius: 0px 0px 10px 10px;
|
|
}
|
|
|
|
.main-title {
|
|
color: #c2c8fd;
|
|
}
|
|
|
|
.plain-text {
|
|
color: #9a9db3;
|
|
}
|
|
</style> |