feat: 登录页面

src/views/auth/login.vue

@@ -1,7 +1,94 @@
 <template>
-  <div class="h-40 w-40 bg-amber-200"></div>
+  <div class="flex-col-center">
+    <div class="w-full">
+      <h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 👋🏻</h2>
+      <p>
+        <span style="color: #71717a">登录账号以进入对战</span>
+      </p>
+    </div>
+    <n-form
+      ref="formRef"
+      :model="loginModel"
+      :rules="rules"
+      :show-label="false"
+      class="w-full mt-10"
+    >
+      <n-form-item path="username">
+        <n-input v-model:value="loginModel.username" placeholder="请输入账号" :maxlength="20" />
+      </n-form-item>
+      <n-form-item path="password">
+        <n-input
+          v-model:value="loginModel.password"
+          type="password"
+          show-password-on="mousedown"
+          placeholder="密码"
+          :maxlength="20"
+        />
+      </n-form-item>
+      <n-form-item>
+        <div class="flex flex-1 items-center justify-between">
+          <n-checkbox>记住账号</n-checkbox>
+          <a href="javascript:void(0)" style="color: #2080f0">忘记密码？</a>
+        </div>
+      </n-form-item>
+      <n-form-item>
+        <n-button :loading="loginLoading" style="width: 100%" type="primary" @click="userLoginFun"
+          >登录</n-button
+        >
+      </n-form-item>
+      <n-form-item>
+        <div class="flex-center flex-1">
+          <span>没有账号？</span>
+          <router-link to="/auth/register" style="color: #2080f0">注册</router-link>
+        </div>
+      </n-form-item>
+    </n-form>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive, ref, useTemplateRef } from 'vue'
+import type { FormItemRule, FormRules, FormInst } from 'naive-ui'
+import { useAccountStore } from '@/stores'
+
+const accountStore = useAccountStore()
+const formRef = useTemplateRef<FormInst>('formRef')
+const loginModel = reactive({
+  username: '',
+  password: ''
+})
+const loginLoading = ref(false)
+
+const rules: FormRules = {
+  username: [
+    {
+      required: true,
+      message: '请输入登陆账号',
+      trigger: ['blur']
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入登陆密码',
+      trigger: ['blur']
+    }
+  ]
+}
+
+const userLoginFun = () => {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      loginLoading.value = true
+      console.log('登录成功')
+      // TODO 登录方法
+      accountStore.token = '123456'
+      setTimeout(() => {
+        loginLoading.value = false
+      }, 1000)
+    }
+  })
+}
+</script>
 
 <style scoped></style>