u

code/link56/link56-frontend-new/src/views/auth/forget.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { reactive, ref } from 'vue'
 
 import { useRouter } from 'vue-router'
 
@@ -37,17 +38,29 @@ const carouselList = [
   },
 ]
 
-// do not use same name with ref
-const form = reactive({
-  name: '',
-  region: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  desc: '',
+const form = reactive<{
+  email: string
+}>({
+  email: '',
 })
+const formRef = ref<FormInstance>()
+const formRules = {
+  email: [
+    { required: true, message: '邮箱不能为空', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
+  ],
+}
+const submitLoading = ref(false)
+
+async function submitForm(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+  await formEl.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true
+    }
+  })
+}
 
 function onSubmit() {
   console.log('submit!')
@@ -89,16 +102,19 @@ function onSubmit() {
           请输入您的电子邮箱地址，我们将向您发送一封包含密码重置说明的邮件。
         </p>
         <el-form
+          ref="formRef"
           :model="form"
+          :rules="formRules"
           label-width="auto"
           label-position="top"
+          hide-required-asterisk
         >
-          <el-form-item label="邮箱">
-            <el-input v-model="form.name" placeholder="请输入邮箱" size="large" />
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入邮箱" size="large" />
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" class="form-btn">
+            <el-button type="primary" class="form-btn" :loading="submitLoading" @click="submitForm(formRef)">
               找回密码
             </el-button>
           </el-form-item>

code/link56/link56-frontend-new/src/views/auth/login.vue

@@ -56,14 +56,14 @@ const formRules = {
   ],
 }
 
-const saveLoading = ref(false)
+const submitLoading = ref(false)
 
 async function submitForm(formEl: FormInstance | undefined) {
   if (!formEl)
     return
   await formEl.validate((valid) => {
     if (valid) {
-      saveLoading.value = true
+      submitLoading.value = true
       loginApi({
         loginCredential: form.loginCredential,
         password: form.password,
@@ -87,7 +87,7 @@ async function submitForm(formEl: FormInstance | undefined) {
       }).catch((err) => {
         console.log(err)
       }).finally(() => {
-        saveLoading.value = false
+        submitLoading.value = false
       })
     }
   })
@@ -164,7 +164,7 @@ function navigateTo(path: string) {
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" class="form-btn" :loading="saveLoading" @click="submitForm(formRef)">
+            <el-button type="primary" class="form-btn" :loading="submitLoading" @click="submitForm(formRef)">
               登录
             </el-button>
           </el-form-item>

code/link56/link56-frontend-new/src/views/auth/register.vue

@@ -81,6 +81,7 @@ const formRules = {
     },
   ],
 }
+const submitLoading = ref(false)
 
 // --- 邮箱校验（简单正则） ---
 const emailRegex = /^\w+(?:[-.]\w+)*@\w+(?:[-.]\w+)*\.\w+(?:[-.]\w+)*$/
@@ -117,10 +118,15 @@ function handleSendEmailCode() {
   startCountdown()
 }
 
-async function submitForm() {
-
+async function submitForm(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+  await formEl.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true
+    }
+  })
 }
-
 function navigateTo(path: string) {
   router.push(path)
 }
@@ -163,6 +169,7 @@ function navigateTo(path: string) {
           ref="formRef"
           :model="form"
           :rules="formRules"
+          hide-required-asterisk
           label-width="auto"
           label-position="top"
         >
@@ -215,7 +222,7 @@ function navigateTo(path: string) {
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" class="form-btn" @click="submitForm()">
+            <el-button type="primary" class="form-btn" @click="submitForm(formRef)">
               注册
             </el-button>
           </el-form-item>