147 lines
4.2 KiB
Vue
147 lines
4.2 KiB
Vue
<template>
|
|
<div class="login-form-wrapper">
|
|
<div class="login-form-title">{{ $t('login.form.title') }}</div>
|
|
<div class="login-form-sub-title">{{ $t('login.form.title') }}</div>
|
|
<div class="login-form-error-msg">{{ errorMessage }}</div>
|
|
<a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
|
|
<a-form-item
|
|
field="account"
|
|
:rules="[{ required: true, message: '请输入账号' }]"
|
|
:validate-trigger="['change', 'blur']"
|
|
hide-label
|
|
>
|
|
<a-input v-model="userInfo.account" placeholder="账号">
|
|
<template #prefix>
|
|
<icon-user />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item
|
|
field="password"
|
|
:rules="[{ required: true, message: '请输入密码' }]"
|
|
:validate-trigger="['change', 'blur']"
|
|
hide-label
|
|
>
|
|
<a-input-password v-model="userInfo.password" placeholder="密码" allow-clear>
|
|
<template #prefix>
|
|
<icon-lock />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<a-space :size="16" direction="vertical">
|
|
<div class="login-form-password-actions">
|
|
<a-checkbox checked="rememberPassword" :model-value="loginConfig.rememberPassword" @change="setRememberPassword as any">
|
|
{{ $t('login.form.rememberPassword') }}
|
|
</a-checkbox>
|
|
</div>
|
|
<a-button type="primary" html-type="submit" long :loading="loading">
|
|
{{ $t('login.form.login') }}
|
|
</a-button>
|
|
</a-space>
|
|
</a-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { LoginData } from '@/api/types'
|
|
import useLoading from '@/hooks/loading'
|
|
import { useUserStore, useAppStore } from '@/store'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import { ValidatedError } from '@arco-design/web-vue/es/form/interface'
|
|
import { useStorage } from '@vueuse/core'
|
|
import { reactive, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const { t } = useI18n()
|
|
const errorMessage = ref('')
|
|
const { loading, setLoading } = useLoading()
|
|
const userStore = useUserStore()
|
|
const appStore = useAppStore()
|
|
|
|
const loginConfig = useStorage('login-config', {
|
|
rememberPassword: true,
|
|
account: '',
|
|
password: '',
|
|
})
|
|
const userInfo = reactive({
|
|
account: loginConfig.value.account,
|
|
password: loginConfig.value.password,
|
|
})
|
|
|
|
const handleSubmit = async ({ errors, values }: { errors: Record<string, ValidatedError> | undefined; values: Record<string, any> }) => {
|
|
if (loading.value) return
|
|
if (!errors) {
|
|
setLoading(true)
|
|
try {
|
|
await userStore.login(values as LoginData)
|
|
await appStore.fetchServerMenuConfig()
|
|
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
|
router.push({
|
|
path: '/overview'
|
|
})
|
|
Message.success(t('login.form.login.success'))
|
|
const { rememberPassword } = loginConfig.value
|
|
const { account, password } = values
|
|
// 实际生产环境需要进行加密存储。
|
|
// The actual production environment requires encrypted storage.
|
|
loginConfig.value.account = rememberPassword ? account : ''
|
|
loginConfig.value.password = rememberPassword ? password : ''
|
|
} catch (err) {
|
|
errorMessage.value = (err as Error).message
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}
|
|
const setRememberPassword = (value: boolean) => {
|
|
loginConfig.value.rememberPassword = value
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.login-form {
|
|
&-wrapper {
|
|
width: 320px;
|
|
}
|
|
|
|
&-title {
|
|
color: var(--color-text-1);
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
&-sub-title {
|
|
color: var(--color-text-3);
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
&-error-msg {
|
|
height: 32px;
|
|
color: rgb(var(--red-6));
|
|
line-height: 32px;
|
|
}
|
|
|
|
&-password-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&-register-btn {
|
|
color: var(--color-text-3) !important;
|
|
}
|
|
}
|
|
|
|
:deep(.arco-btn) {
|
|
border-radius: 24px !important;
|
|
}
|
|
:deep(.arco-input),
|
|
:deep(.arco-input-wrapper),
|
|
:deep(.arco-input-password) {
|
|
border-radius: 18px !important;
|
|
}
|
|
</style>
|