feat: 添加vite的proxy代理设置

2026-06-09 14:03:42 +08:00
parent 44b0de35df
commit 5b53e33e27
8 changed files with 442 additions and 19 deletions
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -0,0 +1,124 @@
+<template>
+  <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="loading" style="width: 100%" type="primary" @click="userLoginFun"
+          >登录
+        </n-button>
+      </n-form-item>
+      <n-form-item>
+        <div class="flex-center flex-1 gap-4">
+          <n-button class="flex-1" @click="router.push('/auth/phone-login')"> 手机登录 </n-button>
+          <n-button class="flex-1" @click="router.push('/auth/qrcode-login')"> 扫码登录 </n-button>
+        </div>
+      </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">
+import { reactive, ref, useTemplateRef } from 'vue'
+import type { FormItemRule, FormRules, FormInst } from 'naive-ui'
+import { useAccountStore } from '@/stores'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const accountStore = useAccountStore()
+const formRef = useTemplateRef<FormInst>('formRef')
+const loginModel = reactive({
+  username: '',
+  password: ''
+})
+const loading = ref(false)
+
+const rules: FormRules = {
+  username: [
+    {
+      required: true,
+      trigger: ['blur'],
+      validator: (rule: FormItemRule, value: string) => {
+        if (!value) {
+          return new Error('请输入登陆账号')
+        } else if (value.length < 2) {
+          return new Error('账号长度不能小于2位')
+        } else if (value.length > 20) {
+          return new Error('账号长度不能大于20位')
+        } else if (!/^[A-Za-z][A-Za-z0-9]*$/.test(value)) {
+          return new Error('账号以字母开头，只能包含字母和数字')
+        }
+        return true
+      }
+    }
+  ],
+  password: [
+    {
+      required: true,
+      trigger: ['blur'],
+      validator: (rule: FormItemRule, value: string) => {
+        if (!value) {
+          return new Error('请输入密码')
+        } else if (value.length < 8) {
+          return new Error('密码长度不能小于8位')
+        } else if (value.length > 20) {
+          return new Error('密码长度不能大于20位')
+        } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(value)) {
+          return new Error('密码必须包含大小写字母和数字')
+        }
+        return true
+      }
+    }
+  ]
+}
+
+const userLoginFun = () => {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      loading.value = true
+      console.log('登录成功')
+      // TODO 登录方法
+      accountStore.token = '123456'
+      setTimeout(() => {
+        loading.value = false
+      }, 1000)
+    }
+  })
+}
+</script>
+
+<style scoped></style>