fix(登录): 将登录页面的邮箱字段替换为手机号字段

fix(忘记密码): 增加手机号验证逻辑和输入限制

fix(注册): 优化手机号验证逻辑并增加密码最小长度限制

本次提交主要修复了以下问题：
1. 登录页面将邮箱字段替换为手机号字段，以适配新的登录方式。
2. 忘记密码页面增加了手机号验证逻辑，确保输入格式正确，并限制了输入长度。
3. 注册页面优化了手机号验证逻辑，并增加了密码的最小长度限制，提升安全性。

@@ -22,6 +22,9 @@
               type="tel"
               required
               pattern="^1[3-9]\d{9}$"
+              maxlength="11"
+              @input="formData.phone = formData.phone.replace(/\D/g, '')"
+              @blur="validatePhone"
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
             />
           </div>
@@ -41,7 +44,7 @@
               />
               <button
                 type="button"
-                :disabled="countdown > 0"
+                :disabled="countdown > 0 || !isPhoneValid"
                 @click="sendVerificationCode"
                 class="mt-1 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
               >
@@ -112,6 +115,7 @@ const router = useRouter()
 const error = ref('')
 const loading = ref(false)
 const countdown = ref(0)
+const isPhoneValid = ref(false)
 
 const formData = reactive({
   phone: '',
@@ -130,9 +134,25 @@ const startCountdown = () => {
   }, 1000)
 }
 
-const sendVerificationCode = async () => {
+const validatePhone = () => {
+  if (!formData.phone) {
+    error.value = '请输入手机号'
+    isPhoneValid.value = false
+    return
+  }
+
   if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
     error.value = '请输入正确的手机号'
+    isPhoneValid.value = false
+    return
+  }
+
+  error.value = ''
+  isPhoneValid.value = true
+}
+
+const sendVerificationCode = async () => {
+  if (!isPhoneValid.value) {
     return
   }
 

@@ -176,7 +176,7 @@ const handleSubmit = async () => {
     const mockUserData = {
       id: 1,
       name: '测试用户',
-      email: email.value,
+      mobile: mobile.value,
       avatar: 'https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg',
       checkInDays: 3,
       completedCourses: 12

@@ -36,11 +36,11 @@
               type="tel"
               required
               pattern="^1[3-9]\d{9}$"
+              maxlength="11"
+              @input="formData.phone = formData.phone.replace(/\D/g, '')"
               @blur="validatePhone"
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
-              :class="{ 'border-red-300': phoneError }"
             />
-            <p v-if="phoneError" class="mt-1 text-sm text-red-600">{{ phoneError }}</p>
           </div>
 
           <div>
@@ -77,6 +77,7 @@
               type="password"
               autocomplete="new-password"
               required
+              minlength="6"
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
             />
           </div>
@@ -91,6 +92,7 @@
               type="password"
               autocomplete="new-password"
               required
+              minlength="6"
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
             />
           </div>
@@ -211,23 +213,24 @@ const startCountdown = () => {
   }, 1000)
 }
 
-const phoneError = ref('')
+const error = ref('')
+const loading = ref(false)
 const isPhoneValid = ref(false)
 
 const validatePhone = () => {
   if (!formData.phone) {
-    phoneError.value = '请输入手机号'
+    error.value = '请输入手机号'
     isPhoneValid.value = false
     return
   }
 
   if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
-    phoneError.value = '请输入正确的手机号'
+    error.value = '请输入正确的手机号'
     isPhoneValid.value = false
     return
   }
 
-  phoneError.value = ''
+  error.value = ''
   isPhoneValid.value = true
 }