feat: smooth report refresh and redesign system settings mobile UI

app-frontend/src/pages/LoginPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 
@@ -137,9 +137,7 @@ async function openForgot() {
   forgotHint.value = ''
   forgotForm.username = ''
   forgotForm.captcha = ''
-  if (emailEnabled.value) {
-    await refreshEmailResetCaptcha()
-  }
+  await refreshEmailResetCaptcha()
 }
 
 async function submitForgot() {
@@ -227,6 +225,18 @@ function goRegister() {
   router.push('/register')
 }
 
+watch(forgotOpen, async (open) => {
+  if (open && !forgotCaptchaImage.value) {
+    await refreshEmailResetCaptcha()
+  }
+})
+
+watch(resendOpen, async (open) => {
+  if (open && !resendCaptchaImage.value) {
+    await refreshResendCaptcha()
+  }
+})
+
 onMounted(async () => {
   try {
     const status = await fetchEmailVerifyStatus()
@@ -236,6 +246,10 @@ onMounted(async () => {
     emailEnabled.value = false
     registerVerifyEnabled.value = false
   }
+
+  if (emailEnabled.value) {
+    await Promise.allSettled([refreshEmailResetCaptcha(), refreshResendCaptcha()])
+  }
 })
 </script>