|
|
@@ -0,0 +1,70 @@
|
|
|
+<template>
|
|
|
+ <a-layout>
|
|
|
+ <a-layout-content :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', backgroundColor: '#f0f0f0' }">
|
|
|
+ <a-card title="欢迎回来" :style="{ width: '400px', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)' }">
|
|
|
+ <a-form :model="formState" @finish="handleFinish">
|
|
|
+ <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
|
|
|
+ <a-input v-model:value="formState.username" placeholder="用户名"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
|
|
|
+ <a-input-password v-model:value="formState.password" placeholder="密码"></a-input-password>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-button type="primary" html-type="submit" block>登录</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-if="errorMessage" :validate-status="'error'">
|
|
|
+ <p class="error-message">{{ errorMessage }}</p>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-card>
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { reactive, ref } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ const formState = reactive({
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ remember: false,
|
|
|
+ });
|
|
|
+ const errorMessage = ref('');
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const handleFinish = (values) => {
|
|
|
+ // Basic validation
|
|
|
+ if (!values.username || !values.password) {
|
|
|
+ errorMessage.value = '用户名和密码不能为空';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Simulated login logic
|
|
|
+ if (values.username === 'admin' && values.password === 'password') {
|
|
|
+ router.push({ name: 'Home' });
|
|
|
+ } else {
|
|
|
+ errorMessage.value = '用户名或密码错误';
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ formState,
|
|
|
+ errorMessage,
|
|
|
+ handleFinish,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.error-message {
|
|
|
+ color: red;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+</style>
|
genlitex