|
|
@@ -0,0 +1,77 @@
|
|
|
+<template>
|
|
|
+ <a-layout class="login-layout">
|
|
|
+ <a-layout-content class="login-content">
|
|
|
+ <a-card title="Login" class="login-card">
|
|
|
+ <a-form :model="formState" name="login" autocomplete="off" @finish="onFinish">
|
|
|
+ <a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
|
|
|
+ <a-input v-model:value="formState.username" placeholder="请输入您的用户名" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
|
|
|
+ <a-input-password v-model:value="formState.password" placeholder="请输入您的密码" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
|
|
|
+ <a-checkbox v-model:checked="formState.remember">忘记我</a-checkbox>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
|
|
+ <a-button type="primary" html-type="submit">登录</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-card>
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { defineComponent, reactive } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const formState = reactive({
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ remember: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ const onFinish = (values) => {
|
|
|
+ // Mock login logic
|
|
|
+ if (values.username === 'admin' && values.password === 'password') {
|
|
|
+ message.success('登录成功!');
|
|
|
+ router.push('/home'); // Redirect to HomeView after successful login
|
|
|
+ } else {
|
|
|
+ message.error('用户名或密码错误!');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ formState,
|
|
|
+ onFinish,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.login-layout {
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-card {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
genlitex