96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<script setup>
|
|
import { reactive } from 'vue'
|
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
|
import { message } from 'ant-design-vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
const formState = reactive({
|
|
username: '',
|
|
password: '',
|
|
remember: true
|
|
})
|
|
|
|
const rules = {
|
|
username: [{
|
|
required: true,
|
|
message: '请输入用户名',
|
|
trigger: 'blur'
|
|
}],
|
|
password: [{
|
|
required: true,
|
|
message: '请输入密码',
|
|
trigger: 'blur'
|
|
}]
|
|
}
|
|
|
|
const handleLogin = async () => {
|
|
try {
|
|
await userStore.login({
|
|
username: formState.username,
|
|
password: formState.password
|
|
})
|
|
message.success('登录成功')
|
|
router.push('/admin/dashboard')
|
|
} catch (e) {
|
|
message.error('登录失败：' + e.message)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<a-card class="w-full max-w-md shadow-lg" :bordered="false">
|
|
<h2 class="text-2xl font-bold mb-6 text-center">后台管理系统</h2>
|
|
<a-form
|
|
:model="formState"
|
|
:rules="rules"
|
|
@finish="handleLogin"
|
|
layout="vertical"
|
|
>
|
|
<a-form-item name="username">
|
|
<a-input
|
|
v-model:value="formState.username"
|
|
placeholder="用户名"
|
|
size="large"
|
|
>
|
|
<template #prefix><UserOutlined /></template>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item name="password">
|
|
<a-input-password
|
|
v-model:value="formState.password"
|
|
placeholder="密码"
|
|
size="large"
|
|
>
|
|
<template #prefix><LockOutlined /></template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-button
|
|
type="primary"
|
|
html-type="submit"
|
|
size="large"
|
|
class="w-full"
|
|
>
|
|
立即登录
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.ant-input-affix-wrapper) {
|
|
@apply rounded-lg px-3 py-2;
|
|
}
|
|
:deep(.ant-btn-primary) {
|
|
@apply rounded-lg;
|
|
}
|
|
</style> |