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/PhoneLogin.vue
+++ b/src/views/auth/PhoneLogin.vue
@@ -0,0 +1,123 @@
+<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="phoneNumber">
+        <n-input v-model:value="loginModel.phoneNumber" placeholder="手机号码" :maxlength="20" />
+      </n-form-item>
+      <n-form-item path="code">
+        <div class="flex flex-1 gap-4">
+          <n-input-otp
+            block
+            v-model:value="loginModel.code"
+            :allow-input="onlyAllowNumber"
+            style="gap: 0; flex: 2"
+          />
+          <n-button style="flex: 1" @click="getPhoneCodeFun">获取验证码</n-button>
+        </div>
+      </n-form-item>
+      <n-form-item>
+        <n-button :loading="loading" style="width: 100%" type="primary" @click="phoneLoginFun"
+          >登录
+        </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/login')"> 返回 </n-button>
+        </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({
+  phoneNumber: '',
+  code: []
+})
+const loading = ref(false)
+
+const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
+const rules: FormRules = {
+  phoneNumber: [
+    {
+      key: 'phoneNumber',
+      required: true,
+      trigger: ['blur'],
+      validator: (rule: FormItemRule, value: string) => {
+        if (!/^1[3-9]\d{9}$/.test(value)) {
+          return new Error('请输入手机号码')
+        }
+        return true
+      }
+    }
+  ],
+  code: [
+    {
+      key: 'code',
+      required: true,
+      trigger: ['blur'],
+      validator: (_, value: string[] | null) => {
+        if (value === null) {
+          return new Error('请输入验证码')
+        }
+        if (value.filter(Boolean).length !== 6) {
+          return new Error('请输入验证码')
+        }
+        return true
+      }
+    }
+  ]
+}
+
+const getPhoneCodeFun = () => {
+  formRef.value?.validate(
+    (errors) => {
+      if (!errors) {
+        console.log('获取验证码成功')
+        // TODO 获取验证码方法
+      }
+    },
+    (rule) => {
+      if (rule.key === 'phoneNumber') {
+        return true
+      }
+      return false
+    }
+  )
+}
+const phoneLoginFun = () => {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      loading.value = true
+      console.log('登录成功')
+      // TODO 登录方法
+      accountStore.token = '123456'
+      setTimeout(() => {
+        loading.value = false
+      }, 1000)
+    }
+  })
+}
+</script>
+
+<style scoped></style>