style: 优化防抖样式

Yi.Bbs.Vue3/src/components/StarBackground.vue

@@ -27,6 +27,9 @@ const startAnimate=()=>{
   window.addEventListener('resize', () => {
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
+    centerX = canvas.width / 2;
+    centerY = canvas.height / 2;
+    drawStars();
   });
 
   createStars(props.number??1000);
@@ -69,7 +72,7 @@ function drawStars() {
 
 function animate() {
   drawStars();
-  // requestAnimationFrame(animate);
+  // requestAnimationFrame(animate); // 注释掉动画循环以节省性能
 }
 
 

Yi.Bbs.Vue3/src/views/login/register.vue

@@ -12,6 +12,10 @@ const route = useRoute();
 const registerFormRef = ref();
 //验证码弹窗
 const codeDialogVisible=ref(false);
+//防止重复点击
+const isSending=ref(false);
+//防止重复注册
+const isRegistering=ref(false);
 
 // 获取图片验证码
 const codeImageURL = computed(() => useUserStore().codeImageURL);
@@ -49,14 +53,26 @@ const registerRules = reactive({
 });
 const register = async (formEl) => {
   if (!formEl) return;
+  
+  // 防止重复点击
+  if (isRegistering.value) {
+    ElMessage({
+      message: "正在注册中，请稍候...",
+      type: "warning",
+      duration: 1000,
+    });
+    return;
+  }
+  
   await formEl.validate(async (valid) => {
-
     if (valid) {
       try {
         if (registerForm.password !== passwordConfirm.value) {
           ElMessage.error("两次密码输入不一致");
           return;
         }
+        
+        isRegistering.value = true;
         await registerFun(registerForm);
         //注册成功返回登录
         handleSignInNow();
@@ -66,6 +82,8 @@ const register = async (formEl) => {
           type: "error",
           duration: 2000,
         });
+      } finally {
+        isRegistering.value = false;
       }
     }
   });
@@ -102,38 +120,52 @@ const  handleSignInNow=()=>{
     router.push("/login");
 }
 const captcha = async () => {
+  // 防止重复点击
+  if (isSending.value) return;
+  
+  // 立即关闭弹窗，防止用户连续点击
+  codeDialogVisible.value = false;
+  
   if (registerForm.email!==""&&phoneForm.code!=="")
   {
-    phoneForm.email=registerForm.email;
-    const { data } = await getCodeEmail(phoneForm);
-    registerForm.uuid = data.uuid;
-    codeDialogVisible.value=false;
-    ElMessage({
-      message: `已向${registerForm.email}发送验证码，请注意查收`,
-      type: "success",
-    });
-    isDisabledCode.value = true;
-    let time = 60; //定义剩下的秒数
-    let timer = setInterval(function () {
-      if (time == 0) {
-        //清除定时器和复原按钮
-        clearInterval(timer);
-        codeInfo.value = "发送验证码";
-        time = 60; //这个10是重新开始
-      } else {
-        codeInfo.value = "剩余" + time + "秒";
-        time--;
-      }
-    }, 1000);
+    isSending.value = true;
+    try {
+      phoneForm.email=registerForm.email;
+      const { data } = await getCodeEmail(phoneForm);
+      registerForm.uuid = data.uuid;
+      ElMessage({
+        message: `已向${registerForm.email}发送验证码，请注意查收`,
+        type: "success",
+      });
+      isDisabledCode.value = true;
+      let time = 60; //定义剩下的秒数
+      let timer = setInterval(function () {
+        if (time == 0) {
+          //清除定时器和复原按钮
+          clearInterval(timer);
+          codeInfo.value = "发送验证码";
+          time = 60; //这个10是重新开始
+          isSending.value = false;
+        } else {
+          codeInfo.value = "剩余" + time + "秒";
+          time--;
+        }
+      }, 1000);
+    } catch (error) {
+      isSending.value = false;
+      ElMessage({
+        message: "发送失败，请重试",
+        type: "error",
+      });
+    }
   }
   else
   {
     ElMessage({
-      message: `请先输入手机号`,
+      message: `请先输入邮箱和图片验证码`,
       type: "warning",
     });
   }
-  
 };
 </script>
 
@@ -202,7 +234,7 @@ const captcha = async () => {
           </div>
         </el-form>
         <div class="left-btn">
-          <button type="button" class="btn-login" @click="register(registerFormRef)">注册</button>
+          <button type="button" class="btn-login" :disabled="isRegistering" @click="register(registerFormRef)">{{ isRegistering ? '注册中...' : '注册' }}</button>
           <button type="button" class="btn-reg" @click="handleSignInNow">前往登录</button>
         </div>
       </div>