add CustomLogin.vue

src/components/CustomLogin.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { computed, reactive } from 'vue'
+
+const formState = reactive({
+  account: '',
+  password: '',
+  remember: false
+})
+
+const onfinish = async () => {
+  console.log('formState', formState)
+  const response = await fetch('http://127.0.0.1:3000/login', {
+    method: 'POST',
+    mode: 'cors',
+    cache: 'default',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    credentials: 'include',
+    body: JSON.stringify(formState)
+  })
+  console.log(response)
+}
+
+const onFinishFailed = () => {
+  console.log('onFinishFailed')
+}
+
+const disabled = computed(() => {
+  return !formState.account || !formState.password
+})
+</script>
+
+<template>
+  <a-card>
+    <a-form
+      :model="formState"
+      name="login"
+      class="login-form"
+      autocomplete="off"
+      @finish="onfinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item
+        label="account"
+        name="account"
+        :rules="[{ required: true, message: 'Please Input Your Account' }]"
+        style="display: flex; align-items: center; width: 100%"
+      >
+        <a-input v-model:value="formState.account" style="width: 100%">
+          <template #prefix>
+            <UserOutlined class="site-form-item-icon" style="margin-right: 8px"></UserOutlined>
+          </template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item
+        label="password"
+        name="password"
+        :rules="[{ required: true, message: 'Please Input Your Password' }]"
+        style="display: flex; align-items: center; width: 100%"
+      >
+        <a-input-password v-model:value="formState.password" style="width: 100%">
+          <template #prefix>
+            <LockOutlined class="site-form-item-icon" style="margin-right: 8px"></LockOutlined>
+          </template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-form-item name="remember" style="width: 100%">
+        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
+        <a class="login-form-forgot" href="">Forgot Password</a>
+      </a-form-item>
+
+      <a-form-item style="width: 100%">
+        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button"
+          >Login
+        </a-button>
+        <a href="">Register Now!</a>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<style scoped>
+.login-form {
+  max-width: 300px;
+}
+
+.login-form-forgot {
+  float: right;
+}
+
+.login-form-button {
+  width: 100%;
+}
+</style>

src/views/LoginView.vue

@@ -1,12 +1,21 @@
 <script setup>
-
-import XiaoMiLogin from '@/components/XiaoMiLogin.vue'
+import CustomLogin from '@/components/CustomLogin.vue'
 </script>
 
 <template>
-  <XiaoMiLogin style="margin: 100px auto"/>
+  <CustomLogin class="login-container"></CustomLogin>
 </template>
 
 <style scoped>
-
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  margin-top: 50px;
+  box-sizing: border-box;
+  overflow: auto;
+}
 </style>