<template>
|
<div class="login-container">
|
<div class="login-box">
|
<div class="login-header">
|
<h1>WIDESEA WMS</h1>
|
<p>仓库管理系统</p>
|
</div>
|
<a-form
|
:model="formState"
|
:rules="rules"
|
@finish="handleLogin"
|
class="login-form"
|
>
|
<a-form-item name="username">
|
<a-input
|
v-model:value="formState.username"
|
size="large"
|
placeholder="请输入用户名"
|
>
|
<template #prefix>
|
<user-outlined />
|
</template>
|
</a-input>
|
</a-form-item>
|
<a-form-item name="password">
|
<a-input-password
|
v-model:value="formState.password"
|
size="large"
|
placeholder="请输入密码"
|
>
|
<template #prefix>
|
<lock-outlined />
|
</template>
|
</a-input-password>
|
</a-form-item>
|
<a-form-item>
|
<a-button
|
type="primary"
|
html-type="submit"
|
size="large"
|
:loading="loading"
|
block
|
>
|
登录
|
</a-button>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from 'vue';
|
import { useRouter, useRoute } from 'vue-router';
|
import { message } from 'ant-design-vue';
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
import { useAuthStore } from '../../stores/auth';
|
|
const router = useRouter();
|
const route = useRoute();
|
const authStore = useAuthStore();
|
|
const formState = reactive({
|
username: '',
|
password: '',
|
});
|
|
const rules = {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
};
|
|
const loading = ref(false);
|
|
async function handleLogin() {
|
loading.value = true;
|
try {
|
const success = await authStore.login(formState.username, formState.password);
|
if (success) {
|
message.success('登录成功');
|
const redirect = (route.query.redirect as string) || '/';
|
router.push(redirect);
|
} else {
|
message.error('登录失败，请检查用户名和密码');
|
}
|
} catch (error) {
|
console.error('Login error:', error);
|
message.error('登录失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
</script>
|
|
<style scoped>
|
.login-container {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 100vh;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
}
|
|
.login-box {
|
width: 400px;
|
padding: 40px;
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
}
|
|
.login-header {
|
text-align: center;
|
margin-bottom: 32px;
|
}
|
|
.login-header h1 {
|
font-size: 32px;
|
font-weight: bold;
|
color: #333;
|
margin: 0 0 8px 0;
|
}
|
|
.login-header p {
|
font-size: 14px;
|
color: #666;
|
margin: 0;
|
}
|
|
.login-form {
|
margin-top: 24px;
|
}
|
</style>
|
